A well-thought website redesign to improve the efficiency of the shopping process.
Discover the pain point of the current website and propose a solution to improve user experience
User research, Heuristic evaluation, Competitive analysis, card sorting, Usability test
Note: The case study reflects only my opinion and I don't work for the company.
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.
Define the Problem
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).
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.
Examples of users’ experience from Google review and Facebook
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.
Current shopping page
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
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
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 the 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
Shopping page (Before)
Shopping bag (After)
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!