Overview
Flowers & Co. is a floral and bouquet mobile application that emphasizes customization. With over +120 stores in the U.S and international locations, users have access to locally sources flowers and competitive prices.
.png)
Project Type
UX/UI Design Capstone
Timeline
10 weeks
Role
Product Designer
UX Researcher
Brand Strategist
Expanding reach with a floral flair
Business Ask
Flowers & Co. reached out in search of team that could design them a mobile application. After growing their client base to 35,000/month, they recognized that they could grow their impact and reach their customers more directly with an application.
-
Encouraging online orders to over the phone orders
Flower & Co Owners would like us to focus on:
-
Emphasizing and promoting the existing loyalty rewards program
-
Attracting new customers via the apple and android stores.
Challenge
How can customers get easy on-the-go access to customizing and ordering flowers, while also taking advantage of their reward points?
A few questions came to mind:
-
How do customers currently go about ordering flowers?
-
What does their typical process look like?
-
Are there any pain points throughout the process?
-
Why might they prefer calling in to ordering online?
User-Centered Approach
Design Process
3. Ideate
Competitive Audit
Storyboarding
5. Test
User Testing
Incorporation of Feedback
1. Empathize
Secondary Research
Primary Research
2. Define
User Persona
Empathy Mapping
4. Prototype
Low-fidelity wireframes
6. Prototype
High fidelity wireframes
Understanding the Challenge
Preparing for Research
In this scenario, we would ask the Flowers & Co. team for reports and data that they collected on their customers and target audience. However, we quickly recognized that additional research would be necessary to gather information specifically on our users' perspectives and experiences with flower apps and their experience with Flowers & Co.
Method 2: User Interviews
I reached out to over 25 regular Flowers & Co. customers from a listserv they provided us with. First, I emailed them and extended an invitation to participate in our user interviews. However, we didn't receive many replied and so the next step was to text customers to participate and also encourage shop owners to offer 10% off of the next order if they participated in our interview. After this we were easily able to get 15 participants to participate. We were able to gather the following data:
>60%
agreed
Lack of customizability
Booking - Next Steps
Lack of Confirmation
agreed
>45%
agreed
>70%
Defining the Problem + Goal
Improving the user experience
Users need access to freely customize their orders. They also need clear next steps at each stage in the floral arrangement purchasing process.
Measurability of Success:
Number of completed purchases
New mobile app downloads
Utilization of rewards program
User Journey Map
Empathizing with the target user
After I organized the results from the user interviews, I used the feedback to develop artifacts including a persona and user journey map. These aided in combining user insights and maintaining an empathetic view of our target users. During this process, I also researched existing apps such as 1800Flowers, Edible, and ProFlowers.
Here, we have an example of our user's Omar Owino’s user journey revealed how essential it is for user’s to have an easy, quick and customizable process to order flowers on the Flowers & Co. app.
Task:
Download flower shop app
Emotion:
Overwhelmed by the large amount of flower shop apps
Improvement Opportunities:
Prompt users to download app when opening the website
Ideate
Storyboarding
As I moved on to the ideation stage, one exercise I used to begin fleshing out some ideas was storyboarding. I sketched various screens, which allowed me to get a clearer understanding of the direction of the user flow that would most effectively solve the user's pain points.
Ideate
Auditing our competitors
The first step in our competitive audit where were identified direct and indirect competitors and scored each based on various factors such as their overall desktop and app experiences. As well as Interaction, visual design and content. Afterwards, I used this insight and information to complete a competitive audit report which was used with our research and findings during our empathize stage to begin wireframing and prototyping.
Building the design
As I moved on to the next stage - wire framing and low-fi prototyping I made sure to consider the various artifacts from our Empathize and Ideate stages. These served as our anchors to ensure our design process remained user-centered throughout.
.png)
.png)
.png)
Usability Testing
Pain Points
I conducted a usability study in which 6 users were asked to test our low-fi and high-fi prototypes. During our the usability study of our low-fi prototype 3 out of 5 users reported that the customization was too difficult to use and found it confusing. Over 80% quit before completing the task.
3 out of 5
Customization Feature
3 out of 5
Rewards Program
4 out of 5
Variety of Choice
Solutions
Implementing feedback from users
I analyzed the data and feedback from the usability study and gathered insights. I decided to add a confirmation alert and to update pricing upon selection of adds-on to avoid users being surprised with the cost upon viewing their cart items. These changes were successful and led to 100% of users reporting that they felt confident when customizing their orders and knowing the cost during and after the shopping process.
01
Easy customizing of flower arrangements
-
Simplifying customize feature
-
Clarifying messaging
-
Confirmation of completion
02
Clear next steps in the order process
.png)
-
Accessible delivery roadmap
-
Multiple opportunities to change order
.png)
USABILITY TESTING #2
Findings
I conducted a second usability study with the same participants in order to identify what other points in the user flow needed to be improved upon. I was able to gather the following data and make observations to make the necessary iterations moving.
Overall IA
Element Consistency
-
Improve overall IA and ease of starting floral arrangement selection
-
Seasonly dated theme and color palette
-
Overall consistency with elements
Dated theme/color palette
Accessibility
-
I ensured colors used met WCAG 2.1 AA standards to account for color contrast ratios.
-
I applied dynamic type and auto layout features for users to adjust accordingly.
-
I integrated voice to text features on all search capabilities across the desktop and mobile sites.
Iteration
Continuing to improve the product
I continued to iterate and apply the feedback provided throughout the usability studies. Ultimately, I made three versions of the product. The emphasis this round was cleaning up the home page IA to ensure users were more easily to access flower arrangements and improving the overall application of the brand throughout the mobile app.
Version 1
Version 2
Version 3
Final Product
High Fidelity Prototype
.png)
.png)
.png)
.png)
.png)
.png)