Project for Coderhouse UX-UI Design Course
Role: Solo UX & UI designer
Date: December 2022 - April 2023
Medidapp
introducing Medidapp, an app designed to revolutionise your online shopping experience by finding garments that match your unique body measurements with the brands that cater to them. Add your measurements and explore the wide variety of clothing that fits you.
The Problem
With the increase in online shopping in recent years, finding the right size when buying clothes in online shops is a frustrating experience for most people.
Clothing sizes do not have universal standardised measurements. An "M" or "Medium" size of a garment in one brand may have completely different measurements from an "M" in another brand. This confusion, coupled with a failure to implement laws that require brands to have a wide availability of sizes, means that users are becoming increasingly frustrated when shopping for clothes online, wasting time, money and negatively impacting their mental health and body perception, as many users report feeling unhappy with their bodies because they do not fit into a particular brand's sizes.
The idea
Make the experience of buying clothes online for users practical, with less chance of error when searching for sizes and reducing the chances of returning their purchase.
Create a tool that can personalise the shopping experience, where the user provides their measurements and accesses a list of brands that have garments in their size available.
Research process
The Design Thinking method was used to approach the development of the project.
Empathise We approach the problem, look for an objective and propose a solution.
Define We conduct market research, define potential users and validate them through interviews.
Ideate We devise a minimum viable product, create an information architecture and rely on storyboarding and storytelling to visually explore the experience we are aiming for for our users.
Prototype We developed sketches, wireframes and using Human Design patterns and Guidelines for iOS, we came up with a high definition prototype to make the experience as believable as possible.
Test We put the prototype to the test with real users, took their experiences into account and iterated the prototype based on them to improve it.
User Research
With our problem defined, we started the research looking for information that would validate what we thought: journalistic articles, trends and the market for clothes shopping apps and measurements.
We studied Apps that were similar to our proposed solution, investigating the functionalities, analysing the strengths and weaknesses of each one. This allowed us to learn from them and find our own identity for the project, also generating an experience that would enhance the strengths and improve the weaknesses.
In order to better define our project and our user needs, user personas were created, i.e. sketches of potential users of our product who are affected by the problem addressed.
To validate our user personas, we conducted a round of online interviews with real people who live day to day with the problem of not finding clothes in their size and created an empathy map based on our conclusions
How often do you shop online? What purchases do you usually make?
What are the benefits of shopping online rather than going to a specific shop to buy what you need?
When you shop for clothes, how do you do it? What platform do you use?
Are you happy to read reviews of a garment if they are presented on the web? Do they influence your purchase?
Is it easy to find your size or the measurements of each size when you shop online?
If the website offers a measurement chart, do you take the time to take your measurements and check that the garment measurements match yours?
If you buy a garment online and it arrives and it doesn't fit, what do you do?
How do you feel if the garment doesn't fit?
What do you think could avoid this situation?
Conclusions
people interviewed had experiences buying clothes on the internet
Of those interviewed, they agreed that they shop online to save time by not going out to look for clothes.
of not knowing how and what the size of the garment will arrive if it was bought online.
In the event that the garment purchased does not pass the measurements, respondents say they are dissatisfied with the brand.
Three out of five people admit to taking the time to measure themselves and compare their measurements with the tables offered by the brands to be more confident when shopping.
They do not usually make returns as it requires too much effort and they tend to give them away or leave them in the wardrobe.
Empathy Map
What do they think and feel?
What frustrates them?
What motivates them?
What do they say and do?
Based on the data collected from the research instance, we refined our user persona and expand our understanding of the experience we want to create for users. We make a p.o.v. or a point of view of our user and use Storyboard and Storytelling resources to create a story that helps us visualise the functionalities, the desired journey and get closer to the experience of the potential user of our app.
The M.V.P
The minimum viable product was designed based on the user's primary need and according to this, two types of functionalities were differentiated.
-
-Register your measurements in the app
-Search for garments based on the given measurements
-Buy garments
-
-Mark items as "favourites" for future purchases.
-Leave reviews of purchases made.
-View information on purchases made
Information Architecture
An information architecture was proposed for the information that would make up our app and a Card Sorting was carried out in which participants were provided with 11 cards with the content of the app so that they could organise, hierarchise and categorise as they saw fit. This allows us to analyse the mental model of potential users.
1 min .59s is the average time it took participants to solve the study.
10 participants managed to complete the study. 6 dropped out
This originally proposed architecture was modified taking into account the results of the Card Sorting study and led to the creation of four categories that distribute the information in a user-friendly way for potential users
A Task Flow was defined for the main functionality of the app. In this case, the main action is to enter your measurements.
And the User Flow to focus on the happy path the user would take to accomplish the task, without errors or obstructions.
The Wireframes
To design our app, we put our ideas down on paper (or tablet in this case!) and started prototyping using Figma. As part of the process, we went through different stages, adding and modifying components based on the Human Interface Guidelines to create an iOS app.
To test the functionalities of the wireframes and the feasibility of the idea, a working prototype was created in medium definition.
Usability Tests
Tests were conducted with potential users of the app in order to measure the usability of the developed prototype and to observe the different ways users could interact with the app. Test participants were given a hypothetical scenario and assigned 3 tasks to perform.
"You are a person who is looking to buy clothes that fit you. You've heard of this app that not only registers your measurements but also uses them to find clothes from different brands that fit them".
Task 1: "You are going to log in to the app and add your measurements."
Task 2: Search for "Prenda 1" and add to favourites
Task 3: Make a purchase using Apple Pay app and add your measurements."
Conclusions
The users were able to carry out the proposed tasks. Based on the observations made and the users' comments, the following conclusions were reached:
Users pay little attention to the "Add Measures" button, to be used in task 1. Their first intention is to go to the field to be filled in and wait for the keyboard to display.
3 out of 5 users emphasised that they did not see the price of the garment because of its size.
1 user had trouble seeing the alert after performing the task 2.
App Identity
For the app's identity, we took iconography used in the textile world and created an illustrated icon made up of the two most relevant elements for the brand: the centimetre or measuring tape and a garment.
UI Kit & Moodboard
A moodboard was created, looking for an aesthetic that evokes cheerfulness using the colour Mellow Apricot (from the range of yellows and oranges) as the main accent. Illustrations that bring dynamism to the brand and make it more friendly and closer to the user. Fresh and colourful UI and design inspiration and images that evoke a sense of feeling good about oneself.
When designing our app, we wanted to create a product that as many people as possible could use. That's why we decided to integrate technology and design concepts that would make it accessible.
The aim was to create a friendly colour palette for the different vision pathologies.
The colours were combined with the hierarchy of elements in each frame, with the intention of making the information easily distinguishable and adaptable.
The prototype
Modifications and updates were made to the prototype, adding elements and animations to create a high fidelity version.
