Mora Flora: Upscale floral arrangements from local pop-ups to the web.
Duration: 2 Weeks
Type: Responsive website
Role: UX/UI Design, Research
Tools: Figma, UX Tweak, Pen & Paper
The Problem
Mora Flora is a small pop-up florist and body care shop owned and operated by Sasha in Norfolk, VA. Currently there is no website, and customers do not have an easy way to order products. Mora Flora is solely run through Instagram, informing customers when and where there will be a table event, and completing custom orders through direct messaging. This process is inefficient for both her and her customers, and in the last year business has dropped as a result. Sasha seeks to establish a website to gain the trust of her customer base and increase sales.
I want to build a website that allows customers to easily order a custom flower arrangement.
Through user surveys and competitive analysis, I identified opportunities to improve customer experience when ordering floral arrangements online.
Process & Methods
Empathize
“When supporting a local business, I am more likely to have a better and more genuine user/ customer experience compared to a larger retailer where I am just an order number.”
A survey helped to identify how customers make their choices, what kind of communication they prefer from their florist, and what factors contribute to their willingness to pay a premium.
A competitive analysis of three local florists and one large retailer revealed complicated navigation and uncertainty about potential selections.
71% of people prefer to shop at a local florist.
43% ranked communication with their florist as extremely important.
57% of people are willing to pay a premium for a custom floral arrangement.
People prefer to shop local to support business, an expectation of better customer service, and higher quality products.
57% of people are more likely to purchase a custom arrangement vs a suggested arrangement.
Overall, customers are generally wary of ordering flower arrangements online, especially from large retailers. People prefer the special touch of a local artisan, and are looking for clear communication when making personalized choices.
Define
Refinement
Using survey results I created an affinity map, which helped to clarify what expectations users had in common. This data helped me to build a persona and brainstorm ideas for Mora Flora’s website features.
Persona
With Mora Flora currently operating on a relatively small-scale, I decided to err away from event-based personas and stick to representing the more casual customer.
Meet Emily, local business enthusiast and lover of the soft life.
Key insights from Emily:
Customers don’t buy flower arrangements with high frequency and want an easy shopping experience.
It’s easier to buy from a local retailer, they are more flexible and communicative about personalizing and customizing arrangements.
Brainstorming Ideas
After narrowing down HMWs I settled on creating a system that’s easy to browse and purchase arrangements, and set goals for the project.
Information Architecture
I arranged card sorting with five people, both in person and virtually - this step was instrumental in organizing Mora Flora’s website. Understanding where users expect content to be helped create the layout.
Task Flows
Using the sitemap as a guide, I developed task flows for the most common user journeys on a florist website: Choosing an arrangement and adding to cart, and requesting a quote for a custom arrangement.
Ideation
Wireframes
I sketched out my ideas for the layout and features, focusing on product pages and customization.
Considering that Mora Flora is currently doing business through Instagram, I decided to prioritize the mobile experience; however, desktop wireframes were explored in Figma following the same concepts seen here.
Mobile
Browse Products
Cart Quick View
Menu Navigation
Quote Quick View
Product Page
Homescreen
Desktop
Homepage
Navigation
Product page
Browse products
Quote request
Test
User Insights:
Six participants agreed to test Mora Flora’s mobile design. Testers were asked to complete two tasks:
Add a specific item to the cart.
Request a quote for a custom arrangement.
Testers were overall very happy with the layout and aesthetic, finding it easy to use and appreciating the customization request process. Based on the website alone, 83% of testers were very likely to recommend Mora Flora.
User feedback included small changes to improve the design:
Larger variant images.
Clear copy.
A more obvious CTA for custom arrangements on the homepage.
Before
After
Amplified Variants for Confident Choices
Iterations based on usability learnings:
Increased the size of the variant images.
Larger variant images offer a detailed view, boosting user confidence in selection and ensuring appreciation of unique features for an enhanced shopping experience.
Before
After
Enhancing Clarity with Improved Copy
Iterations based on usability learnings:
Updated the copy so it’s more clear and streamlined for the user.
This cuts through user confusion around the custom arrangement process, eliminating uncertainty and improving overall experience.
Before
After
Discover and Order Bespoke Arrangements Instantly
Iterations based on usability learnings:
Updated the CTA for custom arrangements so that it stands out more on the homepage.
The new CTA provides an effortlessly visible and intuitive pathway, empowering users to easily explore and order personalized floral arrangements.
Design
Visual Identity
Mora Flora’s visual identity is already defined with a logo and soft, feminine colors. Sasha likes to keep her branding simple and classy with black and white neutrals and a pop of pink. Playfair Display is used for the headings for its delicate legibility, and Lato for the body font as it’s crisp, clear, and pairs nicely with the headings.
Prototype
First Impressions
A simple and elegant introduction to the brand, on the homepage you can find entries to different categories, featured products, custom arrangements, and a countdown for pop-up events.
Shop with Ease
Ensuring shopping categories are clear and concise is key to instilling confidence in Mora Flora’s customer base.
Showcase Arrangements
Clean product pages with options to personalize an arrangement and upsell add-ons.
Create Your Own
Feel included in the process of creating your own custom floral arrangement. Select from a variety of options and request a quote.
Reflection
Next Steps for Mora Flora are to explore and improve the checkout process.
This was my first client-based project, and I learned how important it is to ensure effective communication is happening between myself and a client, and how challenging it is balancing their vision with user needs. Thankfully Sasha was flexible and let me do my magic with her website.
It remains to be seen whether she’ll branch out from Instagram and launch a website for Mora Flora, but if she does she’ll have a design to start with 😊
Lavendr
RangerBot
TourPro