devices2.jpg

TrackR Homepage Redesign (UX Design)

The TrackR website was in need of a redesign. There wasn’t scope for a full redesign, so I needed to work one page at a time. The homepage was the top priority as it received the maximum visitors. I’ll take you through the refreshed homepage and how it was designed.

 
Responsive redesign of TrackR's homepage

Responsive redesign of TrackR's homepage

OVERVIEW

Problem

The TrackR homepage was in need of a redesign as it did not showcase what the company does, it's products, features and other programs that they offer. 

Opportunity

The goal is to increase the conversion rate and user engagement with the website, while also increasing the users' comprehension throughout the following processes: learn about the company, learn about the product and its features and then convert them to customers.

Solution

Our aim is to provide TrackR with a clean design solution for their homepage by creating hierarchy of information and organizing content that is easy to parse through for the user. We reorchestrated the information architecture, enhanced the user interface, and user flow. Now, users are presented with a visually pleasing and easy-to-use homepage where they can learn about the company, get an overview of the products and be able to purchase it from the homepage itself.

Before and After design comparison

DISCOVERY THROUGH RESEARCH

Every solution begins with the discovery of the problem. We began by asking questions. What does TrackR have to offer to its users? What sets them apart from their competitors? Why should users buy TrackR products? In order to find where the problem lies, we conducted usability testing on the existing website to observe and pinpoint users' behaviors, pain points, and preferences while navigating through the website. 

Testing the existing design

Testing the usability and design of the existing TrackR homepage was an important first step for us to understand where we want to set out to research. Having users navigate through the website helped us discover what is working and what is not. 

Competitive Analysis

Looking at a few brands out in the market, we compared their homepage against TrackR. We asked users to walk us through the competitors website such as Tile and Chipolo and tell us about what they liked or did not enjoy about it. This helped us understand what works for the users and what would make their whole experience pleasurable. 

...the icons help me understand how the product works... I hate to read, so this works for me...
...a quick overview of the products available gives me an idea of what the company has to offer and helps me make an informed decision

Feature Analysis

DEFINING THE PROBLEM

From our user research and usability testing with startup employees, existing customers and new users, we identified three areas where users were having most trouble with:

  • Product discovery - unable to locate information on all products 
  • Understanding product features and function
  • Terminology and imagery that was confusing and misled existing customers

DESIGNING THE SOLUTION

Initial Sketches

Taking the Mobile First approach, we designed wireframes for mobile screens first taking into account what we had learnt from our research and then translated these into desktop webpage wireframes using Axure.

Wireframes

We conducted initial testing using the following wireframes which gave some more insights

Iterations of wireframes for mobile website

Annotated Mock-ups

Annotated mockups of desktop website

Mobile website mockup

Mobile website mock up