Juice Harbor
Website redesign for a local Seattle juice business with a focus on clarifying order deadlines and delivery dates.
Website redesign for a local Seattle juice business with a focus on clarifying order deadlines and delivery dates.
Customers are having difficulty understanding the order deadlines and delivery dates, leading to confusion, frustration, and unmet expectations.
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 PrototypeUX/UI Designer
Figma, Slack, Illustrator, Procreate
8 Weeks
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 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.
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?
In the next 6 months the goal of the new design is to:
Through interviewing stakeholders, noting past and current customers, and surveying potential customers, I learned that the target audience
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.
In order to:
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:
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.
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.
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 following four potential solutions were identified to address user needs:
Clarify order deadlines and delivery dates across the website
Place vital information directly in the user's path
Add a countdown clock to the cart
Reorganize information architecture and page content
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.
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.
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.
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.
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.
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