Bettina de Beer
UX Design & Research
CASE STUDY:
Toyo Tires Website Redesign
Toyo Tires wanted a more current website that would respond to the size of the screens their users were viewing their site on. They wanted their site to look tough and rugged just like their off-roading customers and the racers they sponsor.
​
DISCOVERY
My Tasks
Data Analysis
Going through the Google Analytics from their existing site, provided me with trend data on which pages of the site are the most visited and an idea of which pages we may not need any longer.
Competitor Analysis
The team took screenshots of Toyo Tire's competitors and posted them in our team work room. This allowed us to see our favorite sites side by side and gave us easy access to look over the pages of sites we liked whenever we needed to.
Client Interviews
To get a good idea of what goals our client had for the site , our team held work sessions where we could run through the existing site, establish what the client likes and dislikes, and ask the questions that ensure we all on the same page.
My Deliverables
Establish Guiding Principles for the redesign
-
A destination for enthusiasts – ToyoTires.com is in the know. They are connected to their community. Membership is a lifestyle choice for those seeking performance, premium quality, and value.
-
Immersive storytelling – All or Nothing is our mantra for expressing the spirit of fast, fun, cool
and awesome. Express All or Nothing through visceral storytelling. Highlight the benefits first,
followed by product features and enabling technologies. -
Easy navigation – For novice or educated shoppers, Toyotires.com guides audiences through content
in connected, natural ways to create cohesive stories and simplify research. -
Best in class functionality – ToyoTires.com delivers content and features across multiple experiences, tailored for their audience’s needs.
Personas
Iggy, age 18–34
-
Tires are for ultra-high performance use
-
Has discretionary spending for tires
Max, age: 29–49
-
Aspires to be Iggy
-
Displays “tuner” attributes
-
Tires are primarily for aesthetic purposes
-
An asphalt cowboy
Bob, age: 25+
-
Tires are for a utilitarian use
-
Irregular tire researcher
-
Can afford a purchase with little research or notice
They also had dealers coming to the site to look up information
on the tires they are selling.
Usability Test Results
With the information gleened from the analytics and competitor sites, the UXers on the team put together a reverse card sorting exercise using an online tool called TreeJack from Optimal Workshop. We used the resulting information to discover how people who fit our personas would best find the information they are looking for.
DESIGN PROCESS (on a 2-week sprint cycle)
My Work
Sitemap
The sitemaps that I create for larger projects are not only used to list out the pages of a site, but are also used as a numbering system for coresponding deliverables down the line. In this case we added links to pages on the staging server on the sitemap so we could navigate through the pages before there is an established site navigation built out.
An intial sitemap with notes:
Wireframe
The wireframes included the template layout used for each page type as well as the design of the features and components that existed throughout the site. Typically I have annotations included within the wireframes. On this project, the whole team resided in one large room so communication was good and the annotations were not always needed. In situations where things weren't as clear for the client we created simple prototypes.
The client wanted to have a large table that was responsive. This took a lot of trial and error, but we managed to come up with a table that will expand horizontally when the "Show full specifications" link is clicked and expands vertically when a wheel diameter tray is clicked. See table in action on site.
When the table is viewed on a mobile device or tablet, the table becomes more of a list.
When the table is viewed on a mobile device or tablet, the table becomes more of a list.
Collaborative Whiteboarding
We spent a lot of time near a whiteboard with the UXers, Designers, Developers and often times the client, working out concepts quickly.
Prototype
This project was extremely fasted paced, so we couldn't prototype everything. But there were some times when it was required to help the client comprehend the functionality.
FINAL IMPLEMENTATION
Toyo Tires Website
Tire Company homepage - click image to see more
Tire Company full homepage - click image to see more
Tire Finder Feature - click image to see more
Tire Company homepage - click image to see more