top of page

UI Design of

the Saas Platform

See also

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

THE DESIGN PROCESS

Defining the problem statement

Competitor Analysis

Ideation & MVP

User flow

Hi-Fidelity Wireframing

UI Design &

Prototyping

Peer Review

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.

mag_glass_2.png

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

magnifying-glass-g0ca0537a4_1280.png
Cute Girl

HOW MIGHT WE

 

 

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.

crazy 8s growsure.jpg

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.

Untitled - User Flow - First time users V1.jpg

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.

logo growsure.png
UI 2.jpg
UI 1.jpg

We designed the UI kit with matched colours and fonts accordingly

Standardizing the layout

We fix the problem of consistency by standardizing the layout, fonts, shapes and sizes of buttons.

layout.png

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.

menu_retracted.jpg

Expand / collapse the menu by click the arrow

menu_expanded.jpg

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. 

Report 1.jpg
Report 1.jpg
Report 1.jpg

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.

nat_1.jpg
nat_4.jpg
nat_2.jpg

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.

LTR.jpg

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.

report_gen.png
Reports.png
Business Meeting

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.

bottom of page