The Situation

Background

I was fortunate to work for a start-up called TrackR and help them redesign their website. Their business and user goals focus on providing peace of mind to their customers by eliminating the stress and frustration that comes with losing important items such as keys, wallets, and purses.

The Problem

When I joined the team the big project going into Q4 was to redesign the website and the app experience. At the time the current user experience was not only confusing and visually unappealing, but it was also inconsistent between the website and the app.

Also to make problems worse, the way users interact with the product was confusing, causing users to lose faith in the company and its products.

Examples of Old Website

Solution / Goal

Because there were so many issues with the website, we ended up working with a number of outside agencies to get a head start on the redesign. The idea was to get a new website finished by the start of the holidays and make it easier for people to learn about, and purchase the product.

By working with the agencies, fellow designers, stakeholders, and users, I was able to use my UX/UI design process to assist in the website redesign and push future designs in a more user centric direction.

I was privileged enough to help out with the Homepage and the How it Works page designs but was really lucky to be able to design the Corporate Sales page, the Partnerships page, and the Press page on my own.

User Research

User Surveys

Thanks to our Insiders Coordinator we were able to run User Surveys to better understand what people knew and didn't know about our product. The surveys helped us create Business and User Goals and helped us figure out what our old website was failing to communicate.

Example of User Survey (Click to enlarge)

Business Goals / User Goals

Based on the User Survey and User Interviews, we created specific Business and User Goals for each unique webpage experience.

The pages I specifically worked on were the Corporate Sales page, the Partnerships page, and the Press page. Below are the Business and User Goals I created for each webpage.

Corporate Sales Page Goals (Click to enlarge)

Partnerships Page Goals(Click to enlarge)

Press page Goals (Click to enlarge)

User Personas

We then created User Personas so we could have an overview of who we were building these experiences for. We created them so they would be an example of a user who would not just interact with the website but with all of our products.

It is important to never forget who your users are and by creating personas it makes it easy to stay empathetical and keep designs on track.

Three main User Personas (Click to enlarge)

Wireframes

Initial Mockups

Our next task was to sketch out some wireframes for each page. Taking the business and user goals into account, each page had to be crafted specifically to meet the pages' goals. This required us to draw out many different ideas for each page and see what worked and what didn't.

Examples of Notebook Wireframes (Click to enlarge)

Digital Wireframes

We ended up taking the best components from each collection of wireframes and used them to create digital versions of each page's ideal layout. We used both Sketch and Axure to create these wireframes, Axure to get the ideas down and Sketch once we felt we had something good to build off of.

Example Wireframe: Press Page

Once the digital wireframes were done we could then use them to run Usability Studies and see if the basic layout was intuitive enough for the users to accomplished their goals.

Visual Design and Developer Handoff

Style guide

Because we were working with multiple agencies we had to make sure the pages they were working on matched the pages we were working on. We came up with a new style guide that would let all the parties involved in the redesign know what new pages should look like and keep things consistent across the board.

External Facing Styleguide for the Website

Along with each section we included a link to our digital asset management system. This way if any of our agencies or partners needed any of the digital assets they could simply go to the website and grab them.

Developer Handoff

We constantly communicated with our developers to make sure they understood what the goals were for the new webpages. We used InVision, Zeplin, and Jira to show both CSS specs as well as to provide assets they needed to build out the pages.

Zeplin Screenshots (Click to enlarge)

Final Product

Corporate Sales

The first page we were able to finish was the Corporate Sales page. The key improvements that we made were to,

• Change the styling to match the homepage and how it works page.

• Update the iconography to better communicate the product features to the user.

• Redesign the form so it was simpler and less confusing to potential clients.

Click to enlarge

Partnerships

Next we finished the Partnerships page. Just like the last page we made some very important improvements that included,

• Matching the style to the homepage and how it works page.

• Improving the layout of the content so that everything is balanced and easy to read.

• Redesigning the form so that it was a good balance between making it simple for the users and providing the partnerships team with important information.

Click to enlarge

Press

Finally the last page we finished was the Press page. This page was the hardest and the most fun to redesign. We redesigned everything including,

• Created a new layout that matched the styling of the other pages and simplified the overall experience.

• Made the page intuitive and easier to navigate as well as easier to interact with.

• Created a more tailored way for the Press page stakeholder to edit and control the content on the page.

Click to enlarge