Detailed Case Study
Cover: UX Design CASE STUDY – Design a Flower Catalogue App for a Trendy Florist by Miriam Elting
INTRO
A design solves a real problem that users are experiencing. And a strong design always puts the user front and center.​​​​​​​
User experience design (UX design) is all about how a person, the user, feels when interacting with a product and experiences the product. It' about developing a product, improving its usability and making it easier to use, so that the design, structure and purpose of the product are understandable to everyone.
Coursera is the most professional online learning platform on the market and offers numerous online courses, certifications and degrees in a variety of subjects from renowned providers such as universities and global companies.
Google offers various professional certifications here and Coursera, through their financial aid program, gave me the opportunity to expand and refresh my existing knowledge through the Google UX Design Professional Certificate course.
So a big thank you to Coursera!
Good design is marked by simplicity, structure, and functionality. A good user experience is (among other things):
- usable
- equitable
- enjoyable
- useful
In 2018, the research firm McKinsey & Company studied companies in 3 industries: medical technology, consumer goods, and retail banking. They found that, regardless of industry, businesses that focused on good usability and design performed better than their competitors. Basically it comes down to this: When ppl like a product, they use that product a lot, and they recommend it to their friends. And more ppl using the product means better business for the company. Plus, when users have a good experience with the product, they’re more likely to have a positive opinion of the company that made it. A win-win for the user and the business.
The Phases of the Design Thinking Framework
empathize   –   define   –   ideate   –   prototype   –   test
Although it may sound like a linear process, the framework should be interactive, meaning that certain phases are repeated as the design is refined. (This is just one of the frameworks UX designers use to organize their approach. The framework used is based on the product being designed and the organization being worked for. However, they all share a few basic principles: focus on the user; create solutions to the user's problems; collaborate with teammates from different departments; validate designs; revise designs as needed to create the right user experience).
Let's dive in
Project Overview – The Product: Flower catalogue app for a trendy florist. Target users are locals searching for flexible self pick-up or delivery by a local florist for one-time purchase or subscriptions.. – Project duration: Nov 2022 – ongoing
Project Overview – The problem: Not enough sales and regular customers; The goal: Create a simple, clear, user friendly, and accessible app that showcases the floral offerings and provides to pre-order for a flexible self pick-up or florist delivery combined with the option for one-time purchase or subscription to regular flower pick-ups and delivery.; My role: UX Research, UX Design; Responsibilities: User research (interviews, personas, ...), Wireframing, Prototyping, Usability studies, Hi-Fi mockups
UX RESEARCH
UX design is not about solving problems we assume users want solved. It’s about solving problems that users actually want solved. UX research reveals who they really are and what they actually need, allowing us to better empathize with the user.
EMPATHIZE WITH USERS
Empathy is the ability to understand the feelings or thoughts of another person in a situation.
Empathy is at the core of everything UX designers do. If we approach UX research with empathy, we find it easier to solve the right problem.
In this case, we decided to use INTERVIEWS as a research method.
The following steps were taken:
> Determine the research goals and questions
>> Finding and recruiting interview participants
>>> Preparing the user interviews
>>>> Conducting user interviews
>>>>> Creating empathy maps
>>>>>> Identifying pain points
“If I were given one hour to save the planet, I would spend 59 minutes defining the problem and one minute resolving it.” 
- Albert Einstein -
PERSONAS
Personas are fictional users whose goal and characteristics represent the needs and goals of a larger group of users. Personas can help us identify patterns of behavior in users. These patterns might point to a common pain point that a group of users experiences. Personas are built based on research.
> Example: USER STORY
As a doctor with a demanding schedule and unpredictable shifts
I want to pre-order and self pick-up my flowers
so that I am able to get them on the way home, whenever I am ready.
As a doctor with visual impairment 
I want to use apps that are optimized for screen readers
so that I can use them easily.

The PROBLEM STATEMENT is a clear description of the user needs to be addressed and gives the team a clear goal to focus on.
Persona Elliot: image, geographic data, goals, frustration, quote, description; Problem Statement: Elliot is a busy line cook and remote upskiller that enjoys expressing his love for his partner through flowers who needs to save the money on flower delivery and time during pick-up because his online course is expensive and he is always short in time.
USER JOURNEY MAPS
User journey maps are a tool used by UX designers to understand the obstacles a user faces while interacting with a product. The user journey describes a series of experiences a user has along the way as they achieve a specific goal.
The creation of User Journey Maps is based on the results and insights of the created Personas and User Stories. User journey maps help us a lot to put ourselves in the shoes of the user. If we can't put ourselves in the user's shoes, we can't be sure that our design will actually help them.
ACCESSIBILITY
Accessible design means ensuring that all users have everything they need to feel comfortable on their user journey. A UX designer leaves no one behind, so we include everyone who has a permanent, temporary, or situational impairment. (e.g. only one arm OR sprained wrist OR a squalling newborn on one arm).
Wireframes and low fidelity prototypes
Starting the Design - Paper wireframes, digital wireframes, low-fidelity (lo-fi) prototypes, usability studies
!! It is important to point out that designers can take different paths when creating wireframes and prototypes. The following approach represents an exemplary way. !!
GOAL STATEMENT
In order to create effective wireframes, we first merge the insights from empathy maps, personas, user stories, and user journey maps to come up with a focus scope for the designs. To focus the scope of our designs, we create a product goal statement, which shortly describes a product and its benefits for the user. This is the transition from the problem the user is facing to the solution we can create as UX designers. To answer the who, what, why, and how, we lean on the user research we’ve already conducted. The goal statement provides the ideal solution for the design.
Sample goal statement for persona Leah:
Our flower catalogue app will let users order flowers for a flexible self pick-up,  which will affect people with unpredictable shifts by having the flowers prepared and reservated, and not having to stick to a specific pick-up time.
We will measure effectiveness by analyzing the number of daily and weekly purchases/self pick-ups.
USER FLOW
Designing an efficient product requires a full understanding of users and their needs. Outlining the user flow before starting to design can help UX designers to picture how users will move through the app or website.
A user flow is the path taken by a typical user on an app or website so they can complete a task from start to finish. The goal is to map how users achieve a specific goal as they move through a product. That way, we have a clear overview of the product's functionality before the design process begins.
Sample user flow for persona Leah; User task: Use the Eden app to order a bouquet of flowers for self pick-up at the local florist.
STORYBOARDING
In UX, a storyboard is a series of panels or frames that visually describe and explore a user's experience with a product. It’s a tool to visualize potential solutions to problems the user is facing. Storyboards help to make a strong visual connection between the insights we uncovered during research and the flow of experience. 
A real product might have many screens, but the storyboard should focus on just the most important parts of the user's experience with a product, and as the name suggests, there's a story that should be told through the panels of a storyboard.
There are 2 types of storyboards:
Big-Picture Storyboard
Focus: User experience > How people will use the product throughout their day and why that product will be useful.
It helps us understand the entire user experience and emotional engagement that a user will have with a product, including the different challenges, potential pain points, and types of interactions the user will encounter. Understanding how a user feels while experiencing the product is an essential part of the design process.
If you're early in the design process, you might want to present your high-level ideas to stakeholders to get them excited and bought in. In this case, a big-picture storyboard makes sense, so your team can focus on the user, their needs, and their experience with your product.
Big-Picture Storyboard - Scenario: An app for self pick-up orders at the local florist, optimized for screen readers. Panel 1: Leah is working an unpredictable schedule and has a visual impairment. Panel 2: Leah finds the Eden app and opens it. Panel 3: She scrolls through the bouquets and selects her favorite one. Panel 4: Leah places her order with help of a screen reader and keeps on working. She receives a notification on her phone when her bouquet is ready with a link to a map. Panel 5: She picks up her order. Her way to the shop she found with the linked map through voice guidance on her headphones. The florist simply scans the QR code to match her quickly with her ordered bouquet. Panel 6: Leah is happy. Her flowers look and smell amazing and will make her appartment even more beautiful.
Close-Up Storyboard
Focus: Product > What happens on each screen of the product? What does the user do to transition from one screen to another? And after we’ve created the storyboard, what are potential problems with the flow? It’s less about emotion, since we're not focused on the user. Instead, it’s focused on the practicalities of the design itself.
A close-up storyboard is more useful after your initial design directions have been explored. Since a it focuses on the details within the product, like screens of an app, this type of storyboard can help you think through practical ideas about improving the product.
Close-Up Storyboard - Scenario: An app for self pick-up orders at the local florist, optimized for screen readers. Panel 1: Leah finds the Eden app and opens it. Panel 2:  She logs in, or creates an account, Panel 3: or directly starts browsing the bouquet options. She selects her favorite. Panel 4: Leah reviews her order with help of a screen reader and adds a note for the florist. Panel 5: She places her order through her account or as a guest. Panel 6: Leah receives a success message and that she will be notified as soon as her bouquet is ready. She can then pick it up whenever she is ready.
WIREFRAMES
A wireframe is a basic outline of a digital experience, like an app or a website. A good wireframe is all about organizing and communicating information clearly to colleagues who will implement the design. The guiding question: How do I organize information on the page in a way that makes sense for users?
PURPOSE:
– Establish the basic structure of a page before any visual considerations, like color or images, are added.
– Wireframes serve as an outline to get the team on the same page early in the project.
– Highlight the intended function of the product and how the elements serve the overall functionality.
– Help designers save time and resources and allow the team to quickly try out different design options. 
There's almost no wrong time to use a wireframe. Some UX teams might be tempted to skip wireframing, because they think it'll save time, but it's a key part of the design process. 
BENEFITS:
– Inform the elements to include in the design. Seeing the elements laid out on a page will help everyone decide if the right elements are included.
– Help you catch problems early. Wireframes allow to map out how all the elements will look on each page and how users will navigate from page to page. This lets us check if elements are missing, out of order, or disorganized.
– Get stakeholders to focus on structure instead of details like color and text. The magic of a wireframe is its simplicity. This allows you to make decisions early on the structure of the website or app.
– Save time and effort. The wireframe serves as a guide for everyone involved in the project. Engineers and other stakeholders agree to follow the guide early, so fewer revisions are needed. Knowing how the design will be built saves time and effort for everyone.
– Allow to iterate quickly. When you design, you always need options. Overall, wireframes let us explore a greater number of design ideas and make it easy to create new designs faster.
Sample of paper wireframes: Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the item detail screen, I prioritized a quick and easy ordering process to help users save time with the option to easily receive personal support. - Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe.
Digital wireframes: As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.  To meet the qualitative, financial and timely key user needs, we offer the possibility of pre-ordering for flexible self pick-up and delivery personally by the florist. Both options are combined with the possibility of a one-time purchase or subscription.
Digital wireframes: In addition to the qualitative, financial and timely key user needs, the development focused on the key user needs of personal service and accessibility.
LOW-FIDELITY PROTOTYPES
A prototype is an early model of a product that demonstrates its functionality, without actually building the entire product. It demonstrates stakeholders and potential users what the design idea can do. They can interact with the prototype and provide feedback before the team invests a significant amount of time and money.
A low-fidelity (lo-fi) prototype is a simple interactive model that provides a basic idea of what the product would look like. The goal is to make the designs testable so that we can collect and analyze feedback early on. As we transition from a wireframe to a low-fidelity prototype, the biggest difference is the interactivity or the ability to click from one screen to another.
When starting to create prototypes, it also makes sense to start with paper prototypes, as they are inexpensive, allow for quick iteration, are low commitment, and thus encourage honest feedback in particular. In addition, the creation and analysis represents a collaborative activity and in UX design there can never be too many cooks in the kitchen.
At this point, let's jump right to our digital lo-fi prototype:
Low-fidelity prototype: The low-fidelity prototype connected the primary user flow, of selecting a bouquet from the catalog app and ordering it for self pick-up from the local florist, so that the prototype could be used in a usability study with users.
Test the lo-fi prototype in Figma yourself:

more to come ...

You may also like

Back to Top