Thanks to the support of The Google-Fundae Scholarship Program, this is my #1 Mock Design Project of the Google UX Design Professional Certificate. It is documented in a case study in which I demostrate my knowledge of design, my willingness to collaborate with a team, and my ability to develop an idea from start to finish.
This project has been developed with Google and Figma tools.
If you wish, you can access my project in Figma.
Table of contents
The Flower Company is a trendy regional flower shop, specialized in local plants together with all the necessary accesories for gardening. They have a printed catalog and offer a wide range of competitive prices. Due to the region's aging population, Flower Co. wants to atract people who don't have the time or the ability to shop at their physical store.
My role as a junior UX researcher will be to design a flower catalog app from conception to delivery, allowing users to easily place orders and track the shipping process right to their doorstep.
During this phase I conducted interviews, carried out competitive audits, prepared user jouney maps and UX research study plans in order to identify problems and objectives.
A primary group identified through Interviews was retirees who loved plants and gardening, of all ages and social classes, who no longer bought directly at the Flower Co. Shop.
It allows us to track our competitors, understand their approach, and figure out what our brand might be missing out on. The aim is to discover what works for other companies in our industry and incorporate those strategies for our brand to gain a competitive edge.
Using UX personas allowed me to understand users, their needs and to confirm initial assumptions about our customers.
Personas are created with information gathered from user and stakeholder interviews. As a result of these activities, it is possible to identify the most important functionality an audience needs.
Therefore, this project is focused on those people who love gardening, who take care of their garden and/or orchard at least three times a week.
As a result of the research, the UX persona that was defined was Antonio, a retired former nurse.
This statement serves as a hypothesis, which makes it possible to understand the problem to be solved and why it is important to solve it.
"Antonio is a retiree who needs to have access to a plant catalog to buy plants because he likes spend time in his garden and has reduced mobility."
It provides a clear direction on what UX issues to focus in and helps to understand which user pain points need to be addressed.
In order to understand Antonio and his needs, a user journey map was created.
This UX document showcases the steps that Antonio takes in a process to accomplish a goal.
"Mapping Antonio’s user journey revealed the need for a local flower delivery application."
The research also revealed that time was not the only factor limiting users from buying plants in person. Other user issues included physical mobility restrictions and change in transport habits to purchase directly from the Flower Co. store.
These are the weaknesses that I identify with our service and product proposition. They are areas of difficulty and frustration that our users experience relate to the UX of software usability and customer service.
At this point, I start thinking about designs for the dedicated mobile application that I implemented through three phases:
First, I started by designing a series of five different paper wireframes for the Home Page of the application.
This way of carrying out interactions allowed me to focus specifically on:
Space allocation.
Content prioritization.
Available functionalities.
Expected behaviors.
Thanks to the combination of the outstanding elements of the previous five designs, I built a refined and clean version of the Home Page layout with the aim of guaranteeing an accessible and inclusive shopping experience.
UX wireframes are a simplified representation of the information hierarchy, functionalities and user flows of digital products.
Second, I create digital wireframes to propose early solutions to my user's problems. Keeping in mind the interaction of personas with the application to make the exchanges useful, pleasant and accessible.
In addition to equipping the application with assitive technologies, and based on design specifications and user feedback, a Personal Space layout was developed with different types of interface components positioned correctly to aid navigation.
Two examples of digital wireframes are shared below, with notes on my reasoning and its goals.
Finally the previous set of wireframes developed, allowed me to create the first low-fidelity prototype.
Lo-Fi prototyping is a method of testing design concepts by transforming the ideas into limited fuction, testable artifacts. The role of low-fidelity prototypes is to collect feedback on the design during the early stages.
In this phase, the primary user flow allows let buy two elements and formalize the order, so that it can be used in a usability study.
I provide an screenshot of the user flow and a link to the Lo-Fi Prototype.
For the design of this application, I carried out two usability studies. Each study was further divided into six steps. Below I present my first study with its methods to serve as an example.
Usability study is the study of learning what end users of a system or product need and want, then employing those insights to enhance the design process for products, services or software.
During the study, notes were taken. Note takers were required to capture what the participant was doing in as much detail as possible, as well as what the participant was saying (in their words). Notes taken during the session were of good quality, making their subsequent analysis easy.
Sometimes also know as a cluster map, affinity diagrams helps me organize information into groups of similar items. It is particularly useful when analyzing qualitative data and observations.
In my design, I used affinity diagrams to organize information from previously taken notes into similar groups, resulting in an affinity mapping.
The recognition of patterns in the analysis of the data was key to determining the appropriate solutions to the problems and knowing how to solve them. I recognized similar patterns and characteristics that helped me break down the problems and also build a construct as a path to a solution.
Finally, to conclude my usability study I made a UX research presentation. In it, I shared information from my user research findings with stakeholders. I also made recommendations to improve the product and future decision making of research methodologies and testing phases.
I conducted 2 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.
In this section I will show new iterations of the design that I updated using the data from the usability studies. Below are two examples of mockups that I made changes to based on feedback from study participants. I also include a slide to show the main screens of the mockups.
Early designs allowed for some customization, but after the usability studies, I implemented a help button to assist the user and improve the page layout to be reliable and clearer. Allowing Users to navigate more comfortably.
The final High-fidelity prototype featured refined user flows for easy ordering and tracking of shipping processes.
Finally I've included a link to the Hi-Fi Prototype.
During the development of my design I have taken into account accessibility for those users who may have an impediment or a disability.
To demonstrate this, I present below the three pillars that my application uses to be more accessible and inclusive.
First, I have eliminated jargon and used simple, inclusive language that is easy to understand to create clarity and understanding.
Also, as in this portfolio, alternative text was used in images for screen readers that allow access to users with visual disabilities.
Then, I implemented a Design System with standardized colors, icons, buttons, and more to make navigation easier.
And finally, I've included the recommendations from the Web Content Accessibility Guidelines, WCAG 2.0, published by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) to make web content more accessible.
In this last section, I will talk about the impact my design has had and everything I have learned during the process. I will also include some thoughts on the steps I would take if I were to continue on the project.
This flower catalog application enables traditional local flower shops to provide convenient way to order plants that are delivered to their customers doorsteps. This puts users first and makes them feel cared for and included in society.
What I have learned while designing this App is to connect my technical knowledge & artistic ideas with the design specifications and the user feedbacks in order to improve user satisfaction and loyalty to the product thanks to the utility, ease of use and pleasure of interacting with our product.
If I were to continue with this project, the next three actions I would implement would be:
Post-launch monitoring with qualitative UI testing tools on how users interact with the UI. For example, I would use a Touch Heatmaps that collect data from the user's gestures on the application screens, which would allow me to make adjustments to the user interface if necessary.
I would also collect accurate feedback on retention rates and session duration to verify if the app experience is intuitive and efficient.
Finally, I would perform a third usability study to identify old or new pain points, areas for improvement, or new product features that improve the overall user experience.
We have reached the end of my case study, congratulations and thank you if you have been able to stick with me all this time, you are amazing!
And remember...