Roots Mobile Web Redesign
Context
During the COVID-19 Pandemic, most stores including Roots Canada relied on e-commerce to be their main source of sales. Roots needed to increase its mobile experience to increase the amount of sales to counter the decrease in in-store sales. Our class was responsible for the ideation, research and implementation of a newly redesigned mobile web design to increase mobile revenue in their stores. I was personally in charge of redesigning the product page and adding a better order-tracking feature.
Role
Product page & Order Tracking
Page Researcher & Designer
Timeline
4 Months
Team
8 Researchers and Designers
Summary
The purpose of this study was to create a fresh design for mobile users when shopping at Roots Canada to allow for a better user experience for consumers while also helping the company in those tough times. Adding scarcity elements allowed users to know how many products are in stock while also increasing online sales for Roots by persuading shoppers to buy products that may be sold out soon. Designing a new order tracking and order pick-up feature, allows users to feel comfortable knowing they can have a stress-free delivery or pick-up process.
Creating a mobile extension to benefit all
Idea Synthesis
User Experience Design in Organisations
During my education at Humber College in the Bachelor of UX Design program, I was given the opportunity in my third year to redesign Roots Canada's mobile web store. Each student in the class was in charge of a certain area of the site to redesign while working in teams to create a seamless design across the entire redesign. I was in charge of adding a design tactic to their product pages and creating an order-tracking feature for delivery and pick-up options. I thought to myself, "How can I design a feature that is intuitive and stress-free for the user?". The answer was to take inspiration from other popular online shops like Amazon.
Bridging the gap
New
Familiar
The Problem
The pandemic moved all shopping to the internet
With COVID-19 on the rise in Canada, the country went into lockdown with many, if not all, shops closed down and sold their products strictly online. Roots was no exception, so they decided to have us redesign a mobile web extension for online shopping. This was due to them finding out that a lot of their customers turn over rate was the lowest for customers browsing on mobile platforms rather than desktop. Roots needed a new mobile site that would help their mobile users complete their purchases rather than just browse and leave their site.
System Goal
A mobile site for the mobile consumer
The redesign aimed to allow customers to quickly find the products and information they need quickly and efficiently. Smartphones allow users to find information quickly while they are on the go, meaning that the mobile e-store is needed to allow users to gain the information they need quickly. In turn, this allowed users to spend less time browsing and easily check out with all the information they needed. Traditionally, checking out online requires time to fill out fields and scan for info, while being on a desktop allows users to generally be more relaxed and have more time to do this. However, a higher percentage of mobile users are trying to complete the steps of browsing and checking out quickly. Not only this, but the pandemic added another "curbside pick-up" function which only added another step to the checkout procedure. We aimed to have this redesign allow users to comfortably and quickly go through the steps of purchasing Roots products on a mobile phone confidently.
System Ideation
Creating ideal product and tracking pages
To accomplish this goal, I wanted to create a product page that doesn't make the user feel like they have to learn something new. The user should be able to find the product easily but gain other information easier. Allowing users to see the stock of the product they're viewing easily allows them to decide to make a purchase quickly. Adding scarcity elements pushes users to purchase what they want while increasing the revenue stream for Roots through the mobile platform. Also, creating an order tracking page allows users to shop confidential knowing exactly what step in the process their product is in before reaching them. This allows users to feel good about the process which increases the experience they have, improving the odds they purchase products from Roots again on the mobile platform.
Originally, product options that were sold out were completely removed from the product screen. This would not allow the user to know if there was another colour they liked that would eventually be back in stock. Nor, would the user be able to see if their size is even offered by Roots as they would not know if it's sold out or not offered.
To mitigate this issue, I designed the product options to have a cross through them allowing the user to know that the items option is available. This would allow the user to periodically check if what they are looking for becomes available instead of giving up on purchasing the product completely.
Adding a scarcity element allows users to decide on purchasing a product right away instead of waiting and potentially forgetting to make the purchase later on. Beside the "quantity" function, I decided to place an element that would allow the user to see if the product they are viewing is low on stock. This would potentially push the user to decide to purchase the product if they thought that it would not be in stock again for a while. This allows Roots to persuade the user to decide to buy a product ultimately increasing their revenue.
An order status page lets users know exactly where their products are in getting to them. This feature can ease the mind of customers creating an overall better experience which can lead to future purchases through the mobile site. Having visual steps customers can see to gauge where their products are in the process allows them to shop confidently and not feel left in the dark guessing where their products are and when they will arrive.
Design Decisions
How do we make mobile shopping easier?
We need to design a mobile store to decrease the amount of cognitive load for the user. By creating a UI that is softer, we can allow the user to be calm when asking for a lot of user input. In addition, giving the user more information in a strategic way, mitigates questions the user may have when shopping, for example; "Do they even stock my size?", "Is this product popular? Will they sell out soon?", "What are the steps to purchase for pick-up?", "When will my order be delivered?".
Softer UI
Sans-Serif Font
Using a sans-serif font keeps the UI simpler allowing the user to scan text faster and gain valuable information easier.
Font Weight
The font-weight is light which also decreases the amount of cognitive load on the user ultimately increasing the end user-experience.
Soft Corners
Another design tactic we used to decrease cognitive load is using rounded corners on buttons and other elements. This is due to research showing that rounded, compared to sharp corners, are easier for users to process visually furthermore increasing ease of use.
Limiting Colour
By limiting colour usage to greyscale and Roots branded green, we can let the user focus on the product image, the navigation header and the add to cart button. This reduces the amount of cognitive load on the user while allowing their eyes to focus quickly on the important elements.
Scarcity
Scarcity Element
We added a scarcity element which shows the user how much stock of a certain product is left. We added this element to try to increase sales on the mobile platform as it would push users to decide to purchase now instead of waiting until a later time and potentially forgetting before the product sells out. Not only does this element help increase sales but it also allows the user to gain valuable information about their favourite products easily.
Curbside Pick-Up
Curbside Pick-Up
Adding a curbside pick-up function to the online shopping experience allows users to have the closest experience to in-store shopping. The order progress page once you purchase a product, allows the user to know exactly where their product is in the process of pickup.
Call Button
Having a call button that displays the phone number for the store is a crucial decision made solely for ease of use. Displaying the number benefits the user by being able to type the number into their phone if they are currently on a desktop. To state another benefit out of many more; having the number displayed allows the user to view the number from a screenshot if they cannot access the internet when not connected to Wifi.
Traditional Shopping
When customers go into the Roots store, they know exactly where their product is from the moment of finding it, picking out the size and colour, purchasing the product, to heading home with their product.
Familiar UI
Step-by-Step
Just like shopping in-store or online for pick-up, we want users to know where their product is at all times. Adding a progress bar allows users to visually gauge how long their product will take to get to them. Adding in details like the date and time for each step adds a sense of security for the user further easing their mind when making online purchases.
Contact Us
The contact button allows users to gain reassurance by talking to a Roots associate if they have any questions or concerns regarding the delivery process of their orders.
Why Amazon?
With 2.6 billion visitors every month, Amazon has become the most popular eCommerce store in the world. With that said, there shouldn't be a question as to why we used their order-tracking function as inspiration for Roots. We wanted users to feel comfortable with our delivery process which makes familiarity important for this function.
Project Challenges
Designing for a pandemic, in a pandemic
There were many challenges during this project, one of which was that this was our first class project for a client where we had to all research and design different things and come together to make the final product seamless. However, the biggest challenge for me was that we had to create a solution for the client to move completely online due to the pandemic, during the beginning of the pandemic. During those uncertain times, no one had an understanding of what COVID-19 was and how it would affect our daily lives. Completely redesigning Roots to move from having an in-store and online store to a complete e-commerce platform was a huge challenge. This was due to not knowing what measures were going to be put in place and what could change over time. Using Amazon as inspiration meant we were decreasing the chances of having to change our design over time as it had already been proven to be the number one online store before the pandemic began. Also, moving from working in person to being able to only collaborate online posed a huge challenge for us as it was a first-time experience for everyone. Even though working remotely posed a challenge, we were able to overcome this challenge by using all the online collaborative tools available not only allowing us to work together flawlessly but also honing our skills to work online allowing us to create a seamless prototype for our client in the projected timeline.
An e-commerce experience to shop with confidence
Final Product
Seemlessly switch from in-store shopping to online shopping with ease.
