Progressive Onboarding.
Freelance work for a web developer redesigning an exisiting but basic property maintenance app.
Work was done over 2 days using Figma.
Design Process.
-
User Flow.
To map out the steps a user would need to take to complete signing up and setting up their account.
Confirm with stakeholder that all their requirements are covered.
-
Low/Mid Fidelity Wireframes.
Create each step of the onboarding process and confirm content required on each frame.
Decide on grid system to use, number of columns and column/ gutter width.
-
High Fidelity Wireframes.
Design the wireframe mockups using established design patterns, the existing style guide and creating new components where required.
User Flow.
High Fidelity Wireframes.
Decisions Made and Rationale.
Grid System.
-
-
I used 9 columns (24px) as it allowed the buttons to span the width while still having a column either side for the card to show.
It also allowed for more options when placing smaller components.
No Disabled Button.
-
-
Due to the inaccessible nature of disabled buttons, I kept the “Continue” button active and on submit, any errors would be flagged to the user to validate.
Progress Bar.
-
-
Each setup section can be repeated if required to add more than one property or tenant so there is an undefined number of steps. Therefore I used a progress bar as a form of pagination rather than elipses or numbers to make it clearer to the user where they were in the setup process.
Iterative Design.
High Fidelity Wireframes.
-
![]()
Simple rounded corners as a placeholder.
-
![]()
House shape inkeeping with the product logo. Although the stakeholder prefered this, he agreed with me that a house within a house was a bit overkill
-
![]()
Following his suggestion we went with a house shaped card instead.
-
![]()
And then reversed this for the setup complete page.
