Alma S.
Martha's flower shop prototype screens
martha's flower shop logo

Introduction

Contribution

UX/UI Designer
Prototyping
Research

Prototype

Duration

September 2021 - October 2021

Project Overview

Developed an adaptive design solution that enables customers to conveniently order flower arrangements from any device. Recognizing the desire for preordering options to secure arrangements before they sell out, as well as the need for the convenience of ordering from home, the goal was to create a platform that allows clients to effortlessly order their flower arrangements in advance.

Through a comprehensive process that included interviews, paper and digital wireframing, prototypes, and usability studies, an online website and a mobile application were created. This approach ensured that user feedback and insights were incorporated into the design, resulting in an intuitive and user-friendly platform for ordering flower arrangements. The adaptive design caters to the diverse needs of customers, providing a seamless and convenient experience for placing orders ahead of time.

Understanding The User

Summary

Through conducting interviews and creating empathy maps, I gained valuable insights into the needs and desires of the users I engaged with. The research identified a primary user group consisting of customers who are accustomed to the convenience offered by everyday technology.

These users confirmed the significance of being able to preorder flower arrangements from the comfort of their home, workplace, or any location they happened to be in. The convenience and flexibility of this feature resonated strongly with them. Understanding this user group's preferences and priorities provided a solid foundation for further design decisions and emphasized the importance of catering to their needs for a seamless and user-friendly experience.

Pain Points

pain points sticky notes

The User

Crystal, a busy working adult who values supporting local small businesses, seeks a more convenient way to shop for flowers when time is limited. To cater to her needs, I aim to provide an alternative shopping experience that is seamless and efficient, allowing her to browse and order flowers with ease.

Crystal's persona template

Starting The Design

Sitemap

Meeting the customers' demands, the primary focus was to enable easy online preordering and customization of flower arrangements. The goal was to design a user flow that offers a seamless and intuitive experience for individuals to navigate independently.

By prioritizing simplicity and user-friendliness, the design aimed to provide customers with a straightforward and efficient process. This involved streamlining the steps required for preordering and ensuring clear options for customization, allowing customers to easily tailor their arrangements to their preferences.

The ultimate objective was to empower customers to navigate the entire flow effortlessly, ensuring a pleasant and hassle-free experience when preordering and customizing their flower arrangements online.

sitemap template

Paper Wireframes

Several pairs of wireframes were created to explore and determine the most effective layout for the homepage. This iterative process allowed for the evaluation of different design options and the identification of the layout that best aligns with the goals and needs of the users.

By creating multiple variations of the wireframes, it became possible to assess different approaches in terms of visual hierarchy, content placement, and overall user experience. This comprehensive exploration aimed to identify the most optimal layout that would engage users and guide them seamlessly through the homepage.

The wire-framing process provided valuable insights and paved the way for informed design decisions, ensuring that the final layout of the homepage delivers an intuitive and engaging experience to visitors.

paper wireframes

Paper Wireframes - Screen Size Variation(s)

Recognizing the importance of accessibility across different devices, I initiated the creation of a wireframe specifically tailored for smaller screens. This proactive approach ensures that The Flower Shop's website can be accessed and navigated seamlessly on various devices, including smartphones and tablets.

By designing a wireframe specifically for smaller screens, I aimed to optimize the user experience for users who prefer to browse and order flowers on their mobile devices. This responsive design approach takes into consideration the unique constraints and capabilities of smaller screens, ensuring that the layout, content, and interactions are optimized for a smaller form factor.

The wireframe for smaller screens serves as a blueprint for creating a mobile-friendly version of The Flower Shop's website, enabling users to easily access and interact with the content, complete preorders, and customize arrangements, regardless of the device they are using.

screen variation paper wireframes

Digital Wireframes

The overarching goal for the entire website was to maintain a clean and uncluttered design, setting it apart from the crowded layouts often found in other online flower shops. Emphasizing simplicity, our aim was to create a visually appealing and user-friendly website that provides a streamlined and enjoyable browsing experience for customers.

By prioritizing a minimalist approach, we focused on presenting essential information and intuitive navigation, avoiding excessive visual elements that could overwhelm the user. This design philosophy allows customers to easily navigate the website, locate desired products, and personalize their arrangements without distractions or confusion.

The intention behind this simplicity-driven approach is to enhance the overall user experience, making it more engaging and satisfying for customers while reflecting The Flower Shop's commitment to delivering an elegant and effortless online shopping experience.

digital wireframes

Usability Study: Findings

Through the course of the design process, two rounds of usability studies were conducted. The first round focused on gathering feedback to determine the key features and improvements necessary to enhance the overall user experience. This study provided valuable insights into users' preferences, pain points, and suggestions, which informed the design direction and decisions.

Building upon the findings from the first study, the second round of usability testing was conducted on the high-fidelity prototype. This phase aimed to identify any remaining usability issues or areas that required modification. Participants were engaged to interact with the prototype, providing feedback that guided refinements and adjustments to optimize the user interface and functionality.

The iterative nature of these usability studies ensures that user feedback is incorporated at each stage of the design process, resulting in a user-centric and refined end product. By actively involving users in the evaluation and improvement of the design, we can confidently create a website that meets their needs and delivers an exceptional user experience.

usability findings sticky notes

Refining The Design

Mockups

Following the initial usability study, valuable insights were gathered and implemented to enhance the user experience. To provide users with more information upfront, the decision was made to add the name of each item and its corresponding price. This addition enables users to make more informed choices without the need to click on each item individually.

In the second usability study, the number of visible categories was reduced, and they were transformed into drop-down menus. This modification simplifies the interface, making it less overwhelming and easier to navigate. By streamlining the categories, users can access the desired options more efficiently, improving their overall browsing experience.

Furthermore, the style guide underwent an update to ensure accessibility and create a modern, neutral aesthetic. By adhering to accessibility standards, the design becomes more inclusive, accommodating a wider range of users. Additionally, the refreshed style guide imparts a contemporary and visually pleasing look to the website, aligning it with current design trends.

These iterative changes, informed by user feedback and usability studies, contribute to an improved user interface, streamlined navigation, and an enhanced visual appeal, all working together to create an optimal user experience.

low fidelity mockupsfirst high fidelity mockupsfinal high fidelity mockups

Style Color

style colors palette

Accessibility Consideration

accessibility consideration sticky motes

Going Forward

Takeways

The impact of incorporating usability studies into the design process was evident in the improved user experience, particularly in the ease with which users could navigate the online ordering process to support The Flower Shop. The insights gained from the studies were instrumental in shaping the design decisions and ensuring a user-friendly website.

By actively seeking feedback from future users through usability studies, potential issues and pain points were identified and addressed, resulting in a more intuitive and streamlined design. Without this valuable feedback, the website may not have met the users' needs or provided the desired level of usability.

The importance of usability studies cannot be overstated, as they provide invaluable insights into user preferences, behaviors, and challenges. By incorporating user feedback throughout the design process, The Flower Shop was able to create a website that is intuitive, user-friendly, and aligns with the expectations of its target audience.

Ultimately, the positive impact of usability studies on the design process highlights their significance in ensuring the success and effectiveness of a website, allowing businesses to deliver an exceptional user experience and meet their customers' expectations.

One quote from peer feedback:

“Having the option to order a flower arrangement for my wife ahead of time with my busy schedule helps me keep her spoil!”

Next Steps

To ensure that the prototype aligns with the original goals of creating the app, another usability study will be conducted. This study will involve gathering feedback from users to identify any areas that may require further improvement or refinement.

The usability study will involve participants interacting with the prototype and providing their feedback, opinions, and suggestions. By observing how users navigate through the app and listening to their comments, valuable insights can be gained regarding the user experience, usability, and any potential issues that may have been overlooked.

Based on the feedback received from the usability study, necessary adjustments and small changes will be made to address any identified issues or areas for improvement. This iterative process ensures that the final app aligns with the original goals, providing users with a seamless and enjoyable experience.

By actively incorporating user feedback and continuously refining the prototype, the app can be fine-tuned to meet the expectations and needs of its target users, resulting in a highly functional and user-centric product.