< back to work

Juice Harbor

Website redesign for a local Seattle juice business with a focus on clarifying order deadlines and delivery dates.

Overview

Problem

Customers are having difficulty understanding the order deadlines  and delivery dates, leading to confusion, frustration, and unmet expectations.

Solution

Redesign the website to help users to better understand order deadlines and delivery dates to make them feel more confident ordering from Juice Harbor.

View Prototype
Role

UX/UI Designer

Tools

Figma, Slack, Illustrator, Procreate

Timeline

8 Weeks

Business Background

Juice Harbor is a small, local, delivery-only juice business that values quality, nutrition, and environmental sustainability.

They only deliver on certain days of the week (Saturdays, Sundays, and Mondays), and orders must be placed 48 hours in advance.

All orders are placed online on the Juice Harbor website, and there is no brick-and mortar location.

The Problem

Problem Background

The business owner reached out because they were frequently receiving texts and e-mails from customers who wanted to confirm their orders, delivery dates, or ask questions about when their order should be placed.

Problem Statement

Customers want to buy juice but are left feeling unclear about whether or not they placed their order on time to have it delivered on their desired delivery date. This can create frustration and dissatisfaction, and may cause customers to seek out alternate juice businesses.

How can we help customers to better understand the order and delivery deadlines in order to improve their satisfaction level with the ordering process as well as the Juice Harbor brand?

Goals

In the next 6 months the goal of the new design is to:

The Research

Target Audience

Through interviewing stakeholders, noting past and current customers, and surveying potential customers, I learned that the target audience

Personas

I crafted three unique personas based on user research, answers to interview questions, and stakeholder input.

Having personas to refer back to kept the project user-centered by proving a clear view of a variety of motivations, wants, and needs. Thinking about specific personas helped to inform design decisions about branding, tone, and accessibility of new features.

Understanding the diverse set of needs that different users may have when using the Juice Harbor website kept all different parts of the project in focus, rather than just thinking about the needs of one type of user.

Usability Testing- Original Website

In order to:

  • discover and confirm pain points of the original Juice Harbor website
  • determine the direction of next steps
  • create a benchmark usability evaluation

I conducted usability testing on the original Juice Harbor website by guiding participants complete tasks based on a scenario and asking survey questions.

I learned that users:

  • expect and prefer to see deadline information in the form of a table
  • found the content and labels of the pages confusing
  • preferred to be exposed to important information early in the order process to avoid disappointment later
  • cited the disjointed and unpolished website as a reason to not have trust and confidence in the business
Competitive Analysis

To learn more about the way that other websites provide users with important information in a shopping flow, I looked at other websites that sold products or services, specifically involving some kind of deadline.

This helped me understand features that other companies and websites are using to help users easily identify and understand information that is critical to the user's success with the product.

I learned that a countdown clock, making the deadline information accessible and visible throughout the ordering process, and having key information easily accessible were important features in making sure users feel confident when placing an order.

Customer Journey

To better understand how order and delivery info plays a role in the user's journey, I created a customer journey map.

Following the customer's journey from beginning to end ensured that all opportunities for improvement in regard to clarifying order and delivery deadline were discovered.

I learned that there are opportunities to include important information about order and delivery deadlines as early as the consideration phase as well as continuously throughout the customer's journey.

Introducing important information early may allow customers to browse and interact with the company with greater confidence, knowing that there won't be surprises down the road and helping them to plan accurately.

Journey of a customer who wants to order juice for the first time
User Flow

I wanted to understand which pages are the most important in a typical user flow, in order to learn where I might best place information that is important to a user's success.

This showed that a user may complete the entire ordering process without exploring the home, about, or order and delivery info pages.


This told me that placing important information information along this path, such as popups and reminders about order deadlines and delivery dates would ensure that users learn this information without having to go elsewhere on the website.

The Solution

The following four potential solutions were identified to address user needs:

1

Clarify order deadlines and delivery dates across the website

3

Place vital information directly in the user's path

2

Add a countdown clock to the cart

4

Reorganize information architecture and page content

Sketches

I explored several options for implementing these ideas through sketching.

These sketches show brainstorms of several ideas for a popup on the 'shop' page, a table and calendar in the 'Order and Delivery Info' page, and a countdown clock in the cart.

They are based on the existing website, and build on it using the discoveries from previous steps in order to create a website that better meets the user's needs.

Sketching provided a framework on which to build wireframes which we can then use for user testing.

Information Architecture

Previous user testing showed that navigation labels were unclear, and that the information on each page was not what users wanted or expected to find on that page.

To address this, I did a card sort to determine the necessary pages, their labels, and which content would go where.

I then created an updated site map, which helped me to understand which pages I would need to create for the website.

Wireframes and Mockups

I created wireframes from the sketches that I then used do usability testing to validate the proposed solutions.

Several iterations of wireframes were made in Figma, and then high-fidelity wireframes were used for usability testing.

Mockup Testing

Testers responded favorably to the table, popup, and countdown clock, and easily were able to correctly decide which page would contain the information they were prompted to look for.

During testing, it was noted that an interactive/visual aid for selecting delivery dates in the 'order and delivery deadlines' page could be helpful for planning juice deliveries that are a few weeks out.

Interactive Deadline Tool

During testing, some individuals still seemed to struggle to understand the deadlines and dates, even with the updated table layout and expressed that looking at a calendar would be helpful to better conceptualize the deadlines.

I designed an interactive calendar that would show you available delivery dates, and when a date was selected, it would mark and tell the user the last date by which the order would have to be placed to ensure delivery on their desired date.

The first iteration proved to be confusing to testers, and after redesigning, testing, redesigning, and testing again, the third version proved to be helpful and was added to the Order and Delivery Info page.

Three subsequent iterations of the interactive calendar tool

UI Design

Design Overview

Once the high fidelity wireframes had been tested, I began to design the interactive prototype in Figma.

The new design

This cleaner, more modern design helps customers feel greater confidence in the business, and helps them find important information more efficiently.

Juice Harbor Style Guide

Overview of main pages

Interactive Prototype

< back to work