Project Overview
The Product
Flowr is a Floral Arrangement App. provides personalized boutique solutions and primarily sells flowers. Along with offering high-quality physical products, it also commits to delivering an advanced level of service.
The Problem
Busy workers and commuters lack the time necessary to order a floral arrangement.
My Role
UI/UX designer designing an app for Flowr from conception to delivery.
Project Duration
April 2023 to September 2023.
The Goal
Design an app for Flowr that enables users to effortlessly create custom floral arrangements.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Creating entire idea from scratch, finding the brand name, designing logo, creating brand identity.
Understanding the User
User Research: Summary
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who don’t have enough time to order floral arrangements.
This user group confirmed initial assumptions about Flowr customers, but research also revealed that time was not the only factor limiting users from order flowers online. Other user problems included obligations, interests, or challenges that make it difficult to go to flower shops in-person.
User Research: Pain Points
Time
Busy working adults find it challenging to physically visit a flower shop to send flowers.
Accessibility
Current platforms for ordering flowers lack the integration of assistive technologies, making the process less accessible for individuals with diverse needs. This hinders an inclusive and user-friendly experience for all users.
IA
Users face challenges in navigating the flower arrangement app due to complex IA. The current structure poses difficulties in finding specific features or understanding the logical flow within the application.
Personas:
User Journey Map
Mapping Oliver’s user journey revealed how helpful it would be for users to have access to a dedicated Flowr app.
Ideation
I find the work at Crazy8 both enjoyable and practical. This effort has generated more than one great idea. Some examples include the ability to sync with users' calendars, allowing the app to remind them to send flowers to friends on special occasions. Users can also utilize voice commands to search, improving accessibility. Prior to confirming an order, the florist can upload an actual photo of the bouquet instead of a generic studio picture taken months ago. If the buyer approves the photo, the payment process can proceed, reducing the likelihood of customer disappointment. For any inquiries, customers can chat directly with the local florist. This way, if certain bouquet components are unavailable, the customer can choose from alternative fresh flowers, providing a more personalized experience without relying solely on the florist's judgment.
Starting the Design
Paper Wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy ordering process to help users save time.
Digital Wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Thanks to this preview screen, you can get a visual of how everything you've selected comes together before you place your order. If you're satisfied with it, you can proceed with the order. This ensures there are no unpleasant surprises.
Low-Fidelity Prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was building and ordering a floral arrangement, so the prototype could be used in a usability study.
Usability Study: Findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 Findings
Users want to order flower quickly
Users want more customization options
Users want a delivery option
Round 2 Findings
The checkout process has too many unnecessary steps
“Build your own” functionality is confusing
Refining the Design
Typography& Colors
The project's visual identity is a symphony of Inter font in regular, light, medium and semi bold, accompanied by a soft, gray palette enriched with energetic orange accents. White serves as the contrasting canvas, creating a captivating and cohesive visual language throughout. Experience a harmonious blend of typography and colors that defines the project's sleek and sophisticated aesthetic.
Icons
Discover a curated selection of round icons, meticulously chosen to harmonize with the app's aesthetic. These bespoke icons not only enhance visual appeal but also contribute to a unified and polished design. Every icon adds a touch of visual harmony to the overall aesthetic.
UX Map
Explore the app effortlessly with our UX map, highlighting key pages like log In, home, start create, best selling, favorites, profile and menu. This visual guide enhances user understanding, ensuring a seamless and intuitive journey through the app's core functionalities. Experience user-friendly navigation strategically mapped for your flower shopping journey.
Mockups
After the initial usability study, I recognized that users desired more clear categorization. Before the usability study, I set up various ways to access the product you want to buy, placing them as separate buttons on the home page. However, this caused confusion for the user. That's why I rearranged them into columns to establish a more equal hierarchy.
In the second usability study, participants expressed that the purchasing process occurred unexpectedly fast. They found themselves buying the product without anticipation, leading to a lack of a sense of security. In response, I developed a new design where users can proceed by confirming their address, payment method, and order. And I put a bar above where they can follow which stage of the process they are at. This adjustment aims to empower users, making them feel more in control of the process.
Key Mockups
High-Fidelity Prototype
The final high-fidelity prototype presented cleaner user flows for building a floral arrangement and checkout. It also met user needs for customization.
View the Flowr App
Accessibility Considerations
Consistent and Predictable Layouts
Established a user-friendly interface with consistent and predictable layouts, aiding users in locating information effortlessly and creating a more intuitive experience across the entire application.
Responsive Design
Ensured a seamless and accessible experience across various devices by implementing responsive design principles, accommodating users with different screen sizes and resolutions.
Navigation
Enabled seamless navigation for users with diverse needs, incorporating keyboard accessibility and ensuring focusable interactive elements for an intuitive user experience.
Text and Typography
Enhanced readability and inclusivity by employing scalable fonts, providing adjustable text sizes, and avoiding reliance on color alone, ensuring a comfortable experience for all users.
Going Forward
Takeaways
Impact
Users consistently express a sense of ease and enjoyment while building their floral arrangements through the app, reflecting a successful translation of thoughtful design into a delightful user experience.
Peer feedback highlights the app's effectiveness in making floral arrangement creation both easy and enjoyable. One user remarked, 'The app made it so easy and fun to build my floral arrangement. I would definitely use this app again.'
What I Learned
While designing the Flowr app, I learned that the first ideas for the app are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app’s designs.
I learned unequivocally that it's crucial to step aside entirely when needed and listen attentively to the users. Unlike other design domains, in UX/UI, the designer often has to take a backseat, relinquishing personal preferences in their choices. Essentially, the user should actively shape the design; we, as designers, merely act as facilitators in the process.
Next Steps
Evaluate and Enhance
I'll revisit how people interact with the app, conducting usability studies. I'll closely observe user interactions, gather their thoughts, and analyze data to ensure recent changes address any user pain points. This ensures the app remains user-friendly and easy to navigate.
Learn More From Users
I aim to deepen my understanding of user preferences by conducting more research. I'll talk to users, ask questions, and explore what else they might need. This research-driven approach helps me improve the app not just for current needs but also for future user expectations.