Role
I assumed the following roles:
-
UX - User Experience Designer
-
UI - User Interface Designer
Deliverables
UX/UI Design:
-
Competitive analysis
-
Remote interviews
-
Persona
-
User journeys and task flows
-
Site map
-
Paper wireframing
-
Low-fidelity prototype
-
High-fidelity mockups and prototypes
-
Usability studies and tests
-
Design system and UI kit
Project Specifications
Duration: 20 weeks
Tools:
-
Figma
-
Photoshop
Overview
Gimme Flowers It is a catalogue of flowers and bouquets that is committed to providing the most organised, timely and simple flower delivery service possible. The customer target of this florist is made up of workers who want a punctual and fast purchase with just a few clicks.
The problem
Busy customers don't have the time to go to a physical florist or to waste time on a long search.
The goal
Designing an app and a Web site for Gimme Flowers that gives the possibility of a selective, simple purchase in just a few steps.
Gimme Flowers App
Understanding the users
User research
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. The interviews confirmed that the typical Gimme Flowers customer wants to order bouquets quickly and easily, but without having to give up the refinement and choice of details of it. They want to make a sophisticated but quick purchase.
Pain points
Time
Working people don't have time to be able to buy flowers themselves.
Refinement
Customers want the opportunity to refine their searches.
Accessibility
Text and images on apps are often difficult to read.
Persona
Problem statement:
Adam is a very busy business owner who needs to place orders on a simple, well-organized app because buying in a physical store would be complicated and delay his plans.
User Journey Map
Mapping Adam’s user journey revealed how helpful it would be for users to have access to an online florist like Gimme Flowers’ app.
Starting the design
Paper wireframe
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 home screen, I prioritized a quick and easy ordering process to help users save time.
Digital wireframe
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Easy navigation was a key user need to address in the designs.
These buttons give the possibility to bring the search to the category easily
The filter button makes it easy to narrow your search.
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to refine your search and order a bouquet, so the prototype could be used in a usability study.
View the Gimme Flowers
Low-fidelity prototype
Usability study
Once the prototype was built,
I organized an unmoderated usability study, carried out remotely. The five participants, 3 females and 2 males between 18 and 70 years old, had the task of buying a bouquet, using the search filters.
Insight
-
For some users, it is not normal to find the request for delivery and payment details on the same screen, an insight is: to divide the required details into several screens according to the scope.
-
Tracking is a service that not all users want and which requires the request for further details, an insight is: users need to know in advance of the presence of tracking, if it has a cost and the details it needs.
-
Tracking is a service that not all users want and which requires the request for further details, an insight is: users need to know in advance of the presence of tracking if it has a cost and the details it needs.
Usability study: findings
-
Users want to order bouquets quickly
-
Users want more organization in checkout
-
Users want more shortcuts
-
Users want the possibility to subscribe
Refining the design
Mockups
The first projects had a confusing checkout and too little detail. In making changes we have added a screen completely dedicated to payment details to be more complete.
Before usabity study
After usability study
During the second usability study, users complained about the lack of two very important elements, namely a splash screen that introduced the app and the possibility of registering and logging in.
So users can keep their data private in the app and make it ready to use for next time.
and more...
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for searching for a bouquet and checkout. It also met user needs for a delivery tracking option as well.
View the Gimme Flowers
Accessibility considerations
Provided access to users who are vision impaired by adding alt text to images for screen readers.
1
Used icons to help make navigation easier.
2
Used detailed imagery for bouquets to help all users better understand the designs.
3
Takeaways
Impact
The app makes users feel like Gimme Flowers thinks about how to meet their needs.
What I learned:
While designing the Gimme Flowers app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
Gimme Flowers' Website
Starting the design
Sitemap
Difficulty with website navigation was a primary pain point for users, so I used that knowledge to create a sitemap.
My goal here was to make strategic information architecture decisions that would improve overall website navigation.
Paper wireframe
Taking the time to draft iterations of each screen of the website on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Paper wireframe screen size variations
Because Gimme Flowers’ customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was to refine your search and order a bouquet, so the prototype could be used in a usability study.
Refining the design
Mockups
The first projects had no way to add a bouquet to the basket directly from the home page. In making changes, we added a button “add” for every homepage product.
Before usabity study
After usability study
Original screen size
Responsive Design
I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users shop from a variety of devices, I felt it was important to optimize the browsing experience for a smartphone.
High-fidelity prototype
The final high-fidelity prototype presented cleaner user flows for searching for a bouquet and checkout.
View the Gimme Flowers
Sticker made by Storyset