Florist app

UX design
Mobile mockup of Florist, a flower ordering website.
Client
My personal portfolio
Project type
UX design
project year
2022

Florist is a online flower shop located in the Midwest. Florist strives to provide a unique and easy experience for flower lovers around the U.S. They offer a wide range of pre-designed arrangements as well as the ability to customize arrangements. Florist targets customers who prefer to shop online and would like to preview customized bouquets.

florist mobile mockup of the customizing paged
homepage mobile mockup
No items found.

The challenge

Busy buyers and online shoppers lacked a way to customize and or preview floral arrangements online.

The goal

Design an app for Florist that allows users to easily preview and customize arrangements.

My role

UX researcher and designer, designing Florist app from conception to delivery.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

User research summary

I created personas, conducted interviews, and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was young adults who prefer or require ordering floral arrangements online. This user group brought to light a need for accessibility. Research also revealed that accessibility was not the only factor limiting users from purchasing arrangements. Other user problems include distance from florist that make it difficult to purchase arrangements in-store, and time.

User pain points

1

Uncertainty: People don’t always know what arrangements will actually look like. They only see after a purchase on an app.

2

Time: Working adults are too busy to stop into a floral shop during open hours. They also don’t have the time to pic arrangements in-store.

3

Lack of creativity: Most floral apps do not allow the user to design their own arrangements and preview them.

4

Accessibility: Some shops can’t accommodate people with physical or psychological needs. 

Personas

Keisha is a working adult who needs to preview floral arrangements without having to go in-store because she prefers online purchasing and not have to interact with people.
Persona Keisha Vern, 23 year old single female from Tampa Florida with one dog. She has a Bachelor's degree and is a Software Engineer.

User journey map

Mapping Keisha’s user journey revealed how helpful it would be for users to have the ability to customize and preview floral arrangements.

Starting the design

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 customization screen, I prioritized a simple and easy adding and removing process to help users customize arrangements. As well as a preview page to help users see their final product.

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

Easily previewing arrangements was a key user need to address in the designs. 

Low-fidelity prototype

[video or me going through prototype]

Usability study findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed aspects of the mockups needed refining.

Round 1 findings:

  1. Users need better cues or better-labeled buttons for adding and removing arrangements.
  2. Users need to have the ability to add final customizations on the preview page and not use the word “customize” as a button on the summary page.

Round 2 findings:

  1. Being able to type or click in the number of flowers for a costume arrangement helps the user. 
  2. Users feel like they have to customize pre-designed arrangements because it looks like the customize arrangement page.

Refining the design

Before and after

  • Early designs allowed for customizations and pre-designed arrangements but after the usability study, I added an additional color to the options banner. I also made the buttons and bottom navigation more distinguishable for easy navigation.

  • The second usability study revealed confusion with the pre-designed arrangement flow. I added a customize button to that page. I also added more descriptions about the pre-arranged bouquets. 

Mockups

High-fidelity prototype

The final high-fidelity presented cleaner user flows for customizing, choosing, and previewing a floral arrangement. It also meets user needs for browsing and adjusting quantities.  

Accessibility considerations

The app has a simplistic color palette with high-contrast colors that make it easier to see text and icons.

The user has the ability to click or type in the number of flowers for customization.

The font is in the Serif family which makes it easier to read on a screen.

Going forward

Takeaways

Impact: 

The app makes users feel more confident in their online order of arrangements. It also gives users the power to customize and create their unique arrangements.

One quote from peer feedback:

“Being able to see what I built with the preview functionality makes me feel more comfortable purchasing online.”

What I learned:

While designing the Florist app, I learned that having simplistic designs for apps that will have many images makes it easier for users to follow the user path and streamline user flow. Having usability studies and peer feedback influenced each iteration of the app’s designs helps to keep the app about the user.

Next steps

1

Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.

2

Conduct more user research to determine any new areas of need.

Other projects

Let's work together!

Interested in collaborating or hiring me for UX design and research? Reach out using the form below and let's bring your ideas to life!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.