Overview

A colleague from a previous company needed some product design help with her product, Quimby. The onboarding experience for the newly minted web application needed reimagining and she wanted the UI to be more consistent and responsive. Quimby is a small startup building a tool that aims to empower employees with emotional resilience tools and create psychologically safe teams. Learn more about what Quimby does.

Timeline

August 2023

Role

Product Designer: I was responsible for product thinking, information architecture, interaction design, and UI design.

Team

A Founder, a Chief of Operations (developer), a business consultant, and a Product Designer (me)

A good product onboarding process should help customers experience the value of your products right away. The existing onboarding process was tricky and disjointed. Many users were unable to get through it without hands-on assistance from the Quimby team. The design update needed to accommodate:

• Managers of small teams at startups

• Administrators from large companies adding whole org charts of teams to Quimby.

The existing onboarding flow UX was deterring them from adding team members. The sooner they can add team members, the sooner they can start gaining insights, which is one of Quimby’s main value propositions. I consulted the team, reviewed the existing user research and Looker dashboard, and conducted an audit of the onboarding flow and admin page. The following issues were identified:

• The onboarding flow for this web-based app still contained vestiges from when it was a desktop app, which wasn’t responsive

• Users could not figure out how to add their team members in both the onboarding flow and the admin page

Wireframing the solution in low-fidelity

Based on the above problems identified, I worked towards addressing these pains by coming up with potential solutions. I quickly mocked up some low-fidelity wireframes to gather feedback from the team.

The previous onboarding flow featured back-to-back wizards punctuated by a false confirmation. This was a holdover from when Quimby was a desktop app. I consolidated both wizards into a single flow with a clear six-part stepper.

Sign up/ Sign in

It was not apparent that new users could sign up with their email. Many (including myself) stumbled through this part believing that they needed a code. I updated the design to make it more apparent that they could use an email address and also made it mobile-friendly.

Verify email

According to usability test sessions that were conducted before I joined, users were confused by which string to enter when they received the email confirmation. I updated the field to be more clear.

An easier way to add members

In the onboarding flow, I added a way for admins to create a team and name it, as this is something that users struggled to do in the team admin page later on. I also added a signifier to the “add email addresses” field so that it was more apparent that users could add multiple addresses.

Manager Tools

The team admin page had a few usability issues. The tree structure was unwieldy and it was not apparent that users could add members or re-parent sub-teams. I added a company-wide members table and gave users two different avenues for adding members: directly to each team or to the members table.

Working in higher fidelity in Figma

Once the quick ideas were validated by the team, I started working in high fidelity using M3 components that I adapted for the app, so that our developer could start implementation. This became a fledgling design system for Quimby.

Kicking off a Design System

There was no existing design system for the product, so I created one starting with typography styles, color styles, and buttons.

Responsive Redesign

After the onboarding flow, I cleaned up the UI of the entire app to ensure all the components were responsive. This involved working closely with our developer to implement responsive components within our short turnaround time.

Wrapping Up

The scope of this project covered the following:

• Updated onboarding flow

• Improved manager tools

• Responsive redesigns of the UI, including “My Routine” and “Daily Check-ins”

Validating the Designs

Quimby regularly conducts continuous rolling interviews. When this project wrapped up, our small team needed to reallocate resources to the learning module part of the product. During this time, qualitative feedback trickled in from the interviews, letting us know we were on track. When this project ended, the goal was to evaluate the impact more quantitatively in the future.

Lessons Learned

For this project, I needed to quickly get up to speed with a new team and product and deliver value by sharing ideas in a lean way. I am excited about Quimby’s future and grateful for the opportunity to work on a product that improves the lives of its users.