Google UX Design course – Flower Delivery Website – Case Study 2

Introduction

Flora is an online flowers and gifting website who are looking to modify their flower ordering process since their current floral ordering process is complex and confusing for customers. The drop off rates are astonishing since the customers just leave their orders in the cart and never checkout or they have a tough time navigating the listing of the flowers and the little or no details in the description pages. Flora is looking to get back its lost customers by revamping their process.

Process & Research

I worked along with the team on this project from start to finish. The first step was to understand the users using Flora’s services to order flowers. The main points we derived from this exercise was this:

  1. The UI on the current listing and description pages were clumsy and filled with irrelevant information which took the users main focus of ordering flowers away. This frustrated many of the users since their main purpose of ordering flowers was hampered.
  2. The checkout process was too cumbersome – there was no way to go back to the previous steps to edit their information, no way they could modify their cart or even cancel their order. Even entering their contact information was tedious because of too many fields present and the payment options were extremely limited.

Along with talking to users, I also worked on an audit of the many other gifting and flower ordering website to understand what our competitors were doing right and wrong so we could incorporate our ideas to Flora’s new flow. Armed with the audit and data from the research, we set out to building our personas, mapping out the user journey and ideating concepts on how we could make the flower ordering process easy and efficient. The team and I bounced off many ideas – shortening the checkout process, introducing a quick checkout for returning customers, making the design on the listing and description pages on point and allowing easy navigation across the website, especially during the checkout when the user might have to navigate to the previous and next steps to check his/her information. With all our ideas in mind, we started sketching the initial wireframes to put all these ideas to work.

Design

Marking the important elements from each of the wireframes, I got started with digitising those wireframes using Adobe XD. With the initial flow in place, we ran our first round of testing with a set of frequent flower shoppers and shoppers who ordered every once in a while. With this testing we found a few areas in the flow which needed a work around. I reworked the wireframes with the suggested changes and turned those wireframes to a low fidelity prototype. With this in place, we did another round of testing to find out if the changes made worked with the users. Most of the users were pretty receptive of the changes that came through and found the process smooth enough. They did drop in a few suggestions on how we could make it better – those changes we incorporated when we worked on the high fidelity mockup of the prototype. The team and I worked on making the UI as neat as possible, keeping the information crisp and concise, maintaining font and colour consistency across the screens and making sure we fulfilled the accessibility norms.

Takeaways and Next Steps

My key takeaways from this project was the research, the interviews with the users to understand their pain points, the value of ideation and the importance of testing during each iteration of the wireframes and prototypes. I learned to be patient while working on designing the solution, learnt to work with the team to brainstorm ideas and the value of criticism and feedback from the team.

The next steps would be to revisit the flower ordering process and conduct further testing to check the viability of the solution, work on the other pain points of the website and improve the overall experience for Flora.

To view a complete detailed version of this project, you can view this presentation deck here.

Work Done

Research
Competitive Audit
User Interviews
Personas
Wireframes
Low Fidelity Prototype
Usability Testing
High Fidelity Mockup

Previous Project