Design thinking for Mango
On this story I will explain how to apply design thinking methodology to identify a problem and solve it. I made this project as a challenge suggested by the Mango UX team in order to join the company. Finally, I decided to go to another company but I’m very happy with the results and helps me to explain my way of thinking in terms of product development.
2. Persona identification
3. Problems found
4. User Needs
6. Data approach
- Benchmarking (competitors and big players)
- Quantitative and qualitative data analysis
- Mental model co-creation with users
- Workshop with stakeholders
- Write down the potential solution
- Define the user journey and key touch points
- Define potential design actions
- Design studio
- First drafts
8. User testing
- Define the sample
- Research questions
- Iteration based on results
9. Development Specs
- Style guide
- Interaction specs
- Quality assurance
10. A/B testing
On the next chapters I’m going show you how I would apply Design Thinking methodology in order to identify a problem and offer a potential solution for Mango.
We can find on this project 2 phases:
- First phase (1–6) is meant for understanding. I need to understand the user and the technological environment before start with crafting design solutions.
- Second phase (7–10) is meant for creating. Once I already understood the users problems and needs, I have developed some hypothesis and defined the objectives, I’m ready for translating needs into products.
The final output of this project would be a brand new feature called “The Wardrobe” which will allow to our Persona to perform some tasks before was struggling to perform, will improve the overall experience user face on Mango sites and will increase the purchases.
This feature will be developed thinking in been implemented for all devices / all markets but the first approach will be conducted on desktop.
2. Persona identification
Based on the Explorer Archetype attributes I’m going to define the specific persona* for whom I´m going to solve a problem.
*This persona have been developed taking a lot of assumptions due to the missing of quantitative and qualitative data.
2.1 Bellow some attributes about the the persona:
- Mar is a healthy 30 years old Spanish women working as a mechanical engineer for a big company in Germany.
- She is not impulsive or visceral and likes to take informed purchase decisions.
- She is very well paid on her job but she doesn’t like to waste money on unuseful things.
- She likes to compare between different options before taking a decision.
- She often use excel sheets or write paper notes in order to remember info or listing stuff.
- She is a Millenial who use apps and desktop features in order to perform tasks efficiently and spend some time on Instagram everyday looking for entertainment and inspiration
- She takes a lot of care regarding with who shares her personal information like email or telephone number.
- She use an iPhone but never use it to purchase, just for the inspiration phase
- She likes to buy basic clothes on big retail shops and combine them with exclusive ones purchased on local brands.
2.2 Bellow the generic task Persona is trying to perform:
Mar is trying to buy an outfit for an old colleague wedding she will assist on July. She is totally lost on this task because does not know really well the atmosphere of the wedding, the placement and the people who will assist, She needs definitely some help.
The first phase of her outfit research starts online. She goes to the top brands she has on mind that could fit her outfit desires looking for some inspiration and possibilities inside her budget. She surf through 4 different websites opening multiple tabs and comparing between different options.
She already has some clothes on her wardrobe that could be appropiate for the event but she definitely is missing others. On her mind is matching that clothes she already has with the ones has seen on the different websites.
After a while surfing she already has several options for the outfit on different tabs on the browser. In order to do not lose this work, and at the same time share it for feedback, she goes to her email and copy all the urls one by one and send an email to her boyfriend.
3. Problems definition
Based on the persona tasks I’m going to define the specific problems is facing in order to complete tasks
*User task: “Mar, to get some sort of feedback, writes an email”
- Problem 1: User is facing problems trying to get feedback about the different options because does not find a better tool to complete this task
*User task: “Mar, in order to keep some selection ideas, needs to open several tabs”
- Problem 2: “User is not finding a proper tool to save and compare between options”
- Problem 3: “User is struggling to find a proper navigation to go through saved items and go back to the research”
*User task: “Mar imagine the clothes she already has on her wardrobe to compare them with the ones are online”
- Problem 4: “User is not finding a proper tool to match clothes already have — or from other online shops — with the ones she would like to purchase on Mango”
*User task: “Mar, in order to save the ideas for the future, send an email with urls”
- Problem 5: “User is not finding a proper tool to save items for later”
*User task: “Mar needs some help, feedback and suggestions”
- Problem 6: “User is not being provided with suggestions based on data we already have from him/her or the other user purchases. Users do not find in Mango a tool that help them to take decisions”
4. User Needs
Based on the problems I´m going to define a specific user need which will be split in small user stories
User need: As a user I need to have a place where to save, manage and share items easily among been suggested with combinations so that I can take an informed purchase decision
- User story: As a user I need to be able to save items easily so that I can go back easily to them.
- User story: As a user I need to compare between different products I like before purchase so that I can see which is more convenient for me
- User story: As a user I would like to add my clothes to the wardrobe without register to Mango platform so that I can use the feature fast and easy
- User story: As a user I need to be able to introduce on my wardrobe, items from other online shops so I can have an online wardrobe with all the clothes i already have or desire
- User story: As a user I need to be suggested by mango with combination of clothes on my wardrobe so that I can find the perfect outfit easily
- User story: As a user I need to be alerted by new clothes available that fits with my wardrobe items so that I can regulary cover my new outfit needs
- User story: As a user I need to be able to see my clothes easily so that I can have a good overview of my clothing inventory and take my outfit decision
- User story: As a user I need to be able to group the items on my wardrobe so that I can organise them
- User story: As a user I need to be able to share my wardrobe with my friends on an easy way so that them can help me on my purchase decision (url booking)
- User story: As a user I need to have a direct access to my wardrobe so I can easily find the items I have on it.
- User story: As a user I need to be able to take pictures of my clothes so that I can save them on the wardrobe
Based on the user needs I’m going to elaborate my hypothesis
If Mango offer a proper feature to save, manage and share items and at the same time suggest possible combinations, users will:
- Stay more time browsing on our website
- Will come back frequently to our website
- Will encourage to other users to use our website
- Will buy more items on our website
- Will buy items faster
- Will remember Mango as a good website where to purchase
6. Data approach
Once I have already identified my problems and user needs I’m going to conduct some specific actions that will help me to understand the environment, users mental model and stakeholders needs.
6.1 Quantitative data analysis
As far I’m interested in data that could offer me some guidance about managing, saving and sharing items I would go through quantitative data:
- How many people is clicking on the whist-list?
- How many people is creating whist-lists?
- How many people see the register modal window?
- How many people share items?
- How many people that see register modal window actually register?
- How many register users buy items?
- How long take an user on average to purchase an item?
- How many register users use the whistlist?
- What devices are used to surf on the Mango platform?
The output of this task will allow me to understand the real situation we are facing on our platform related with the user problems and needs. We also could use this data to elaborate our KPIs
Competitors and big players are a very big source of knowledge and taking a deep look to them and keep them tracking constantly will allow to us to find weaknesses and potential improving areas.
This benchmark is going to be developed taking in account the specific persona, Mar, focus on specific jobs she might try complete.
I´m going to check direct competitors and big players inside and outside the industry and I will be focus on specific features and details that meet our user needs:
- Features to save items
- Features to manage items
- Features to share items
- Features that help to find combinations
The output of the task would be a great overview of the competitors and big players environment, detecting weaknesses and opportunities.
6.3 Mental model co-creation with users
In order to understand more deeply our customers I will conduct some interviews to go through the mental modal users have in order to complete tasks like save, manage and share items and how they expect to be suggested with other items at Mango.
For example, to start the co-creation I would ask to the user:
Imagine that you have to [User task to perform], What is the first thing you would do? Could you draw for me how you would imagine the process?
This interviews will be conducted on 1 hour time in front of a white board and will follow the following order:
- Introduction to the company
- Meeting the user: profile, devices usage, shopper type, etc.
- Introduction to the task
- Co-creation in front of the whiteboard
The output of this tasks will be a great overview of how the users imagine the process to save, manage and share items from mango and how they imagine M`ango could help them to find the perfect outfit.
6.4 Workshop with stakeholders
In order to meet the business needs and technological constraints I would invite to different profiles of stakeholders to the workshop. This kind of workshops help to show potential non-product-focus solutions and to create an ownership feeling.
The workshop would be divided in different parts:
- Previous. Workshop selected members will receive an email one week before with the invitation and all the research done to read it.
- Introduction. Members are going to be introduced to the challenge and will meet all the research again.
- Co-creation in groups. Members will be asked to brainstorm ideas to face the problem exposed and will be encourage to come up with a final proposal which will be exposed by a selected member of the group
The final output of this process will be several concept and ideas coming from different stakeholder profiles
Now is the moment to materialise all the ideas have been floating around during the understanding phase
7.1 Write down the potential solution
Based on the original briefing task “Realizar una propuesta de diseño de cómo podríamos mejorar la experiencia de un cliente MANGO con perfil explorador” I am going to design a feature which will bring to the next level the actual whistlist, will generate user engagement and increase the purchases. This feature will:
- Save items easily
- Share items easily
- Compare between items easily
- Group items easily
- Suggest items combinations based on wardrobe saved items
- Allow users to add items from other shops
- Allow users to add items from pictures
- Alert users with new items found that combine with her wardrobe items
7.2 User journey and touch points identification
In order to identify touch points and sensible areas potentially our feature would be placed I would define Persona’s journey step by step:
- Mar needs a brand new outfit
- Mar goes to Mango online shop home page
- Mar browse through potential items to purchase related with wedding outfits on “Weddings and Parties” area
- Mar goes to the detail page of a potential outfit to purchase
- Mar try to add the item selected to a whistlist
- Mar rejects the possibility of creating an account and copy the url in an email
Key touch points:
- “Mi cuenta”
- Clickable image & product info
*Item detail page
- “Añadir a whistlist” button
*Register modal window
- Log in button
- Register button
- Close button
The final output of this will be a clear identification of the main touch points where we need to work.
7.2 Potential design actions
- Redesign header log in / my account area
- Add saving button on items page
- Change “Add to whist-list” button location on items detail page
- Remove register to add
- Create a modal window that allows to save and manage
- Create a Wardrobe area which allow to group items and edit them
- Create a functionality that allows to share items, outfits and groups by urls creation
7.2 Design Studio
Collaborative approaches to design are always a solid base to create innovative products.
After all this research process we are ready to start crafting ideas and a very good way to do is by inviting different designer profiles and product owners to a design studio.
The final output of this will be some sort of sketches with potential ideas to solve user problems
7.4 First drafts
During the understanding process I have imagine a lot of potential solutions for the problems found. Normally I write down this ideas to save it for later.
Now is the moment when all work done became real.
First thing I started with was the header. I needed an easy-to-find place for the feature on the header so I had to rethink how the elements are shown in there. Mainly I refactored the account area and search box.
Then I started to think how potential users would add items to The Wardrobe. I had so many ideas based on the Benchmark so I decided to use the heart icon as a common pattern big players and competitors are using to add items to whist-lists. As far as users have to create and manage groups and items I decided to display a dropdown on click. On the dropdown users will be able to add items to existing outfits and create brand new outfits
This draft bellow is a concept for The Wardrobe page. On this page users will find, on the first box, all the items loved independently if they form part of any existing outfit. I though it could be nice to have a full overview of all of your items.
In order to create a new outfit users will click on “Create new outfit” box and will reveal the input name.
Bellow a concept for the outfit page with several items and the “Add item interaction”
Once I have a clear idea of which are the specific actions I’m going to work in, I open Sketch and start to play with pixels.
*Due to time constraints the mockups bellow have been designed without iterations, are just first ideas.
As I said, I started redesigning the header in order to place a quick access to My Wardrobe.
When user mouseover “My Wardrobe” tab, layer appears with the same interaction is already in use on the navigation tabs.
In this scenario, user have not added anything so promotional layer appears explaining the benefits of the Wardrobe and how to use it.
Once user had already created a Wardrobe, when mouseover the tab, items on the wardrobe reveal.
Thats nice: users can see their wardrobe while remaining on the category page. They do not need to click on “Mi Armario” and change page but they just mouseover on “Mi armario” tab and the wardrobe layer appears.
In order to add an item to The Wardrobe, user have to click on the heart icon. If there are outfits already created will reveal there but, if its the first time, user will be able to create a new outfit.
Clicking on My Wardrobe user lands directly on My Wardrobe page where we can find all the clothes we already have added.
Blue bubble notification overlapping Outfit box means: based on other customer purchases, new stock, items attributes and internal logic, Mango have found some potential combinations to complete your outfit.
On the second image we can see what happen when users click in “Crear nuevo outfit”.
When users click on “Boda Ignacio” Outfit group, land on the Outfit page. When mouseover one of the Outfit items, appear four actions user can take related with the item.
Once I´m done with the mockups for every screen and interaction needed I will create a prototype with Marvel. The objetives of this prototype are:
- Define potential scenarios missing
- Refine the mockups
- Check basic interaction behaviour
- Prepare the user testing
- Share and show for feedback
The prototype bellow has its functionalities limited to the following tasks:
- Mouseover ”Mi armario”
- Click on “Mujer”
- Add first item by clicking on heart icon
- Click on “Boda Ignacio” at the dropdown
- Click on “Mi armario”
- Click on “Boda Ignacio” outfit
- Click on “compartir”
- Click on “Añade algo nuevo para completar tu outfit”
- Click on “Volver a mi armario”
*You can always go back to the home page by clicking Mango’s logotype
8. User testing
Checking your ideas constantly with your users is the only way to improve your product and innovate. Bellow the process I would follow to test my prototype with users.
8.1 Define the sample
We need to narrow the sample in order be as efficient as possible taking proper insights form the test. In this direction we will select 6 users:
- Mid and high level of studies
- 50–50 Male and female
- Between 18 and 40 years old
- Have used big online shops (like Amazon or Ebay) to search and purchase items
- Use email frequently
8.2 Research questions
This task is a key one and will define the whole test development. Here we need to clarify which are the main questions we want to answer. This questions are going to be focus on:
Bellow the questions I would need to answer with the test:
- What the users understand by “online Wardrobe”?
- Do the users understand how to add items to the wardrobe?
- After checking promotional layer, what the users understand by a wardrobe?
- Do the user understand Blue bubbles with combination proposals?
- Do the user understand what Outfit means?
- Do the user know how to create new outfits?
- DO the user understand what “Mi Armar io” icon means?
- Do the user understand how to share outfits and the wardrobe?
- Do the user understand how to add new items from outside mango like own images and other online shops urls?
8.3 Script questions
In order to try to answer the research question I´m going to develop the script with which I will conduct the interviews with the users. This script needs to be clean and will be printed for the session.
This will be the structure of the test:
- Meeting the user (devices usage, preferred shops, etc)
- Introduction to the company
- Introduction to the prototype limitations
- Introduction to the tasks
- Tasks performance
Bellow just the first task I would suggest to the user to perform:
Task 1. Imagine that you were checking your email on your laptop and suddenly remember your invitation to an old colleague wedding on July. Then you open your browser and type the first shop that comes to your mind, in this case is going to be Mango.
- Please, could you start looking for your new dress? Before any click, could you explain me what do you expect to happen?
Let the user browse freely and do not interrupt if possible. Once on the category page, for example, “Weddings”, ask to the user:
- Please, imagine that you have a couple of options which you could potentially purchase and you want to keep browsing other items, how would you save this options? is there any way to save this options for later?
Let the user think and explore. If the user finally goes to the heart icon let freely keep acting natural but asking for expectations on click. If user is blocked show him/her up the heart icon and ask what he expect to happen on click.
The final output of this phase would be a clear overview of the weakness of your design in terms of interaction and understandability, mainly. With this outputs I will go to my design and apply the findings to my solution.
9. Development specs
Once we have test our design with real users, and solved the potential issues, we are ready to develop it.
9.1 Style specs
This is mainly related with front-end tasks. In order to do this I would use a plugin for Sketch called Marketch that export my Artboards on HTML files which allow to the Frontender to see:
- Feature locations
- Widths and heights
- Margins and paddings
- font style and weight
- Backgrounds, borders and shadows
The output of this task would be an Url like this one, easy to share and easy to modify.
9.2 Interaction specs
This is all related with how the interface reacts based on the user actions. It is important to put in a clear way how the main interactions are so to avoid assumptions.
For this task I’m going to use as an example “The Wardrobe” page and describe some interactions as follows
- When user clicks on “Full Wardrobe” lands on a page where all the items are display independently if the are part of an outfit.
- On click, user will land on “Boda Ignacio” Outfit page.
- On click, same box display the new outfit creation form
- On click, all the clothes on “My Wardrobe” will be added to the basket
- On click, If user is not logged in: modal window with register / log in options will reveal. If user is logged in: this button wont appear
- On click, dropdown will appear with a Url ready to be copied and shared.
The output of this task would be a detailed list of actions and the interface behaviour related to them
9.3 Quality Assurance
I like to sit always with developers before, during and after the development phase:
- Before. When I’m ready with the interaction and style specs I like to sit with the developer in order to explain how I imagine the final execution, align expectations and schedule some touch points.
- During. I like to sit frequently with developers during the development process to see if everything is on specs.
- After. Once developer is done I check the CSS and secenarios in order to see if everything is on specs.
10. A/B test
Now is time to test our brand new feature with real users on production.
In order to know which are going to be the key success metrics Im going to check:
- Number of items saved
- Number of items shared
- Number of outfits created
- Number of Wardrobes created
- Number of items purchased
Done that, we will split the traffic 50/50 between:
- Control version (A): the one with the legacy Whist-list
- Variation version (B): the one with the new feature
After one week on testing we will sit down with the Data analysts in order to check the performance and take a Roll out/back decision based on stablished metrics.