top of page
  • LinkedIn
  • Codepen

Portfolio

2. Flower Blueprint 

Bouquet
Frame 111_edited.png

Background

Flower Blueprint 

Design a floral arrangement preview app for a florist
- Google UX Design Certificate

Project Type | Assignment

Duration | 2 weeks

My Role | UX\UI Design

This project is an assignment from the Google UX Design Professional Certificate program.

The goal is to Design a floral arrangement preview app for a florist.

​

UX Process

This project only had 2 weeks to complete, so I applied a lean UX process with 2 diverge/ converge phases to complete the design. 

Understand

  • Literature Review

  • Jobs To Be Done

Define

  • User Journey Map

Sketch

  • Crazy 8

  • User Flow Chart

Prototype & Validate

  • Lo-fi prototype

  • Usability testing

  • Hi-fi prototype

Phase 1 - Understand

1. Literature Review
 

"There's nothing worse than when a client pulls up a Pinterest photo..."

"...the pictures and stuff that you see on the internet, those are actually editorial photo." [1]

"When they(clients) come to me, they have maybe some images they've pulled from the internet or magazines or just ideas or visions or things that have inspired them in their own lives. A hobby or a craft or something...and then we create a vision together." [2]

 

There are different florist career paths, with 3 major branches

1. Retail florist.

2. Event florist(Wedding, Funeral, Film...).

3. Editorial Florist(Social media). [1]

I put together a florist arrangement process from Riedel et al. (2021) [4] and Culbert, J. R. (1978) [3] that could be a helpful reference for the user flow. 

Flower arrange flow.png
Note. Florist arrangement process adapted from Culbert, J. R. (1978), Riedel et al. (2021)

Some florists create their work like installation arts, like Sogetsu School's philosophy "Anyone can enjoy Sogetsu Ikebana anytime, anywhere, using any material." [5] which breaks through the limitations of material, form, and traditional aesthetics.

Ikebana_DSC_9552_(13032184793)_edited.jpg
Note. Sōgetsu-ryū. (2022, March 21). In Wikipedia. [6]
Bouquet of Flowers_edited.jpg
Note. A Traditional Mass Arrangment. Wix stock photos.
2. Jobs To Be Done

I came out with 3 Job stories to illustrate the motivation for Florist, who would need a preview app; those insights were extracted from social media and literature reviews.

Decorating Wedding Table

JTBD 1
External Communication

When I'm designing for clients with customized needs.


I want a find a way to communicate and collaborate with them.


So that I can keep everything in sync and satisfy my clients' expectations. 

Flower Shop

JTBD2
Internal Communication

When I'm handling new design ideas with coworkers.

​

I want an easy way to show the requirements and recipes.

​

So that I can make sure everyone on the team understands the design details and manage our material and budget with better consideration and transparency.

Florist

JTBD3
Inspiration Tool

When I'm trying a new design for social media posts. 

​

I want a way to preview and tweak my design concept as realistically as possible.

​

So that I can try a lot of new ideas without wasting real flowers.

Phase 2 - Define

User Journey Map

Phase 3 - Ideate

1. Crazy 8
 

I did a quick ideation exercise to develop ideas for addressing Pain points identified in the user journey map.

crazy8.png
2. User Flow Chart

After ideating and drafting some paper wireframes, I created a User Flow Chart to identify the page and process needed for this design.

User Flow.png

Phase 4 - Prototype & Test

 
1. Lo-Fi Prototype

Based on the User Flow Chart, I drafted some wireframe and pull up a Lo-Fi prototype for usability study.

Lo-Fi_edited.jpg
2. Usability study
 

I then conducted a usability study with 5 participants and followed up with a short interview. I found 4 issues with the Lo-Fi prototype.

#1

Bezier vs Freehand

Most user don't understand the word "Bezier" can still understand how to use it , but prefer a free hand drawing option.

#2

Which Came First?

Some participants wanted to pick and had an overview of the flower materials before they start to think of the arrangement.

#3

Render Naming

People are confused about different type of rendering (Buleprint, Watercolor, Photo), extra explanation is often needed.

#4

CTA Hierarchy 

There is an excess of buttons on one page, causing confusion among some participants about how to proceed.

3. Hi-Fi Prototype

Based on the insights from the usability studies, I applied some design changes:

​

  1. Include a Freehand option in the process of creating materials. #1
     

  2. Modify the screen flow so users can view all the selected materials before choosing an arrangement style. #2
     

  3. Include short descriptions to clarify the differences between the various rendering styles. #3
     

  4. Refine the hierarchy of call-to-action buttons by using different colors, shapes, or elevations to distinguish between primary and secondary buttons. #4

​

Flower preview app
Flower preview app2.png
Flower preview app final.png

Discussion

1. Impact

This app targets three major impacts on the florist industry:

  1. External communication:
    Watercolor mode is a useful tool for communicating with clients. This mode presents the design in a more stylized, artistic way, using a watercolor-like effect to give the design a softer, more artistic look. This can be a good way to show clients a general idea of what the final arrangement will look like without raising too much expectation.
     

  2. Internal communication:
    Blueprint mode provides a structured way of creating flower arrangements, making it easy to document recipes and share them with coworkers. This mode displays the structure and layout of a design in a simplified, schematic form, which can be helpful in providing a framework for the design and helping a rendering AI understand its concept and philosophy.
     

  3. Inspiration tool:
    Photo mode offers a high-quality, realistic preview of the design, simulating the look of a professional studio photograph. This can be useful for showcasing designs in a portfolio or on social media, as it provides a high-quality representation of the design.

​

Overall, this app can be helpful for different purposes and can help florists communicate their ideas more effectively to clients and stakeholders. 

2. What I learned

While conducting user research for this project, I learned that it is possible to gather valuable insights even without conducting formal interviews to define Persona or JTBD. Social media reviews proved to be a useful source of information. However, I also realized that some aspects of the project were more complex than I initially anticipated. This highlighted the importance of defining the MVP in order to prioritize and focus on the most essential features. I also learned the value of consulting with a tech specialist to ensure that the features we wanted to include were feasible to build.

3. Next steps

  1. Define the MVP (Minimum Viable Product) and consult with a tech specialist to confirm that the features we want to include are feasible to build.
     

  2. Conduct a usability test with florists' clients or other stakeholders to gather insights on the needs and preferences of different user groups.
     

  3. Work on the search logic to ensure that it covers a wide range of use cases, such as searching by flower meanings, fragrance, and other factors..

Reference 1
Reference 2
Reference 3
Reference 4

Reference

  1. Lexxyxo99. (2022, April 28). 5 florist careers that aren't owning a flower shop. YouTube. https://www.youtube.com/watch?v=EvBG_8qqgFc

  2. YouTube. (2013). YouTube. https://www.youtube.com/watch?v=LwMxpnEJmik.

  3. Culbert, J. R. (1978). Flower arranging. University of Illinois at Urbana-Champaign, College of Agriculture, Cooperative Extension Service.

  4. Ritchie, H. (2020, March 18). Food waste is responsible for 6% of global greenhouse gas emissions. Our World in Data. Retrieved December 17, 2022, from https://ourworldindata.org/food-waste-emissions

  5. What is SOGETSU? IKEBANA SOGETSU. (n.d.).  https://www.sogetsu.or.jp/e/about/creation

  6. Sōgetsu-ryū. (2022, March 21). In Wikipedia. https://en.wikipedia.org/wiki/S%C5%8Dgetsu-ry%C5%AB

 
 
Anchor 5
Anchor 6
bottom of page