UI DESIGN - 6 MIN READ

Made the employees
management easier

THE PROCESS
FINAL DESIGN
OVERVIEW

The Challenge

Gorilla Graphs, is a platform for store managers. My team was asked to design a more refreshed look to further differentiate the platform and improve the managers’ experience through an administrative portal.

The Problem

Store managers, as well as upper management, need a dynamic interface that can display customer feedback analytics to identify areas of improvement and examine the relationship between customer experience and sales. (Provided by the UX team)

My Role

I was involved in the research, synthesis, ideation, prototyping, animation, testing of the platform, and presenting our weekly progress to our stakeholders while keeping them engaged.

THE TEAM

Ben Harrison
Piyush Bhaakhariya
Emi Bulai

TOOLS

Adobe XD
Sketch
Adobe Illustrator
Adobe Photoshop
Miro

DELIVERABLE

Domain Research
Competitive Analysis
User Interviews
Annotated Wireframes
High Fidelity Prototypes
Style Guide

The Approach

We had four weeks to design the look of the platform. We chose to adopt the double diamond method. This means that we first discover and define the problem we have to solve after we continuously develop, test, and iterate until we have a final product.

DISCOVER

DOMAIN RESEARCH

Become an expert

To create a great user interface and run productive user interviews we had to first understand the domain.

VISUAL COMPETITIVE ANALYSIS

Market research

We conducted an in-depth competitive analysis to identify the best practices in data visualization and if there are any opportunities to improve.

Portrait images with lots of illustrations.

Simple, fun and modern with enough white space

Charts & Graphs in vibrant colours.

Well organised with good use of space and cards.

Friendly with good use of cool colours.

Professional, minimal and organised with good use of grid.

DEFINE

SYNTHESIzING

Design principles

Using the data we’d collected from our research, we began synthesizing it all into design principles that we had to follow in order to create the best look and experience for the users.

WIREFRAMES ANALYSIS

What can we improve?

We were given some previously created wireframes, that we evaluated to assess if there were any issues with them. We wanted to make sure that there was consistency in the rules of the layout and see if there are things that we can improve upon.

DEVELOP

VISUAL EXPLORATION

Mood-boards

I crafted 3 different mood boards that helped me get the feel of how the interface should look.

Style tile

To help users better visualize how the interface would look like and collect valuable feedback, I created a few style tile based on the mood boards.

SURVEY

What users think

We run a survey to see which of the style tiles looks the best for the users, what we can improve upon, and what visual direction we should take based on their feedback.

Iterations

Based on the recommendations we got from our users, I started to iterate on the style tiles and create a final look that we will apply to the wireframes.

MICROINTERACTIONS

Wow, it moves

Micro-interactions are a really good way to make the platform more dynamic and engaging.

TEST

PROTOTYPE TESTING

A few more changes

After putting everything together we were able to create a prototype for the users to test and have them provide us with feedback.

GORILLA GRAPHS

FINAL DESIGN

Colour palette

This is the main colour palette but all the secondary colours can be customised by the user.

#2C2C2C

#F87D3D

#67C1F3

#FCFDFF

Typography

The typography had to be simple, easy to read, and professional.

Iconography

The iconography had to be bold and expressive.

SCREENS

Mobile

Desktop

CONCLUSION

Takeaway

What I learned

When it comes to a project, I felt it is much better to work in a team rather than as an individual. While working in a team, it is easier for us to brainstorm different ideas and give each other constructive feedbacks which is a rather hard thing to do while you are working individually.

Lastly, I learnt that we need to take input from someone isn’t that part of your team and having SME to interview and test is crucial because we, as a designer, might think we know what exactly is best for the user but that is not true. That’s why an outsider’s opinion is needed.

NEXT PROJECT

UI/UX DESIGN, BRANDING - RESPONSIVE WEBSITE

Subly - Increased the signups rate for AI generated subtitles

READ THE CASE STUDY