This project was conducted as an exercise to explore the best practices and solutions in an e-commerce product.
It was developed to “learn to make strategic and intentional decisions under constraints”. E-commerce have an average return rate of 30%, more than the return rate for in store purchases.
With this knowledge, it is important to take into consideration that if the business is looking to have conversions and return, It needs to be user friendly, anticipating their needs and deliver an enjoyable experience.
Sunbeams
An e-commerce to make the purchasing
experience smooth and easier.
This project plan was created as a blueprint and timeline of how I conducted the Capstone.
Problem
Sunbeams is an ecommerce company that sells apparel and accessories for kids on their mobile-web experience. They need to enhance their browsing and checkout experience to greatly improve their product’s usability. Their business goals are to improve the conversion from browsing to checkout to increase revenue on the product’s mobile-web experience.
Important Information from the Product Manager:
●The data shows 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart.
● Additionally, 70% of users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page.
Solution
To provide an easily navigable, understandable platform to move from point A to point B, and increase engagement and conversions, allowing the user to determine which product is best based on the relative features, based on the data problems provided, and offer guest checkout to ensure the user moves forward with the purchase of the item.
Tools
-
Miro
-
Marvel
-
Adobe Illustrator
-
Adobe XD
My Role
-
UX researcher
-
Illustrator
-
UI designer
Timeline
-
Overall: 4 weeks
Design Process
Competitive Research
This research was conducted to appreciate how companies that utilize e-commerce for their business manage their checkout process.
In order to understand the products, a quality and quantity research was evaluated.
A heuristic evaluation was conducted as well, to find any usability challenges in the products that are being evaluated. Considering the nature of the project, I considered the nature of the product when adopting the Nielsen heuristics in the evaluation.
Evaluated products: Target, DSW, Ikea
Target
To help all families discover the joy of everyday life.
Mission: The promise of surprises, fun, ease and inspiration at every turn, no matter when, where or how you shop.
Quantitative Analysis
App Store ratings 4.9/5.0
Qualitative Competitive Analysis
Strengths
-
The product delivery/pickup is very straight-forward, making it easy to come to decisions and further selections.
-
It provides access to a variety of available products and, when selected, their app gives accurate information about inventory.
Weaknesses
-
Once in the cart, the checkout requires you to sign in, meaning a Target account is required at this point.
Heuristic Evaluation
Visibility of system status
From the discovery screen to the checkout screen (this being the last step in the process.) The user journey is clear, and the steps to get to there are clear. The CTA’s are clear and provide the user with clear next steps.
★★★★★
Aesthetic and Minimalist Design
The UI design is well thought out, complying with web accessibility requirements. Even though it contains a lot of information, it is organized uncluttered.
★★★★★
User Control and Freedom
Supporting undo and redo in the product is available. Removing items from the cart, for instance, is clear. An account is needed to checkout, and the message is clearly displayed before the last step of the journey.
★★★★☆
DSW-Designer Shoe Warehouse
Through our values of Passion, Accountability, Collaboration, and Humility, we're on a mission to be the #1 place that America turns for shoes.
Quantitative Analysis
App Store ratings 4.9/5.0
Qualitative Competitive Analysis
Strengths
-
It offers the user plenty of promos and deals accessible from the Home Screen.
-
As the DSW business model is all about offering users the best deals to purchase their products, a “rewards & offers” text space is available first thing after accessing check out.
-
Frequently bought together” included in the checkout. Order summary is very complete with plenty of payment options. Guest checkout available and not necessary to sign in.
-
Option to opt-out of newsletter and other information.
Weaknesses
-
The first screen displays the deals, however the user needs to navigate through the clearance buttons to get to a product. The search bar is available, but isn’t very user-friendly to casual shoppers who aren’t yet sure what they wish to purchase and aren’t ready to see deals.
Heuristic Evaluation
Visibility of system status
The delivery system status is shown in the user status, loaders, and notifications throughout the product.
★★★★★
Aesthetic and Minimalist Design
The chosen color palette is consistent, including all errors and successes. The spaces and sections per screen are clean, and the overall UI design is appropriate for the amount of information that is presented throughout the app.
★★★★★
User Control and Freedom
All alerts and “emergencies” are clear. Example: when adding a discount code to a product that does not apply, a clear “(!) you have not met the requirements of the offer” appears.
★★★★★
Ikea
“To create a better everyday life for the many people.”
Quantitative Analysis
App Store ratings 4.7/5.0
Qualitative Competitive Analysis
Strengths
-
The purchase section is straightforward, with no need to scroll and scroll to get to the product information.
-
It has the necessary content to get information about the product.
-
Once in the cart, the checkout process is pretty simple, offering just two payment options.
-
The guest checkout is pretty straightforward as well, requiring the necessary information and order summary.
Weaknesses
-
Being Ikea, a large retail company, the product offering is very large, making it challenging to find a specific item.
-
The product requires several updates in short periods of time.
Heuristic Evaluation
Visibility of system status
This product, like the business, is very clean and organized. Buttons, status and bars are available in an organic, logical way. Users can navigate the product, understanding it as they go.
★★★★★
Aesthetic and Minimalist Design
The UI design is very clean and not chaotic at all. The neutral colors add to the minimalistic style, and the focus is clearly on the product.
★★★★★
User Control and Freedom
When mistakes are made, the user is able to undo, the solutions provided are clear and arranged in a way that makes sense. Any mistakes and errors are clearly marked.
★★★★★
Findings
I now had an understanding of the journey I wanted my user to take. With the Jobs-To-Be-Done framework as a research synthesis, I used qualitative research to identify the goals to accomplish when using Sunbeams. In accordance with the JTBD framework, I sorted the jobs into two categories: main jobs and related jobs, because I wanted to think about the tasks users may want to accomplish to ensure a smooth checkout process.
Sorting the jobs into categories will allow me to have a better scope of where I want to take the product. Main jobs (checking out as a guest checkout) while navigating related jobs (have access to different products allowing the user to consider moving those to cart)
Interviews - Phase 1
During the ideation phase of the project, I conducted user interviews to better understand my clients and to inform the design. The main objectives that influenced my questions were based on the idea that "customers don't buy products; they ‘hire’ them to do jobs," as the JTBD framework stipulates.
For this first phase, a total of 3 users were interviewed, and I asked them questions that included their experiences purchasing in brick-and-mortar businesses versus their experiences when purchasing online. The findings were utilized to set my goals and constraints, as well as settling on my ideal customer through an ideal customer journey.
"Any time of the day is gold to purchase something online".
Constraints
What blocks the consumer from achieving or maintaining their goals?
Jobs-to-be-done
Customer Profile
High Fidelity Wireframes
Feedback
Based on the tasks provided to the users, some of the feedback that was more common included:
Find some inspiration: “Purchase was made from ‘top of the line.’ No option to click on ‘get some inspiration.’ I would make it more visible.”
Overall experience with the product: “Easy with desired result speedily attained”
What did you like the most about using this product?: “The ease of use as well as the colorful layout.”
What, if anything, caused you frustration?: “Everything looks fine and easy to use, but if I want to delete the item from the basket, will I change through quantity? I think you need to add a size guide.”
Improvements
Based on the results from the user testing, many changes were applied to the prototype.
Some of the alterations included comments about the inspiration section, the timing from the splash screen, the pop up window displaying the product, and resolving some issues that weren't present in the usability testing such as red routes for the cart screen i.e seeing the list of items in the cart, removing items, small animations.
Learnings
I really enjoyed discovering different ways to deliver an e-commerce product, knowing what a great purchasing experience is and really honing my understanding of how to sell a product, as well as the multiple ways to deliver results while allowing the user to have an enjoyable experience when purchasing a product.
Thank you for reading my case study!
Want to work with me? Feel free to contact me! ...or just say hello on my social media.
***
Considering the comments and responses from the users I interviewed, I translated their needs as customers to have a better understanding of their expectations and created a customer journey.
Goals
What types of progress do consumers want to make? What are they trying to avoid?
Information Architecture
In order to establish an organized and effective structure for my product, I created user flows and sketches that would help users to complete specific tasks.
Low Fidelity Wireframes
Based on all the previous information from the interviews and goals and constraints, and based on the decision-making process of the customer, I designed the low-fidelity wireframes to start setting up the product.
User Testing -
Low Fidelity Prototype
I interviewed 5 candidates for the Sunbeams User Testing sessions that fit into the target demographic (busy parents who prefer to purchase online.) The interviews were conducted remotely and lasted about 30 minutes.
Main task
To select a product and complete the purchasing process.
Direction
-
From “Top of the Line” shop for a product that costs $14.99
-
Select size 4 and qty 1
-
Add to the cart
-
Checkout and fill out the form
-
Select Delivery option $4.99
-
(Billing address is the same as the shipping)
-
Fill out contact info
-
And proceed to pay for the product.
Results:
In general, participants navigated the prototype smoothly and there was a positive reaction to the product. However, there were some comments about the design in some screens, and the checkout process.
The goal was to provide the user with an easy guest checkout process, avoiding hidden newsletter subscriptions, or other hidden selections.
Some of the comments included:
-
“I think it is necessary to include a pop up when you check out to advise the user that an item was placed in the cart”
-
“I’m getting a little distracted by the image in the background when in Payment Details, or when adding the product itself”
-
“Button sizes are inconsistent and a little distracting”
-
“An option to purchase quickly would be nice”
Inspired by the concept of Sunbeams, and its positive meaning: "a ray of sunlight," I took reference from the image of a sunset to create the brand logo and inspire the brand attributes: Fun, energetic and uplifting.
UI Design
Sunbeams is about happiness, confidence, enthusiasm and clear thinking. These are some of the concepts that are found in color psychology according to cognitive psychologist Hailey van Braam.
The color palette was chosen through consideration of color psychology and the emotions they represent: yellow, orange, red, turquoise and green.
Usability testing -
High Fidelity Prototype
In this test, users were asked to discover Sunbeams products. Before they jumped into the tasks, they were asked to go through the website freely to get a glimpse of the products and the brand.
I, again, interviewed 5 different candidates that fit into the target demographic. The interviews were conducted remotely. Each interview lasted about 30 minutes.
Methodology
Moderated Usability testing
Main tasks
1. Buy a product
-
From the section “Top of the line” Select the product “Van Gogh 2” and purchase the product going through the process like you would do on any other website.
-
Did you find the Journey to flow organically?
-
Do you see all the possible options you think you might need to have a complete experience?
2. Find some inspiration
-
From the section “find your inspiration” purchase one of the products available to visualize?
-
Do you think you have all the information necessary to purchase the product?