UX CASE STUDY OF AN E-COMMERCE APP
By: Oluwakemi Adeleke
Tags: UX, Case Study, UX Design, User Experience Design, Ux Writing

UX CASE STUDY OF AN E-COMMERCE APP

This UX case study documents the process involved in designing “Buy Eazy” an e-commerce mobile application.

Overview :

Buy Eazy is a mobile application which creates a smooth online shopping experience for users.

Role : User Experience Researcher, Designer and User Interface Designer

Objectives :

To design a user friendly, aesthetically appealing and intuitive interface.

To create an app that drives profitable growth by expanding customers reach and creating a good user experience.

To improve users shopping experience.

To design an accessible, desirable and usable product.

To create a smooth user experience and path to purchase that reduce cart abandonment.

Context :

Physical shopping comes with some certain kind of difficulties which tend to make customers frustrated about going to a store to shop all the time. Also, being busy with official duties while you need to shop for an item at a physical store or mall at that particular time can be depressing. Moreover, sometimes, people just want to window shop for products hence going to a physical mall to do that can be very stressful.

Therefore this project is aimed at improving users general interactions with an online shopping app and facilitates good user experience.

Nonetheless, in order to gain a better understanding of its values, purposes, and goals; I adopted the five stages of design thinking process to work with. This gave me a clear understanding of the problem and how to implement strategic solutions to solve it.

The five (5) stages of my design process include: Empathize, Define, Ideate , Prototype and Test.

Research — Finding the problem.

This is the first stage of my work process at which I researched the problem, and empathized with the users. Aiming for a desirable, viable, and feasible product that is relevant, usable, and accessible, I conducted a quantitative survey by sending out forms to targeted users to fill. This survey form includes only questions related to how the users shop for products they need. However, responses derived from the survey made me have a clear understanding of users needs, pain points, and goals.

Here are key findings from the research:

Location is an issue, malls aren’t located everywhere.

Limited stocks and no availability of the latest products in some locations.

Navigation inconsistencies on some apps being used.

Long check out time.

Difficulty in finding filters.

However, after conducting the survey, I had a clear understanding of the problems, users pain points and needs. At this work stage, I established ideas and possible features that would solve the problems identified. In order to get realistic and important features for the app, I organized reasons why people need to shop online into groups in an Affinity Map. This map helped in my direction for the design as it states different reasons why people need to use an e-commerce app.

User Personas: Based on the patterns identified in the affinity map and user research conducted, I came up with two user personas. These personas describe a typical user or potential user; their habits, problems, pain points, and needs.

User Persona 1:

Elizabeth is an accountant. She shops online for clothes, shoes, and bags. She prefers to shop online because it’s convenient and flexible. She has her core needs and frustrations from the app she uses.

User Persona 2:

Frank, a civil engineer, makes use of any available platform to shop for his family. One of his needs is to find a user-friendly interface to shop without having to go through navigation problems.

Strategy — Solving the problem

Having understood the problem statement and users’ needs, the next stage of my work is to brainstorm for design solution and ideas to these problems. I brainstormed possible features that will decrease the user’s time spent navigating the app by 50% from the current designed time.

Feature Matrix includes:

App navigation improvement (A simple navigation menu).

Easy filtering of products.

Straightforward check out and easy payment.

Possibility of shopping without having an account or signing in.

User Flow :

The user flow above showcases the steps a user go through in order to purchase a product on the app.

Design — Low-Fidelity and High-Fidelity

After completing the research phase, the features, actions and the content required were readily apparent. I proceeded to sketch the app interface and also did a paper prototype to see the interactions between the screens.

Paper Sketch :

Wireframes :

Wireframes are a skeleton view of the app. This made me focus on key functions, elements, and actions before starting the visual design or putting on some skin. I opted for High-Fidelity wireframes; this way I just have to splash on some color and place images and icons on it.

High- Fidelity Prototype :

After wireframing, I designed the high-fidelity mockup and created an interactive prototype which depicts how the app works. The design is aimed at giving users a good shopping experience and increasing sales.

Sign in and Sign up Screens :

This is a simple interface that enables users to sign in and sign up on the platform. It is designed in a way to allow the users shop without having to sign in or create an account.

Home Screen :

The Home Screen is designed to make navigation easier for the users and, ability to see top categories of products and recommended products based on deals and discounts. On the Home Screen is a bottom navigation menu to help users navigate through the app smoothly.

Search and Filter Screens :

The search and filter features on the app allow users to easily search for a particular product; and also to reduce the time spent on endless scrolling of a long list of products. Users can filter products by brand, price, best rating etc. This saves time and make users achieve their goals faster.

Categories Screen :

The category screen shows the different categories of products on the app. On this interface, users can quickly search for the category of the product they want to purchase.

Product Screen :

The product screen is an interface that shows details of each product on the app. On this screen, users can see necessary details of the product and also add the product to cart or wishlist. Also, users can view all previous ratings of the product inorder to make a decision before purchase.

Cart and Check Out Screens :

Users can see their products on the cart screen and also have the privilege to add products to cart or increase the quantity of the product they want to purchase.

The check out interface contains both shipping address and payment sections. In the billing section, users can input their delivery details, edit existing address or add a new one.

Payment Screen :

Flexible payment options are available on the platform for users to choose their preferred payment method. Users can select whether to pay with their debit card or, an online payment gateway (Flutterwave) or to pay on delivery.

Order Screen and Order Tracking Screen :

Users can see details of their order on this interface. Also, users can track their order with a tracking ID and; the tracking screen highlights the stages of the order process with delivery details. However, when orders get delivered successfully, users can write a review on the product.

Usability Testing

After the high fidelity prototype, I conducted usability testing to know if my design solution meets user’s requirements. The testing was done by actual users who shop online and, the three measures of the usability testing are:

Effectiveness

Efficiency

Satisfaction

Therefore, key findings from the usability testing include:

Users are able to navigate easily between categories and find products.

Users find the product screen clear enough.

Users find the checkout without an account feature useful.

Users find the checkout process easier enough and the checkout time satisfying.

Users can create an account fast enough.

The interface of the app is clear and it meets user’s requirement.

Finally, after the usability testing was conducted and necessary iterations were made, I delivered the product to the technical team for production.

Conclusion

Buy Eazy mobile app reduces the stress of going to the mall to shop always and provides users the opportunity to shop at the comfort of their homes.

However, working on this project was fun and I enjoyed every process. I learnt the importance of designing with the users which makes the user experience (UX) of a product more satisfying.

Furthermore, I learnt more about the processes required in building a feasible, accessible and usable product and this improved my problem solving skill.

Thank you for reading.