User problem

We’ve conducted a number of feedback and interviews over the years but the related issues I want to focus on for this includes:

Additionally, we also wanted to investigate a related issue of users having to scroll too much in an application. This feedback was also heard as a part of the research uncovered from the above.

• The application requires too much scrolling
• Uncertain if information entered saves

From our own assessment, we found the following:

• Contrast of labels against backgrounds affects readability
• Too many types of primary actions
• Too many types of modals
• Buttons can be mistaken as feedback elements, e.g. tags
• Some buttons were missing hover states
• Poor grouping of related information, e.g. page headings and card headings

The Pacific Design System was a way to solve a few user problems and a handful of design inconsistencies we were encountering. It was named after the ocean closest to where we built the system.

Additionally, we also had a goal to unify the design patterns of our two products, Finmo and Lender Spotlight under a single design system. Since the users of one product could also be users of the other, we wanted to create a consistent experience across both so that when they jumped from one to the other, it would feel like a seamless experience. It’s not the case right now. We’ve done work in the past to build familiarity between both brands but experience wise and visually, they were still different. The interactions and patterns between the two didn’t feel like a cohesive system. We wanted to mimic how users jumped between Google products like Docs, Sheets, or Slides. When going between them, they know they’re in the same ecosystem.

Business goals

There wasn’t really one and this lead to the outcome you’ll read more about below.

Research

Our first step was to take a look at our existing components. We audited every UI and interactive element (and it’s various states: disabled, hover, etc.) across Finmo and Lender Spotlight. We needed to see the similarities, differences, and the variations in between. Once we had this, we could then discuss how to proceed with addressing it.

After that, we brainstormed and worked together to determine what things we liked and didn’t like with the current Finmo and Spotlight patterns. We also discussed the new vision of what things we wanted our new design system to have.

Our next steps were to simplify the number of patterns so that only the key elements remained. We value simplicity and we want to provide focus for our users so that they can do their jobs. Removing visual clutter does this for them. It also keeps our codebase cleaner and lets them see content in a distraction free environment.

We removed distracting elements like unnecessary dividers and most importantly, reduced the number of options for buttons, modals, and icons. At the time, we had too many variations of elements that did the exact same thing. For example, we had buttons in varying sizes and colours. The rules for its usage weren’t defined and we knew we could do better to define the specific use case.

Brainstorm and wireframes

We designed, iterated, and discussed different variations for typography, colours, buttons, inputs, icons, cards, modals, badges, tooltips, and tables.

Visual design

As a team we decided and made very specific stylistic choices to help distinguish between content you can interact with and content that’s just for display. We wanted to establish consistent visual patterns that our users would understand easily when navigating between Finmo and Lender Spotlight. Accessibility and contrast between content and backgrounds was also important.

The following were some of the biggest changes we made with the Pacific Design System. It would help to drive the rest of the changes we made:

Typography

The main font was updated from Sofia Pro to Proxima Nova. Proxima is a more condensed font than Sofia and provides better clarity for reading information on screens. This means it makes it easier for our users to review their client information, especially numerical values. Proxima is also the font choice for our marketing. The alignment between the two also helps with brand recognition.

The headings and body text have been improved. Headings are slightly larger than before and follow a rhythm that scales proportionally between the different sizes and uses cases (H1 to small text). This will provide our users with better hierarchy when viewing groups of related content on a page.

Colours

The colours were updated to be higher contrast. We introduced a new colour palette with various tones to support a greater range of content needs. Headings, text, buttons, and links are now in higher contrast too. With accessibility in mind, this ensures that content can be easily read on the page.

Text inputs, selects, and toggles

The biggest updates we made were to the text inputs, dropdown selectors, checkboxes, radio buttons, and toggles. We spent a lot of time iterating and improving these controls as they are the things that users interact with the most to get their job done. The changes:

• Emphasize consistency and efficiency: helping users to focus and identify content quicker
• Differentiate the various types of data (e.g dollar amounts, percentages, length of time, payment frequencies): making it faster to enter, update, and calculate client information
• Makes the height of the controls shorter: making it compact allows us to place more information in the customers view, reducing the amount of scrolling you would need to do, a key pain point in the feedback we received

Everything else

Including icons, badges, feedback (toasts and banners), tooltips, buttons, and modals.

Project impact and metrics

Overall, I’m very proud of the work we did as a small team. This was originally a 20% project that was supposed to be completed when we had time outside of our regular responsibilities. It’s been a long road to get to where we are today. We were able to address the following issues:

Fixed based on user problems

• Shorter inputs with more inputs per row reduces application scrolling
• More contrast between placeholder and inputted text increases likelihood that information has been added to the field

Fixed based on design team discoveries

• Darker colour for text on top of lighter coloured backgrounds
• Removed and simplified similar elements
• Simplified buttons to 3 types: primary, secondary, and tertiary styles; missing hover states included
• Simplified modals to 2 types: display and action-oriented
• Tags re-designed to be more “pill like”
• Headings on page have improved hierarchy and follow proper web guidelines

We’re still iterating on it based on feedback we receive. A completed and usable design system requires development and product help too. We worked closely with them to explain, sell the benefits, and show the value of the changes we made.

However, despite our efforts to build Pacific into Finmo and Spotlight, it’s been very slow and most of it hasn’t been implemented yet. Only typography has been changed at this point. I mentioned above that there wasn’t a solid business problem driving this and this was the cause of the poor outcome. This misalignment between user problems and business problems was the cause of it. Even though we have documented UX issues from users, clear inconsistencies with design, safe assumptions that this would solve some of these issues, and positive usability feedback from showing our users our intention, there was no direct line connecting it back to a business problem (only indirectly).

Pacific is still loved by all including our leadership team. The release has been shelved for the time being to make way for more impactful projects. The size of this project is quite large as it was intended to be implemented across two products. We knew the changes would cause a lot of disruptions with our users day-to-day interaction with the products. We wouldn’t do that to them so we even created rollout phases of what could we released first so that disruptions would be minimal and directed feedback could be heard. Even though we know Pacific will provide an improved experience for our users, it’s unfortunately not the most important thing we can be working on as a company right now. So we continue to work with our product and development teams to release parts of it when we can.

Applying Pacific to both Finmo and Lender Spotlight: