top of page
Penny Juice

A well-thought website redesign to improve the efficiency of the shopping process.

Penny juice home page mockup png.png
Anchor 1

Challenge

Discover the pain point of the current website and propose a solution to improve user experience

Role

Duration

Research

User research, Heuristic evaluation, Competitive analysis, card sorting, Usability test
User researcher.
UI designer,
Interaction designer
 
Three weeks
Note: The case study reflects only my opinion and I don't work for the company.
Project Overview
Finding and redesigning a "bad design" was one of my first assignments as a UX design student in the UX Land school. I did the project in a team of three and it was selected as one of the top 3 projects among 34 projects. What is coming next is the results of our team's works for discovering and solving the problems. 
 

Research Steps

Define the Problem

Brainstorm Solution

Implement

Test

DEFINE THE PROBLEM

About Penny Juice
Penny Juice has a free shipment, but the minimum order is one case. Each case has a minimum of 6 flavors that clients can select themselves. Every case makes 24 gallons (6 ½ gallons per case). The case price is $ 89 cost per gallon (Reconstitute 1+7 with water).
 
 
Pain Point
As the first step, we started researching the users of the website and knowing about their experiences using the website. We found the users are happy with the price and quality of the products, but they didn’t have a good experience with the ordering system of the website. This data helped us for making the persona.
 
 
Testimonial for website.jpg
Examples of users’ experience from Google review and Facebook

BRAINSTORM SOLUTION

Heuristic Evaluation
penny juice home page.JPG
Current homepage
Problems
  • Challenging shopping system for the users
  • Lack of consistency in the fonts, bottoms, and layout
  • lack of readability due to using high contrast color for the background 
  • lack of bottom for canceling/editing while shopping
  • Using too many words for the shopping system instead of pictures and icons
  • No page for help or FAQ.
Penny juice order page.JPG
Current shopping page
Solutions
  • Making a smooth shopping system
  • Consistency between the pages and elements
  • Changing colors and typography
  • Giving more option to the users while shopping
  • Using more icons and images 
  • Providing a FAQ page and learnable path
Persona
   Pam, 33 years old
  • The principal of Happy Land daycare 
  • Used to be a nutritionist at school
  • Opened her own business 4 years ago
  • Kid lovers and caring personality
  • Interested in volunteer activities in her community
 
 
Persona.jpg
Competitive Analyses
5 similar websites were used for the research. We analyzed the features of each of them and compared them with the current pages of Penny Juice.
 
 
competetive analyse table.JPG
The result of the research
1. Shopping card is commons for the target users.
2.Using the word “Shop” is clearer than “order now”.
3. A better system design for shopping part with images 
4. We need a FAQ and About part.
5. We should make a sign-in page.
6. We need to work on the Location part.
 
 
Cart Sorting
A hybrid card sorting was done with 6 different categories extracted from competitive analysis. 22 people participated in the online research and they were able to make their categories as well.
 
 
cart sorting 2.jpg

EMPLEMENT

Sitemap
Using the information gained from competitive analysis and card sorting results we came across the sitemap. In the global bar, we added a profile and shopping cart icon. We made 5 items for the navbar and put shop bottom at first since the main goal of the users is to have a smooth shopping system.
 
 
Sitemap (3).png
Witreframe
Wire frame homepage.png
Product page 2.png
Product page 1.png
Initial Wireframes were designed in Balsamiq.
 
 

TEST

Usability Test
The usability test was done with the prototype. The users had access to computers and the internet, and we could observe them while doing the task. They have been asked to purchase a case including two battles of apple juice and four battles of peach juice.
 
 
Usibity plan dashboard.JPG
Usability test dashboard
Iteration Process
   After observing and having an interviewing the users we made some changes to the pages
  • Adding a notification bar at the home page regarding Penny Juice business plan (Minimum purchase of 6) to make it more obvious for the users
  • Revising the whole purchase process to make it easier for the users
  • Changing the color and shape of the main keys to make them more noticeable
  • Adding testimonial on the homepage
 
 
Shop Page.png
Shopping page (Before)
product page 3.JPG
Shopping bag (After)
Next Step
  • A/B testing for the shopping process
  • Working on the other pages (Why Penny Juice, about us, and contact)
  • Making a mobile version design
  • Preparing the final prototypes for coding
 
 
What I Learned

Penny Juice was my first UX Project learning how to approach the problem and look for a solution. Collaborating with the team I enjoyed hearing different perspectives about the challenge. 
Because of lack of experience, we had no idea what kinds of research methods is necessary. While preparing the case study, I felt some gaps/ issues in the research method. It gave me a chance to rework the project again and also make a deep learning plan. Problem-solving not in a project but in life and career was the big lesson of the project!

bottom of page