UX/UI Website Redesign

All seasons florist INC.

As part of my UX/UI class, I worked on a redesign project for five weeks from December 11, 2019 to January 15, 2021. I worked in a team of three from Canada and the United States.

My Role

My Contribution

My role in this project was as a UX designer. I was involved from research to prototyping.

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.

My Responsibilities
  • User research
  • Market research
  • Sketching and wire framing
  • Prototyping (Lo/Hi fi)
  • Information architecture
  • Usability Testing

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

The Challenge

  • Provide a smooth and linear shopping experience 
  • Eliminate redundant content
  • Create a minimalistic look and feel 

The 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 with 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

In order to more directly understand 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

Findings

  • 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
Our nice interviewee’s apartment

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.

The most common complaints in negative reviews were:

  • Lack of delivery information 
  • Not having options to choose add-ons in checkout
  • Poor typography, interaction design and UI
  • No tracking order

Positive reviews tended to mention:

  • Fast shipping
  • Fresh flowers and plants
  • Having testimonials for products

Website Analysis

We did SWOT (strengths, weaknesses, opportunities, and threats) analysis to better understand the business.

Heuristic Evaluation

The Pain Points

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 and 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
  • Users cannot add multiple items to cart without starting over
  • Users cannot change the quantity of items in cart
The original website

We concluded:

A total redesign of the website is needed to build trust with the customer and increase sales.

Approach Plan

Contextual Research

User Empathy Map

Usability Testing - Current Site

Size: 5 potential users
Device: Mac Laptop and Windows PC
Task: Find a product of interest and complete your
purchase until the checkout point

User success Radial Progress

User Pain Points and Observations

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.

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.

Key missing features

  • Testimonial
  • Suggested product add-ons
  • Product filtering
  • Text search
  • Business contact information
  • FAQ

Opportunity

Many newer online flower shops support subscriptions -- ie. scheduling regular deliveries of flowers. ASF does not currently offer subscriptions so users who want them may end up switching to competitors that offer them. By adding the feature, ASF would be matching offerings to larger online flower services. Subscriptions have the added advantage in that they can offer a more steady source of revenue in a business where revenue is normally cyclical.

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.

Important for products

  • Information architecture
  • Visual elements
  • Landing page
  • Checkout

ASF pain points

  • Functioning issues
  • lack of control & options

Persona

Meet Ryan Pulman

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

The website will be redesigned based on Ryan’s needs and preferences.

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 order a plant to surprise his girlfriend, Julia.

User flow and task flow

Information architecture and 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 label categories and form 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 ideas to life

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

Learning and reflections

The design solutions resolved 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?

Let me know if you want to talk about a potential collaboration. I’m available
for UX work.

Connect to talk design