SASS TAG
All about the GLOW
UX Design | E-Commerce Site
My Role
As a solo UI/UX designer, I did user research and design work for this project. It took 25 days to complete.
Sass Tag is an E-commerce site for those looking to search and shop the latest in Street Fashion. To allow the user more time to shop rather than make an account, the site allows for guest checkout. The guest checkout is a valuable feature that enhances the overall shopping experience of an online shopper. When a website forces users to create an account in order to buy products, it does not only cause the users to feel frustrated while shopping online, but also results in the company losing money due to customers abandoning their cart.
Overview
Online shopping has become a trend. Unlike shopping in a physical store, customers need to know all the details on a product while shopping online. Customers want a seamless shopping experience. The goal for a company is to provide a fast and convenient shopping experience. However, the data shows users open several item pages and then abandon the site without moving any items into the cart. This means users are unable to determine which product is best based on their needs. Additionally, 70% of users who place an item in the cart do not purchase. When a website forces users to create an account to purchase products, it not only causes the users to feel frustrated while shopping online, but also makes the company lose their customers.
Constraints
-
Enhance site browsing experience to greatly improve product’s usability
-
Design Guest checkout feature to help customers checkout without creating an account
Process
Business goal
Improve the conversion from browse to completion of checkout to increase revenue on the product’s web experience.
Research
Secondary Research
Guest checkout adds value to the overall user experience of online shopping
First , It will increase the sales. Often first-time visitors abandon their carts if your checkout page requires a sign-in to complete the purchase process.
Second, It will lower cart abandonment rate. If the checkout process is only for account holders, then it excludes a large number of potential customers.
Customers can’t find what they are looking for
In one survey of U.S. shoppers, a solid majority (60%) reported being frustrated with irrelevant search results. In another, almost half (47%) of online shoppers complained that “it takes too long” to find what they want, while 41% have difficulty finding “the exact product” they are looking for.
Consumers’ frustration with poor shopping site search is no small matter. The fact that shoppers can search independently for products online, as opposed to waiting for a retailer to present them, is at the heart of the ongoing transformation of retailing.
Variate products category lead to more sales
Customers will get irked if they can’t find the desired variation of the product. Store may have the product variation customers want but it’d be to locate in an unorganized online store, which will lead to customers abandoning website. Displaying organized product variations will help customers choose exactly what they are looking for. It will increase sales to a degree and improve the E-commerce user experience.
Reasons for abandonments cart during checkout
Synthesize
Affinity Map
I gathered secondary research and highlighted things I think it’s important. I categorized highlighted sections so that they can be easily compared. I looked across all the codes and explored relationships, similarities, differences, or contradictions to group similar things. I organized the data into several categories.
Persona
I created a persona with users’ basic information, goals and frustrations. Personas allowed me to understand users’ painpoints and purpose. It helped me generate possible ideas based on users’ need.
How Might We?
With the insights mentioned above and personas, I had three important “How Might We” questions:
-
How might we help decrease shopping cart abandonment rate.
-
How might we help users spend less time researching products based on their need.
-
How might we help users have a easy checkout process.
Design
User Flow
In order to create user flows, I used personas as inspiration. The process of creating a map helped me understand how users complete the tasks.
Sketch
Once the user flows had been created, the next step was to implement them. Having come up with some ideas, I began putting them into action. It helped me focus mainly on the main features of the screen, and less on the details, by drawing out the layout of the screen.
Wireframe
When I was designing the site, I wanted to see how people would interact with it at low fidelity so that I could understand how the user experience would be. In order to provide a better representation of my final product's appearance to users, I wanted to digitize the sketches, while I used wireframes to illustrate how users will interact with the site.
Once the wireframe is complete, I create a low fidelity prototype. In order to conduct Guerilla Usability Testing, I recruited some users. Using this method, I can quickly determine whether or not users like or dislike my designs. As a result, I have noticed that after the user completes the purchase and is prompted to proceed to the next step, I need to include a "Continue Shopping" button in order to ensure that the user continues to shop after completing the purchase.
Style Guide
Color palette
Font
Icons
Style
Color
UI Elements
High Fidelity Mockups
As part of the process of creating a high fidelity mockup, I determined all details regarding the UI. In order to build high fidelity mockups, I take into account my brand platform and style guide for making decisions. The design is based on a fun font, an icon, some styling, and an image, which is enhanced by the use of drop shadows, gradients, line widths, and other elements that combine to bring the design to life.
Prototype
Product Demo
Test
In order to test the usability of the website, I conducted two rounds of testing. During the process, I Interviewed a few people that love fashion and like shopping online. Interviews were conducted in both person and remotely, using middle and advanced technology. The users were given a prototype for them to interact with and asked follow-up questions, with each interview taking about 30 minutes. As well as moderated tests, other tests took place which were conducted remotely and required the participants to record a video of them interacting with the prototype while they were in the middle of the test.
Task 1 : Browse the site and find items user interested in
Task 2: Purchase the item
Usability Test Results
The tasks were completed by all users without any issues. The following are some of the major findings from the user test:
Wrap up
Creating a project plan helped me think through the methods I use while working on each phase of the project. As well as estimating the amount of time each phase will take, I also time-box my work to remain on track. My process of creating the product was influenced by the design thinking process that I used during the process. By beginning with a user research study, I was able to gain insight into user frustrations by placing myself in the position of a user. In order to comprehend the goals that users want to achieve, it is important to have empathy for them. Understanding their needs helped me come up with ideas and solutions to the problems those users are facing, which in turn helped me design a product that users will enjoy using as a result of knowing what they need.