01

THE BEGINNING

MY CHALLENGE

              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.

O

HOMEPAGE

ASSESSMENT PAGE

RESULTS PAGE

DASHBOARD

CITY PAGE

RESOURCES PAGE

CLIENT

TOOLS

TASKS

TIMELINE

ERETIREMENTS

SKETCH
PRINCIPLE
INVISION

UI DESIGNER
INTERACTION DESIGNER
BRAND DEVELOPER

3 WEEKS

00

ERETIREMENTS

02

RESEARCH

Before beginning our designs  we needed to understand our  product, domain, and stake- holders by conducting research  in four 
main ways:
Through 
this we
identified:

  1. Reviewing client assets
  2. Style testing with our client
  3. Competitor analysis

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.

OUR USER

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.

OUR CLIENT

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.

OUR COMPETITORS

  • The simple, cut paper
    illustrations gave it a
    handmade feel
  • The illustrations were
    kept from feeling too
    playful at times by limiting
    and desaturating the
    color palette
  • The over-use of illustrations
    made it too unprofessional
    for our domain

BeVisionare

  • Custom photo treatments and illustrative elements made the site feel inviting.
  • Combination of photography, understated patterning, and limited illustrative elements kept this professional
  • The limited use of saturated colors allowed for a friendly vibe without feeling unprofessional
  • Typefaces were casual but the contrast of serif and sans serif kept the design smart and professional
  • Inspiration came from the grand photography
Combadi
  • The text heavy layout is informative but a lack of photography or graphics keeps
    it feeling sterile and cold
  • The dark mahogany makes the site feel drab and utilitarian
  • The clumsy use of negative space and alignment makes the text-heavy layout overwhelming
Best Boomer Towns
  • The limited text and chunking of imagery/text makes content digestible
  • Limited saturated color and a heavy use of white make the site feel professional and modern.
  • The strong contrast, large areas of white, jarring red, and a lack of graphics left it feeling sterile
AARP

03

DESIGN
PRINCIPLES

As the final piece of our research we synthesized what we had learned and formed design principles to guide our work.

RELAX, YOU'RE RETIRING

GO THE DISTANCE

EVERY PICTURE TELLS A STORY

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.

08

MOVING FORWARD

FUTURE
CONSIDERATIONS

If I were to continue building out eRetirements, there are are two tasks I would focus on:

C

              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”.

04

STYLE TILES

STYLE EXPLORATION

I

        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.

05

MOCK UPS

Initial mockups were of two main pages of the site-the homepage  and assessment page. To begin  this process I considered where opportunities for 
improvement on 
these two pages 
would lie.

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

HOMEPAGE

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

ASSESSMENT PAGE

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

HOMEPAGE

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

ASSESSMENT PAGE

06

USER TESTING

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 
experience. We 
conducted in-depth 
tests with six users.

HOMEPAGE FEEDBACK

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

ASSESSMENT PAGE FEEDBACK

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.

HOMEPAGE ITERATIONS

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.

ASSESSMENT PAGE ITERATIONS

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.

07

FINAL PRODUCT

SCREENS, PROTOTYPE
STYLE GUIDE

FINAL DESKTOP SCREENS

Here you can see a sampling of the final screens created. For additional states see the final InVision prototype below.

FINAL INVISION PROTOTYPE

This InVision prototype shows additional states and screens I built to create user flows.

VIEW PROTOTYPE

PRINCIPLE PROTOTYPE

This principle prototype demonstrates the more complex micro-interactions that I implemented.

DOWNLOAD STYLE GUIDE

MOBILE RESPONSIVE SCREENS

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.

STYLE GUIDE

This style guide provides insight into aspects like color, typography, graphics, and layout elements.

VIEW PRINCIPLE PROTOYPE

FIN