Case Study

User Research

Competitors

I first began with an in-depth competitive audit to help me understand the eCommerce flower industry, as well as recognize competitor strategies, solve usability issues, identify market gaps, gather reliable evidence for informed decisions, and save time, money, and energy.
‍
I identified the direct competitors (1-800-Flowers, UrbanStems, The Bouqs co, and FTD) and an indirect competitors (Amazon), by analyzing the top recognized companies for flower delivery services. I then conducted a comprehensive audit through online research and usability studies of their desktop and mobile websites. Here are the results of my audit:

Empathize

Next, I did extensive online research to identify the demographics of frequent online flower buyers. The findings revealed that younger women, particularly those in their twenties to forties, purchase flowers every few months as gifts. Additionally, men in relationships and corporations buying on behalf of their businesses also constitute a significant portion of flower buyers.

To gain deeper insights, I conducted interviews with 10 individuals aged 25-35 and accustomed to online shopping, including two married men and eight women, one of whom regularly orders flowers for her job. These participants were selected because they align with the demographic profiles identified in my research.

Participants were asked to visit the websites of 1-800-Flowers, UrbanStems, The Bouqs Co, FTD, and Amazon. Their task was to browse for a flower they would like to gift someone and proceed through the checkout process without completing the purchase. Once finished, they were asked to answer the 5 following questions:

What are the most important factors you consider when choosing an online flower delivery service?

Can you describe any difficulties or frustrations you experienced while searching for and selecting flowers on the websites?

How easy was it for you to find information about delivery options and timelines?

What features or functionalities did you find most helpful or lacking during the browsing and ordering process?

How would you rate your overall experience with the website's navigation and ease of use on both desktop and mobile devices?

After hearing directly from users, I crafted an empathy map to truly step into the shoes of our target audience when they're buying flowers online. This map reflects the collection of insights gathered from the interviews, painting a clear picture of user needs and feelings throughout the process.

‍
From my collective research, I identified five key pain points that these customers encounter when purchasing flowers online compared to buying in-store:

Cost

The high price of flowers and delivery can be a significant barrier for customers.

Delivery

Unreliable and delayed deliveries cause stress, especially for special events.

Quality

Delivered flowers often don't meet expectations for freshness and arrangement.

Knowledge

Customers may feel unsure about flower choices due to lack of information.

Limited Selection

Restricted variety of flowers makes it difficult to find the perfect arrangement.

I then created a user persona representing the majority of flower buyers, based on similar characteristics, demographics, and pain points identified in my research.

In order to illustrate what the user goes through to order flowers online, I created a journey map.

Define

Problem

To clearly define the problem, I crafted a concise, user-centered problem statement that outlines the specific needs based on the previously developed user persona.

Goal

To clearly define the goal, I crafted a goal statement which covers what the product lets users do, who the action affects, why the action positively affects users, and how the effectiveness of a product is measured.

The goal for this project can now be clearly defined as follows:

Design a user-friendly, responsive eCommerce site for easy browsing and purchasing of flower arrangements for special occasions.

Ideation

Value Proposition

To summarize why a consumer would benefit by using this movie theater app, I I created an affinity diagram to define its value proposition by compiling a comprehensive list of its features. Afterward, I categorized these features into five groups based on accessibility and user pain points. The remaining features were set to the side as optional.

Information Architecture

I created a big picture storyboard to illustrate the user’s journey. It depicts a scenario where a woman needs to purchase last-minute flowers for her friend's birthday. This storyboard provides insight into the entire user experience, highlighting various challenges, potential pain points, and interactions the user might encounter.

Next, I developed a close-up storyboard to visualize the specific on-screen steps a user would take to purchase flowers from start to finish. This process allowed me to identify and address any potential issues with the order flow, ensuring a seamless user experience.

I then created a user flow chart to illustrate the path a typical user takes on the site, from start to finish, to complete a task. The goal was to map out how users find and purchase flowers as they navigate through the app. This approach provides a clear overview of the product's functionality before the design process begins, ensuring a smooth and efficient user experience.

To finalize the information architecture, I created a sitemap to serve as a blueprint for the site's structure. This organized the content hierarchy and navigation paths, ensuring all sections were logically arranged and easily accessible, ultimately enhancing the user experience with clear navigation.

Wireframes

Keeping the end user and problem statement in mind, I used the Crazy Eights method to sketch eight ideas for the site's home screen, spending 60 seconds on each design. This approach encouraged creative and rapid thinking, resulting in a variety of unique and innovative solutions to consider without initial judgment.

I decided to go with a mobile-first design approach because it enhances user experience and accessibility by focusing on core content and faster load times, ensuring a seamless and consistent experience across all devices. This approach also leads to cost and time efficiency by addressing the most challenging constraints first.

After completing this exercise, I highlighted the best features and added descriptions for the ones I planned to keep. I ultimately chose four features because they effectively addressed users' pain points and accessibility needs by maintaining a simple and efficient layout for the site.

I took the selected elements from the Crazy Eights exercise and combined them into paper wireframes. These wireframes helped shape the design, identify potential issues early, map out page elements and navigation, save time and effort, and enable low-cost, rapid iteration and exploration of design ideas. These wireframes depict the user flow through the checkout process for purchasing flowers.

After peer feedback, I transformed the paper wireframes into digital wireframes for better realism and collaboration. I rearranged elements and added features such as enhancing home screen consistency, suggested occasions on the flower details page, and labeled input boxes in order to better address user pain points and accessibility needs.

I applied Gestalt Principles for consistent visual organization, effective communication, aesthetic appeal, and increased user engagement.

I converted the initial mobile wireframes into desktop wireframes as part of the responsive design process. This step was crucial to ensure that the website functions seamlessly and maintains visual consistency across different screen sizes, providing an optimal user experience regardless of the device being used. By adapting the layout and interactions from mobile to desktop, the goal was to accommodate the varying needs and preferences of users accessing the site from different platforms.

Prototyping

Low-Fidelity

I linked the digital wireframes to develop a low-fidelity prototype for both mobile and desktop, offering an interactive model to visualize the product. The approach aimed to make the designs testable and gather early feedback for analysis.

View Mobile Prototype

View Desktop Prototype

UX Research

The goal of the UX research study was to use a structured approach to gather valuable insights, identify user needs, and make informed design decisions, ultimately leading to a more effective and user-friendly product.

I included 10 participants in an unmoderated study, asking them to record themselves using the app at home. This method provided a more genuine user experience, resulting in more honest feedback.

The UX research study covered the project background, research goals, detailed research questions, key performance indicators (KPIs), methodology, participants, and the script or questions for the participants.

Based on insights from the UX research study adjusted the design to enhance functionality, address pain points, and improve usability based on user feedback. The following insights are organized by recurring patterns and themes identified in the research data:

High-Fidelity

Based on the UX research study feedback, I refined the design to align with identified patterns and themes. This included integrating visual elements such as typography, color, and iconography into the mockups to ensure the updates were both user-centered and visually cohesive. To enhance accessibility, I added features like a "Buy Now" option on the home screen for easier navigation and ensured clear, legible text with proper heading hierarchies.

I adapted the mobile mockups for desktop as part of ensuring responsive design. This step ensures the site functions smoothly and looks consistent across all screen sizes, enhancing the user experience across devices.

To create a polished high-fidelity prototype, I meticulously linked the mockup screens using interactive elements and refined animations. This process ensured seamless transitions between screens, added interactive buttons, and incorporated realistic animations to simulate user interactions. The goal was to craft a prototype that was visually appealing and provided a realistic and intuitive user experience, both on mobile and desktop versions.

View Mobile Prototype

View Desktop Prototype

Test

Takeaways

Designing a responsive website from start to finish taught me the importance of a user-centered design approach, emphasizing the need to cater to diverse devices and screen sizes. I learned that starting with mobile-first design ensures a streamlined and efficient user experience that can be expanded upon for larger screens. Balancing visual aesthetics with functionality was crucial, as was iterating based on user feedback to address pain points and enhance usability.

Another key takeaway was incorporating accessibility features to ensure the site was inclusive and easy to navigate for all users. This comprehensive process highlighted the significance of adaptability, continuous improvement, and attention to detail in creating a seamless and engaging user experience.

What's Next?

The next steps involve conducting further usability testing with the high-fidelity prototype to gather detailed user feedback and identify any remaining issues. Based on these insights, I would refine the design to enhance functionality and user satisfaction. Collaborating with developers would be crucial to ensure the design is implemented accurately and efficiently, with regular check-ins to address any technical challenges. Additionally, I would monitor the website's performance post-launch, using analytics to track user behavior and engagement. This data would inform ongoing improvements and updates, ensuring the website continues to meet user needs and expectations effectively. Finally, I would document the entire process and key learnings to guide future projects and share insights with the broader team.

Ambrosia Mitchell Flowers

The Challenge

The Goal

My Role

My Responsibilities

Scope