FLORAL
Project: FLORAL
Role: UX Designer
Duration: 2 weeks
Phase 1: Empathize, Define, Ideate
As the UX designer for FLORAL, empathizing with users enhances the FLORAL app I created because I was able to experience the product as the user would. I was able to anticipate the user’s desires and needs during the design processes which enabled me to create an app that made the user more comfortable the design. In turn, the user is more likely they would be to engage the product long-term.
Personas for FLORAL Project
These personas and user stories represent the needs of the users I am designing for. As a UX designer, the user always comes first in all of my work, so it's important to understand their points of view. During the analysis of the user persona and user journeys, I was able to create pain points that developed into problem statements. The problem statements provided clarity about users’ goals and helped to identify constraints that prevent users from meeting those goals.
Persona 1: App User
Persona 1 Journey Map
Persona 2: Floral Shop Owner
Persona 2 Journey Map
FLORAL..pdfCompetitive Audit Report
During the design ideation portion of developing FLORAL, I was able to generate ideas on how users would use and navigate an ordering app for flower arrangements.
Completing a competitive audit was the next step in the ideation process. This competitive audit is an overview of current floral arrangement ordering apps where I analyzed competitors’ strengths and weaknesses. Analyzing these brands and products of competitors, or the companies who offer similar products as FLORAL does, gave me a well-rounded foundation of knowledge about the market FLORAL will enter. The knowledge from the competitive audit carried into the designs and helped create a product that’s helpful and unique for users.
Phase 2: Build Wireframes and Low-Fidelity Prototypes
Big Picture Storyboard
This storyboard focus on what the user needs, their context, and the FLORAL app will be useful to the user.
Close-Up Storyboard
This storyboard concentrates on the FLORAL app and how it works.
Paper Wireframes
Creating paper wireframes was the next step in the design process and building logic, patterns, and structure were the foundational elements of the design. These foundations represent Gestalt Principles and describe how humans group similar elements, recognize patterns, and simplify complex images when we perceive objects. These principles were of great assistance as I used and applied the principles to organize content so it is visually pleasing and easier to understand.
Digital Wireframes
In creating digital wireframes, I pulled out our original paper wireframes and research. I studied these materials to remind myself where I had decided to place the elements, and why.
Next, I opened Figma and started a new project file. Then, I uploaded pictures of the paper wireframes into Figma to use them as a reference. Once the paper wireframes were uploaded, I created frames for the device I were designing for. Once I had the correct number of frames for the design, I added a layout grid to keep everything lined up accurately.
Then, it was time to design. I began to create each of the elements in the paper wireframes. I started with buttons and icons. Once those were finished, I created content section and text placeholders.
After all of our elements were created, I began to place them into the design. I followed the paper wireframes as a model to make sure that I was aligning the digital wireframe with the previous design iterations and the insights I uncovered in the research.
Phase 3: Conduct UX Research & Test Early Concepts
UX Research and Script and Inclusive Design
The UX research study plan clearly identifies each key element of a plan introduction:
Title: FLORAL online ordering app for a trendy florist.
Author: Christina Barrientos, UX Designer and Researcher, barrientoscaf@gmail.com
Stakeholders: FLORAL customers, Cynthia Donovan-Shop Owner
Date: 12/10/2022
Project background: We are creating a FLORAL ordering app to help people place custom flower arrangements so they can skip a phone call or in-stor visit and the payment process is streamlined. For some customers, the current ordering system is uncomfortable, time consuming, and confusing.
Research goals: What I would like to learn from testing the FLORAL app update, figure out if the app will achieve the goals of the project, and how the research results might affect the design decisions.
Usability Study
The research plan will include a usability study as the research method. This research method is ideal at this stage of a project because it involves testing out designs with real, potential users.
Usability studies were my primary, qualitative research methods because they allowed me to make direct and indirect observations based on the participants’ behavior and words.
I gave each participant a few guided tasks and took notes on how successfully the tasks are completed, and recorded the study in order to play it back later to discover new insights from the study.
Insight Affinity Diagram
The FLORAL affinity diagram was a method of synthesizing that organizes data into groups with common themes or relationships in the process of development.
Refining the Design
Final Low-Fi Presentation
Phase 4: Create High-Fidelity Prototypes
Final High-Fidelity Prototype
Program used: Adobe XD, Figma, Canva
Visual Design includes:
Typography
Color
Unity
Iconography
Gestalt's Principles
Gestures
Motions
Accessibility
Style Guide:
Case-Study Portfolio
Thank you!
Thank you for your time reviewing my work on the FLORAL App. If you would like to see more or get in touch, my contact information is provided below.
Email: barrientoscaf@gmail.com
Website: www.christinafbarrientos.com
LinkedIn: Christina Barrientos, M.S.