UX #1 - Flower App

Design a Flower Catalog App for a trendy florist

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.

Slides Presentation

At this point, you can choose to continue reading my case study or, if you prefer, view my slideshow!

(!) Case Study Slide Deck Portfolio [Flower App Project 1]

Figma Design File

If you wish, you can access my project in Figma.

Table of contents

Project Overview

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.

Research

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.

A UX persona, a fictional character which represent our target users.

Competitive Audit

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.

3-1of2 Competitive Audit [ENG][Flower App Project 1]

3-2of2 Competitive Audit Report [ENG][Flower App Project 1]

Introducing Personas

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.

UX persona developed after the interviews.

UX persona developed after the Interviews.

Problem Statement

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.

Antonio's problem statement was defined during the definition phase.

The problem statement is used to identify and frame the problem to be explored and solved.

User Journey Map

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."

Antonio's user journey map whose objective was to buy and receive plants without leaving his garden.

This user journey map is a powerful and digestible visual that shows how our users interact with our app.

Pain Points

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.

The four pain points of user research: accessibility, time, mobility restrictions and sustainable transport.

Pain points are specific challenges, issues or problems that users face in their journey while interacting with a product or service.

Starting the Design

At this point, I start thinking about designs for the dedicated mobile application that I implemented through three phases:

Paper Wireframes

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.

Digital Wireframes

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.

Screenshot of a smartphone with a Lo-Fi Digital Wireframe.

Digital wireframe of the home page on an Android large silver.

Digital wireframe of the personal space page on an Android large silver.

Lo-Fi Prototype

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.

Screenshot of low-fidelity prototype with user flow connections.

UX Research Study

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.

8-1of7.UX Research Study Plan #1 [Flower App Project 1]

Affinity Diagram

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.

Affinity diagram with all the information organized in groups.

Screenshot of a finished affinity diagram. Used in the UX research study #1.

Pattern Identification

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.

8-4of7.Pattern Identification RSP#1 [Flower App Project 1]

Insight Identification

Insights are patterns in the observations we make of the World. They give us an understanding of a specific cause and effect within a specific context.

In my design, insights helped me explain my observations.

8-5of7.Insight Identification RSP#1 [Flower App Project 1]

Prioritized Insights

This process allowed me to rank the elements of potential development in order of importance. Prioritizing important work helped me focus and achieve better results in less time.

8-6of7.Prioritized Insights RSP#1 [Flower App Project 1]

UX Research Presentation

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.

8-7of7.Research Presentation RSP#1 [Flower App Project 1]

Results of Usability Studies

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.

The findings made it possible to identify any usability problems, collect qualitative and quantitative data, and determine user satisfaction with the product.

Refining the Design

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.

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.

Screenshot of the Home Page Wireframe on an Android Large Silver. Before and after the first Usability Study.

The page layout was improved and a help button was added.

The second usability study revealed color contrast issues make it difficult for some users to access some screens. The WCAG 2.0 standard was applied, this allows viewers, no matter how they interpret the colors, to read and enjoy the design.

Screenshot of the Home Page Hi-Fi Design on an Android Large Silver. Before and after the second Usability Study.

WCAG 2.0 was applied, which improved color contrast.

Screenshot showing the main screens of the mockups.

Screenshot showing some of the main screens of the mockups.

Hi-Fi Prototype

The final High-fidelity prototype featured refined user flows for easy ordering and tracking of shipping processes.

Screenshot of high-fidelity prototype with user flow connections.

Finally I've included a link to the Hi-Fi Prototype.

Accessibility Considerations

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.

Going Forward

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.

Takeaways

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.

Next Steps

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...

"Always put the user first and keep their needs front and center"

-UCD

Page updated

Google Sites

Report abuse