Crypta

Crafting a streamlined sign up flow for a fictional investment app.

ROLE UX/UI Designer
CONTRIBUTION Research, Wireframes, UX/UI Design
DURATION ~8 hours in total
PLATFORM Application
TEAM SAIT Individual Assignment
TOOLS
Figma FigJam
TLDR

Crypta is a fictional innovative online financial technology company offering a seamless platform for users to explore cryptocurrency investments.

My task was to design a signup process that ensures a smooth transition between each step. Requirements included clear instructions, intuitive navigation, and flexible options for saving user progress and returning later.

Crypta smartphone mockup, showing the halfway point screen in the user flow
Crypta smartphone mockup, showing the investment experience screen

Problem: Crypta's sign up flow requires extensive financial and compliance information, creating a risk of user overwhelm and drop-off

Solution: Design a clear, step-by-step mobile sign up flow that simplifes complex information and supports confident user progression

Impact: The sign up flow reduces cognitive load and supports smooth user progression through a complex onboarding process

Role & Goal

The project goal was to create a signup process for the fictional app which included 13 different pieces of information that needed to be collected during signup or included within the process.

My role included:

  • Wireframing
  • Prototyping
  • Writing microcopy
  • UX/UI Design
Crypta project cover image

Design Process

I took inspiration for the design from both Coinbase and CashApp, studying both sign up flows on Mobbin.

Design choices included:

  • Separating sign up flow into two sections, account creation and investment information, to clearly communicate progress and establish a natural halfway point
  • Added a persistent progress bar so users can visually track where they are, and how many steps remain at all times
  • Each step of the process provides the user with clear direction in the form of microcopy, reducing confusion and uncertainty
  • Designed a save option, which allows the user to pause the sign up process and resume from the same step later, supporting real-world usage and flexibility
Screenshot of low fidelity wireframes for the app, as well as notes and plans for the app

Iteration

While formal feedback wasn't part of this project until after hand-in, I made small iterations to improve usability. For example, I integrated legal agreements and privacy policy information directly into the account creation page, reducing steps for the user and keeping the flow familiar and simple.

  • Reviewed common patterns in onboarding flows to improve usability and reduce friction
  • Iterated the account creation flow to include legal agreements and privacy policy inline, rather than as a separate page, simplifying the user experience
  • Made small layout and copy adjustments based on self-review and best practices to align with modern cryptocurrency apps and reduce cognitive load

Solution

Crypta solution highlighting the inclusion of legal agreements & privacy policy

Included legal agreements and privacy policy as part of account creation, rather than their own separate pages

Crypta solution highlighting the halfway point step in the process

Included a natural halfway point, to help users gain an understanding of where they were within the flow

Crypta solution highlighting the password page, showcasing clear microcopy

Ensured users had clear direction at each step with use of microcopy and microinteractions

Key Learnings

What I'd Do Differently

Better Justify Design Decisions

In future iterations, I would more thoroughly document and annotate my design decisions to clearly communicate the reasoning behind each flow and interaction. My instructor's feedback was that while the overall experience was strong, additional justification would help stakeholders better understand how each choice supports usability and user goals.

Design for Unhappy Paths

This project primarily focused on the ideal user flow, but in future iterations I would be sure to intentionally design for unhappy paths. This would include error states, loading delays, and edge cases to ensure the experience remains clear and supportive under less-than-ideal conditions.

Four screenshots of the final app design