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