highlight image 2.jpg
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.
 
 
Testimonial for website.jpg
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
 
 
Persona.jpg
Scenario
christina-wocintechchat-com-dKBTFoarrOU-
   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.
 
 
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
   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.
 
 
Sitemap (3).png
Sitemap
Wireframe
Initial Wireframes were designed in Balsamiq.
 
 
Wire frame homepage.png
Product page 2.png
Product page 1.png
   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
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
product page 3.JPG
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