Client
Client
Timeframe
3 weeks
Timeframe
3 weeks
Tools
Sketch, InVision,
Photoshop
Tools
Sketch, InVision,
Photoshop
Skills
UI/UX design
interaction design
information architecture
research
Deliverables
style tiles
mockups
prototype
style guide
Skills
UI, UX, Ixd, IA, research
Deliverables
style tiles, mockups,
prototype, style guide
Skills
UI, UX, Ixd, IA, research
Deliverables
style tiles, mockups,
prototype, style guide

Overview

Currently, only 54% of baby boomers have retirement savings, and only 23% believe their savings will last the duration of their lifetime. The founders of Harbor—Nick, Billy, and Colin—want to change this. They built a financial planning tool  anyone can use to create a secure, well-rounded plan that will carry them through retirement.

A UX team from Designation who previously worked with Harbor identified its target users as boomers, aged 45-65, who focused on retirement planning very little or not at all. Instead, these users focused on immediate expenditures, such as their kids’ college tuition or their mortgage, and they regarded retirement planning as confusing and overwhelming. Through further research and testing, the UX team discovered these users were motivated by the ability to visualize and personalize their plan, and also by the option to track their accomplishments. They designed wireframes to incorporate these findings into the Harbor website. 

“As much as we want to stand out from other financial planning companies, creating a feeling of trust for the user is more important than our site feeling different.” - Nick Moy, Harbor founder

“As much as we want to stand out from other financial planning companies, creating a feeling of trust for the user is more important than our site feeling different.” 
- Nick Moy, Harbor founder

A few weeks later, our four-person UI team met with the founders to discuss ideas for visual design. Rather than work on the UX team’s wireframes, they wanted us to focus on creating a consistent and cohesive visual design language throughout areas of their existing website. They were open to a variety of visual design directions that effectively conveyed friendliness, stability, and confidence. Based on our discussion, I outlined four central project objectives:
Empower users to feel confident in their decision-making process
Make complex financial information straightforward
Offer a personal, customizable approach to financial planning
Instill a sense of trust through relatable, familiar elements

I expected the biggest challenge would be presenting financial information clearly and succinctly so it made sense to the user while also engaging them. Our limited time was also a challenge, but with research, strategic screen selection, and testing, I felt confident our team could successfully execute this project within the three-week timeline.

Existing Site Analysis

After our meeting, I analyzed Harbor’s website to identify potential areas for improvement and to propose changes which included both UI and UX considerations.

Marketing Page

  • Replace the hero image with a photo that feels less staged and more relatable.
  • Show smaller, more detailed sections of the dashboard to create a focal point for users.
  • Reduce the number of font families, styles, and weights across the page to increase consistency.
  • Use colored backgrounds to clearly distinguish sections and create visual hierarchy.
  • Display the rotating sample questions simultaneously so users can absorb them quickly and easily.
  • Remove the map, since it’s an online tool and users don’t need to see the company’s physical address.

Dashboard

  • Replace drop-down fields with sliders, which allow users to quickly explore a range of options and facilitate informed decision-making.
  • Display achievements more prominently, to encourage users to continue using the website and explore additional features that might improve their scores.
  • Incorporate the same links from the marketing page to provide consistent navigation across the platform.
  • Remove Billy's photo and add a “Search” field so users are encouraged to find their own solutions.
  • Eliminate the static boxes left of the text and question mark icons on the right, so users have a single call-to-action.

initial research and insights

Next, our team conducted an analysis of other financial planning companies to assess their strengths and weaknesses and determine how to differentiate Harbor. Our evaluation included Betterment, Credit Karma, Fidelity, HelloWallet (now defunct), Personal Capital, True Link Financial, Vanguard, and Wealthfront. Through our research, we discovered some common patterns and themes.

Ample negative space and cards created visual hierarchy and organized large amounts of information. Most companies used shades of blue, which is associated with trust, stability, and reliability. Despite this, most dashboards looked outdated due to dark navigation bars, disproportionate layouts, and muted, washed out colors.

Photography and iconography were used on most marketing pages to add a relatable touch and provide visual contrast. However, the photos often seemed staged, which made the websites feel less genuine and inviting.

These insights provided a well-rounded, informative representation of the current competitor landscape, with clear ideas about what to consider (the use of negative space, authentic photography, and iconography) and what to avoid (disproportionate content layout, dark backgrounds, and muted, washed-out colors). They provided a strong foundation for my upcoming designs. Our team's next step was to formulate visual guidelines that would define and inform our individual designs:

Partners in Trust

Planning for retirement can be overwhelming and stressful. We want users to know they can rely on the Harbor brand as the best choice to find the necessary information they need to create a strong, secure financial plan. 

We will support this with visual hierarchy and organization of UI elements, clearly defined navigation, and consistency across the platform.

Let's Make a Plan

Users should feel empowered and eager to jump into the financial planning process. With Harbor, they have informative tools at their fingertips so they feel in control of their financial goals. 

Our designs will utilize colors that provide contrast for easy scannability, visually accessible fonts, and clear presentation of relevant content to engage the user.

Clarity is Key

Users should view retirement planning with the ease and clarity of a professional investor, without hidden fees or outside pressure. They can start with the basics, then delve deeper as they become comfortable.
 
We will create a clear, focused interface using ample white space, minimal text, authentic imagery, and progressive disclosure of information.

STYLE EXPLORATION

My next step was to create three divergent style tiles that accounted for user needs and perspectives, and aligned with our design principles and client expectations. Since it’s often easy to observe designs through the lens of personal preference, I asked our clients to focus on how well they felt each design related to their respective ideas of what the Harbor brand embodied.

Stability

I used blues to evoke feelings of trust and reliability, and greens to create an association with money and finances. Cards and white space provide visual hierarchy, and rounded corners on elements soften the overall appearance. A photo of a friendly middle-aged couple adds a relatable human touch and hints at the idea of financial planning as a team effort.

Our clients thought this design felt “approachable, familiar, and non-threatening.” Billy appreciated the organized structure of the cards, but Colin questioned whether it detracted from the idea that “financial plans are holistic with many pieces working together.” They liked the inviting tone and how the rounded elements and typography further conveyed a welcoming feel.

Confidence

I used bold colors and sharper edges to create a more confident and modern feel. Minimal lines separate information and a vertical status bar with a gradient indicates progress and coincides with the graph colors. An urban photograph depicts a Boomer couple who appear to be exploring their next adventure.
Overall, our clients liked the bright color palette, but thought the lines were too sharp and seemed unfriendly. Nick was intrigued by the linear gradient status display, and Billy liked how the orange and fucshia accent colors drew the viewer’s attention. Everyone felt the photo detracted from the welcoming and trustworthy environment they wanted Harbor to embody.

Tranquility

I used shades of teal with plenty of white space and purposefully omitted cards and lines to create a more open layout. Calming gold accents and monochrome gradients display subtle points of differentiation without being overpowering. Round buttons and edges further contribute to the relaxed feel, and a beach photo inspires viewers to think about how they could spend their retirement if they planned for it properly.
This style direction was the clear favorite for our clients. Billy described it as “clean, relaxing, and approachable” with “clear focus and flow.” They especially liked how the colors were different from the usual blues of financial planning sites, and appreciated the concept behind the photo. They also preferred  these monochrome gradients because of their subtle display of progress.

Stability

I used blues to evoke feelings of trust and reliability, and greens to create an association with money and finances. Cards and white space provide visual hierarchy, and rounded corners on all elements soften the overall appearance. A photo of a friendly middle-aged couple adds a relatable human touch and hints at the idea of financial planning as a team effort.

Our clients thought this design felt “approachable, familiar, and non-threatening.” Billy appreciated the organized structure of the cards, but Colin questioned whether it detracted from the idea that “financial plans are holistic with many pieces working together.” They liked the inviting tone and how the rounded elements and typography further conveyed a welcoming feel.

Confidence

I used bold colors and sharp edges to create a more confident and modern feel. Minimal lines separate information and a vertical status bar with a gradient indicates progress and coincides with the graph colors. An urban photograph depicts a Boomer couple exploring their next adventure.

Overall, our clients liked the bright color palette, but thought the lines were too sharp and seemed unfriendly. Nick was intrigued by the linear gradient status display, and Billy liked how the orange and fuchsia accents drew the viewer’s attention, but didn’t like the heavy green header and footer. Everyone felt the photo detracted from the welcoming and trustworthy feel they wanted Harbor to embody.

Tranquility

I used shades of teal with plenty of white space and purposefully omitted cards and lines to create a more open layout. Calming gold accents and monochrome gradients display subtle points of differentiation without being overpowering. Round buttons and edges further contribute to the relaxed feel, and a beach photo inspires viewers to think about how they could spend their retirement if they planned for it properly.
This style direction was the clear favorite for our clients. Billy described it as “clean, relaxing, and approachable” with “clear focus and flow.” They especially liked how the colors were different from the usual blues of financial planning sites, and appreciated the concept behind the photo. They also preferred  these monochrome gradients because of their subtle display of progress.

ITERATIONS AND TESTING

Based on our clients' feedback, I decided to move forward with the color palette from the Tranquility design and elements from all three style directions. Our team chose to redesign the marketing page and dashboard for our initial round of user testing, and I incorporated my findings from my initial site analysis.

Together we created a series of questions regarding the look and feel of each screen. We focused on users’ initial reactions to layout and content organization (what they noticed first on the page and adjectives they used to describe it), their perception of each page’s purpose (how they described its function and what led them to that conclusion), and their feelings regarding the color palette and legibility. We conducted interviews with three women and one man, all baby boomers just starting to think about retirement.

Overall, users responded positively to my initial designs. They agreed that the color palette felt “warm and welcoming” and the shades of teal and gold were “nicely contrasting” and a "pleasant surprise."

Marketing Page

Most users appreciated the photo, and thought it signified teamwork and the idea of financial planning as a “family affair,” but others thought it looked a staged. The page felt “simple and uncluttered,” and made it easy to skim and learn about the product. The icons felt representative of the text they accompanied and provided “a break from having to read too much."

I also observed a few opportunities for improvement:
  • The color palette was too monochromatic, and needed an additional color to provide contrast and catch the viewer's eye.

  • The gradient distracted users and didn't effectively highlight the accompanying text
    or provide definitive structure to the page.

  • Additional sections, including testimonials and contact information, need to be added to give the page a complete, well-rounded feel.

I also observed a few opportunities for improvement:

Dashboard

Users thought the card structure organized the dashboard elements and felt they could easily find the information they were looking for. They also thought the sliders were convenient and would be easily adjustable.

I also observed points of confusion:
  • The "collapse all" button was unnecessary, since its function was identical to the caret button in the upper right corner.

  • It was unclear to users that the grading system consisted of three levels (A, B, C) because they only observed two colors in the section.

  • Users thought the empty and filled bullet points next to the text were buttons when they were meant to indicate the completion status of an item on the list.

I also observed points of confusion:

I presented our clients with the user feedback and my proposed changes for these screens. They thought the color palette worked well, describing it as "bright, yet soothing and appealing," and thought the changes I suggested were headed in the right direction.

For our second round of user testing, I incorporated these improvements into my iterations of the marketing page and dashboard, and designed additional screens. This round included a similar demographic, but was interactive, taking users through simple flows to provide them a tour of portions of the website. Our questions were similar to the first round of testing and included prompts to guide users between pages.

I was excited to see each user react enthusiastically to my designs. They easily navigated between pages and understood their purpose and content. Like our users from the first round, they found the color palette relaxing, and one user noted “it doesn’t make me feel uptight or have anxiety, which is easy to have with financial planning.” and thought it seemed like “a site for people who are serious about their financial planning.” I made a few small changes and presented our clients with my final designs.

THE RESULT

Marketing Page

The page includes numerous calls to action, so the user can  explore the product at any point. Bright green icons add contrast and incorporate an additional color from the dashboard grading system. Alternating color and white backgrounds provide contrast and lend structure and organization to the page. The testimonial section gives the page an inviting and relatable feel, and the contact section creates the perception of openness and availability.

Dashboard

The dashboard’s color palette is consistent with the marketing page, which creates a seamless experience for the user. The thin teal banners call attention to the left sections, and the card layout creates visual hierarchy for the content on the right. Gold, green, and teal differentiate the grading system levels, which strengthens the user’s ability to interpret where they stand.  The action plan items at the bottom are separated into numbered tasks that haven’t been started and check-marked tasks the user has completed.

Plan Overview

(Harbor's existing screen)
(my final design)

A horizontal timeline visually divides the accompanying text, which makes it easier for the user to digest. A minimal design and streamlined content allows the user to quickly absorb the information.

Goals & Progress

(Harbor's existing screen)
(my final design)

This list is a more comprehensive version of the action plan on the dashboard, so it’s formatted to match. This helps establish a consistent routine for the user, and increases their level of comfort with the site. The “Start” buttons provide a single call to action and decrease visual noise.

Budget & Savings

(Harbor's existing screen)
(my final design)

Simplified column headers reduce the amount of text on the screen. The “Total Income” section was move to the bottom and color was added to the “Net Income” section to highlight and group the most important information.

My designs resonated with users as being professional, empowering, and welcoming, and felt like something they would choose to use for their financial planning needs. Our clients appreciated my use of a divergent color palette that included gradients to further inspire a calm and friendly atmosphere. They also recognized the effectiveness of the marketing page testimonial section—within a few days of our final meeting, they had incorporated a similar section on their website:

After our final client meeting, I refined the prototype I created for our second round of user testing. While the featured screens only include portions of the current Harbor site, it provides an interactive look at the potential for what the site could become. I also created a comprehensive style guide which outlines branding and visual guidelines for future designers and developers. It provides a dynamic roadmap to help align future creative decisions with the overall design language I created. Check them out here:

future considerations

While I was able to create successful visual designs for select screens, I would be interested in further exploring UI and UX aspects of the Harbor website that I wasn’t able to consider due to the time constraints. If I could continue with this project, I would:

Together, these changes would improve the site’s design language and strengthen the Harbor brand overall. They would contribute to a well-rounded experience for existing users while also attracting new users.