OVERVIEW

PROBLEM

A new GPS tracking device was using an outdated and unusable UI, this needed to be de-constructed and re-designed due to a range of issues reported.

Perspective-Web-Screens-Mockup

MY ROLE

UX Designer, UI Designer, User Testing lead, Animator

LENGTH

2 Months

TOOLS

Sketch, Invision, Illustrator, Photoshop, After Effects

TEAM

Cambridge Consultants

 

PROJECT PROCESS

01    Analyse

Market Analysis

User Testing

Persona


02   Redesign

Wireframing

Prototyping

Mock-ups


03    Test

User Testing

Feedback

Action


 

MY CONTRIBUTION

My role was the lead designer on re-designing the UI, and all of the steps along the way, including user testing and animating assets.

ANALYSE

EXISTING PRODUCT DECONSTRUCTION

It was important to understand what was wrong with the original UI, this was found out by several rounds of user testing, combined with pre-existing complaints, and opinions from other designers, the findings are shown below.

Intro

INTRO PAGE

  • The white text on a largely white background was hard to read.
  • Button spacing is too large.
  • Illustration doesn't match branding.
  • Font is large and somewhat unproffesional looking.

INFORMATION PAGE

  • Having to hover over each box to read the information is not intuitive and makes it harder to find out the information.

  • Graphics are not consistent and do not match.

  • Spacing is too small.

Info
Selection-Page

SELECTION PAGE

  • Hover and select states are not clear
  • Illustrations are cartoonish
  • Input field is not lined up properly.

MAIN MAP PAGE

  • Important information is not shown clearly enough
  • Map icons are not clear
  • Icon and text spacing is too small
  • Inconsistent spacing
  • Relevant actions are not grouped
  • Map is missing important information.
Main-Map-1

INTERVIEWS & JOURNEY MAPPING

Once the new design had been mocked up and a basic prototype was made in invision, it was an important stage to now user test the new design to see if it improved on the old one. These user tests were conducted with 5 people who knew nothing about this project or the original UI. The results were then collected and the relevant changes were then made to the UI.

Find-User-Testing-Google-Docs_Page_1
Find-User-Testing-Google-Docs_Page_2

The results from the user testing sessions are shown below. They were grouped into complaints and successes, andeach complaint contained information about what page it appeared on, and how many out of the 5 people mentioned this complaint.

Painpoitns
Good

PERSONAS

Two personas were created based on the user testing, initial UI, and discussions with the development team.

 

Asset-20@2x-100
Asset-19@2x-100

DESIGN DEVELOPMENT

Initial re-designs were sketched and mocked up, I then showed the sketched concepts and scenarios to potential users and other designers, and asked them about their feedback and opinion on the designs. Below shows the iterative design process that each screen went through to reach it's final design.

LANDING PAGE

The initial landing page had several versions, the changes on this page were mainly aesthetical once the interaction had been re-designed, several illustration styles were tried.

INTRO SCREEN

The information page had the illustrations changed, the text was made easier to read, and the text was shown straight away rather than having to hover over each one.

SELECTION SCREEN

The selection page trialed several different modes of selection, and different modes of inputting the name of the device, as well as sizing and aesthetical changes.

MAIN MAP SCREEN

The main page had significant redesigns in response to the problems identified, these included;

  • Aesthetics to match the rest of the design
  • Illustrations updated to be modern and less complicated
  • Relevant actions grouped together
  • A header added for easy navigation
  • Excess useless information removed
  • Relevant information added to each device

INFORMATION PAGE

The information was created as a response to some users wanting more detailed information about the device, but not being forced to click through it. This went through several aesthetic and layout iterations.

WARNING INTERACTION

An important issue raised by the development team was how quickly the battery of the device can drain once on, so it's crucial the user knows that battery drain is occuring once something was selected, this warning was very important, so it was crucial to test the best location and layout of the warning, to see which one was the most easily noticed.

The final UI is shown above.