UX/UI
Case Study: e-commerce / Mirage Bistrot Website
Our task was to digitally transform a local neighborhood business by integrating an e-commerce solution. We aimed to enhance their online presence, provide their customers with easier access to their offerings, and boost their competitive edge through meticulous research and development. We partnered with Mirage Bistrot, a lively and stylish coffee shop nestled in the heart of Wedding, Berlin. Alongside my dedicated team of two, we embarked on this journey to bring a fresh, digital wind to this local gem.
THE BRIEF
Integrate and design an e-commerce option for a local business
CHALLENGE
Enhance a local business’s revenue through an e-commerce integration into their existing website (given they have one, as some didn’t). This required us to invest time in market research, competitive analysis, and data assessment to ensure we could deliver an exceptional online shopping experience for the end users.
MY ROLE: UX Design, UI Design, Branding
TOOLS USED: Figma, Photoshop, Illustrator, Notion
DEVICE: Desktop
THE CLIENT
Mirage Bistrot—A local Coffee Shop/Eatery in Wedding, Berlin
Our client, Mirage Bistrot, is a chic eatery tucked away in Wedding, Berlin. It was founded in 2017 by Parisian Damien K. Sahri, who aimed to create a gastronomic and cultural oasis in Wedding. The Bistrot offers fine coffee, cocktails, and elegant yet affordable seasonal dishes inspired by French cuisine. Damien envisioned Mirage as a community hub, reminiscent of traditional French “Speak Easy” establishments. It also hosts monthly live music events and provides a platform for local artists and designers to showcase their work.
CURRENT WEBSITE
EMPATHIZE
Develop a deep understanding of the problem
RESEARCH
THE INTERVIEW
We started off our research phase by conducting an interview with the owner and team to get a better understanding of the shop, products, and competion. Also his aspirations why he opned the shop, as well as his pain points and goals for the business. In the interview, we discovered some important things to consider for the next steps.
From the interview, we leaned the following insights:
Their biggest selling product is their rich brewed coffee. The locals love it and can't get enough of it!
An important concern is to create a link to the neighborhood through various events.
The website has always been just an afterthought and they've always wanted to step it up
They don't want a large fancy site and not steer too far from their existing site.
The online store shouldn’t be too hard to navigate.
They’ve always wanted to have some sort of swag (shop merchandise).
INTERVIEW
We kicked off our research phase with a thorough interview with the owner and team. This step was crucial in fully comprehending the shop’s essence, its range of products, and the owner’s motivations for founding the shop, as well as his aspirations. The valuable insights gathered from the interview laid a strong foundation for the direction of our ensuing steps.
From the interview, we learned the following insights:
- Their signature product, the richly-brewed coffee, is a local favorite and constantly in high demand.
- A key priority for them is to foster strong community ties through various events and activities.
- Until now, their website has been a secondary concern, but they are eager to improve and optimize it.
- They prefer a modest, user-friendly website that aligns with their current design and aesthetic.
- They emphasize the importance of easy navigation for their online store.
- They are interested in expanding their brand by introducing shop merchandise.
INTERVIEW
We kicked off our research phase with a thorough interview with the owner and team. This step was crucial in fully comprehending the shop’s essence, its range of products, and the owner’s motivations for founding the shop, as well as his aspirations. The valuable insights gathered from the interview laid a strong foundation for the direction of our ensuing steps.
From the interview, we learned the following insights:
- Their signature product, the richly-brewed coffee, is a local favorite and constantly in high demand.
- A key priority for them is to foster strong community ties through various events and activities.
- Until now, their website has been a secondary concern, but they are eager to improve and optimize it.
- They prefer a modest, user-friendly website that aligns with their current design and aesthetic.
- They emphasize the importance of easy navigation for their online store.
- They are interested in expanding their brand by introducing shop merchandise.
COMPETITIVE ANALYSIS
During the interview, we inquired about their competitors. Following additional online research, we assembled a comprehensive Competitor Analysis, examining other cafes and eateries in the Wedding area.
Key Takeaways:
- Gain a comprehensive understanding of the features and options available on competitors’ websites.
- Identify beneficial features that could be incorporated into our client’s site.
- Expand our understanding of the available options for our client.
USER SURVEY
Through a user survey conducted with 22 regular patrons, combined with insights from our comprehensive interview, we were able to gather valuable data and gain deeper insight into the preferences and behavior of Mirage Bistrot’s customer base.
52%
are 22-36 years of age
61%
were female
76%
are returningcustomers
54%
attend their events regularly
58%
are interested in an online shop option
46%
would by coffee beans in bulk
34%
would buy brandedmerchandise
25%
would be intrested in affordable coffee equipment
DEFINE
Clearly articulate the problem we would like to solve
Our extensive quantitative research, combined with surveys, guided us to formulate our Problem and Hypothesis Statements.
PROBLEM STATEMENT
Currently, Mirage lacks an online shop. With the advent of pandemic restrictions, walk-in traffic – a significant source of revenue – the shop has seen a drastic decline. However, the local community is highly supportive and keen on purchasing their favorite coffee in bulk.
HYPOTHESIS STATEMENT
We believe that by integrating an e-commerce option and redesigning the site in line with modern design trends, we can better engage and reach Mirage’s dedicated customer base. This will also enable their loyal customers to stay informed and attend various social events (once restrictions are lifted). We would measure the success of this initiative by a significant increase in sales of beans and merchandise, as well as increased attendance at their events.
HMW
With the Problem and Hypothesis Statements at hand, we posed the following questions to ourselves:
HMW: Help their loyal customer base buy their coffee easier
HMW: Better inform the locals about their regularly held events?
HMW: Make the experiance smooth and easy for the user?
USER PERSONA
After collating and analyzing the collected data, we crafted a User Persona to guide our design process and ensure our solutions cater to the needs of our target user. Allow us to introduce Sabina, who embodies the typical customer at Mirage Bistrot.
USER JOURNEY
To better empathize with our user, Sabina, we developed a User Journey Map. This visual tool allowed us to understand Sabina’s interactions with Mirage Bistrot, pinpointing her motivations, needs, and potential challenges, and guiding our design process.
AFFINITY MAPPING
Throughout our process, we employed affinity mapping and engaged in several dot voting sessions. These exercises helped us validate our findings and ensured that our decisions were collectively agreed upon and data-driven.
TASK ANALYSIS
Before progressing to the ideation stage, we engaged in a series of exercises to refine the information architecture of the website. We crafted and tested several wireframes to ensure that the user flow aligned with the insights gathered from our research. For ease of navigation, we divided the shop page into three distinct sections: Beans, Coffee Equipment, and Merchandise. After testing and refining our wireframes, we finalized our Site Map, as shown below.
SITE MAP
The Site Map visualizes the proposed structure of the website. It provides an overview of the page hierarchy and navigation paths, ensuring an intuitive and seamless user experience.
IDEATE
Brainstorm all possible solutions
With our information architecture and user flow in place, we began by creating initial low-fidelity (Lo-Fi) prototypes. After refining these foundational models, we advanced to medium-fidelity (Mid-Fi) prototypes, enhancing the layout and functionality through continuous analysis and evaluation.
LO-FI PROTOTYPE
MID-FI PROTOTYPE
HI-FI PROTOTYPE
Following the refinement of essential design elements and user flow, particularly the checkout process, we crafted high-fidelity (Hi-Fi) prototypes utilizing Figma. This step enabled us to visualize the user experience more precisely and confirm that every detail was meticulously designed to cater to the specific needs of Mirage Bistrot’s clientele.
Homepage - Updates
Shop - Beans
Product Page - Beans
Cart
Input Info - Review - Purchase
Thank you page
Some of the other pages incorporating the redesign
In addition to the website redesign, I also had the opportunity to flex my creative muscles by designing branded packaging and merchandise. These elements were designed to align seamlessly with the website’s aesthetic, ensuring a consistent brand image across all platforms.
PROTOTYPE
Create a detailed representation of our product
FINAL HI-FI PROTOTYPE
For our Final High-Fidelity Prototype, we meticulously refined all design elements, ensuring that every detail was user-centric and met the customer base’s needs. The prototype brought our vision to life, showcasing a seamless user experience from the landing page to the checkout process. We ensured that the design was not only visually appealing but also easy to navigate, aligning with the stakeholder’s wishes. This prototype served as a tangible representation of our research, planning, and design processes, embodying the culmination of our dedicated efforts.
NEXT STEPS...
Brainstorm all possible solutions
WHATS NEXT
- Extensive testing of the high-fidelity prototype, and conducting desirability testing to gauge user response.
- Implementing changes based on testing results to ensure the optimal user experience.
- Continual testing, refining, and adjusting to meet user needs and stakeholder requirements.
- Although the initial assignment was to design a desktop experience, adapting the design to be responsive across different devices would be an advantageous and exciting next step.
CONCLUSIONS
- Collaborating within a team fostered an environment of creativity, shared responsibility, and mutual trust. It enabled us to challenge, validate, and refine our assumptions.
- The importance of maintaining a user-centric approach, even if it means defending user needs against differing opinions.
- The practice of thorough documentation proved invaluable, providing a robust resource to guide our design process.
- Leveraging the diverse backgrounds and skill sets within our team enriched the product design.
- The project was an excellent opportunity to hone my design skills and experiment with various styles, reaffirming the importance of continuous learning and growth in the field of UX/UI design.