Shreewd

As a UI/UX designer, I was asked to design a more refreshed look and feel for the manger administrative portal that improves store managers’ ability to easily associate & transaction insights at-a-glance and then determine employee training opportunities.
Our objective for this project is to design a clear, intuitive and compelling interface that satisfy accessibility and ease-of-use without compromising on aesthetics.

Client

Our Client has created a customer feedback platform to help retailers improve their customer experience by allowing shoppers to rate their interactions with store associates

Team

  • Me - UI/UX designer

  • Federico Marson - UI/UX designer

Tools

  • Prototyping - Sketch & Axure

  • Visual testing - Miro & Google forms

  • Agile methodology - Trello

Duration

April 20 - May 1

Five one-week agile sprints

 Approach

For this project, we applied the Double Diamond design framework. The two diamonds represent a process of exploring an issue more widely or deeply (Divergent thinking) and then taking focused action (Convergent thinking).

 
 
Double diamond1.png
 

Discover

Competitors Analysis

We have conducted competitors analysis on some of the current market direct and indirect competitors. Our key findings were:

  • Strong visual hierarchy

  • Large use of white space

  • Adaptable layout

  • Different colours for the content

  • Modern font

Competitors analysis.png

User Interviews

We conducted user interviews some of store managers and area managers to know their pain points and what they like in their current system. We have got very interesting insights from them, some them are

“It is hard to compare the team’s current figures to their last year figures to track their performance over time”
— Alexandra M, Store manager
“Not enough KPI information, having to do calculations by hand when they could already be on the system”
— Georgina T, Retail manager

 Define

 Persona

Based on our user interviews we have created a user persona Jackie Winters, to address our users goals and pain points

Original Screens

At this stage, we have started testing these wireframes which are provided by our client. Our key insights are

  • Navigation bar wasn't labeled clearly

  • They couldn't see best and least product performance

  • The store’s name were difficult to find

  • Data were difficult to visualise

  • They were not making sense

Original wireframe1.png
Original Wireframe2.png

 Develop

Wireframe Sketch V-1

Once we have all our finding we have started sketching first version. These were tested with our users and the key insights were

 
SketchV1-1.png

  1. Sub menu with location didn’t work very well

  2. Compare all store feature was misleading the user expectations

SketchV1-2.png

3. Good feedback on best and least performing products feature

4. Heat map of the store to show product position - users found it useful feature

*Sketches by Federico Marson

Wireframes Sketches V-2

We have iterated our sketches to show all the available branches of the store. To give managers an overview information about all the branches in one page

 
SketcheV2-1.png
SketchV2-2.png

*Sketches by Federico Marson

Moodboards

Before we start sketching our hi-fidelity wireframes we have explored different mood boards

Earthy.png

The inspiration behind this moodboard is to reflect target audience’s job like green plants which grow if they were taken good care

Geometric.png

The inspiration behind this moodboard is to reflect some characteristic of target audience’s job like bar charts, pie charts which were used to show in graphs.

 Logo

Later we have started exploring our logos. These are few ideas of logo.

Logo DRFAT GEO.png

Final Logo

Final Logo.png

High-Fidelity Initial Versions

At this stage we started developing our high-fidelity screens - tested them and iterated based on the feedback we got

 
OverviewV1.1.png

Version-1

In this version we are missing the sort by and filter option if the store has more than 6 branches

 
OverviewV1.2.png

Version -2

In this version cards are not clickable and the ‘stores’ at the top is not giving enough information

 Deliver

High- Fidelity:Final Version

Home Page - Store Overview

Home Page - Store Overview

Home Page - Menu extended

Home Page - Menu extended

View Graph Page

View Graph Page

Overview - St.Paul Branch

Overview - St.Paul Branch

Prototype

 
 

Future Recommendations

If I had some more time to work on this project, I would like to work on

  • Employees page - Where manager can see employee performance and give them training if they needed

  • Sales overview - Where a manager can see the graphs of all the products

  • Feedback Page - Where a manager can see the feedback given by customers and take the action if there are any negative feedback

Previous

Find Physio
Next

Vente