All Seasons Florist INC.

UX/UI Design

What is “All Seasons Florist INC”?

All Seasons Florist INC has been selling both flowers and houseplants since 1997. It is located in Rockville, Maryland where they offer same-day delivery. All Seasons Florist INC is a member of the FTD florists with international deliveries. Their mission is to exceed their customers' expectations with quality, value, and professional service. According to their customers’ reviews, they are famous for their fast service and good quality flowers.
Project Overview
Our team started the process with contextual research to hear about the existing problems from users, we evaluated heuristics and we did comparative/competitive analyses to have a better understanding of the market and necessary features for the website. We documented the user journey map on the existing website, and conducted extensive in-person and online interviews to discover the existing pain points in the conversion funnel.  
Lastly, we created a new UX design that takes into account our goal.
My Contributions
My role in this project was as a UX designer. I was involved from research to prototyping.
As part of my UX/UI class, I worked on a redesign project for five weeks from Dec 11, 2020 to Jan 15, 2021. I worked in a team of three from Canada and the United States. My team communicated daily to ensure we were kept up to date with project developments. We scheduled meetings via Zoom and recorded the meeting outcomes and documented any discussed ideas for future reference.

Key Deliverables

  • User / Market Research
  • Interaction Design
  • Sketching and wireframing
  • Prototyping (Lo/Hi fi)
  • Information Architecture 
  • Usability Testing
Challenges
  • Provide a smooth and linear shopping experience 
  • Eliminate redundant content
  • Create a minimalistic look and feel  
Design Goal
Improve user experience and business metrics: user conversion and retention.


Discover

Observing, listening and learning
An IRL Visit
To learn about business needs, we visited the shop and interviewed the owner.  The majority of customers are local, but the manager was looking to increase online sales as a way of adapting to the new purchasing habits of consumers during the pandemic. Online sales also aren’t subject to the same size limitations of a physical showroom. 
Contextual inquiry (onsite visit)
User Interviews
Our nice interviewee’s apartment
In order to more directly understand the existing pain points of the website, our team held two in-person and two online interviews. Our criteria for participation was that the individual self-reported as having a current or previous interest in buying flowers or plants.
We asked both survey-style and open-ended questions to better understand their existing attitudes, habits, and experiences with purchasing plants. After establishing a baseline, we asked them to sit down and browse the site as a potential user, while at the same time we observed their statements and reactions.
Interview Questions:
  • When and why do you purchase plants/flowers online?
  • What would you describe as the core features of an online plant / flower shop?
  • What are some challenges you have experienced when buying plants online? Were there any concerns about your order?
  • What information do you want to see about the products and services? 
  • Can you mention any examples of online plant/flower shop that inspire you? And why?
Findings (Major takeaways):
  • User wants the ability to filter and sort
  • User wants to see helpful information about caring for plants
  • User needs to see the status of their orders
  • User wants to read reviews for products
Empathy Map
Empathy map of user #1
Empathy map of user #2
Online Customer Reviews
To better understand what makes an online flower shop liked or disliked by customers, we leveraged existing online reviews of similar shops. We read online reviews on two separate platforms, both Yelp and Shopper Approved.
For reviews that were negative, we found the most common complaints were:
  • Provide a smooth and linear shopping experience 
  • Eliminate redundant content
  • Create a minimalistic look and feel  
Positive reviews tended to mention:
  • Fast shipping
  • Fresh flowers and plants
  • Having testimonials for products
Business Analysis
We did SWOT (strengths, weaknesses, opportunities, and threats) analysis to better understand the business.
Heuristic Evaluation
Using the Heuristic evaluation approach as a model, we made another pass at reviewing the business website and organized our findings under four high-level themes.
Selling The Business to The User
  • Dated and inconsistent design aesthetic
  • Random and untitled pictures on homepage
  • Right side menu navigation instead of top bar navigation
  • Text heavy footer that doesn’t fit inside the margins
Finding The Desired Product
  • Frequent use of unfamiliar navigation terms and phrases
  • Search experience is not obvious; many items not properly tagged
  • Users can’t filter by price on catalog page
Standard Design & Behavior Conventions
  • Non-functional buttons
  • Home button instead of logo link
  • No subscription notification
The Checkout Experience
  • Users cannot:
  • View item quantity on cart icon
  • Add multiple items to cart without starting over
  • Change the quantity of items in cart
We conducted a total redesign of the website is needed to build trust with the customer and increase sales. Here are the approach plan:

1- Conduct usability testing and competitive analysis to develop a design strategy that improves users’ experience.
2- Create innovative designs to keep customers engaged and even delighted.
3- Modify the information architecture to better feature information that most users will be looking for.
Competitive Analysis
To understand the landscape of competitors we chose eight flower and plant shops that had similar products and e-commerce experience that is comparable to our goals.
Competitive mapping of ASF and eight competitors
Competitive analysis table of ASF and eight competitors
Key missing features:
Testimonial 
Suggested product add-ons
Product filtering
Text search
Business contact information
FAQ
Competitor analysis helped us decide what to put on the homepage. It provided insights into the features, functions, and flows. It uncovered valuable opportunities to create a product that could stand out from the competition.
Usability Testing - Current Site
User success Radial Progress after the first usability testing on current website

Size: 10 potential users
Device: Mac Laptop and Windows PC

Task:
1- Purchase a bouquet for a friend’s birthday (From beginning to checkout)
2- Order a holiday plant for the user's mother to be delivered on Christmas day. (From begging to checkout)
3- Purchase a bouquet for valentine’s day. (didn’t finish the checkout because he got frustrated)

User Pain Points & Observations
User success Radial Progress after the first usability testing on current website

Define

Ideas Were Born
We conducted an affinity diagram to separate the data into groups of major problems which further helped us in creating our persona. 
User quotes
Affinity mapping
User pain points of ASF
Important for Product
  • Information architecture
  • visual elements
  • Landing page
  • Checkout 
ASF Pain Points
  • functioning issues
  • lack of control & options
Persona
Meet Ryan
  • Ryan Pulman is a 32 year old data scientist.
  • He likes to gift plants and flowers to his friends and family as a symbol of life.
  • He believes greens can boost positive energy.
  • Ryan prefers to buy fresh flowers and plants in person. He can’t trust online services.
  • He is always searching to find the right online plant shop.

Develop

Plotting The Action
To better understand the ways users can interact with the site, and navigate through their goals, we constructed a user flow according to our Persona’s needs. This flow shows Ryan’s journey from entering the website to ordering a plant to surprise his girlfriend, Julia.
User Flow & Task Flow
Information Architecture / Card Sorting
We used a user-centric approach to define the IA for redesigning ASF website.

Card sorting: 61 cards and 16 responses

Open card sorting — Users were asked to name every group they’ve defined for given content on the cards. Open card sorting could not help us because the users' understanding of the topics were not integrated.

Closed card sorting —  Users were asked to sort the cards into the given pre-defined groups. The closed card sort worked better for us to understand how users sort content items into each category.
Closed card sorting was key to labeling categories and forming the new Navigation System. We found that IA on the current site was a significant shortcoming for users. After the card sorting insights we created a visual sitemap to footprint how each page relates to the website’s hierarchy.
Sitemaps

Design

Bring The Ideas to The Life
The website will be redesigned based on Ryan’s needs and preferences.
Usability Testing
Usability Plan Dashboard
Usability Testing Report
First Iteration Refinement:
  • Added left side filter menu to catalog page.
  • Moved up “Wedding” in Occasions’s sub categories to highlight its priority.
  • Removed shipping icon for tracking order.
Second Iteration Refinement:
  • Removed “corporation” from primary navbar, and added Flowers and Same-Day Delivery. 
  • Hero image CTA changed to “Order Now”.

Deliver

The Make Over

Takeaways

Learnings and Reflections
The design solutions resolve many of the heuristic problems we initially found, and increased the user success rate to 85%.
User success Radial Progress after usability testing on new website
What did I learn?
  • Understanding a problem deeply is essential for solving it. 
  • It’s important to consider the business goals as well as user’s needs when designing an e-commerce website but if you design exclusively for the business' goals, you will most likely fail.
  • Simplicity and intuitiveness might be the best solution. Less is more. 
  • Constant communication is the essential key when working in a team.