Terra Bella Flower Website Redesign

About this Project
Timeline:  Apr-Jun 2021 (10 weeks)
My Role: UX Research & Design
Team: 1 Product Manager + 4 Designers
The Client
Our client, Terra Bella Flowers is a Seattle floral shop and one of the first organic and sustainably focused flower shops in the country. It is well-known for its unique floral designs that are artistic, romantic and sensual, and is trusted by a loyal customer base local and overseas.
Overview
Through the web redesign project, we aim to increase visibility and sales for various products as well as support the end-to-end customer experience.
My Role
My main responsibilities include conducting preliminary user research and testing, reconstructing the info architecture, and creating the high-fidelity prototype with a focus on the home page.

Identifying Issues & Ideating Solutions

With the above design requirements and personas in mind, we examined the current Terra Bella website, and identified some major issues to focus on in our redesign.
1. Hierarchy issues in the main navigation
General discoverability of all kinds of products is low - the variety of categories are all nested under the "shop online" tab.

With floral design being the primary product, it does not appear on the main navigation but local wine does instead.
Solution: Updating info architecture through card-sorting with users
Card sorting sessions were conducted with 13 participants to gain clarity on how to form new grouping of product categories and consolidate pre-existing content. As a result, we updated the info architecture and main navigation bar. Products that used to be nested under a single "shop" tab now are re-organized into 3 different categories on the global navigation, offering better visibility.
2. Lack of entry points for product pages and action items
Current Terra Bella Flower home page
On the current site, the only way to access product display/ purchase pages are to click on the global navigation bar.

The usage of space (especially on the home page) could be improved to expose customers to what Terra Bella has to offer.
3. Floral availability is presented too late in the shopping flow
Current floral availability checker (presented at checkout)
Due to the shop's production and delivery capacity, floral design sellouts happen frequently.

However, users only get to know that the floral design they want is not available on a chosen date when they already have it in cart and are ready to check out
Solution: Allowing users to filter floral products by availability on chosen date
Users are given the opportunity to check availability of floral designs on any chosen date. Designs not available on the chosen date will be greyed out on the product listing page
4. Lack of transparency on how the floral products look in real life
As floral selections are based on seasonal availability, the designs customers receive may vary from the product images. The current product page is not designed to be sufficient enough in providing customers with a realistic expectation of what they are receiving.
Solution: Showcase floral images sourced from past customers
Since Terra Bella Flowers has an active instagram community involving many loyal customers, we suggested sourcing images of each floral design taken by past customers from instagram and designed a "gallery" section on the product page to feature them.

Testings & Iterations

9 participants participated in our usability testing session, during which they were asked to complete a series of tasks revolving around discovering product, finding information and completing the end-to-end shopping cycle. Iterations were created based on the key issued found.
1. Floral availability checker is presented too early in the checkout flow for customers who prioritize design over delivery date
Those who buy for others prefer to check floral availability earlier in the shopping flow while those who buy for themselves prefer later.

Our design only allow for checking availability early in the shopping flow, ignoring the needs of users who buy for themselves.
Iteration: Allow floral availability checking at multiple stages of the checkout flow
For those who prioritize delivery date:
For those who prioritize design:

Style Guide

Final Design

Reflections

Future Steps

Run comparative usability testing sessions
For our usability test, we prioritized discovering usability issues in our prototype. If given more time, we would like to conduct additional sessions to compare the original website to our prototype, especially on the availability checker and the check out flow, to see whether the redesign successfully supported the end-to-end shopping process for customers.
Get feedback from users with online flower shopping experience
The majority of the user group from which we got feedback consisted of users who do not have previous experience shopping flowers online. Recognizing the difference in motivation and purchase habits between these users and frequent buyers, which is one of our 2 personas, we think getting feedback from more frequent online flower purchasers could help us form a more comprehensive evaluation of the prototype.

What I Learned

Balancing user and business requirements
This is my first time working with e-commerce, which differs a lot from my previous design experiences in the frequency of situations where middle grounds has to be found between business and user requirements. For instance, while most potential customers want to be taken straight to product options, Terra Bella wants to leave a holistic brand impression on customers by displaying their story and mission. Therefore, I learned to always actively engage business stakeholders and keep constraints in mind when making design decisions.
 Thanks for making it to the bottom 🌼
OverviewResearchIssues & SolutionsIterationStyle GuideFinal DesignReflections