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.
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 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.
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.
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.
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.
PERSONAS
Two personas were created based on the user testing, initial UI, and discussions with the development team.
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.