Petit Boutique

 DESIGN SPRINT

 

The Logistics

BrainStation x Shopify

Timeline: 1 week
Tools: Sketch, Figma
Role: UX Designer

 

The Project

Petit Boutique is a Shopify app for merchants that provides customers with photos and a virtual change room, giving them a more realistic idea of the hand feel and fit of clothing items they are looking to buy.

Partnering with Shopify, this Sprint project was completed in one week. We were tasked with recreating the brick-and-mortar shopping experience online, allowing customers to have greater confidence in shopping decisions.

Team: Alana, Johnny, Mark, Cyndi

 

Shopify-Hero-2

1. OVERVIEW

Design Challenge


This 1-week Sprint project was a challenge in understanding the current transformation of the shopping experience, with online continuing to rise despite people's preferences to still shop in-store. As a team of 5, my group and I were tasked with researching this growing trend, understanding shopping behaviours and the current Shopify customer experience, and exploring a chosen industry sector to determine the end-user. We synthesized our research, narrowed down the problem and began the process of prototyping a digital solution for Shopify as we looked at how our customer navigates within the problem space.  

 

2. PROBLEM SPACE

A redefined shopping experience.


Although online shopping and the move to digital are rapidly on the rise, many people still prefer to shop in-store, particularly in product categories like groceries, luxury and apparel. In these spaces, the current e-commerce capabilities do not match the sensory experience that shoppers are used to. 

 

OShop1-1

2.1 SECONDARY RESEARCH

What is the real problem?


With Covid-19, many retailers are moving their operations online, a trend that will likely continue to increase post-pandemic. There is a growing need for businesses to close the sensory gap and bring unique in-store advantages to the online space, helping consumers feel confident in their purchase decisions. 

Synthesizing our secondary research points pertaining to this problem space, we summed them up into 3 key findings:

 

01


Online shopping is growing, especially during the pandemic.

 


02


Total retail apparel sales are rapidly decreasing.

 

 

03


Millennials do the majority of their shopping online and their mobile use is increasing. 

 

 


3. INTERVIEWS

Chatting with Millennial shoppers.


It was time to gain more detailed insights into the thoughts and feelings of North American Millennial consumers and learn about their pain points, behaviours, and goals.  

We interviewed 5 participants who all fit our target user group, using a questionnaire designed to gain knowledge about what they value most about in-store shopping and how the online experience compares.

OShop2-1

3.1. MAIN INSIGHTS

Having a discussion.


Among the interviewees, several key insights emerged based on commonalities and behaviour patterns.
 

 

01


People miss being able to try on clothes before purchasing them.

 

 

02


The quality and fit of a clothing item largely affect a purchase decision.

 

 

03


People miss experiencing the
true quality of materials through touch and feel.

 

04

It is difficult to determine the true fit of a clothing item online. 

05

People feel less confident shopping for clothes online than in-store.

4. THE QUESTION

So, we asked:

 

“How might we properly communicate the hand feel and fit of clothing to Millennial online shoppers in order to help them make a confident shopping decision?”

5. PERSONA DEVELOPMENT

In the minds of Millennial shoppers.


We looked at our interview findings and combined them to develop our persona. Emma represented our target user: meeting her goals and eliminating her pain points became the purpose of our app development.
 

Emma-Persona-Site

6. THE PRODUCT

Replicating a sensory experience.

In order to close the sensory gap and bring the brick-and-mortar advantages of shopping online, we created a Shopify app for merchants that provides customers with photos and a virtual change room, giving them a more realistic idea of the hand feel and fit of clothing items.

It communicates stretch and fit:


‣ Creating a custom avatar matching the measurements of the customer

‣ Translating the tech pack data from manufacturers to determine accurate clothing measurements

‣ Allowing the customer to virtually try on the clothing


It communicates look and feel:


‣ Allowing a 360° view of the product


‣ Showcasing detailed, close-up features of fabrics within the product

7. THE STORYBOARD

Visualizing Emma's experience.

In order to understand Emma's interaction with the product, we mapped out a storyboard demonstrating her decision-making and navigation. 

 

Story-1-1
Story-2-1

8. DESIGN DECISIONS

Understanding the e-commerce landscape.

We looked at common patterns across the e-commerce space to ensure consistency and align closely with the established mental models of consumers. We were careful when using imagery as we wanted to communicate texture and material feel as uniquely as we could. This area is something I would like to explore beyond the Sprint, finding better ways to bring a sense of touch using eyes alone. 

 

Inspo-1

8.1. THE PROCESS: IDEATION

Quality is our focus. 

Our team strived for quality more than anything and we took our process seriously. We worked well as we often converged and diverged as a group, exploring a variety of concepts quickly and giving everything a fair chance. We sketched ideas found in our inspiration while holding onto our blue-sky thinking. Projects often differ in focus and the parts of the process most emphasized depend strongly on the problem and constraints in question. We never lost sight of the confusions we had as we explored the problem space and narrowing it down, making sure to remain within the right scope anytime we moved forward with decision-making. 

Concept-Sketches-1
Concept-Sketches-2
Concept-Sketches-3

8.2. THE PROCESS: CONVERGENCE

Turning sketches into functional components.

Looking through the sketches, we selected several to proceed with for the main features of our app. These were chosen to be recognizable through the mental models of consumers and the addition of an interactive avatar was developed to take well-known e-commerce interactions a step further. 

 

Sketch-Concept-1-1
Sketch-Concept-2-2
Sketch-Concept-3

Putting the pieces together, our prototype came to life and we were ready to test it with our users. 

 

High-Fidelity

9. USER TESTING

Troubleshooting with our users. 

We conducted several user tests to determine the usability of our product. We focused on how specific features work within the app and whether the experience is intuitive and pleasurable. 

 

Cropped

Users understood the purpose of the app and we are able to get to the end with little trouble. However, navigation seemed confusing and lengthy in some areas. The above example demonstrates how a user struggles with a specific interaction. This occurred in several places throughout the app. We cleaned up the process by improving interaction design for a better flow and intuitiveness when using the product. 

 

10. MEASURING SUCCESS

Using evidence to shape future strategy. 

How can Shopify and its merchants determine the effectiveness of Petit Boutique?  

 

‣ Decreasing returns

‣ Increasing feature engagement

‣ Increasing repeat customers

‣ Growing conversion rates

‣ Growing units per transaction (UPT) 

Measure-Success-2
NextSteps-1

11. NEXT STEPS

So much more on the agenda.

A week-long Sprint is rarely ever enough time to execute all the blue-sky ideas circling in the mind. We presented the prototype of Petit Boutique to Shopify and they gave us valuable feedback for the future development of the idea. Primarily, we would stray away from the "happy path" and create scenarios of struggle or confusion when using our app, looking to troubleshoot those early in advance. We would continue to study the behavioural shifts in purchasing patterns closely, especially in this rapidly changing world, post-pandemic. A few other goals in mind include: 

 

 

01

Improve accessibility during product development.

 

02

Understand the changing needs of our audience through ongoing research.

 

03

Develop and refine features based on our findings.

Shopify-Hero-2


               
Designed by Gabriela Barneva.                                                                                                                                                                                                                                                                          EMAIL          LINKEDIN