Newegg Online Checkout Redesign
Project Overview
My Role: Ui/UX Designer in a group of 3 students
Project Duration: September 2020 - November 2020 (8 weeks)
Newegg is a North American e-commerce platform that sells computers, laptops, pc components and various other consumer electronics. My team and I created a high fidelity mockup of an improved version of Newegg's online checkout process for first time users.
Challenge
This was a project that I participated in during the Digital Design and Development diploma program at BCIT. My team and I were tasked with improving the purchase experience for users who are new to Newegg's online store. The end goal for this project was to create a high fidelity mockup of the improved checkout process for new users.
Outcome
We simplified the user interface so that most essential elements are more prominent. We also increased font sizes for better legibility and increased contrast between the sites colors. Having fewer visual elements on screen makes the checkout process less confusing and stressful for users. The end result is a high fidelity figma prototype that simplifies the checkout process for first time users of Newegg's online store.
Research
None of the members of my group had heard of Newegg before this project. This meant that our first step was to become more familiar with Newegg's website. We browsed the site to gain familiarity with the site's page structure and design. We also went through the checkout process with multiple items to get a better idea of what a user might experience during their first purchase.
User Survey
We conducted a survey to gain insights into potential customers preferences and pain points regarding digital storefronts. The goal of this survey was to use the information we gather to improve the checkout process for first time users of Newegg's website. The main limitation of this survey was that all the respondents were BCIT students. This meant that the the findings were heavily skewed towards a specific demographic with similar wants and needs.
Survey Overview
The charts below were created from the participant's responses. There were 20 participants and 10 questions in the survey.
Question 1
80% of respondents were students between the ages of 21-30 years old.
Question 2
95% of respondents had post secondary student as their occupation.
Question 3
100% of respondents used their computers for accessing online classes.
Question 4
55% percent of respondents used Windows as their operating system.
Question 5
Amazon was the most used digital storefront among the respondents.
Question 6
80% of respondents wanted a click to buy/immediate checkout feature.
Question 7
85% of respondents would spend more time at checkout thinking about purchases above $400.
Question 8
70% of respondents would want to spend at most 3-6 minutes at checkout if the purchase is under $400.
Question 9
50% of respondents found mandatory sign-ups to be the most frustrating part of the online purchasing experience.
Question 10
55% of respondents did not want product suggestions at checkout.
Analysis
The data from the survey helped us create some actionable statements and questions that would guide the design process such as:
- How can we make the first time buyer process simple and efficient as possible?
- What steps can we take to make sure that they user buys a product?
- Make sure the user has access to alternative items especially if they are purchasing an expensive product.
- The appearance of a mandatory sign-up may discourage users from purchasing a product.
- There is a 50/50 split on whether or not to have product suggestions.
- Will this lead to more users of the website?
We also used the data to create personas for the types of users we would be designing for.
Ideation
We decided to do some usability tests early in the design process. This helped us to question the assumptions we had about how a digital storefront should be structured. One of the tests we used was card sorting.
First we created cards with all the words we associated with the online shopping experience.
When conducting the test we gave the users minimal instructions. The goal was to have the users sort the cards according to personal associations. What cards are more closely related than others.
This would help us create a more user friendly site structure from the very beginning of the design process.
Next we set a timer and used rapid prototyping to generate possible designs. This method allowed us to be free to create without worrying about whether or not we are following design principles. We managed to create many screens that could potentially become part of our low fidelity prototype.
Design
Afterwards we started working on a low fidelity prototype. We used the wireframes that we thought were the most closely aligned with users needs as our base.
After several usability tests we realized that the low fidelity prototype was too bare to be properly tested. We decided to move on to a more fleshed out medium fidelity prototype.
The usability tests were much more informative with this prototype. We made a computer keyboard the main product the user would try to locate and checkout. Some of the more common comments and complaints were:
- Users didn't know what peripherals were.
- Users tended to find the overall color scheme off-putting.
- The filters on the product selection page didn't stand out enough.
- Users thought the image on the product selection page would be clickable.
- The colors on the product page made text hard to read.
- Many of the users did not like the related products after checkout.
Final Outcome
We started working on our high fidelity prototype after all of the valuable feedback we received.
To address the following issues:
- Users didn't know what peripherals were.
- Users tended to find the overall color scheme off-putting.
- The filters on the product selection page didn't stand out enough.
- Users thought the image on the product selection page would be clickable.
- The colors on the product page made text hard to read.
- Many of the users did not like the related products after checkout.
We made the following changes:
- We changed peripherals to accessories.
- Instead of the dull grey we changed the background to white. We also added more variations in the button colors.
- The previous changes we made to the buttons made the filters much more visible.
- The images could be clicked and would take the user to that items product page.
- The increased contrast from the color changes made the product page easier to read.
- We decided to remove the product suggestions at checkout. This is inline with creating a simpler more user friendly interface.
One of the new feature we added was a prefilled form feature. It takes the information added during checkout and fills a form to create an account. This allows users to create an account with a single button click.
Lessons Learned
This was my first Ui/UX project and I enjoyed the process quite a bit. I found the usability testing to be a lot more interesting than I though it would be. I got to see the interfaces I designed be tested in real time.
I realized that its important not to assume you know whats best for users and to question your preconceived notions. there were many things I would have though made total sense, but the users sometimes ended up confused. This encouraged me to take a more intensely user focused approach to designing than I was using before.
The main thing I would have done differently is how I organized notes and materials. I found that certain parts of this case study were hard to create because of misplaced research materials or difficult to understand notes.
Thank you for reading.