Fashiongram is a responsive web application where fashion professionals offer freelancing services. This project is part of the UX Program of the German CareerFoundry Academy.
(As the CareerFoundry certificate is taught entirely in English, there is only an English version of this project).
Fashiongram is a case study that is part of CareerFoundry's UX Immersion certificate. It was conducted between August and December 2022. This part of the program was focused on UX design but I also dealt with UX investment, UI design, and UX writing.
Tools
Problem Statement
Our users want access to (online) consultations with different fashion professionals because they want affordable ways to find expert advice wherever they are.
We will know this is true when we see a 15% weekly increase in the number of appointments booked by users.
The Design Process
1
2
3
4
5
Discover
Define
Ideate
Design
Testing
1. Discover
The first thing I did to start this project was to investigate whether there were already products on the market that tried to solve this problem. To do this I conducted a competitive analysis with two apps/webs.
Fiverr is the freelance world's biggest hit. They have as many satisfied users as tutorials on YouTube. Fast and cheap services with the option to do it in person and with different levels of experience and categories.
Adictic is not as well known but it is a great tool if you are a fashion professional and need visibility or contacts. Also as its interface is very similar to Instagram it is very easy to use.
To access the full competitive analysis, please click here.
After analyzing the market, it is time to get to know the potential users better. I have conducted three interviews with potential users (2 women and 1 man) and these are some of the conclusions.
Pinterest and Instagram are the most consulted sources of fashion inspiration.
Most people think they have too many clothes and don't wear them all.
Most wearers feel that their style is too basic. They would like to have a wardrobe that is easy to mix and match and fashion that is sustainable and environmentally friendly.
Most users are unaware of the existence of these professionals.
Most users believe that these services are too expensive and only for famous people.
If you want to access the full user research, click here.
To access the interviews with potential users, please click here.
2. Define
To help me empathise with future users I created two Personas to give more direction and meaning to the designs. Here is a more detailed look at them.
I then create some Journey Maps and User Flows to better understand the user experience and find solutions to its limitations.
3. Ideate
Next step: analyse how users will use the application - how? By performing a Card Sorting to get an overview of how users evaluate the pages.
This is the first sitemap I designed and on which I did the CardSorting. To design it I used Adobe XD
The normalisation matrix shows confirmation that some groupings of cards made sense to participants. For example, Search for expert, Categories of experts.... As this was an open classification, participants were not given a predefined structure (categories) and were only given a limited description of the functionalities of the application, which resulted in mixed responses. For example, Currency settings and Billing with personal data. I realise that it makes more sense for the user to have a separate category with all billing information, payment method and currency settings. In addition, I have decided to include the Help category on the home page so that non-registered users can access this information.
And this is what the Sitemap looks like after adjusting it thanks to the results of CardSorting. If you want to access the complete Cardsorting, click here.
4. Design
It's time to start my favourite part of the process. Grab a pen and paper and let my imagination run wild, create some quick sketches and bring the first Fashiongram screens to life.
Low-Fidelity Wireframes
Hamburger menu
Landing
Browser expert
chat
Mid-Fidelity Wireframes
Browser expert
Hamburger menu
landing
chat
High-Fidelity Wireframes
Browser expert
Hamburger menu
landing
chat
Wireframes made with Adobe XD
Wireframes made with Figma
5. Testing
In designing the user interface, I drew on widespread mental models and the fundamental laws of user experience, such as the aesthetics-usability effect.
I then took my high-fidelity prototypes and tested them to see how my designs worked in action with people. I conducted 6 moderated remote tests focused on realistic in-app scenarios.
landing
SignUp/Login
Sign Up
all set
onboarding
Create an account
Search for an expert
onboarding
Search
Experts
Filters
Expert profile
Book a call
Expert profile
Ratings
Calendar
Subcription plans
Payments
Design System
Moodboard made with Canva.
To be Continued...
Throughout the creation of Fashiongram, I focused on the user by conducting interviews and usability tests. This has allowed me to create a user-centered design for the application.
Working on this project has been one of the most interesting challenges I have faced, not only on a professional level but also on a personal level. I would like Fashiongram to become a real app and help users who need experts in the fashion industry.
The next step would be to create an option for experts to have their space within the app, as well as to network and develop as professionals