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
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.
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).
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
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
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.
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.
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.
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 dashboard
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