Sign-up Flow for a Fin-tech Mobile App

Help users create an account in the simplest way.

Mobile

Form Design

2023

Landed Professional Project

My Role:

  • Product Design

  • Content / UX Copy

Tools:

  • Figma

Timeline:

Dec 2023 - March 2024

Overview

Background

Our first client after I joined my agency as their first in-house designer is Hero Financials. I was working directly with the Product Director to design Hero Financial's mobile app from scratch in a Agile team.

Due to NDA, I can only show you the sign-up & login flows I designed for the Hero Financials app.

Design Decisions I made:

  • Leaving on-screen space for mobile keyboards

  • One input form per screen to avoid scrolling on mobile

  • Progress Bar inclusion for transparency in sign-up steps

  • Avoid showing error messages first to reduce user frustration

  • When and where should disable buttons appear

Outcome

A Sign Up Flow for Hero Financials App

The rapid development of V-Max Connect platform relies heavily on our scalable and modular design system

Guiding Design Principles

Create an account in the simplest steps

The main goal is to create a signup/login flow for for new users in easy steps without any obstacles and pain.

Guiding Principle 1

Low-interaction cost

  •  I combined open-source UI libraries with my own designs for specific details to fulfill branding purposes.

Guiding Principle 2

Invitational

  • I favored reusable UI components and a templated approach to layouts, with a vision of rapid prototyping and development.

Guiding Principle 1

Transparency

  •  I combined open-source UI libraries with my own designs for specific details to fulfill branding purposes.

Laying Down Foundation

Brand and Tone

It was crucial for the platform's voice to be helpful and attractive, with a modern touch reflecting the influencer-marketing industry. From the color palette to the UX copy, I aimed for a fun, clear, and engaging tone. Purple was chosen as the main color theme to match the company’s existing color schemes.

Primary Colour Palette - Violet

The Colour Palette and Voice As Seen on Our Marketing Web Page

I explored a few approaches to navigation and sidebar options through Crazy8 sketching and best practices.

Atomic Design Approach

Guided by the Atomic Design Approach, we created the design system with atoms, molecules, and organisms, aligning with our guiding principles.

Atoms

Molecules

Organism

Results

Within three months of starting the role, I designed the digital platform in time for the MVP launch. The Design System played a key role in ensuring a successful launch and a strong foundation for future iterations:

  • It sped up the design and development time, especially since we use Agile, providing developers and PMs with a guide.

  • It provided me, and any future UX designers, with a set of reusable components and patterns for a more streamlined design process.

  • It established the branding foundation for the MVP version.

  • It offered a set of principles for making design decisions or resolving conflicts between teams.

Back to Top

All Casestudy

Next: University Department Website

© 2024 Chloe. Made with love and cups of oatmilk latte.