ver the next 20 years, 3.6
million people between the
ages of 51-69 will retire. Of
those, 1.4 million will relocate. This process can be complex, requiring considerations like the cost of relocation and living, opportunities for activity, healthcare costs, existence of retiree friendly communities. Surprisingly, there are few comprehensive resources to help in considering these factors. My client, eRetirements, created a desktop website to facilitate this process through a multitude of resources such as retirement guides, in-depth city by city analysis, a network of realtors and fellow retirees, and a proprietary assessment with results of suggested cities to retire in.
Using the existing website in place of wireframes my team was tasked with the development of branding and the redesign of the website through the creation of style tiles, key screens, responsive mobile screens, an interactive prototype, and style guide.
Before beginning our designs
we needed to understand our
product, domain, and stake-
holders by conducting research
Through extensive research, eRetirements’ had determined their user was between the ages of 50 and 65 years old and of middle to upper middle class standing. Retirement was between one and five years away. They currently lived in the northern part of the country but were looking to retire somewhere warm. They had little in the way of a plan in place for doing this and more than half had never spoken to a financial advisor. Their research consisted of internet searches, magazines, and seeking the opinion of friends. They used the internet on a daily basis and were versed in sites like Facebook but were not considered internet savvy.
My team formed two main takeaways that would shape our designs moving forward. First, retirement for them wasn’t necessarily a vacation but they were seeking a nicer area to live in and we would need to sell them on the fantasy of retirement. Second, despite a consistent use of the internet our users were of an older age bracket. We needed to tailor our designs to them. This required careful consideration when choosing things like design patterns to be used and font sizing.
Research meetings with our client focused on brand values and direction. We learned our client wanted to be more than a retirement location resource. By offering services such as referrals to financial advisors and realtors in their destination towns they intended to be a one-stop-shop for user’s retirement needs. Designs needed to position our client as a professional and trustworthy authority users would feel comfortable going to for financial considerations.
We also learned about the importance of eRetirements’ assessment, which acted as one of the site’s primary value propositions. Completing it allowed eRetirements to use a proprietary formula to inform users on where they should retire. In addition, we learned this was key in creating returning, active users. However, this assessment was 69 questions, that spanned eight categories, and took an average of 20-30 minutes to complete. Our designs would also need to be accessible and easily digestible.
Through presentations of visual design references we learned what our client wanted their brand to look like. Initial discussions had revealed they wanted professional, friendly, and inspirational designs but we learned we needed to inject them with elements that also gave their brand a personal touch.
We evaluated 11 competitors, nine in-category and two out-of-
category. We wanted to assess how well our competitors conveyed the characteristics eRetirements needed. From this we could implement what they were doing well or improve upon what they were doing wrong.
Looking at our in-category competitors, they skewed toward a professional feel at the expense of being inviting or inspirational. However, many undercut their professionalism by unsuccessfully handling alignment and hierarchy. By learning from these sites and contrasting them with the personal touches of out-of-category sites we identified the elements to implement. We balanced each out in ways that hit on the target characteristics we had identified in client
meetings and asset review.
As the final piece of our research we synthesized what we had learned and formed design principles to guide our work.
The hard work is getting to retirement. Retiring should be the easy part and eRetirements’ content will deliver that ease to you. Designs will make delivery of that content easy through highly legible, high contrast fonts and a shrewd implementation of hierarchy.
Motivation is essential in guiding you to complete the you’re journey. In order to push the you forward to achieve your end goal, eRetirements will use color and effects to call attention to important elements, like completion time and next steps. Creating clarity will help you avoid hurdles and frequently reach the finish line.
Imagery has the ability to tell you what’s important and the power to move you. Older individuals are sometimes more skeptical of the internet and find it intimidating. eRetirements will provide imagery that inspires care and trust towards the brand.
If I were to continue building out eRetirements, there are are two tasks I would focus on:
Continue to streamline
navigation within the user
profile section. In the
original site there was a lot of redundant navigation, which was confusing at times. I condensed links in my designs but user testing revealed some redundancy remained. I would clean these up to improve user experience.
A/B test the order of the “your retirement journey” and “we’re here to help” section. Users found value in both but testing revealed that some users would find more value in the “we’re here to help” section positioned before the “your retirement journey”.
t was time for our team to break off and build our individual brands. The
challenge was balancing the various
attributes eRetirements needed to embody. I looked to the design principles
we created and honed in on three main characteristics to convey-professional, inspirational, and personal. If I hit on these characteristics everything else would fall in place. Professionalism and a personal touch would result in users trusting the site. If it was inspirational and personal, designs would draw users in and result in completion of the assessment.
Having learned from my last project, the style tiles I created for eRetirements spoke directly to the user interface I would be creating by incorporating elements from the existing site. This resulted in increased buy-in and better feedback from my client.
My first design prioritized simplicity. Large areas of white space allowed for strong hierarchy and easy digestion of content, which also served to make the layout feel professional. The white space also made it feel open and airy, which complemented the yellow and photography I used. This photography, lent a sense of inspiration to the layout and pairing it with one central line of text would draw users into the site and make them feel cared for. My client liked this tile. They were drawn to the minimal and bright layout and felt the simple mixture of text and photography was effective and inviting.
In this tile I pushed the handmade feel by introducing illustrative elements. These elements acted as the idealized vision of retirement. By visually connecting them to photography of potential retirees I reinforced the idea that eRetirements could get them to this place.
My client felt this style wasn’t working yet. They thought it was a strong design, but felt the illustrations spoke to a younger age range.
Here I maintained the simplicity of the first tile and mixed it with more reserved illustrative elements than the second tile. To maintain professionalism and keep from overwhelming the imagery I kept these elements simple, contrast low, and intertwined them with the photography. My client and I felt this tile was the best execution of our design principles and the characteristics I had intended to hit on. They liked the warm tones of the red and the reserved illustrations. We agreed that It was the right balance between the professional and inspirational tones of the first tile and the friendly and personal touch of the third tile. This was the style I moved forward with.
Initial mockups were of two main pages of the site-the homepage
and assessment page. To begin
this process I considered where opportunities for
these two pages
A clumsy handling of negative space and alignment of elements undercut a sense of professionalism
Despite all buttons taking users to the assessment page, CTA language varied and was vague in setting navigation expectations
An over-abundance of text and lines of text that were too long created blocks that did not invite users to read
Despite the abundance of text there was a lack of information to inform users of the unique values of this site
An equal treatment of elements such as color and font sizing/weighting led to weak hierarchy
A clumsy handling of alignment made it difficult to effectively move the user’s eye through questions
The wording of various answers was too long which was causing issues with alignment and spacing as well as causing the test to take longer than necessary
With issues identified I was able to wireframe my new pages and create my initial high fidelity mockups.
Expanding on the site’s idea of a “retirement journey” I broke text into chunks and paired them with illustrations to create a carousel. This created a miniature journey for users to learn about their own retirement journey
To inform users of how eRetirements would help them I brought out information from further in the site and created a “How We Can Help” section. I kept text boxes short and chunked information to keep copy digestible
I made CTA language clear and concise and limited them to the top and bottom of the page
To create structure and direct users’ eyes I aligned a major point of each element on a central grid line
I made answer copy more concise. This made questions easier and quicker to understand and answer. It also allowed me to create consistent sizing and spacing, which made it easier to direct a user’s eye through the layout
To create structure and direct users’ eyes I aligned a major point of each element on a central grid line
I used contrasting font sizes/weights and colors to separate elements that were of primary importance from those of secondary importance. This drew attention to the questions section and created a secondary navigation menu to prioritize links
We determined the effectiveness of our branding through user testing. From this we discovered two things. First, how visual design choices informed users about eRetirements. Second, how design choices contributed to user engagement with the site. From this we determined if our designs conveyed values we outlined
in our research and
improved the user
tests with six users.
Users liked the illustrative elements and photography because it gave the site a personal feel and created something unique and visually interesting
Users found the imagery to be inspirational
Users liked that the homepage provided them with information about why they were arriving at this page and felt it was very valuable to them
The color palette, combined with the vacation feel of the photography lead some users to feel like this site was for a more affluent user, making them feel less confident the site could help them
Some users felt the color palette felt old and dated while other users felt the color palette combined with photography made the site feel more like a vacation site than a retirement site
Even though users saw value in the information provided on the homepage they still felt there was too much text and wanted more information
Some users still felt the assessment page was busy
With user testing complete I identified how I could remedy the issues raised and made iterations.
I changed the color palette to be bright, modern, calming, and trustworthy. The change to blue also kept the design from feeling too much like a vacation site and spoke to a broader audience.
I changed the photography to include people in eRetirements’ age range, which kept the design from feeling like it was for a vacation site, and spoke to retirees.
One user didn’t understand they could scroll down when arriving at the site, so I created a bar inviting users to scroll down for further information. This also doubled as a solution for the multiple CTAs that existed on the original page by changing to a persistent “take assessment” button once users begin to scroll down.
I pared copy down further to keep blocks of text from being overwhelming and invite users to read them.
To further demonstrate the site’s value I took the user testimonials from the original page, which were relegated to a limited area along the side of the page and built out a user testimonial carousel.
I connected answer boxes and increased the size of question cards to reduce the amount of visual noise on the screen at any given time.
I instituted a persistent progress tracking bar that informed users how many questions they had left at all times.
I changed the card structure to include the active category in the side navigation so users had a clear visual indicator of which category they answered questions in.
With my style and designs reworked for two key screens I finalized my designs for the rest of the key screens and created working prototypes.
Here you can see a sampling of the final screens created. For additional states see the final InVision prototype below.
This InVision prototype shows additional states and screens I built to create user flows.VIEW PROTOTYPE
This principle prototype demonstrates the more complex micro-interactions that I implemented.DOWNLOAD STYLE GUIDE
These responsive screens illustrate how some of the more complex desktop screens would adapt for a mobile experience.VIEW MOBILE SCREENS
My client was thrilled with my final product. Visually they felt it was spot-on for their brand and hit on each of the characteristics they had expressed a need for designs to embody.
This style guide provides insight into aspects like color, typography, graphics, and layout elements.VIEW PRINCIPLE PROTOYPE