Introduction
Shoobax is an e-commerce website that focuses on selling shoes, clothing and other forms of fashion. The website was designed and executed by me. The purpose of this project was to expand my design knowledge and attempt to design for e-commerce: one of the most prominent industries around!
Designing for e-commerce definitely challenged me. I had to make sure to produce a product that was both functional, easy-to-use and visually appealing. For many e-commerce sites, most of the attention is on the UX rather than the UI. I wanted to create a website that is beautiful to look at while still being fun and enjoyable to use.
Who is it for?
Any potential shoppers really! The range of fashion products is for people of all ages -- kids, teens and adults. Shoobax wishes to expand its audience to where anyone, even those unfamiliar with e-commerce, is able to dive in and shop for what he or she wants.
Objectives
Shoobax has noticed a drop in shopper retention over the past few months. One of the reasons behind this is the fact that shoppers are unable to checkout as a guest. Another is that shoppers are unable to find the items that they need before finally abandoning the website. As the designer, my objectives were to develop a new product page and guest checkout system.
Research
For research, I decided to do a heuristic analysis of three industry competitors: Shoes.com, Adidas and Nike. The criteria I focused on were consistency and standards, user control and freedom, and aesthetics and minimalism.
Shoes.com
Consistency and Standards
As with many e-commerce sites, Shoes.com maintains a clear, consistent standard when it comes to listing items available for purchase and how information is presented. With e-commerce sites, it is imperative that everything remains consistent from the UI down to the pictures of the products.
User Control and Freedom
Shoes.com gives immediate feedback whenever a user adds an item to their cart. Also, the user always has the opportunity to change the quantity of the items bought as well as remove items from their cart if they change their minds.
Aesthetics and Minimalist Design
The site seems to follow a neutral, minimalistic scheme. There are examples of color, but it’s mostly used to bring attention to important details or to break up the black and white monotony.
Nike
Consistency and Standards
For the entire site, Nike presents information in the same way no matter what. In a way, I feel that Nike adopts Google’s standards: information is displayed in the simplest way possible.
User Control and Freedom
Like many other e-commerce sites, Nike gives feedback on the user’s inputs and allows them to edit their cart at any time. There were plenty of pictures available of each product that allows users to get a good idea of what they are purchasing. Navigating the site was also self-explanatory as well.
Aesthetics and Minimalist Design
Nike features an extremely minimalistic site design. The only color added is from product pictures; other than that, the site is black and white. The site is very easy to navigate as a result while still retaining a sleek, professional feel.
Adidas
Consistency and Standards
The Adidas website maintains a consistent pattern of how information is presented and organized. Nothing in particular appears to deviate from the norm.
User Control and Freedom
Again, like Nike and Shoes.com, Adidas gives plenty of feedback and opportunities for people to correct any errors made throughout the shopping process.
Aesthetics and Minimalist Design
Adidas shares a lot of similarities with Nike when it comes to design and layout. The main difference is that Adidas is willing to use more color within its imagery, and it gives more product information on the page than Nike does.
Wireframing
Based on the client’s needs, I found that the website needed to be able to show a wide variety of products in a uniform, organized manner. The landing page, for example, needed to show the newest products, what was popular, any potential sales, and any other information that the company wants to immediately show to the user.
The product page needed to display everything the user needs to make a confident, well-informed purchase. Uniform pictures of the product are at the top of the page and are designed to instantly catch the user’s eyes. Underneath these pictures are a product summary and specifications. I wanted to make sure that selecting a product’s size, color and style was easy and intuitive.
Prototyping and Testing
I conducted the first user tests after completing the first version of the hi-fidelity mockups. During these preliminary tests, I wanted to gauge how users felt about the site’s layout and aesthetics. Most users were able to understand the site’s purpose, but barely any could fully complete the user flow I’ve outlined. Listed below are several pieces of feedback I received during the tests.
The site’s landing page has too many pictures and links on it.
There weren’t any ways to preview how different color shoes looked on the product page.
The product page needs more pictures of the actual product.
There was no option to edit products in the cart.
The log-in information on the checkout page conflicted with the delivery information and made it difficult to differentiate between the two.
The site’s aesthetics, while minimalistic, were boring and lacked visual appeal.
The font didn’t pop out among the visuals and made it hard to locate specific things.
The color scheme had mixed reception: the red, oranges and yellows clashed with one another. Plus, those colors are used to indicate an “error” state and can confuse users.
All of this gave me valuable insight on how to better improve the Shoobax experience. How could I bring more visual appeal to the product while still implementing great UX principles?
Redesign
Guided by the user feedback, I sought to give my current wireframes and hi-fidelity mockups a complete redesign. I wanted the color palette to be vibrant and attention-grabbing and the typography to be more differentiated. Plus, I made some changes to the website’s organization and information architecture to make the platform easier to navigate and to get rid of unnecessary questions and features.
After completely revamping the site’s style and layout, the users commented on how much better the site looked and felt. Users were able to go through the entire user flow process without much trouble at all.
Users loved the site’s color scheme and aesthetics. They commented that it looked modern, fresh and trendy.
Users claimed that they could take one look at the site and instantly know what to do. Before, it was unclear how to navigate the site.
Users liked the font changes and believed it helped the site become more distinct.
Users loved the “Hot” and “Popular” brands sections and how the products were presented.
Here are some of the suggestions users gave.
The main logo could be a bit larger so it’s easier to see.
There should be a “Shop Sales” option on the landing page.
There could be more pictures of the shoes on the product page. However, this was just a matter of preference.
If you want to see the prototype used, you can do so here!
What I Learned
I truly thought that my first designs were fully reflective of the typical e-commerce experience. However, once I got user feedback, I realized how many components make up a great e-commerce site. It is not enough for the focus to be purely on UX; UI is equally important and can instantly cause a user to be more receptive and immersed in the experience. Plus, I even forgot some critical components of the site’s UX since I was too focused on the primary user flow: buying an item and checking out.
This project gave me an opportunity to try and bring e-commerce into the modern age. Many popular e-commerce sites have very outdated layouts and interfaces, but they manage to stay relevant due to their massive existing user base. I admittedly tried to emulate industry competitors too closely with my original designs, and I realized that it is okay to deviate from industry norms in pursuit of a brand new product. It is true that there are industry standards to adhere to, but that does not stop designers from exercising creative freedom. Speaking of which, I had to be careful when looking for inspiration. The designs on Dribble were incredibly appealing, but they lacked the robustness and functionality I needed for the product. Plus, for the industry competitors, they were robust and functional, but they also had overwhelming amounts of information. It was a challenge to strike a fine balance between all of these factors for certain.
