top of page

MANGO

Service and Interaction Design

Creating a new in-store payment service merging the digital and the offline experience

Mango_Mockup.png
Context
Role

Researching, ideation, workshop moderation

iteration, interviewing, wireframes.

Timeframe

3.5 months

Barcelona, Spain

Tools

Adobe Creative Cloud, Sketch, InVision

Deliverables

Research Report

Ideation Workshop

Service Concept

Working Prototype

Personal Contributions to the project & team

Being a small team, I had the opportunity to contribute in all phases of the project, from the initial research, to the workshop facilitation, as well as the final product prototyping and crafting the deliverables. For the research phase, I was in charge designing the research and then conducting the interviews in Mango stores. Later on, my tasks consisted of analysing the data and crafting the insights report and persona creation that was delivered and presented to the client during the workshop.

One of my main contributions occurred during the user testing and iteration phases, I suggested to the team to try out a new research method that we had never tried before. Instead of testing the prototypes in-lab, I proposed a testing based on role play at the actual Mango store, in order to understand how the user would interact with the store, the staff and the online service at the same time. This proved to be a great exercise since it lead us to crafting the final solution with all the constraints in mind, ensuring a successful end product. 

I was in charge of the design and execution, where I created all the low and high fidelity prototypes, as well as all the final deliverable posters that were delivered to the client, including the user journey, and the wireframes.

 "Create a memorable experience during the purchasing moment, creating an online self-payment in our brick&mortar stores"
Challenge & Reframing

Mango was looking to create a new in store payment service that would allow them to track the purchases users were making in-store. The goal of the project was to get be able to link user's in-store behaviour with their online profiles in order to get an understanding of their behaviour and be able to personalise offers according to their preferences.

From the research conducted, we came to see that the solution Mango was looking to implement was of great value to them, but would not represent much added value to the user since there was no latent need for such a tool. Our role as designers was to be able to merge the user's interest as well as the business' interest to create a solution that would be satisfying for both stakeholders.

Screenshot 2019-07-10 at 21.48.16.png

1. Research

Understanding the needs of users through contextual intercept interviews in Mango Stores across Barcelona

Screenshot 2019-07-10 at 22.15.54.png

2. Ideation&Iteration

Co-creation session with client team, first concepts creation, prototyping and testing, iteration and quantitative study.

Screenshot 2019-07-10 at 22.16.11.png

3. Final Concept

Creating the wireframes the of the frontend and backend experience  as well as the new in-store user journey

1. RESEARCH

Understanding the needs of users through contextual intercept interviews in Mango Stores across Barcelona

Research
Contextual Research

Initially, we designed a research based on intercept interviews in different Mango stores across Barcelona that would allow us to get a deep initial understanding of user's in-store behaviours, the different profiles that are visiting the store and their needs. In order to do this, I was in charge of designing and conducting the contextual interviews, where we had the opportunity to interview 21 users from different age ranges.

At this initial stage, we used different research techniques to also understand the needs of the stores and of the sales helpers at the store. We did several rounds of observation as well as personnel shadowing, which allowed us to gain a deeper understanding of the different implications the project would have depending on the type of store we were dealing with. We realised that in order to create an impactful solution, we would have to take into account the needs of both flagship stores and small neighbourhood stores.

Screenshot 2019-07-10 at 21.48.16.png

Fig.1: Observing user's behaviour in-store

User Mindsets

During the fieldwork two attitudinal profiles were found regarding the purchase process. These profiles were defined based on user's attitudes, desires and needs in the purchase process.

user1_3x.png

Recreational Shopper

  • Understands the purchase as a playful moment

  • Goes a lot to store in search of news

  • He likes to extend his store experience

  • Explore items on the internet in free moments

  • Feels identified with Mango and is very loyal to the brand

user2_3x.png

Functional Shopper

  • Buy when you have a specific need.

  • Purchase in a physical store to take the garment to moment.

  • He does not like to invest a lot of time in this experience.

  • The relationship with the brand occurs offline

  • In general, it is not faithful to any brand

Fig.2: Example of user mindsets created and presented to the client during the ideation workshop

Based on the information gathered from the interviews, we recreated the current journey of both mindsets and identified the different challenges and opportunities we could address in order to create a meaningful and memorable experience. We crafted out an insights report that was presented at the co-creation workshop with the client team.

2. IDEATION & ITERATION

Co-creation session with client team, first concepts creation, prototyping and testing, iteration and quantitative study.

Ideation
Co-Creation session with client team

We prepared a session with the client team where we presented the findings from our research and then co-created different possible solutions with the client. The aim of the workshop was to gain insights into what was most important for them, as well as helping them understand that in order to create a successful product, there needs to be a clear value gain for the final user.

Technological constraints 

From the workshop session with the client team, we also identified several infrastructure and technological restrictions that we had to keep in mind when conceiving solutions:

  • There is no RFID, meaning that there must be an intervention of the sales person to remove the alarms from the garments.

  • A verification is required to make sure the user is buying the desired garments and to ensure that the scanned item is the correct one.

  • There must be a way to link the bought items to the store's stock register

  • The service and the removal of alarms must be fast and must not generate more delays in the store

  • The service must help reduce waiting time for the user

  • Motivate staff with rewards to ensure they promote and use the service

First ideas

Based on the co-creation session, we synthesised and prioritised the ideas from the workshop and developed three different journeys with different added-value services that would raise the impact of the self-payment services. The team prototyped the ideas, created storyboards and then, after understanding which ideas could be feasible from the client's perspective, we set on to test these prototypes with real users.

Fig.3: Example of initial service blueprints, first prototypes and storyboards of the concepts.

Screenshot 2019-07-10 at 22.15.54.png
Contextual Testing

Once we had defined with the client which services could be developed and which we should focus on, we created high fidelity prototypes to test with users in Mango stores. We designed a user testing based on role play, in order to understand how the user would interact with the store, the items, the staff and the self-payment service in the same space. 

From this testing we gained a deep understanding of how the users move through the store and key locations in which the interaction with the staff should be taking place. We identified the key places where removing the alarms of the garments would take place, in order to avoid clogging up the cash register area.

Fig.4: Testing the prototypes in context with users

3. FINAL CONCEPT

Understanding the needs of users through contextual intercept interviews in Mango Stores across Barcelona

Final Concept
iphoneminimal.png

Self-payment is a service that allows users to easily make their purchase at Mango stores using only their own smartphone, avoiding the queues at the checkout desk. 

 

Users scan the label of the item they want to buy, and proceed to checkout. To finish the purchase, the user goes by the checkout desk located nearby the exit, a staff member verifies the purchase, removes the alarms form the clothing items, and hands in the purchase in a special Self-payment bag. 

Fig.5: High-fidelity prototype of Self-Payment 

Outcome

The final solution was developed taking into account user needs, the client's interest as well as the technological and infrustructural limitations. After conducting a qualitative analysis of the proposed concept, we conducted a quantitative A/B test to ensure that the chosen solution was truly the most desired one. 

The final solution seeks to reduce waiting time, and engage the client with the brand in the most painful moment which is the moment when the personnel is removing the alarms from the garments. Through a gamification approach, we are able to engage the user with campaings from the brand, adding value to both the brand and the user. The self-payment, allows gives the user the independence he needs in the store, while also keeping the figure of the salesperson present, not as a supervisor, but as an advisor that will simply make sure the user is getting exactly the items he/she wants.

Journey Mango_3x.png

Fig.6: Final user bluerney, explaining the experience of the user in store, the frontend ant the backend of the service.

Brillo_Blueprint_VFtoPrint.jpg

Fig.7:  Frontend and backend wireframes and flow of information between devices.

The onboarding experience, shown when the user logs into the Self-Payment service for the first time, gives an overview of the service to the user. Explained in three simple steps, the user is able to understand how he/she can use the new service.

iphoneminimal.png

Fig.8: High-fidelity prototype of Onboarding

Fig.9: Snapshots from final deliverable detailing the whole project, how the service works and how it must be implemented in stores.

bottom of page