Role
UX/UI Designer
Client
Google Coursera
Duration
1 year
Overview
In this project, I developed a "Bouquet Preview App" for a modern, style-focused florist, as part of my Google Coursera UX Design certificate. I selected this concept to focus on creating an intuitive app that allows users to preview custom bouquet designs in real time. The design prioritises visual appeal and ease of use, catering to a trend-savvy audience. From research and wireframing to prototyping and testing, I focused on ensuring users could effortlessly browse, customise, and visualise bouquet arrangements before placing an order.
Challenge
The main challenge in designing the app was creating a seamless ordering and pickup experience for users with busy schedules. The app needed to enable quick, reliable order placement and efficient pickups to accommodate users’ time constraints. Balancing visually appealing customisation features with streamlined order and pickup functionality was essential to ensure a smooth, stress-free experience. This required a focus on simplifying the user journey while maintaining the high-quality aesthetic expected from a trendy florist.
Persona Development & User Research
- Developed user personas based on hypothetical interviews with potential flower shop customers.
- This research simulation helped identify key user needs, such as a quick ordering process, an efficient pickup experience and accessible features for users with visual impairments.
Journey Mapping
- Created a journey map to outline the user’s experience, from browsing and customising a bouquet to placing an order and picking it up. The map to your left, is for my user persona, Chloe.
- The maps highlighted critical touchpoints and potential pain points, revealing opportunities to streamline the process and enhance accessibility for all users.
Competitive Analysis
- Analysed existing flower shop services to identify gaps and opportunities for innovation - two direct and one indirect competitor.
- Focused on areas like features, accessibility and navigation.
Information Architecture - User Flow Map
- Structured the app's information architecture to prioritise the most critical steps for users.
- Implemented a clear navigation hierarchy for browsing bouquet options, customising arrangements, and scheduling pickup times.
Wireframing
- Developed wireframes in Figma to establish the app’s layout, with a focus on crafting intuitive user journeys for a seamless experience.
- The wireframes emphasised clear navigation, allowing users to easily create an account for smooth reordering, browse closest shops, and personalise arrangements.
UX Research Study
- Conducted a UX research study to evaluate the usability of the Bouquet Preview App, employing methods such as user testing and feedback sessions.
- This process helped identify areas for improvement and ensured that the app met user expectations for functionality and ease of use.
- Notable feedback from first round of testing:
A user expressed the desire for the option to easily reorder their previous floral arrangements from the same shop, enhancing convenience for repeat purchases.
Prototyping
- Developed high-fidelity prototypes to create a more polished and realistic user experience.
- These prototypes showcased the app's core functionalities, allowing me to assess usability and design effectiveness before final implementation.
- A sticker sheet was also created to ensure design consistency and efficiency throughout the project.
Accessibility Considerations
- Accessibility considerations were continuously brought up throughout the Google UX Design Certificate to ensure that all users, including those with visual impairments, could navigate and utilise the app we were creating effectively.
- Features such as a high contrast color scheme and legible font sizes were implemented to enhance usability and provide an inclusive experience, as seen to your left.
- Other features I would add to the app alongside developers would be things such as screen reader compatibility, alternative text for images, and text-to-speech functionality.
Interactive Prototyping
- Used Figma’s interactive prototyping tools to connect screens and buttons, creating a smooth, clickable flow throughout the app.
- Additionally, I incorporated animated transitions, like slide-in effects, to enhance the user experience and add a polished, dynamic feel to each interaction.
Final High-Fidelity Mobile App Designs
I conducted another round of testing to gain more user feedback and define the design further, resulting in the development of the final high-fidelity prototypes. Some of these prototype screens, which showcase the completed features and user interface, can be found below. The full set of wireframes and iterative prototypes can be found in my Figma file, available upon request.
Conclusion
In developing the For You Flowers App, I focused on creating an intuitive, visually appealing and accessible experience that meets the needs of busy, on-the-go users. Through research, prototyping, and testing, I refined the app’s functionality to provide a seamless process for selecting, customising, and ordering floral arrangements. This project allowed me to apply and deepen my UX skills, from initial concept to high-fidelity design, while prioritising accessibility and usability. I’m excited about the impact this app could have in simplifying floral orders and enhancing customer satisfaction.
Lessons Learned & Key Takeaways
This project was a valuable learning experience, giving me deep insights into Google’s design approach and best practices in UX. As my first project in Figma, it challenged me to quickly adapt to new tools, allowing me to explore Figma’s features extensively and sharpen my UI design skills. Working within Figma gave me hands-on experience with creating detailed prototypes and interactive elements, enhancing both my technical proficiency and my eye for design detail. Overall, this project strengthened my design foundation and broadened my understanding of effective, user-centered design.
Desktop Design
As part of the Google UX certification, I expanded my mobile app concept into desktop wireframes and prototypes, applying scalable and responsive design principles. This course module emphasised the importance of adapting designs across screen sizes, ensuring a seamless experience whether users access the app on mobile or desktop. Through careful adjustments to layout, navigation, and interactive elements, I created a desktop version that maintains the app's functionality and aesthetic while optimising for a larger screen.
