2. Flower Blueprint

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.

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]

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.

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.

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.

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.

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.

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.

View Lo-Fi Prototype

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.

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.

Which Came First?

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

Render Naming

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

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:

Include a Freehand option in the process of creating materials. #1
Modify the screen flow so users can view all the selected materials before choosing an arrangement style. #2
Include short descriptions to clarify the differences between the various rendering styles. #3
Refine the hierarchy of call-to-action buttons by using different colors, shapes, or elevations to distinguish between primary and secondary buttons. #4

View Hi-Fi Prototype

Discussion

1. Impact

This app targets three major impacts on the florist industry:

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.
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.
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

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.
Conduct a usability test with florists' clients or other stakeholders to gather insights on the needs and preferences of different user groups.
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

Lexxyxo99. (2022, April 28). 5 florist careers that aren't owning a flower shop. YouTube. https://www.youtube.com/watch?v=EvBG_8qqgFc
YouTube. (2013). YouTube. https://www.youtube.com/watch?v=LwMxpnEJmik.
Culbert, J. R. (1978). Flower arranging. University of Illinois at Urbana-Champaign, College of Agriculture, Cooperative Extension Service.
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
What is SOGETSU? IKEBANA SOGETSU. (n.d.). https://www.sogetsu.or.jp/e/about/creation
Sōgetsu-ryū. (2022, March 21). In Wikipedia. https://en.wikipedia.org/wiki/S%C5%8Dgetsu-ry%C5%AB

Anchor 5

Anchor 6

Previous Work

Next Work