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
01 Analyse
Market Analysis
User Testing
Persona
02 Redesign
Wireframing
Prototyping
Mock-ups
03 Test
User Testing
Feedback
Action
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.
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.
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.
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.
Two personas were created based on the user testing, initial UI, and discussions with the development team.
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.
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.
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.
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.
The main page had significant redesigns in response to the problems identified, these included;
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.
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.