the little shop of flowers

Role UX Designer (Indiviual Project)

Duration June 2021 (1 week)

Project Background & Goal

the little shop of flowers is a fictional local flower shop. People can place orders from their online store and either have it delivered to their desired location or pick up their order directly from the store. They offer a wide variety of seasonal flowers, from bouquets to potted arrangements, as well as potted plants and other goods. the little shop of flowers' goal is to provide a beautiful and engaging online site that allows for customers to easily purchase flowers.

Understanding the User

Target Audience

The target audience for the little shop of flowers targets customers between 18 and 60 years old, who lack the time to physically go directly to the flower shop. They specifically target busy students and workers of all genders and backgrounds who want to have a fast experience purchasing flowers from The Little Shop of Flowers.

Persona

I conducted user research and received feedback from users that we incorporated into user personas. For example, our user persona, Drew, is a 24-year old full-time business consultant who frequently shops online because he does not have free time in his busy schedule. The research revealed that Drew was frustrated because he wants to gift his partner flowers but lacks the time to go to the flower shop and purchase them. Since Drew prioritizes efficiency, he would like to see simple navigation and a clear user interface that saves him time

Challenges

Based on the user research I conducted, I found 3 main pain points for users: 

  1. Simplicity - Users want a simple interface that is not cluttered

  2. Easy navigation - Provide a seamless and linear purchasing experience

  3. Efficiency - Users want to be able to easily find items quickly

Simplicity

Easy Navigation

Efficiency

Starting the Design

UI Ideation

From the beginning of our design process, I focused on the users' needs first. The process began with initial ideas for wireframes, then moved to mockups, and finally to the high-fidelity prototype.

Paper Wireframes

From the beginning of our design process, I focused on the users' needs first. The process began with creating paper wireframes. I created paper multiple versions for each wireframe for each screen of the user journey to try to ideate as much as I could. From the different versions, I marked the elements that would then be used in the digital wireframes.

Paper wireframes for the homepage

Stars were used to mark elements that would be used for the digital version

Digital Wireframes

In the wireframes, my first priority was solving the users' needs . The headings are clearly listed and separated by categories. There are landmarks listed to show where things such as the shopping cart will be. There is a place for a carousel which will display items, which gives the user an opportunity to browse for a more enjoyable user experience.

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was going through the menu and ordering a bouquet, so the prototype could be used in a usability study. 

View the little shop of flower's low-fidelity prototype

Research Plan

I needed to see if the main user experience, ordering flowers, is easy for users to complete. I also needed to understand the specific challenges that users might face in the browsing, ordering, and check-out processes.

 

I conducted remote, unmoderated usability studies. I had 5 participants and each session lasted for 20-40 minutes, including the test and interview questions. Participants are people who online shop at least once a week and are between 18 to 70 years old. I included a balanced number of male, female, and nonbinary participants. I presented participants with a series of tasks that had them interact with the core tasks in the app, then had them complete the System Usability Scale (SUS).

Usability Study Insights

I conducted one round of usability studies. Findings from the study helped guide the designs. 

Insights

  • Users want to edit the quantity

  • Users want to be prompted to log in to their account if they have one

Revised Wireframes

I revised certain areas of design based on insights identified from usability test feedback. Design additions include “+” and “-“ buttons to allow for the ability to edit quantity and a prompt for users to log in to their account if they have one.

Before usability study

After usability study

Refining the Design

Mockups

At this point in the design cycle, I began to add colors, images, and icons to the designs. I updated the shape, size, and structure of content borders and sections to high-fidelity versions.

High-Fidelity Prototype

The final high-fidelity prototype presented cleaner user flows for ordering flowers and checkout. The design is fully developed and gives a complete picture of the completed design. It addresses the user’s needs for a simple, yet engaging and uncluttered design.

View the little shop of flower's high-fidelity prototype

Accessibility Considerations

To ensure that the app was accessible, I included users of assistive technologies such as keyboards and screen readers throughout all stages of the design cycle, including interviews and usability testing. I took their needs and their feedback and incorporated what I learned into the designs in order to provide an inclusive and accessible experience for all.

Takeaways

What I Learned

While designing the little shop of flowers' website, I learned the difficulties of using a different platform, Adobe XD, for the first time. It was challenging yet rewarding, learning how to navigate and successfully utilize all of the functions of Adobe XD. This made me interested in learning other design platforms. Possible next steps are to create a responsive website such as a mobile app and a site for tablets.