Merci Bouquet: A UX Case Study
With technology getting more accessible day by day, so is people’s reliance on it to do essential tasks from banking, to getting coffee in the morning, to tracking their water intake. Another task that’s become convenient is online shopping.
However, while shopping for clothing, books, and music have been a part of the e-commerce world for some time, small businesses offering products uncommon to the scene (such as florists) may take advantage of this shift to reach a broader audience.
This project was planned by my team of 4: Allan Lee, Cindy Leung, Kate Leenutaphong, and myself! After collecting and analyzing the research, we all designed and tested competing designs (which you can check out here, here, and here!).
Research and Discovery
Domain Research
To set the foundation for our research, I looked up the websites of florists around the Granville/downtown area to find out what were common features, and if online shopping was already a service they offered. I also looked up popular websites, such as Venus et Fleur to see the differences in the services they offered versus other flower shops.
Surprisingly, most florists had an e-commerce platform. However, most websites showed stock images that did not match their products. Venus et Fleur is able to circumvent this problem by offering super specialized products, which makes online delivery and customization a smooth experience on their website.
Observations and Interviews
In order to understand the local retail stores better, my team decided to visit a few of them. We performed contextual inquiries (where we passively observed customer interactions with the store and florists) and semi-structured interviews.
From our excursion to Granville Island, we found:
- Senior citizens represented a large majority of the customers who go to florists
- Customers enjoy the interaction with the florist, learning about new items, the background of the flowers etc.
- Florists are unable to post all their products on their website, because all of them can be customizable. It also depends on what is in stock.
“Online platforms cannot really work for florists because it’s an independent, creative business” — Business owner
Surveys
After collecting preliminary research, we began formulating survey questions. We wanted to know what were the important decision factors for purchasing flowers, and what made going to the florist so much better than shopping online.
We also wanted to know what would make their online experience better. The survey was shared to family and friends through Facebook and Slack. We got 62 responses.
Affinity diagram
After gathering all this data through observations, interviews, and surveys, we used an affinity diagram to lay it all out and make sense of it. An affinity diagram is used by UX researchers to categorize information into meaningful sections to help analyze data better. How? By writing out each finding onto a sticky note and moving them around a whiteboard or wall.
The Opportunity:
After laying all this information out, we felt that we were provided an opportunity.
Most of our survey responses were from the 18–34 demographic, which was why we saw that 68% would consider purchasing flowers online. However after observing that senior citizens were the larger consumer base, we decided to shift our goals and design an e-commerce experience for senior citizens.
Web design nowadays is targeting the everyday user, but as healthcare gets better, there’s a demographic of people that’s growing who aren’t catered for. So we wanted to build our website for customers who’d likely use our service the most.
Persona
With all this in mind, let’s introduce you to Morgan, our user persona for this project. The user persona was a useful tool to bridge the gap between research and planning.
Planning
Storyboard
We created a storyboard to illustrate Morgan’s journey buying flowers.
Customer Journey Map
We then created a journey map to show her emotions. We realized that her shopping experience at a physical store was fairly positive, which was what we wanted to maintain.
User Stories
Using the journey map, we were able to come up with a set user stories that helped guide our design decisions.
User flow
After understanding her pain points, I created a user flow that mapped out what steps were required to complete the task on a website.
From our planning stage, we came up with 4 things to consider with our design:
- We must maintain the positive aspect of visiting the physical store
- We must resolve the issue of having to travel to a physical store, having already bought things online
- We must resolve the difficulty of navigating an e-commerce website
- We must resolve the issue of our store’s product not matching the photo on the website
Design
Paper prototyping
Our team split up after planning our features to develop our own designs. We started out with paper prototyping, where we roughly sketched out the wireframe of each screen.
Testing
I then tested my paper prototype. I asked people to complete a set of tasks by interacting with the paper screens.
Med-fidelity prototyping
Using the feedback gathered from the paper prototyping, I then created the mid-fidelity prototype using Sketch and InVision.
Based on our research, our users couldn’t type very quickly, so areas that required a large text input had a text to speech button. Large texts (no text smaller than 16 pts), concise labels, and proper spacing between clickable elements were used to ensure good usability and understandability.
A guided process was implemented through a clear progress bar that laid out the steps, with section headers, so that the user can refer back to what has already been completed incase they forget. (understand how it works). We also asked our user for their email address and phone number to send an image of the final arrangement before its delivery, and call if there were any changes.
Testing
- When testing, I learned that I had to maintain the scroll function when going from one screen to another.
- I also had to change the “go to cart” label to “review item” because it wasn’t clear what the difference was between “go to cart” and “checkout”.
Final prototype on InVision
Takeaways
One of the challenges of this project was the amount of research conducted before the design phase. I would’ve liked to talk to more customers from our target user base once we learned who they were. However, considering the two week timeline of this project, I believe my team and I came up with some really unique solutions.
I learned how to work through the UX Design process thoroughly, but efficiently and I’m excited to see what else I can come up with in the future.
If you made it all the way down here, Merci Bouquet! 💐
