Fast & easy flower shopping with Flora's one-page web app


Overview

Some of us love it and some of us hate it, however, there will be a time when a certain event will expect a nice bouquet from us. 


Then, the questions begin. What flowers? What colors? How many? When?


Here is where Flora steps in. The premise of the web app is simple. You start at the top of the page with a 3D florist greeting and asking you to check out her virtual boutique. As you scroll, you will select:

  1. An upcoming event
  2. The matching flowers to that event
  3. The size of the bouquet
  4. The address and the message on the card

And that's it. In less than 10 minutes you can check the task off from your to-do list.




To begin, regardless of the project I work on, I don't believe in any UX dogma. I see UX as a toolbox of techniques and tricks that can be used in the context of the problem we have to solve. Flexibility is key.


At each stage, I employ techniques from my "UX toolbox"



Each project must adhere to the ISO 9241-210, the highest standard of ergonomics and human-computer interaction.


Here is the UI/UX process for this project:


My roles & responsibilities

  • Logo and brand identity design
  • Design & develop the website
  • 3D Design assets

Process & What I did

I prepared an initial set of KPIs that we are going to constantly measure on every iteration of the project:

According to market research and user interviews, I discovered that men between the ages of 18-29 make up for the majority of online flower shoppers. They want to solve the problem quickly without dwelling too much on research. At the same time, they do not want to make a bad decision when choosing the bouquet since they are aware that some flowers and their quantity have various cultural significances.


So I kick off with the question. How can picking a bouquet to deliver online be as easy and fast as possible?


One choice that I made early on was to make the web app one page long.

This way, instead of spreading different content on separate pages, the user will be offered only one simple path to successfully finish the main task.


Next, I designed the low fidelity mock-up of the web app and created several iterations of it. I recruited 5 users and ran a usability test to see which iteration was the fastest and easiest to complete.


The one below was the big winner


I locked down the low fidelity mock-up and started to work on the visual identity and high-fidelity versions of the website.


High-fidelity design

In addition to the functionality itself, I wanted to tell a story and create a certain mood before moving on to the actual flower shopping. I allowed myself to do this since this is a very simple app and trying to delight the user before getting right to the task was a calculated risk that I decided to take.


As a 3D artist, I designed a rustic flower shop boutique scene to help the user visualize what it would be like if the shop was not virtual. How would the building look? What would the atmosphere be like?


Next, I created a mascot. I did not give her a name so maybe you can help me out with some suggestions ;). Here is her 3D illustration.



She explains the workflow of the website to the user and right after that, we commence the actual flow.

I decided to use a sticky side navigation since it will make it easy for the user to navigate from one event to the other without continuous scrolling.

Each event has a 3D illustration and its afferent bouquets. The user picks a bouquet, a size and that's it.

All the bouquet's prices are placed in modals because I don't want to create any other page. The payment section will also be placed in a modal after the user fills the delivery details.

After they are ready, the user will fill a minimal form with the required details and Flora takes care of the rest.


Conclusion

This was a case study for a flower delivery one-page web app. Minimalism and speed were key to this project. I also wanted to use my skills as a 3D artist and create the necessary art that will enhance the visual identity and make users come back again when a new event is on the horizon.


Here is a link to Flora's prototype.

Flora Shop

Thank you for reading!