PROJECT BRIEF
Improve the user experience along with the look and feel for better navigation and usability of the platform and visually better PDF exports.
MY ROLE
User Flow
MVP
UI Kits Design
UI Design
Interaction Design
Prototyping
DEFINING THE PROBLEM STATEMENT
We realized companies investing in Growsure will need clear instructions on how to sign up, and independently use the platform to maximize efficiency in which Growsure captures vital business information to commence the consultation process.
COMPETITOR ANALYSIS
We started by doing an analysis of the following competitors.
-
Bizplan
-
LivePlan
-
Enloop
-
Cuttles
-
Showpad
-
Monday.com
By comparing with the competitors, we found the existing design has the following issues
-
The menu was found cluttered
-
Inadequate message feedback to the user
-
No progress indicator
-
Consistency was lost
-
No option to select which part of PDF report to be generated
And then we figured out how might we...
-
Improve user experience at first login around how to use the platform.
-
Improve user experience at using the platform at instruction and tips.
-
Improve the user experience around returning to the platform and the progress of a particular growth plan.
IDEATION
In order to tackle the issues, we brainstormed a few solutions in the crazy 8s section.
We then arranged them in the MVP quadrant according to their levels of values and difficulties.
USER FLOW
We designed a new user flow to show how to enhance the user experience during the first log-in and throughout the journey of using the Saas platform.
HI-FIDELITY WIREFRAMING
Using Figma, we translated sketches into wireframes. Then, we improved them by applying the theme, format and standards to the layouts of all sections. At this stage, the wireframes were formed with interactions and moved on to creating high-fidelity prototypes.
UI DESIGN
New theme applied
To improve the existing UI design, we selected the colors aligned with the website of Growsure and standardized the fonts.
We designed the UI kit with matched colours and fonts accordingly
Standardizing the layout
We fixed the problem of consistency by standardizing the layout, fonts, shapes and sizes of buttons.
Designed the new menu
Then, the menu was found too cluttered. Inspired by the competitors, LivePlan and Enloop, which had a 'subfolders' hierarchy, we designed a collapse menu and re-construct the hierarchy.
Expand / collapse the menu by click the arrow
Adding feedback messages
We created a welcome message during the first time login. And another message to notify the user when the sale plan is well set up.
Indicating users the "steps"
We arranged the questions with numbers and on pages. Users will know how many steps have been done and left. The buttons "prev" and "save and next" let users save and amend their inputs.
Creating guided tour
We would save users learning time by creating a skippable guided tour in which new users can learn the platform step by step.
Creating Learning Center
Users may want to have the assistant at any time by accessing the Learning Center where videos of instructions, tips, and guidance will be included.
User will only need to click the question mark from the bottom of any page in the Saas platform to access the Learning Centre.
Creating the menu of report sections to be exported
Instead of generating the whole report which is huge in size, we design a pop-up menu and allow users to select any of sections of the report before exporting.
Peer review
Before presenting our design to the client, we would love to hear further comments from experienced Saas users. After the peer review, we have the review outcomes as the followings.
Change the language of the platform to something users of the platform will understand and are easy to digest ie: ‘Growth Action’ - what does that mean in simple terms?
Simplify onboarding and make it fun. Make signing up ‘fun’ and ‘exciting’ and ‘they are stoked to be there on Growsure’ at first sign up
How can users stay engaged with data entry, which at the end just produces a PDF
Next steps
We have obtained valuable comments from the peer review. The following steps would be our approach.
-
Address the points raised from Design Review
-
User testing
-
Feedback to improve the learning portal
-
Continue to iterate and test terminology like “Pitch”
-
Build out to high fidelity prototype, incorporate the solutions from other teams and carry out user testing on the entire app.