Overview
Overview
OverviewCurrent WebsiteUser ResearchFeature AnalysisInformation 
ArchitectureIdeationPrototypeUsability TestingHigh-Fidelity Responsive Mockups
VISSERS
In a 5-week design sprint I created a responsive website design for a local florist as a concept project.
responsive
redesign
concept

Project Overview

Experience

User Research
Task Flows
Wireframing/Prototyping
Usability Testing
Style Guide Creation

Deliverables

Mid-Fidelity Desktop Prototype
High-Fidelity Mobile & Desktop Mockups
Organized Zeplin Style Guide

Design Tools

Sketch | InVision
Optimal Workshop
Zeplin
Miro

Duration

5 weeks

Problem

Visser's is a local small business that offers high quality plants and flowers at prices significantly lower than national flower delivery chains and plant shops. Despite their competitive prices, their website doesn't showcase their inventory in a way that user's find appealing or credible.
‍

Solution

I redesigned Visser's website adding predictable information architecture, features relevant for both plant/flower shops and general e-commerce websites, and improved UI providing a credible and consistent look throughout the website.

Current Website

Initial Observations

Opening Visser's current website, I was faced with an outdated and inconsistent website. In addition to their cosmetic shortcomings, a lack of information architecture made finding specific products confusing. After encountering these pain points myself, I continued to user research to see whether these concerns were valid and to see what pain points other users were encountering.

User Research

Key Insights

During my interview with users, I received some pretty negative feedback regarding the current website. At best, criticism was about the aged look of the website. Unfortunately, more negative commentary included not wanting to buy products from the website due to a lack of credibility based on the appearance of the website.
‍
100% of users interviewed did not trust this website
100% of users were overwhelmed and confused by the checkout process
66% of users expressed a desire to click out of the website within one minute of browsing
"I would not put my credit card information onto this website"

Task Analysis

Though there were some organizational and cosmetic tweaks to be made towards enhancing this online platform, usability was not a big issue when looking for a generic bouquet. Of the three users I had go through a task analysis, all were able to successfully get to the end of the checkout process with 0 errors.

A caveat to this finding was that if more specific bouquets or plant types were sought, there would be no way to specify a search outside of the limited existing options in the side nav or an input of an exact name in the search bar. Once I had collected enough information from users, I began synthesizing my data to keep my design focused on my target audience's needs.

Target Users

After synthesizing my research, I discovered and defined two key personas who would typically shop at my website:
Courtney
Eric

Courtney Price

"The plant lover"
Location: Santa Ana, CA
Job: Retail Marketer

Behaviors:

Frustrations:

Goals:

  • Likes to care for plants as a hobby
  • Is not super busy, but likes convenience
  • Apartment doesn't have a lot of light so not just any plant can thrive
  • A lot of plants have been sold out due to COVID-19
  • Wants to find reasonably priced plants that are available for purchase
  • Wants to save time when shopping for house plants

Eric Kingston

"The occasional flower gifter"
Location: Santa Barbara, CA
Job: Administrative Assistant

Behaviors:

Frustrations:

Goals:

  • Usually shops for gifts last minute
  • Buys flowers online only when recipient is far away
  • Tries to be as cost effective as possible
  • Sending flowers can be expensive
  • Gets easily overwhelmed with too much information on websites
  • Wants to send flowers that aren't too expensive
  • Wants to find clearly displayed information that is easy to find

In Summary

Visser’s is the perfect shop for price-conscious shoppers like Eric and Courtney, however they lack trust for the website in its current state; they are hesitant to input their contact info let alone their credit card information. They want a website that feels up to date, organized, consistent and familiar-- a website they can trust.

Feature Analysis

Competitive Analysis

Feature Inventory

Vissers
The Sill
Urban Stems
Plant Shop Seattle
Compare Items
Search Bar
Sort By
Plant Care Info on PDP
Filter
Plant Size Listed
Related Items Under PDP
After taking inventory of some common features amongst competing plant and flower shops,  I decided to list plant care and plant size information on the product description pages making it easier for users to find as much information as they could on the site. I also decided to add a filter option, giving users more control over their search and allowing them to refine it based on whatever constraints they may have. Lastly, I made the decision to remove the compare items feature as it was not featured on other plant/flower websites and was overlooked by my users during task analysis.

Comparative Analysis

Feature Inventory

Vissers
Lush
West Elm
East Fork
Search Bar
Favorite Items
Breadcrumbs
Show Me More
Endless Scroll
Pagination
Account Login
I wanted a website that users would find feels familiar and modern so I reviewed some popular retailers who had the functionality and aesthetic I wanted to emulate. After my analysis, I realized that pagination was growing less popular and being replaced by options such as endless scroll or a "Show Me More" option; I decided to go with the latter. I also added an account login option to help users streamline their checkout process. To add clarity to the site's information architecture, I added breadcrumbs to help users see where they were within the site. Lastly, I incorporated a floating basket into my redesign to create a smoother checkout process.

Mid-Fidelity Wireframes

Information Architecture

Creating a Site Map

Since Visser's had little to no existing information architecture, I drew out a site map attempting to merge the Visser’s online inventory to the categories listed in Urban Stem’s current dropdown menu. Though most categories listed on Urban Stem’s website were relevant, some categories failed to overlap.

Visser’s sold cigar boxes and plant baskets, neither of which were offered through Urban Stems. Visser’s also offered a category of flowers named “tropical flowers” which didn’t have an obvious home in my first iteration of a site map.
‍

Card Sort

I administered a closed card sort and gained insights into where people expected to find these items. I placed “tropical flowers” under my “Flowers by Collection” category, and I placed both cigar boxes and plant boxes under gifts. Card sorting interviewees also elucidated that they would expect to find “Romance Flowers” under “Flowers by Occasion” rather than “Flowers by Collection” which I moved accordingly in my final site map.
‍

Final Site Map

Mid-Fidelity Wireframes

Ideation

Initial Sketches

Before moving onto digital wireframing tools, I drew out a general layout of what I wanted some of my main pages to look like.

Prototype

Mid-Fidelity Prototype

After ideating and incorporating my research into my wireframing, I created a complete mid-fidelity prototype featuring the many changes users wanted to a smoother online shopping experience.
‍

Updated Landing Page

I created an updated landing page including drop down menus with clear and user friendly information architecture.
‍

Revamped Product Listing/Product Description Page

I added filters to the product listing page, making it easier for users to find exactly what they're looking for. Since price was also important, I included a filter for prices.

On the product description page, I included large images of add-on gifts to a carousel so users could scroll through visualize what they were buying. A floating basket made it easy for users to see their cart and subtotal prior to checkout.
‍

A Familiar Checkout Process

Since a lot of users found Visser's current checkout process overwhelming, and rightfully so considering it was a dauntingly long form lacking pictures, I went ahead and broke up the checkout process into three screens. With inspiration from popular retailers' checkout flows, I tried to create a familiar but informational check out process.
‍
Go to Interactive Prototype

Usability Testing

After ideating and creating a mid-fidelity prototype, I was able to conduct three usability tests. I asked users to walk through 2 separate task flows, one for Courtney (buying a low light plant) and another for Eric (delivering flowers to his mom). 3/3 users were able to complete tasks with 0 errors.
‍

User Feedback

When I solicited feedback after the usability tests, 2/3 users said they would like to see "Add to Cart" before adding a gift option on the PDP. Initially users had to scroll before having the "Add to Cart" button show up on the screen. I added this functionality that would be visible without scrolling on my following iteration to address this pain point my users were experiencing.

High-Fidelity Responsive Mockups

Branding

Since Visser's lacked consistent branding throughout their website, I created a new color palette for my high-fidelity wireframes. After generating and trying a couple of color palettes out, I realized that I wanted to avoid colors that were too bold since they would clash with and take attention away from the colorful plants and bouquets. On the other hand, colors that were too muted made the shopping experience feel dull. In the end I chose a monochromatic palette that balanced out these two extremes by giving an exciting burst of color, but not taking away from the inventory being displayed.

Responsive Mockups

When I moved onto creating mobile screens, I wanted to preserve all the functionality that the desktop site had such as the filter and sorting options as well as the breadcrumbs. I wanted to create a convenient experience whether users were shopping from their desktop browser or on a mobile browser from their phone.

Landing Page

Product Listing Page

Product Description Page

Zeplin Styleguide

After completing my high-fidelity wireframes, I was ready to compose a styleguide that could be handed off to and used by developers. I transferred my wireframes and components from Sketch onto Zeplin, where I organized my site's assets, components library, fonts, and color palette.
View Zeplin Styleguide

View More of My Work

Google DocsFinliVissersDaily UIs