Leapath
A responsive website design for smooth career transitions
Responsive web design
Branding
Role
User experience, user research, visual design, user testing, prototyping
Tools
Figma, FigJam, Otter.ai, Google workspace
Duration
4 weeks
Context
Florana is a small business based in Monterrey, Mexico. It likes to accompany its customers in their history, in their most special events, that is why the company is dedicated to make floral arrangements and / or balloon structures that reflect the personality of the person who receives them. It also offers theme workshops. Florana's values are creativity, inclusivity, love, and honesty. It offers its products through Instagram and Facebook which does not help in providing options for the customers to choose from.
Note: Through the end of the project, the business owner consider in switching to event flower arrangements only. Thus, the website wasn't created future work will focus on this new direction.
Background
Florana is a small business based in Monterrey, Mexico. It likes to accompany its customers in their history, in their most special events, that is why the company is dedicated to make floral arrangements and / or balloon structures that reflect the personality of the person who receives them. It also offers theme workshops. Florana's values are creativity, inclusivity, love, and honesty. It offers its products through Instagram and Facebook which does not help in providing options for the customers to choose from.
Problem
Floriana's current system hinders both flower buyers and workshop attendees. Flower buyers struggle to find the perfect arrangement due to time-consuming browsing, limited product information, and inflexible customization options. Workshop attendees have limited scheduling options, restricting participation for busy lifestyles. This reduces sales, engagement, and ultimately, Floriana's impact.
Solution
A centralized e-commerce website which allows flower arrangement browsing, customization, and ordering, while offering a flexible workshop scheduling system. This improves the customer experience and boosts engagement.
Some screens are displayed
Let's explore to understand
the problem
SECONDARY RESEARCH
What is Florana and its competitors doing?
I performed a competitive analysis to better understand Florana and its competitors in how they provide their products to their customers. The competitors were provided by Florana.
Key insights
Enviaflores and Cocoita provide an online catalog that enhances the browsing experience, enabling customers to easily explore and purchase their products. Within this catalog, they prominently feature their best-selling items, serving as eye-catching focal points on their website.
Enviaflores and Cocoita offer flower arrangements for gifts whereas Splendora offers floral arrangements for both grand events and thoughtful gifts.
Enviaflores and Cocoita have a dedicated website to offer their products. Maintaining a website enables them to reach a wider audience and increase their sales.
SURVEY
Is a website really the solution?
We dug into what Florana's customers liked (and disliked!) about her Facebook and Instagram presence. This helped us see if a website could be a better fit, and uncover any hidden frustrations or needs they might have.
28 participants
Answered the survey done in Optimal Workshop
57%
of participants have used a competitor's website to make purchases
47%
of participants preferred for Florana to have its own website
37%
of participants preferred Florana's social networks
21%
of participants had no preference website or social networks
25%
participants expressed a desire for an online catalog that's up-to-date and organized by categories
USER RESEARCH
Uncovering user pain points and needs
To understand Florana's customers better, I jumped on video calls with 5 amazing people in Mexico, aged 25-65. We chatted about their experiences with Florana and similar businesses. I used a handy interview guide to keep things focused, and Airgram for Spanish transcriptions.
Thoughts
"What I don't like about Instagram is that everything goes down, and when I want to search for something, it takes me a long time to find it"
“But if I have to stop it then I have to figure out like which episodes I'd have to start like there is no tracker”
From understanding to defining
AFFINITY MAPPING
Connecting the dots: Unveiling User Insights
After analyzing and synthesizing the participants' answers, I unveiled some
Beyond Beauty: The Emotional-Practical Tango
Floriana's customers aren't just buying flowers, they're sending emotions. Striking arrangements are key, but so is practicality. Users crave reliable delivery, flexible payment options, and budget-friendly choices.
Crystal Clear Catalog, Confident Decisions
Imagine a user staring at blurry flowers on a cluttered page, unsure of price or availability. Not ideal! Users prioritize a well-organized catalog with high-quality images, detailed descriptions, and clear pricing. This empowers them to make quick, informed choices with confidence.
The Power of Choice: From Pre-Made to Bespoke:
Some users love browsing ready-to-go arrangements, while others crave a more personal touch. We need to cater to both! The website should offer pre-designed options, flexible customization features, and even a "build-your-own" experience with expert guidance from Floriana. This gives users the freedom to create unique and meaningful floral expressions.
Workshops Made Easy
Users want clear workshop information and scheduling details readily available, not hidden in Instagram stories. Flexible timing options cater to busy lifestyles and maximize workshop participation.
USER PERSONA
Who I design for
Based on the user interviews and affinity mapping, I created 2 user personas which represent the target audience.
HMW create a seamless and delightful floral experience that caters to diverse needs, simplifies purchasing, and empowers customization?
MUTUAL GOALS
Defining the goals for a clear direction
I aligned with the client on project goals to ensure a clear direction before brainstorming features.
From user needs to must-have features
Drawing on the user research insights and aligning them with the project goals, I created a comprehensive feature set. Through collaborative discussions with the client, we prioritized functionalities based on their importance and impact. This process resulted in a clear distinction between "must-have" features critical to the core user experience and "nice-to-have" features that could be considered for future iterations.
Must-Have
Account Creation
Landing Page
Search bar
Search results page
Filter
Catalog categories
Product information for flower arrangements
Product information for workshops
Customization options for flower arrangements
Flexible Workshop Scheduling
Expert Support in Arrangement Selection/Order
SITE MAP
Blueprint of the MVP
Having identified the key features to prioritize, I developed a sitemap to provide a clearer visual representation of the website's structure.
FLOWS
Mapping the user journey
After defining the features and their structure, I also established user and task flows to help both Florana and its users efficiently achieve their objectives.
Defining brand voice and visual language
LOGO REDESIGN
Florana's visual identity refresh
Floriana's existing logo, created with pre-existing assets in Canva, didn't fully reflect her unique brand identity. To establish a stronger visual foundation, we decided to embark on a logo redesign before diving into the website sketches.
Previous logo on instagram
New logo
Logo for website
Logo for merchandise
BRANDING
Unveiling florana's essence
To capture the heart of Florana's business, I collaborated with the client to uncover their existing brand values. Through open discussions, we refined and solidified these values, ensuring they accurately reflect the brand's philosophy. With a clear understanding of the brand's DNA, I then crafted a cohesive brand style tile.
Brand's values
Embracing innovation
Constantly pushing the boundaries of floral design, crafting unique arrangements that surprise and delight.
Celebrate everyone
Flowers are a universal language of love and appreciation. Our arrangements are designed to make anyone feel special.
Honesty is the best policy
Clear communication and fair pricing. What you see is what you get – no hidden fees or surprises.
Brand style tile
Transforming ideas into solutions
LOW-FI WIREFRAMES
Designing the features
Building upon the identified user needs and prioritized features, I designed low-fidelity wireframes. These wireframes served as the blueprint for the Minimum Viable Product (MVP), focusing on the essential functionalities and user interactions.
Flow 1 - Expert guidance customization
Flow 2 - Workshop interest inquiry form
Flow 3 - Selecting flower arrangement
MID-FI WIREFRAMES
Enhancing clarity
To give the client a clearer picture of the website's structure and interaction flow, I created mid-fidelity wireframes. These wireframes go beyond basic functionality by introducing a more defined layout and preliminary visual hierarchy. While final color palettes and fonts are reserved for the high-fidelity stage, the mid-fi wireframes establish the foundation. The wireframes were created for both mobile and desktop.
BRANDING
Crafting the UI component library
With the brand style tile established and mid-fidelity wireframes in hand, it was time to develop a UI Component Library. This library serves as the foundation for Florana's digital presence, ensuring consistent brand identity across all user interfaces.
For Florana, the brand essence aimed to evoke a feeling of freshness and delicate beauty. Eucalyptus emerged as a natural symbol that embodied these values. This theme subtly influenced the selection of the CTA color.
HI-FI WIREFRAMES
Bringing the design to life
With the brand identity established, I then started to design the high-fidelity (hi-fi) wireframes. These hi-fi versions represent the final visual design, incorporating color palettes, typography, and high-quality imagery. This level of detail allows me to present a polished and realistic representation of the website to the client. Through internal reviews and discussions with the client, we can ensure the design aligns with Florana's vision and objectives before proceeding to user testing.
Let's test it!
USABILITY TEST
Testing the prototype
To gather user feedback on the design, I conducted an unmoderated usability test, using the tool Lyssna, with six participants.
Tasks
Send a request for Expert Guidance on a Flower Arrangement.
"Pre-book" a Workshop.
Request a pre-defined Flower arrangement.
Success metrics
To assess the design's success, I defined the following key metrics:
Users are able to locate the Expert Guidance Customization Form in less than 5 min (300s)
Users are able to complete the Expert Guidance Customization Form in less than 10 min (600s)
Users give an average of 4 in content being clear
Users give an average of 4 in content meeting their expectations
Users give an average of 4 in the process to request a flower arrangement/workshop/expert guidance customization to be straightforward
Users are able to understand the purpose of the "Expert Guidance Customization Form"
In addition to asking users to rate each task, I included open-ended questions to address any difficulties, confusion, or areas where they felt improvements, changes, or removals were needed.
Results
While most participants provided favorable ratings for the tasks, a primary concern emerged regarding the desire to perform all tasks directly from the home screen, rather than having to navigate to the menu screen each time. The feedback was ordered according to the frequency and severity mapping; however, given the limited amount of feedback received, I have decided that, for the next iteration, I will address all feedback, regardless of its severity or frequency.
Refining for a better experience
ITERATION
User feedback improves functionality
I made changes aimed at enhancing the test's usability, ensuring that users can complete the task quickly and with minimal clicks.
PROTOTYPE
Visualizing the improved experience
Incorporating valuable user feedback from previous iterations, I desgined the final, high-fidelity prototype.
RESPONSIVE DESIGN
Design on desktop
While the initial design and prototyping focused on mobile, considered the user's preferred device, the project also consisted in designing for desktop. Thus, embracing the responsive design
PROTOTYPE
Try the prototype
Click through the prototype below
Embracing the journey
Next steps
Centralized Organization: This project highlighted the importance of keeping all project assets organized in a single location. In the future, I'll prioritize using a unified document or design system for deliverables, promoting efficiency and clarity.
Product New Direction: As I mentioned before the client considered in switching to event flower arrangements only. That would mean to design an entirely new website. So, starting a new project with this new direction.
Lessons learned
Remote Collaboration: Working with a client in a different time zone (Mexico to Germany) presented challenges. Translating user interviews from Spanish and coordinating schedules were hurdles. We addressed this by mutually agreeing on English as the project language (for case study purposes). This emphasizes the importance of adapting communication strategies for remote collaborations.
Prioritization and Time Management: The project demanded building a responsive website with limited time. This meant prioritizing features and breaking the design process into manageable steps. This highlights the importance of having the ability to adapt to time constraints and make strategic design decisions.
Early User Feedback: The project reinforced the importance of early user feedback throughout the design process. It's a continuous loop, not a linear path. Early feedback allows for course correction and ensures the final product aligns with user needs.
Collaborative Design: This project echoed the power of design as a team sport. From user interviews to client meetings, collaboration fosters a thrilling and fulfilling experience, ultimately leading to a solution that bridges user needs and client vision.
See Other Work
Turtlfly
Mobile app to help immigrants in their immigration process.
End-to-End
Mobile
Branding
Add a feature
Mobile