1. PROJECT OVERVIEW

Timeline

2022.1 - 2022.3

Platform

Figma

My Role

UX Designer,

Handled all UX/UI design solo

Responsibilities

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


The Problem

Flower arrangements on the market are expensive and with limited varieties. People interested in flower arrangement want to do their own floral designs but

Product

Posy is an App dedicated to improve the flower ordering experience by providing customized bouquet arrangements. The App allows users to order flowers with specific types and quantities ahead of time for them to pick up and arrange their own bouquet. 

2. UNDERSTANDING THE USER


USER RESEARCH SUMMARY

I 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 customers who want to create their own flower arrangement. 

This user group confirmed initial assumptions about Posy’s customers, but research also revealed that limited bouquet options were not the only factor limiting users from ordering flowers from a flower shop. Other user problems included time, price, or challenges that make it difficult to get bouquets online or go to a flower shop in person. 

 

USER RESEARCH - PAIN POINTS

 
 

PERSONAS

 
 
 

USER JOURNEY MAP

3. STARTING THE DESIGN

PAPER WIREFRAMES

 
 
 
 
 
 
 
 
 

DIGITAL WIREFRAMES

For the home screen, I prioritized pick-up location selection to help users find their preferred location easier.

 

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research. Selection location is the first step for user to start adding items to their order.

LO-FI PROTOTYPES

 

USABILITY STUDY: FINDINGS

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow was select pickup location, build a bouquet and checkout, so the prototype could be used in a usability study.

 

Round 1 findings

  • Previous ordered items should appear on the top of the list

  • Multiple payment methods are desired

  • Users need to be able to access their cart from any screens

Round 2 findings

  • Product search filters for flower arrangement page

  • Detailed description of product should be provided when users are adding items

  • Users need to see the progress of their order preparation tracking

4. REFINING THE DESIGN

 

MOCKUPS

 
 
 
 
 
 
 
 
 
 

Before usability study & After usability study

Order confirmation page of the early designs did not provide order progress tracking as well as the pick up instruction. I also revised the size and font of pick up time and pick up location so that information can be more clear for user. 

 

Before usability study & After usability study

The second usability study revealed frustration with the view cart function. To streamline this flow, I made the cart info page available from any page of the app.


HIGH-FIDELITY PROTOTYPE

Based on my mockup, I conducted user testing with 5 participants. This time, I added more interaction and features into our final Hi-Fi Prototype.

 
 
 
 
 

ACCESSIBILITY CONSIDERATIONS

  • Including dark mode with adequate color contrast

    Including dark mode with adequate color contrast To meet the needs of users who prefer to read on darker screens. This also benefits those with limited vision, who frequently struggle to read text or perceive visuals with inadequate contrast.

  • Using alternate text for images

    People who have difficulties perceiving visual material will benefit from this. Switching pictures of flowers to text which can be read aloud, shown graphically, or converted to braille using assistive technology.

NEXT STEPS

  • Conduct another round of usability studies to validate whether the three pain points discovered from user research have been effectively addressed.

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

Next

Loopify