top of page
zoejuicebar.png
Redesigning ZoeJuiceBar's Websites
Zoe Juice Bar
Overview

Timeline     

Role           

Tools           

Apr. - June, 2018

Individual project for a class assignment

Pen & paper, Xmind, Balsamiq, Adobe Illustrator

macmock2.jpg

 

Zoe Juice Bar is a cold-pressed juice shop in Olympia, Washington that mainly deals in pure natural products. I redesigned the website based on the original website's content. My major goal was to facilitate UX, make the design more user-friendly, improve the visual design, and better communicate the brand image. 

 

Original URL: https://www.zoejuicebar.com/ 

 *As my project progressed, I've noticed that they also updated their official website. 

Color palette     

#FFEB3D   #C2EB73     #E36C35     #528540    #4E8FB6     #1A3839

Brand Discovery
 
 
Brand Discovery​

Zoe Juice Bar is a place where you can have nutritious and delicious drinks. Zoe sells drinks that are all natural and do not contain any added sugar, additional ingredients or artificial additives. Zoe also offers to customize fruit and vegetable beverages other than signature drinks on the menu. Customers can always order products online and then pick them up at the store or enjoy a friendly and welcoming environment when customers degust in the store. 

Target Audiences

   1. Primary:

      Wide age range. Individuals work or live near the shop, and willing to have fruits and vegetables frequently.

   2. Secondary:

      Individuals particularly looking for juice cleanses. Office workers that often go out to eat, stay up all night, or work and rest irregular.

   3. Tertiary:

      Individuals live kind of far away and want to purchase online and pick up on the way to work. 

Messaging​

   1. Quick and ready to serve

   2. Freshness, healthy, natural, no additional ingredients. 

   3. High nutritional content, with a therapeutic effect, simple steps for online order. (Juice cleanses)

Sitemap
 
 
Sitemap

In order to provide different marketing and sales funnels, based on the research and brief brand discovery, I created the initial sitemap with 8 templates for different pages. 

Header (on all pages).png
Wireframes
 
 
 
Wireframe
draftsketch.jpg

Rough draft of homepage

Visual Design
wireframeBJZ.jpg

1.2 Shop Cleanses

1.3 Create Your Own Cleanses

0.0 Home

 
Desk & Mobile Design​

Quick access to order online and pick up at the store for existing and potential customers.

IMG_1149.JPG

Desk Design-Home

portfolio-8desk+mobile_0.0 homepage.jpg

Desk Design-Create Your Own

portfolio-8desk+mobile_1.0-1.3.jpg

Hover to + the plus icon, the information

will pop up.

 

Click plus button

to add another

day, there will be

a new row of 6

bottles.

Overview of the pages

Mobile Design-Home / Navigation

zoejuicemobile.png

Mobile Design-Create Your Own

Since there is no hover state on the mobile devices, the information will always be displayed.  

zoejuice2.jpg
zoejuice23.jpg

Instead of scroll down, slide left to check other products, so users can still see the bottle pack above.

Other Screens

othermobile.jpg

© 2024 Yushang Xu

  • 微信
  • 电话
  • Instagram
  • email
bottom of page