Magento Ecommerce App - UI/UX Case Study

This UI/UX case study documents the processes involved in designing a fashion retail Magento ecommerce app. This app is an MVP, and only includes a basic Magento ecommerce app functionality such as viewing and filtering products, adding products to cart and checkout. This challenge took us 10-days to complete.

Project Brief

Identify problems and/or opportunities in an existing ecommerce mobile application and utilise our knowledge in designing a solution.

The project entailed designing a clothing retail app from scratch. The ideas listed below apply to most fashion retailers with an ecommerce presence. We chose to design and develop a Magento ecommerce app because of the platform’s stability and rich set of ecommerce features.

Overview

This 10-days design project (4 members – UI/UX Designer, Technical Lead, iOS Developer, Android Developer) included the following processes and methodologies:

1. Discover

• Background research
• User Interviews
• Competitive analysis
• Heuristic evaluation
• How might we?

2. Define

• Affinity mapping
• User personas
• Customer journey mapping
• Feature matrix
• Design studio
• User flows

3. Design

• Wireframe
• Hi-fi prototype
• Visual mock-up

4. Testing

• Usability testing
• System Usability Scale study

5. Deliver

• App development
• Final presentation

The Context

It is increasingly difficult for businesses to remain competitive in fashion retail. This is due to the high rental fees necessary to maintain a physical store and the difficulty of hiring lower-skilled sales assistants.

In addition, consumers are increasingly shopping online on platforms such as Amazon, ASOS, Thredup for their fashion fix. Even big companies as ZARA, Bershka, H&M have developed online shops and e-commerce apps, making the market even more competitive.

Based on this setting, we picked 3 mobile apps to research: River Island, H&M and Sports Direct in our effort to build a better shopping experience.

1. Discover

Heuristic Evaluation

We started by analyzing existing apps to identify key issues. We compared our analysis to online reviews on Google Play.

App reviews

Reviews from H&M app , River Island app and Sports Direct app.

The main issues we discovered were related to the most important features of an e-commerce app:

1. Slow loading and sometimes login fails;
2. Coupons not applying to orders;
3. Navigation inconsistencies throughout the apps;
4. Inadequate user friendliness;
5. Long checkout time;
6. Difficult to find filters;
7. Out of stock items still present in searches.

Competitive Analysis

Next, we compared the home screens of our competitors’ apps.

The competitors are selected based on these 4 qualities:

1. Being fashion retailers with global coverage;
2. Having an ecommerce mobile app;
3. Having a similar price range and demographic;
4. Being fast-fashion retailers.

The Key findings were:

1. Most shoppers are not aware of the apps’ existence or do not use them;
2. The brand is not visible enough;
3. Categories are displayed in big banners;
4. Navigation is done through a side-menu (even a tab bar for Sportsdirect);
5. App approaches may be different – one being more editorial (River Island), one being more e-commerce orientated (Sports Direct) and the last one being more fashion orientated (H&M).

How Might We?

At the start of the project, we had three main questions in mind.

How might we?

1. improve the shopping experience?
2. improve the checkout experience?
3. adopt mobile payment?

Improve the shopping experience by adapting the in-store environment of our Magento ecommerce app.

First, we define the unique experience at a physical store so we can adapt it to the mobile app.

• Greetings every time you enter the shop;
• Familiar shop layout;
• Big images, bright lights, neatly stacked shelves;
• Sales and promotions throughout the year for different products;
• Easy to find the right product without the help of a sales assistant.

Improve the checkout experience by creating a straightforward experience.

• Adding products to cart is clear (also selecting the qty is within reach);
• The cart has a coupon option, deleting products and adding qty is easy
• Billing has the option to add an address (or to use the existing one), shipping gets the addresses from billing (or the user can add another billing address);
• Different payment methods are available;
• The confirmation process has the possibility to edit any previous step.

 Adopt mobile payment with integrated credit card processing screen.

• Easy to understand and use UI.

User Interviews

We interviewed 5 users to find out their opinions on the competitors’ apps. The questions were centred on various key points common to fashion ecommerce apps. For example, we asked questions related to:

1. browsing for clothes;
2. making a purchase;
3. waiting for the delivery;
4. receiving the items.

 Key findings from the interviews:

1. The apps are easy to browse, having no major issues with the navigation;
2. Frustration comes from the lack of filtering;
3. The check-out process is too complicated;
4. They lack clarity on the delivery options and fees;
5. Their presentations are messy;
6. Cart items disappear after exiting the apps;
7. Some fonts are too light and small.

2. Define

Affinity Mapping

After conducting user interviews, we organised the findings into groups in an Affinity Map. Using this map we could identify common habits, problems, and pain points. This was a key point in designing our Magento ecommerce app.

“Affinity Mapping for Current app user.”

“Affinity Mapping for Potential app user.”

User Personas and Customer Journey Map

Based on the patterns identified in the affinity map, we came up with 2 personas - an existing user of the app, and a current shopper who is a potential user of the app. These personas describe a typical user/potential user, their habits, problems, pain points, and other details about him/her.

 Persona 1 - Existing user of the app

Customer Journey Map – Shopping on the App.”

Stefan prefers to shop online and is an existing user of the app. He wants quick access to all the discounts and finds it difficult to find the size and availability of the items he wants. While he is familiar and comfortable using the app, he hopes the user experience can be improved.

 Persona 2 – Existing shopper and potential user of the app

“Customer Journey Map – Shopping at a physical store.”

Felicia shops at the physical store and is not aware of existing apps. She enjoys shopping at the store, but there are often too many clothes and can’t find the perfect ones (price and quality). She may be a potential user of the app since she uses e-commerce websites to shop for clothes.

 Potential project approaches:

1. App Navigation improvement;
2. Easy filtering of the products;
3. Straightforward checkout and easy payment;
4. Possibility of shopping without an account.

Feature Matrix

Using a design studio process, we came up with various new features we intend to include in the MVP (Minimum viable product). We approached the features from the business perspective and organised them according to users’ and businesses’ needs. The features displayed in the top right corner (the red box) should be included in the app.

User Flows

3. Design

Wireframes

Wireframes of: home, side-menu, categories, view products, adding products to cart, checkout, sign in and sign up.

Hi-Fi Prototype

By applying the usability test, we iterated a high fidelity prototype. The interactive prototype can be viewed on Marvelapp.

4. Testing

First Usability Test

We jumped to a high-fidelity prototype after doing quick mock-ups. Images of the clothing may be important in helping users visualise the actual app. The colours used for this app matches our company’s (HyperSense) colours. This version was tested by actual users.

Key findings from the usability test:

1. Users are able to navigate easily between categories and find products;
2. Most users find that the product screen clear enough;
3. Users find the checkout without an account useful;
4. Users questioned the need to know more product information;
5. Users find the checkout process obvious enough and the checkout time satisfying;
6. Users can create an account fast enough and find the account information helpful;
7. Microinteractions improve user experience.

“Example of microinteraction – Add product to the shopping cart”

“Example of microinteraction – Cart drawer”

5. Deliver

Finally, after we have built our product, we need to develop it, in order to see if it can be done or if we have any problems implementing the design. This is where the Android and iOS developers step in and make this product real. We conducted alpha testing and QA testing after it was ready. 

If you wish to see the Android and iOS Magento ecommerce app, please contact us and we will send you a download link with the app.