top of page

A UI project for designing a sustainable fashion website
Project Redesigning the websites of Penny Juice for desktop
Challenge Working on shopping system
Research User research, heuristic evaluation, competitive analysis, card sorting, usability test
My role User researcher, Interaction designer, UI designer
Project time Two months
About Penny Juice
Penny Juice is a family-owned business established in 2011 in Iowa. They make 100% fruit juice concentrates for childcare, daycare, and preschool. Their product is available in 15 flavors including 7 color-free flavors. The company complies with all requirements with FDA guidelines.
Business model
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 person and her story.

Examples of users’ experience from Google review and Facebook
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

Scenario

It is very important for Pam that her kids receive their daily vitamins. She tried to give portions of fruits to the kids, but they did not like them, so she decided to give them the daily supply of vitamins in the shape of juice. Since she has a limited budget for her daycare, she is looking for an affordable and healthy option to provide juice for her daycare.
On Friday evening while meeting her friend, Emma (her school colleague), she mentioned Penny Juice and her experience ordering healthy, nutritious, and delicious juice for her kids, nieces, and nephews. Pam was interested and excited to read more about Penny juice since she was looking for a business option as such. As soon as Pam got home, she turned on her laptop and started looking through Penny Juice's website. She started by searching the juice nutrition and price and also decided to check the reviews before ordering her first case of juice to test.
Heuristic evaluation
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.

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.

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 navbar and put shop bottom at first since the main goal of the users is to have a smooth shopping system.
.png)
Sitemap
Wireframe
Initial Wireframes were designed in Balsamiq.



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.

Usability test
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


Prototype shopping page
Final shopping page
-
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
Next step
bottom of page