Loading Ralph Chang's 2024 portfolio

Flori

Floral design app

UI/UX DESIGNUSER RESEARCHUSABILITY STUDY
planet longhorn

Overview

Flori is a UX case study for Google UX Design Certificate. It’s a floral arrangement app designed to help users create beautiful and customized flower arrangements for any occasion.

Role

UI/UX Designer

Completed

Fall 2022

Design Link

Figma
OVERVIEW

The problem and the goal.

branding
USER RESEARCH

Understanding the user.

In my user research on florists, I found issues such as uncertainty about flower and foliage combinations, time and cost involved in trial and error, difficulty in client communication, and disorganization in order tracking. To solve these, I aim to create an app providing bouquet tips, improving client communication, and managing orders and inventory. The app will also have features for users with disabilities.

branding
PERSONA

Problem statement.

Alisa Brooke is a trendy florist who needs a new way to make sure her bouquet design will be well-received by her customers because she doesn’t have the time and resources to redo her bouquet.

branding
PERSONA

Problem statement.

Julia Jiang is a trendy florist who needs a faster way to design her bouquet and publish them because she wants to showcase her work to the world faster.

branding
USER JOURNEY MAP

A fast and easy way to see the floral design.

Thanks to user research, I can segment a florist’s job into small actions and find place for improvement opportunities.

branding
WIREFRAME

Paper wireframes.

Paper wireframes aim to enhance the user experience and solve any pain points. These wireframes took inspiration from image editing and note apps to develop a user-friendly interface that exceeds expectations.

branding
WIREFRAME

Digital wireframes.

The first wireframe allows users to access recent projects at the top, find suggested color combinations for inspiration in the middle, and view a card layout of flowers at the bottom. The second wireframe is the design panel for bouquet.

branding
PROTOTYPE

Low-fidelity prototype.

Here's a low-fidelity prototype that includes a home page where users can create or edit files, search for content, and add flowers to a selected project. When the user exits a file, a confirmation box will appear to let them know that their progress has been saved.

branding
USABILITY

Usability study findings.

branding
MOCKUPS

Refining the design.

The refined design will have a list of scrollable buttons at the bottom, categorizing the user's floral design needs. This leaves more canvas space for design and creation. Usability test results show that users don't often add flowers to a project. They need a simpler way to add flowers during the design process. To address this, I've added a feature for users to favorite flowers. On the design page, under the 'focal' and 'foliage' buttons, users can view their favorite flowers. This makes it simpler for them to add preferred flowers to their designs.

branding
PROTOTYPE

High-fidelity prototype.

branding
ACCESSIBILITY

Accessibility considerations.

branding
TAKEAWAYS

The project was instrumental in deepening my understanding of the design thinking framework. I enhanced my visual design skills by adhering to Material Design guidelines and developing a compact component library. Additionally, it significantly improved my ability to empathize with users, leading to more user-centric designs.

IMPACT

Florist can design floral arrangement easily and present their design to customers to ensure their bouquets are well-received without costly and time-consuming re-dos.

NEXT STEP

The UI/UX design of Flori involves continuous iteration based on user feedback and testing, learning advanced features of Figma like autolayout, and incorporating more accessibility features.

WHAT I LEARNED
  • Accessibility is crucial:

  • Focus on contrast, font size, and user feedback to make the app usable and enjoyable for a broad audience.
1/4

More projects

Greater
UIUX DESIGN

Design an app that connects users with LGBTQIA+ friendly spots in Austin, Texas.

UT Sehath
WEB DESIGNWEB DEVELOPMENT

Design and develop an informative fundraising platform to showcase UT Sehath's commitment to global healthcare.