Contact me
side menu icon

Project Overview

EquityBee is a fintech company that helps startup employees get funding for their stock options. Although the startup has seen significant growth, the Product Lead was concerned about decreasing user conversion rate. He reached out for help admitting that the signup funnel hadn't been revised since the initial launch.

We agreed on the following goals:

  • Analyze the existing signup process and outline issues and opportunities for improvement.
  • Understand the competitors, market, and industry standards.
  • Create a mobile-friendly signup experience that better reflects user needs and current trends.

My Role

Sole contributor UX Designer. My responsibilities included:

  • Research plan development and execution.
  • Lo-fi sketching.
  • Mid-fi wireframes design.
  • Final results delivery.

Users

Black man holding a mobile phone standing in a modern office.
Photo by fizkes from Shutterstock

The primary users for this project were startup employees looking for financial support to fund their stock options, described by the stakeholder as HENRYs – High Earners Not Rich Yet.

This description implied most of their users are avid internet users with busy schedules, and are comfortable accomplishing routine tasks on their phones.

Scope & Constraints

The project's scope focused exclusively on the signup experience.

My two biggest constraints were:

  • As an external contributor, I didn’t have access to any previously collected data.
  • Working with limited resources.

Process

Four stages of the double diamond design model.
The Double Diamond Design Model

Discover

The first stage of the Double Diamond design method entails gathering data and learning more about the problem. In this discovery stage, I used two research methods: Heuristic Evaluation and Comparative Analysis.

Heuristic Evaluation helped me outline issues and opportunities for improvement in the existing signup process, and Comparative Analysis gave me a better sense of user expectations.

Heuristic Evaluation

  1. I had no access to any previously collected data on users’ behavior.
  2. Limited budget meant I had to find a method evolving least resources.

The challenge was that due to budget limitations, I couldn’t run a Heuristic Evaluation with multiple evaluators, as the practice recommends. Hence, I decided to go with Heuristic Markup – a version of a heuristic evaluation designed for teams of one (as suggested by L. Buley).

Method

Using a 5 point scale, I went through the design evaluating the look, the feel, processes, and the effort required for users to complete the task guided by the 10 heuristics.

5 Point Scale

Heuristics evaluation scale from 0 to 5.
Go
to see the full presentation.

Comparative Analysis

In the second part of the discovery, I concluded a Comparative Analysis of direct and indirect competitors, which gave me a broader perspective on possible solutions and inspired me to design my own.

Define

In the defining phase, I filtered the research data, identified areas of improvement, and elaborated on the issues and strategies to tackle them in a presentation to stakeholders.

Develop

Develop stage is the actual making of the solution. In this step, I first created a User Flow with a goal to shorten the signup process and be respectful of users’ time.

Next, I sketched the ideas on paper before moving to the final stage of the project – designing wireframes.

The biggest challenge was that I couldn’t significantly reduce the length of the questionnaire because, as per the stakeholder, all of the questions were non-optional-type questions. My solution – reduce the number of clicks users need to accomplish the goal.

step 1
combine
combine content image
I combined personal details questions to reduce the number of clicks.
step 2
autofill
autofill content in browser image
I added an autofill option to streamline the signup process.
step 3
rearrange
rearrange content image
I rearranged questions to complete the screening faster and reduce frustration for users, who didn’t qualify.

User Flow

user flow diagram
User Flow Diagram
Go
to interact with the diagram.
Sketches
pencil on paper sketch of wireframespencil on paper sketch of wireframes

Wireframes

Finally, I moved on to design wireframes in Figma. I went for mid-fidelity wireframes because:

  1. Details - that couldn't be captured with low-fi - mattered and could significantly improve usability (e.g., tooltip, helper text, system behavior);
  2. I didn't have access to the EquityBee design system, and it wasn't my task to change it.

Deliver

Go
to interact with the prototype.

The final design serves as a stepping stone to conducting further research for the successive iterations. But even in the preliminary stage:

  • I reduced the time spent on signup by 47%.
  • In line with the idea that users spend most of their time on other apps and services, the design considers the users’ mental model by reflecting the established norms.
  • The design accounted for the target audience – who, as startup employees, are busy professionals used to accomplishing tasks on their phones – by closely following mobile-first design principles.

Lessons Learned & Outcomes

Without user testing, the design results will always remain an opinion rather than evidence-based suggestions. If given more time and resources, I would have conducted another round of heuristic evaluation and validated my assumptions with usability testing.

Nevertheless, I’m proud to say that most of my recommendations have been implemented and are currently running on a platform as part of the test benchmarking the new design against the old.

Thank you for reading!
Have questions or want to say hello?
contact