AutoAnything e-Commerce Website
A Design Project for AutoAnything
Executive Summary
AutoAnything was a well-established e-commerce company, the website which was created for desktop was in need of optimization for mobile usage.
By launching a new mobile-first design, we were able to bring the content and control of the site in-house. This saved the company both money and time as well as giving the customers a better mobile and overall shopping experience.
THE PROBLEM
Mobile Site Sales Were Declining
Mobile usage was quickly increasing, but sales generating from the mobile site were going down.
With Google’s mobile-first index initiative rolling out, it was imperative that AutoAnything’s e-Commerce site be reconfigured from a fixed sized site to responsive.
THE PROJECT
Scope
Accomplish the first phase of converting the main e-Commerce site to be responsive, starting with the mobile breakpoint.
Timeline
4 months (2 week sprints)
Make of the Team
- CEO
- CTO
- Sr. User Experience Designer <—me
- Product Owner
- Development Lead
- Merchandising Manager
- Marketing Director
- Business Analyst
- Sr. Web Analytics Manager
KEY GOALS
Increase Revenue on Mobile
Bring the mobile content in-house before the contract renewal deadline with the third-party company that was transforming the existing desktop website into a separate mobile site.
Mobile Friendly Interface
Structure content in a way that encourages interaction, easy skimming, and purchasing by boosting customer trust within the shopping funnel.
THE PROCESS
Understanding the User
I started with identifying the primary and secondary personas that use the mobile site.
By extracting data from web analytics, we were able to get a better picture of how the mobile site was being used by our customers.
Researches and Price Compares Products on Mobile Devise
Primary User
Buys in store or online but always carefully researches purchases online (often on mobile device) first to ensure he is getting the best value for the price. Moves to the desktop experience for purchasing online.
Purchases Products on Mobile Device
Secondary User
More tech savvy than the primary user. Is comfortable making purchases (large or small) on a mobile devise.
Requirements Gathering
We met together and mapped out all of the global elements and pages that would need to create in order to accomplish this task.
I worked closely with the Product Owner, Business Analyst and Development Lead on identifying and ordering the priority and timeline to each task. This was a vital part of the project as it was going to be built on a new development platform.
Global Elements:
- Year/Make/Model Selector
- Header with Navigation
- Footer
Pages:
- Home
- Department Pages
- Category Pages
- Product Pages (3 templates)
- Shop Brand/Make/Model Pages
- Cart
- Checkout
Perspective Check
We decided to present our site and workflows to a local User Experience Design Meetup Group.
This enabled us to get feedback from local design experts in the San Diego area in a Design Critique format. We presented the desktop site as well as the existing mobile site experience.
The takeaway was a list of ways for us to improve the customer experience on mobile. This helped to verify the user workflow before designing and building it out.
DESIGNING A SOLUTION
Requirements Gathering
We met together and mapped out all of the global elements and pages that would need to create in order to accomplish this task.
I worked closely with the Product Owner, Business Analyst and Development Lead on identifying and ordering the priority and timeline to each task. This was a vital part of the project as it was going to be built on a new development platform.
Global Elements:
- Year/Make/Model Selector
- Header with Navigation
- Footer
Pages:
- Home
- Department Pages
- Category Pages
- Product Pages (3 templates)
- Shop Brand/Make/Model Pages
- Cart
- Checkout
Identify the Users Workflow
With a full user journey in mind, it helped us to figure out where friction is helpful and where it is harmful, to both the user and business goals.
We identified many different workflows. Customers journeys varied from gathering information, comparison shopping by brand and quality as well as price comparison shopping.
Key Take-A-Way
Many products that are on the site have multiple variants that need to be selected by the user in order to see the correct product and pricing to fit their needs.
Through user testing, it became very apparent that the amount of content that was on the current site, was overwhelming the user, especially on a small mobile viewport.
LOW FIDELITY WIREFRAMES
Product Pages
Creating low fidelity wireframes helped me to confirm and communicate the different global elements and page designs that were needed.
Below is a sampling of the pages that I created in Sketch.
HIGH FIDELITY WIREFRAMES
Category Pages
Creating high fidelity interactive wireframes helped me to confirm all of the content and behaviors that were needed within each page.
By making the ‘Filter By’ and ‘Sort By’ features more finger friendly in size, we found that our users were able to locate the products that they were navigating to much faster.
The category pages were a little more manageable since the functionality was working well, to begin with, but the layout was lacking on mobile. We needed to make it more operable on across different platforms.
I created larger product images and added white space for better readability and information retention. By adjusting the information hierarchy and layout on each page, it made the information easier for the user to digest.
1 - Responsive Banner Ads
- I worked with the Sr. Developer and Marketing Director on the creation of responsive banner ads so that the Marketing team could generate these so that they could be published in one action and be assured that it would be optimized for all platforms.
2 - Filter & Sort By
- ‘Filter By’ and ‘Sort By’ features are now more prominent and have better touch targets.
3 - Product Grid
- Cleaner product grid with larger images and less clutter.
4 - Checkboxes
- Finger-friendly sized selectors.
Product Pages
We were able to identify four product page templates that were used across the current site.
Each model supported thirteen different types of promotions (i.e., rebates, percentage off, hard markdowns, etc.). By identifying these, I was able to design and wireframe solutions to cover all of the different scenarios that we are required to support.
1 - Product Video Link
- Available product video link to show the customer how to install the product, or to show how the product can be used. This helps the customer in their decision making process.
2 - Product Image Carousel
- Larger product image size with a swipe action carousel is applied if there are more than one image available.
3 - Zoom
- Accessible zoom capability to view details of the product.
4 - Clear Steps for Customization
- Step-By-Step numbered instructions walk the user through the product customization process. As this process is critical, it can also seem daunting when trying to identify the proper customization. Walking the user through this process was the solution, in order to ensure their confidence level before purchase.
USER TESTING
Testing Before Development
A prototype was used for testing because we wanted to get feedback on functionality, interaction, and usability.
I conducted 1-on-1 user testing sessions with a total of 8 users in the AutoAnything meeting rooms. I formed a task based test and encouraged the users to ‘think out loud” as they moved through the prototype that we loaded on their phones.
I recorded the sessions with 2 cameras. One facing the user, and the other was attached to the phone in order to capture the users actions.
Test Iterations Findings
Based on the user testing sessions, we decided to make adjustments to the Year/Make/Model selector tool. This is a vital piece in the shopping experience, as many of the products that AutoAnything offers, are not available to all types of vehicles.
By making this step more predominant, users were able to identify their unique vehicle first in order to ensure that the product selection that displayed only contained qualified, relevant products. We found that it was easier for our users to make these selections by using the native UI components on their phones.
OUTCOME
Increased Revenue
By successfully implementing and launching a full mobile-first design for the site, the mobile organic search rate increased by 10% as well as boosting the mobile conversion rate up by 6%.
Mobile-Friendly Solution
With a simplified, cleaner and finger-friendly design, we were able to deliver a seamless and easier to use shopping experience for our customers when viewing the site on mobile.
We saw a 10% rate increase in mobile organic search when we released this update.
Mobile conversion rate went up by 6%.
TAKEAWAYS
Component-First Style Guide
We were able to achieve design consistency with a Component-First Style Guide. This helped the team and the product in many ways.
A Convenient Reference
This design system was located in one centralized place where we could easily see which elements already exist, which ones require revision and which do not exist at all. This allowed us to incorporate new developers into the project more efficiently.
Streamlined Workflow
It helped us to think not in terms of pages, but rather in terms of the project functionality split into small parts. This also benefits the users’ experience in keeping consistency within the interface while it is being used.
Common Dictionary
This was a great communication tool for us. It was not only a standard dictionary for us to use cross-departmentally but also a repository for us to use. It also showed how each component is applied individually and holistically.
Easy Testing
When all the components are in a common place, it makes it easy to test them on different platforms: mobile, tablet and desktop. We used ‘Frontify’ to build, collaborate on and house our design system. This system included a Style Guide, Pattern Library, and an Icon Library.
