Sketch, InVision, Adobe Creative Suite


Sketch, InVision, Adobe Creative Suite

The Final Project Deliverables
You can view the final prototype and style guide first and then dive in to how I got there.
Prototype: With the results of the last round of user testing I iterated once more on the designs to produce a set of hi-fidelity screens and converted them into a working prototype for the flow of the user design and user journey. View the prototype here.
Style guide: To help the future evolution of the Harbor product and brand using this design I made a style guide to help future designers and stakeholders continue development. 
Client: Harbor, Timeline: 3 one week sprints, Role: UXD and UI Designer, Tools: Sketch, InVision, Adobe Creative Suite, Keynote
Project background and client needs
Harbor is a technology provider for retirement planning focused on serving the baby boomer market. Harbor provides consumers with an alternative to costly, complex retirement planning by providing transparent, independent and simple solutions that encourage self-motivated users to take ownership of their retirement planning. The basic service is free of charge.
The clients wanted a product that made financial information less overwhelming and more accessible. It needed to help them consider complex life events that can make planning difficult. They wanted it to equip users with an understanding and a sense of trust that the technology can provide, thus enabling them to work at their own pace. This market was not being well served. I was excited to start this project as a baby-boomer myself with little knowledge of financial planning, I brought my experience working with AARP for this market segment to the team and provided insights that challenged some client bias and assumptions.
Below are screens at the start of the project with my analysis.

This was the marketing landing page for the site. Typography that overlapped images was visually awkward and the color palette did not align with the brand. The messaging for the value proposition was weak and incomplete. Spacing of elements made user focus difficult.

Users landed on a dashboard after answering some basic questions in the welcome section. The current section hierarchy, typographic treatment and color palette did not provide a clear or welcoming user experience. There was a brand and visual disconnect from the marketing landing page shown previously.
The client and competition
We held a kickoff meeting to understand the clients’ goals and challenges on the current product and user experience. There were three main stakeholders and we needed to capture the tastes and visual preferences of each. We purposely showed pages from sites outside their sector including Kissmetrics, Vossy, Sony Music, and Ignite. This informed our choices for the competitive analysis.
We then analyzed sites in-market like Charles Schwab, Fidelity, and Vanguard, We also looked at some out-of-category sites like HelloWallet, Mint. zendesk, PayPal, and Nerdwallet to find ideas and inspiration to differentiate the Harbor brand from the in-market competition. The client had some assumptions and bias about the design direction, however, with analysis and synthesis from research in both categories, I was better informed to create design explorations that would better serve this market. User testing would provide proof of concept further along in the design process.

A few screens from our competitive analysis. We showed in-market (left) and out-of-market (right).

The stakeholder meeting reinforced some common client goals: create a consistent and accessible visual language, present information clearly and instill trust in the Harbor brand.
The visual analysis gave me important learnings. I saw an opportunity to use more color and icons for visual cues to content, and a need to present information in limited and organized chunks to help the baby-boomers navigate the site. I saw that cards, drop downs and links were good visual components to guide users to additional information. I decided that clean sans serif typography provided better legibility, especially for this age group.
The team synthesized the learnings from the client comments and the competitive analysis and created a set of design principles to inform and validate our decision making.
Our team then compiled priorities for the user experience and visual and UI techniques that
reflected those priorities. After approval from the client, we started the designs.
Sprint 1: Designing the style
I explored three style directions While each direction aligned with the design principles, they differed in visual treatments and UI approaches as shown below.

STYLE 1: This design used a color palette of dark and light blues and grays. From our research and client preferences these colors instill trust for a financial product. I introduced cards that expand for more detail to reduce information overload. I used rectangular shapes for buttons and fields to evoke brand stability and simplicity. I introduced imagery of active seniors from my prior knowledge of the baby-boomer market. A linear icon style was used to engage users in content. I introduced simple line graphs and sliders for data.

STYLE 2: I edited parts of the client messaging and used an authentic looking image to instill confidence for the user and promote the value proposition of empowerment. I brightened the color palette and rounded the button and card shape corners to create a more friendly overall impression. To promote clarity and ease of use I limited all caps type to the top navigation and introduced a submenu to ease the navigation hierarchy. I purposefully left out the social media links in the first style but included it on the next two to promote discussion about them in the client presentation. I had some concerns about using them for a financial product but opted to let user testing prove my view.
STYLE 3: The client asked we try a serif typeface in our design exploration based on competitive products. I was concerned about legibility for users so I limited the use to main headlines and subheads.. I continued exploring visual treatments that promoted confidence, trust and ease of use with lighter colors, rounded elements, simpler icons and softer inspirational photographic styling.
Sprint 2: Testing static screens
The team wrote a test outline with general questions for brand, purpose and feeling and some more specific questions about individual designs. The client vetted and selected 3 female and one male users for testing. All in the target age group, they had moderate computer skills, were unaware of Harbor and limited experience with financial advisors for planning.

Screens and iterations
I created screens for the first round of user testing from client comments and preferences. While all of them captured the design principles, I chose the one I felt best served the brand and the target market. The challenge was to simplify and iterate throughout the user testing process. For this first round of testing users only looked at static screens of a marketing landing page and a dashboard for feedback on the brand, purpose and understanding of basic navigation and product capabilities. There were two iterations used in the testing. Although the client was not interested in the marketing page, I insisted it become part of the scope.

Our research showed when competitive products have a visual disconnect between the
first points of contact and the actual product there was a significant drop in consumer interaction. I also felt that since the page is at the beginning of the user experience it was important to design it for a unified brand experience throughout the user journey.
Marketing landing page, Iteration 1:
I edited parts of the client content from the site to emphasize the purpose and value proposition. 
I choose an icon style that not only complimented the color scheme, but differentiated the product and enhanced the brand. Images of active seniors enticed users by visually speaking to them as baby boomers. Content was separated into sections yet linked visually for a consistent tone and feel. I placed the logo at  top left and bottom right to enforce brand recognition and awareness.
User reactions to marketing landing page, Iteration 1:
Users responded well to the look and feel and said they would click on the buttons to investigate more. They especially liked the photography and icons and understood the purpose of the product. Users  liked the colors, found the copy legible, trustworthy and easy to read but felt the amount of content was unnecessary. Most users were uncomfortable sharing on social networks.

Dashboard, Iteration 1:
I continued with the same colors, typography and icon style to provide visual and brand consistency and a sense of trust and legitimacy to the user experience. I felt the search feature should remain on top but I also added some sub navigation just under the logo at the top left because I felt the user would be interested in those content areas. Just below that are the main user entry points that display a score, graph and top steps content for putting the initial plan into action.
User reactions to dashboard, Iteration 1:
Users were even more uncomfortable to share socially from the dashboard. The few that may have shared the Harbor brand from a marketing page were unwilling to share here. Most users understood the need to start with the expandable cards on the left but some were confused about the meaning of Model Assumptions. The users were also confused by the See Full Plan button. It seemed out of order to them. They understood the functionality and purpose of setting retirement goals and budgets and expressed they liked those features. Most users understood the graph and Overall Status sections but wanted to see them separated more. Users found the colors and icons friendly and some described them as clear, accessible and even fun. I created another iteration for user testing from client comments and preferences.

Marketing landing page, Iteration 2:
From user feedback I reduced the amount of copy and added more space around each section. I also reduced the number of icons and changed button colors to yellow with blue type as preferred by previous users.
My intention was to reduce the visual noise of content to engage users more quickly to proceed to the calls to action.
User reactions to marketing landing page, Iteration 2:
Users responded similar to iteration one but they still felt there was too much unnecessary content.I was challenged with further reducing content without losing the important value propositions of the product. I continued that iteration for the next round of testing.

Dashboard, Iteration 2:
I increased the background color value and added a thin border around content areas to segment the areas more clearly. Users preferred content in easy to digest segments. I made the section header for the top steps area the same and added a tooltip to help explain the button.

User reaction to dashboard, Iteration 2:
Users were more clear on the relationship of the status scores to the graph but were still confused about the order and interaction path in the Top steps section. They found it confusing to have a See Full Plan button at this point in the journey.
Sprint 3: Testing a prototype
In the next round of user testing I created a working prototype to discover how the users reacted to specific task requests and the functionality of the site. After that users were asked to start planning and verbalize what they would do from start to finish and explain the choices for interactions.
Marketing landing page prototype: 
I simplified the layout and minimized the messaging to provide information in simple segments and added another call to action button. I removed the search function and reduced the logo size to simplify the top navigation. I added a visual from the dashboard to provide a hint to the site functionality.
User reactions to marketing landing page prototype:
Users were clear on the purpose of the site and all said they would click the button and start planning. Users that previously saw the page said this was a much more effective design.

Dashboard prototype:
I added numbered steps to the process under the logo at top left and positioned them just above the first expandable card to help the users start in the correct order. To provide a logical hierarchy for the use path I also moved the second section just to the right of Design Your Plan and added explanatory copy to replace the button that confused users. I also moved the status and summary graph below the second section to ensure the proper steps take for a more robust plan. The tertiary information became links at the bottom, placed next to the need help button.
User reactions to dashboard prototype:
Users reacted positively and expressed how simple this iteration was to understand and complete. All of them completed the steps in the correct order and understood the relationship. Some users were glad they could seek help from a real person if they had questions.

You may also like

Back to Top