CLIENT
eRetirements
DURATION
Three weeks
DELIVERABLES
Competitive analysis
High-fidelity mockups
Prototype
Style guide
Style tiles
Usability testing
BRIEF
Bringing growth to the site by redesigning content that's best suited for baby boomers.
eRetirements is a website that helps baby boomers find a retirement location. Within the site, users have the option of filling out a self-assessment that gives a result of cities that best match the user’s answers. At that point, eRetirements provides a list of realtors in those cities to connect with. eRetirements has information on a high number of cities making it a useful resource for boomers’ research as well.
eRetirements didn’t have wireframes for us to base our design on; we used their current site and were given freedom to design and implement any option necessary to best suit their users.
The most important feature of eRetirements is their self-assessment tool. The client mentioned that over the years, the numbers of users completing the assessment had dropped. They asked us to focus our work on encouraging users to complete the assessment to get better results for their retirement.
The client believed traffic was declining due to the visual aspect of their site. The primary issue they faced was that the assessment looked too long. There were 70 questions for users. That wasn’t the problem identified; the issue was how questions and answers were laid out. Laying out every answer for the user to see could be overwhelming, especially when every state is listed out.
When it came to their homepage, eRetirements used bright CTA buttons well, but the placement of visual elements made the site look outdated. For example, the images used for testimonials are pixelated and multiple paragraphs only consist of two or three sentences.
After viewing the entire site, we dove into building a competitive analysis research. eRetirements doesn’t have direct competitors, but they provided a couple of non-direct competitors.
After researching the competitors, we came up with three design principles. We needed to make sure we had a guideline for users’ best interests. Because our users ranged from 50-70 years, we had to make sure the design was familiar and legible. We wanted eRetirements to feel relatable to them.
With these principles in mind, my UI team and I started thinking of our individual designs to show to the client. The direction I wanted to lean towards was something trustworthy, but fun.
Finding a new city shouldn’t feel like a chore. This style tile leaned toward the fun aspect of retirement. The heavy use of illustration with the typeface gave a feeling of destination.
For this style tile, I wanted to incorporate a classic look. I incorporated a serif typeface, photography, and muted colors. The serif brought familiarity from typography used in print.
For my final style tile, I wanted to bring lightness and an energetic feel. I used brighter photography and teal to draw users’ eyes to actions. To reference trustworthiness, I used two shades of blue.
I decided to go with the third one. It was a good balance of trust, fun, and positivity. Rounded UI elements and the font demonstrated fun, the shades of blue indicated trustworthiness, and the photography signalled positivity.
The UI team and I were given six screens to revise from their active site. During the user testing process, only three were tested. The main screens that users frequented the most was the home page, the self-assessment, and the dashboard.
I decided to incorporate several photographs to break up the large amount of text on the active site. This way, it would give the illusion of less reading for the users. The clients told us before starting work that users wanted more photography of younger individuals instead of older. With that feedback in mind, I incorporated photos of younger individuals.
However, user testing revealed repeatedly that my photos consisted of people who were too young and unrelatable. They didn’t like the idea that a majority of images showed the ocean and mentioned that realistically, most retirees won’t be able to afford living near the coast. When it came to the overall feel of the homepage, users mentioned that it looked friendly and calming.
With the assessment page of eRetirements, I used the teal color to emphasize a particular category of the exercise. I also limited each page to five questions to give the illusion so users wouldn’t be overwhelmed. When it came to answering a question that required several answers, I created a dropdown menu bar to give a more inviting look instead of showing all answers upfront.
During user testing, users mentioned that the page looked too cramped. Again, the colors were said to be friendly, but having the categories on the lefthand side and multiple questions on the page made testers feel overwhelmed. Some users also had a hard time telling us what the categories were and didn’t know their functions.
The dashboard on the active site has categories listed on the left side of the screen while the right side showed results from the assessment. I created a top tab for categories because users aged 50-65 were more familiar with the use of tabs in their browsers. This feature would be familiar for target users and take up less room on the page.
Testers loved the tab design. When asked if they knew what it was and how it was supposed to be used, they had no problem explaining what the job of a tab was and even did the task of clicking on tabs.
With all the feedback received during interviews, I presented the feedback that users didn’t like the large amount of content to be read. The client had mentioned that the content on the site could not be changed. With that in mind, I went into iterating my second version and creating a clickable prototype for the second round of user testing.
I iterated mainly in photography. With the feedback from user testing, I incorporated images of people closer to users’ targeted age range for better relatability. I also included images from all seasons including people hiking, and fishing on lakes. The carousel feature was iterated to be understood better by users. I was curious to see whether the new photography had an impact on users’ dislike for large chunks of text.
During testing, interviewees mentioned that the amount of content that had to be read was too much. Because that issue was something that couldn’t be touched, I tried to use impactful images to make up for large amounts of texts. Users mentioned that the photographs were great and loved the elements of diversity in subjects and environments. At the bottom of the homepage, one element users did not seem to understand was the “Questions” link provided at the bottom of the homepage.
I decided to add tabs to the top instead of the left side of the page, as a response to the feedback I received about the assessment page looking too crowded. During the interview, users mentioned that the page overall looked cramped, but weren’t surprised by it because it had to contain large amounts of content. They weren’t fond of the top tabs, but appreciated the bold text for easy reading.
For the second iteration of the dashboard, I decided to get rid of the navy blue used to indicate inactive tabs and separate favorite cities from assessment results. Users’ eyes were drawn to inactive tabs instead of active. Navy blue seemed to be more powerful than the intended CTA teal.
Users didn’t have concerns about the Dashboard other than the excessive amount of tabs. One user mentioned that Email Preferences could have been under the Personal Info tab and didn’t understand why it needed its own tab. I mentioned that feedback to the clients because it needed research on what users preferred. A search bar was also incorporated into the page for users to be able to search related cities.
During the last weeks of this project the client requested to create a few responsive web screens as well as finalizing the final web screens and the prototype. I created 3 screens: dashboard, assessment, and the destination page.
View the web prototype
I created a desktop and mobile style guide to provide UI guidelines for other designers and developers.
View the style guide.
During interviews with users, there was continuous feedback about the amount of reading they had to do. If there was a way to condense the amount of information eRetirements is sharing into short impactful sentences, users would be more inclined to read the information. This is an important consideration for a future UX research team.
They would also greatly improve their user experience if they used professional photography. Photography was a huge impact on users’ judgement of our designs during interviews. Hiring a professional to take diverse photos of models that users can relate to, I believe they’d have the potential to grow their business more.
This was the first real client project I worked on. I realized I had a knack for user interviews. As a person working hard on getting better at public speaking, this came as a surprise to me. I was good at improvising and veering off our interview drafts to dig deeper into users’ response to our designs. This skill came from years of working at a hospital and talking with patients on a personal level. I’ve learned ways of comforting my patients who just wanted someone to talk to.
I also became more fluent with Sketch and realized how much quicker I built my screens compared to my last project. With eRetirements, I also learned how to use Proto.io. Even though it was stressful during the learning process, the reward was well worth the struggle. I was able to learn a new program in a short amount of time on top of building myself up as a person. I worked hard on my screens and can proudly say I made it all with love and passion.
