Harbor

Harbor is an early stage startup that helps people plan for retirement. They remove the complexity of the financial system and make retirement planning accessible for all ages and income levels. Their product removes inhibiting jargon often found in financial planning and and allows users to dive deeper into details as they create or modify their own retirement plan. Harbor’s business focuses on the baby boomer generation, ages 50 to 65. This group is quickly approaching retirement and many lack the resources to pay a personal financial advisor.

The Harbor team worked with a Designation UX team at an earlier concepting stage. They now asked our UI team to create a consistent visual language to use throughout their current product. As a team of four visual designers, we collaborated on competitive and user research, but individually created unique visual designs and each delivered final designs in the form of high-fidelity mockups, a clickthrough prototype, and a style guide.

The Challenge

When Harbor’s team asked us for help I was very interested in the project. I saw a lot of parallels between their product and user base and my previous experience at Square, where I advised customers of all ages and worked with product teams to drive improvements.

The Harbor tool lacked a clear visual flow and I was eager to apply my experience in stripping away noisy elements to create a clean and intuitive designs.

After our first meeting with Harbor, my team and I took away some key learnings about the company’s design goals.

Harbor wanted a final design that:

• Uses technology to bridge a trust gap between users and traditional financial planning
• Makes financial planning accessible to everyone, with a special focus on the baby boomer generation
• Presents financial information in a simple and clear fashion

I was excited about Harbor’s product and vision for the future and began to ideate how the product could benefit from a cleaner and more exciting interface. Their focus on baby boomers also captured my attention as I was curious whether similar design patterns would apply for this generation. Their mission, to empower people with access to a robust financial plan, strongly aligned with my values and drove me to double my efforts.

Design Directions

With these insights, our team jumped into a visual analysis of key direct and indirect competitors in the financial sector. We wanted to gain a better understanding of how other financial brands visually communicate their values to users and looked for opportunities to differentiate the Harbor brand from the many retirement calculators and services on the market.

Some of the key competitors we looked at were:

Personal Capital, Mint, Betterment, Credit Karma, Charles Schwab, Wealthfront, and Sterling Bank

Our UI team found blues and greens widely used throughout the financial sector as they instilled a sense of trust and financial security. We thought this could also be an area of opportunity for differentiation for Harbor. With further UX research we discovered sans serif fonts were the most legible for our target baby boomer demographic. Also, we learned that expandable elements, cards, and menus served well to minimize the amount of information on the page. This way, the information would be simple and clear, but allow our users to dive deeper if needed. Coupled with the main takeaways from the Harbor team, we distilled these learnings into three guiding principles:

We wanted the new look and feel to be welcoming and exciting, but also inspire user trust. The designs needed to be accessible and intuitive to all users, and we wanted users to feel confident in creating their own financial plan. Based on these visual principles I developed three style directions as a tool to communicate design exploration to the client.

Clarity. I wanted to convey the feeling of honesty and transparency. Brands like Patagonia, Clif Bar, and The Honest Company inspired this design through their focus on organic and natural processes.

Trust. I opted to evoke feelings of trust and security through a darker blue, thicker elements, and a wider font. These designs felt more traditional in the financial sector and called upon the aesthetic of familiar and established companies such as Northwestern Mutual, Chase, and Merrill Lynch.

I had a lot of fun exploring directions and thinking of unique ways to present a financial product. I hinted at finance in subtle or more explicit ways, but I wanted my designs to push traditional ideas of financial aesthetic just as Harbor’s product is pushing the traditional means of financial planning. The Harbor team was also open to exploring a more unconventional approach, but not set on any particular design. Rather they pointed out elements from multiple designs such as the lightness of elements in the Clarity style tile. They were also intrigued by the color and shapes of elements in the Plan tile, but thought the design as a whole was too avant-garde for their brand.

UX Considerations

During our meeting, the Harbor team expressed they wanted us to primarily focus on the dashboard portion of their product. They additionally provided new wireframes of features they wanted us to envision for the next version. Though our initial focus was to be solely the visual design of their current product, I saw this as an exciting UX challenge. I decided to design and test the concepts supplied by Harbor, and I identified four areas to focus on during user testing.

1. The client envisioned a timeline where a user could add life events, drag and drop to reorder, and collapse sections of several year
2. The Harbor team was unsure of how to present a changing score to the user
3. The graph was a point of confusion for users due to a lack of a baseline and the team didn’t know how to present it in case of a decreasing prediction
4. Users weren’t certain of the purpose of this section due to a lack of clarity around the checkboxes and links

I prioritized areas that were most important to Harbor in the next iteration of their product. I also noticed that in these four areas Harbor was trying to communicate a lot of information by showing all of the numbers and changes visually and I began thinking of other ways this information could be communicated. Overall, the wireframes felt overwhelming and I wanted to simplify the design as much as possible, while retaining all crucial information.

Mockups and Testing

In my first iteration, I combined elements of my Clarity and Plan style tiles. I wanted to achieve a visual treatment that aligned with our visual principles, while differentiating Harbor from the multitude of financial service providers and addressing the UX questions in the wireframes provided.

1. I created expandable cards for various life events to provide an overview for the user. They were able to enter more information in an expanded view. I added dot grids on the left to give affordance to the drag and drop function. The purple and yellow stripes were a visual clue to the financial or lifestyle nature of a life event.
2. I chose to leave off the crossed out scores as they created confusion and added visual clutter. Instead, during user testing, I focused on whether users were able to spot the changing scores as they made changes to their plan.
3. In the graph, I changed the baseline level to show the user their retirement standing without a Harbor plan. My hope was for the baseline to present the impact of the Harbor plan and the graph to make more sense.
4. I also moved the Put Your Plan into Action section to the top to see if users were more likely to notice it.

With the initial mockups complete, our team created a user testing outline with general questions as well as questions specific to each of our designs. We tested with 3 women and 1 man, all of whom were between the ages of 50 and 60. Our participants were booked through a Facebook ad by our client and they were of average tech-savviness for their age group. Most of them haven’t heard of Harbor nor worked with a financial advisor or product beyond a savings or 401K account. The user tests were conducted individually and each member of our team conducted an interview with at least one of the users. Since we asked the user similar questions about each design, we also mixed up the order in which the designs were shown to eliminate the bias of learning what the product is as a user saw successive designs.

User testing was very insightful and validated some of my design decisions. Users found the purple color engaging and different from what they've seen on other sites. They could read all font sizes, and their attention immediately gravitated to the timeline. They also understood the cards were expandable and interactive.

Still, designing for baby boomers challenged many of my assumptions on usability best practices. UI elements like the on/off toggle, which many consider standard and self-explanatory, were not as familiar; bright colors felt overwhelming; and a lack of visual hierarchy created navigational difficulties. Also, the Harbor team found the purple color intriguing, but were not completely sold on it. Based on this feedback and further UX insights I found online, I made the following changes to my final design:

1. I removed the drag and drop feature which was too complicated even for younger users
2. I added explanatory text indicative of toggles to increase clarity of the action needed
3. I combined the sections of the graph into two simple levels before and after Harbor, to eliminate confusion; the graph changes in response to a user making changes on their timeline
4. I reimagined the Putting Your Plan into Action section to give it more affordance as a tertiary step in the user flow
5. I increased the hierarchy between sections of the dashboard to create a natural progression for the user
6. I muted the color palette to better match with Harbor’s envisioned brand, but still communicate the financial aspect of the product in a differentiating manner

In order to create more clarity and space around each element I stripped some of the secondary information, such as the grades for the ‘old’ plan, and decided to convey this information through animations. Since users weren’t especially tech-savvy nor financial experts, these changes simplified Harbor’s dashboard and allowed them to focus on the most pertinent information.

In the built out prototype, I walked users through the process of adjusting certain financial events, adding an event, and choosing an action step. Our team tested each of our prototypes in the same manner as before, with general and specific questions. We again tested with 4 women and 1 man in the boomer generation. Two of our users were returning, but the focus of our testing this time was the usability and interactivity of the design in addition to the visual appeal. In my prototype I paid particular attention to how my UX design decisions tested and was excited to see that users quickly understood the different sections of the product and easily navigated through the prototype.

I was happy to observe that users found the timeline on the left easy to use and self-explanatory. They also noticed the graph and scores changing in response to tweaks they made within the timeline. Users further explored the Putting Your Plan into Action section and understood it as the intended third step in the planning process. The increased hierarchy between sections created a better flow and they responded positively to the new color.

I hoped the Harbor team would opt for a more adventurous color palette, but in changing the primary color to blue I was able to make other systematic improvements that ultimately strengthened my design. By limiting the number of colors it became more clear to users which elements were clickable or interactive. This tested great with our users and they expressed the design felt simple and easy. Although the blue struck a more similar chord to other financial products on the market, I was happy it communicated the ease of use and forward-thinking of the underlying technology, when paired with a much cleaner, rounder, and lighter design.

Future Considerations

At our final meeting I proposed some areas of improvement for the Harbor team to consider as they move forward with creating their product:

1. Due to various screen heights, the scroll position of the graph and scores should be kept level with any open card, so users can always see the impact of the changes they make
2. Microanimations should be incorporated to aid the visualization of changing graphs and scores and account for any latency in the product
3. The new design of Putting Your Plan into Action should be tested further once built out to responsively update with the plan
4. And a few pre-built plan options should be provided, as multiple users expressed interest in this feature

The client really appreciated the overall redesign and took a particular interest and note of the insights I provided around their new features. Harbor recently finished fundraising their seed round and will be implementing changes in the next few months.

What I learned

Harbor was my last project at Designation. Because I chose to undertake Harbor’s UX considerations in addition to the visual designs, time blocking and user testing became even more important to my process. My team was very diligent about following up with users and we had a great turnout rate. We also scheduled our user interviews as early and densely as possible in our sprints, to have the most time to iterate before the next week. This approach was strenuous, but it allowed me more time to synthesize research insights. Boomer-specific visual elements such as accessibility of font sizes, a limited palette of calm yet youthful colors, and displaying a limited amount of information significantly enhanced the user experience.

Even though I was familiar with financial products thanks to my work at Square, the challenge of designing for boomers surprised me. This project made me consider how technology products tend to assume a certain level of proficiency in their design. I realized the level of tech-savviness required in my initial mockups was too high and I had to make them simpler. By doing so, I delighted our older users as they easily navigated through the interface. Because the product was simple to start, many users expressed a desire to share Harbor with their younger daughters and nephews. It was impactful to see that a well-designed product could thus quickly enchant and empower users often neglected by new technologies. As companies continue to progress and create powerful new tools, I want to keep this front of mind and continue designing with a low barrier to entry.