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.
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.
This 10-days design project (4 members – UI/UX Designer, Technical Lead, iOS Developer, Android Developer) included the following processes and methodologies:
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.
We started by analyzing existing apps to identify key issues. We compared our analysis to online reviews on Google Play.
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:
Next, we compared the home screens of our competitors’ apps.
The competitors are selected based on these 4 qualities:
The Key findings were:
At the start of the project, we had three main questions in mind.
How might we?
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.
Improve the checkout experience by creating a straightforward experience.
Adopt mobile payment with integrated credit card processing screen.
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:
Key findings from the interviews:
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.”
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.
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.
“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:
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.
Wireframes of: home, side-menu, categories, view products, adding products to cart, checkout, sign in and sign up.
By applying the usability test, we iterated a high fidelity prototype. The interactive prototype can be viewed on Marvelapp.
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:
“Example of microinteraction – Add product to the shopping cart”
“Example of microinteraction – Cart drawer”
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.