Background
Penny Juice is a juice concentrate company operating as a B2B2C. The company's aim is to provide quality juice concentrate for lower price to schools, daycare and personal use.
My Role
Product Designer , UX Researcher
Goal
The Penny Juice Website Redesign was a project aimed at creating a new experience for Penny Juice customers. This project was to improve the website architecture and explore a new shop to checkout flow. The project timeline was 3-4 weeks to improve the web and checkout flow.
Changing the approach
The visual redesign of Penny Juice's website was aimed at creating a cleaner visual experience with a supported the goals of the customer. The secondary goal was to improve the information architecture so users can find products and navigate through the website.
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/7d7cfbe0-686b-4bef-a35e-1fad46bad4e0_rw_1920.png?h=3b342fc80539a0382c350f8964948ce7)
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/dc48d1e6-a3be-48ed-82d5-881a917e6075_rw_1920.png?h=b395aef8dbfeb86731130c840a8e89d8)
Challenges
The Penny Juice required an exploration of multiple design directions to create an improved customer experience. The UX goals of this redesigned was to achieve both B2B and B2C objectives which was narrowed down by using the MoSCoW method to create a MVP.
Redefining the Checkout flow
The website's checkout flow a simple form that acted as a product selection, checkout , customer information retention and payment process.
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/9ea6e878-017d-4de4-8233-54e82fcb5cd8_rw_1920.png?h=fad51bbb777384b894442dec0ed7bec7)
The problem space centered around the checkout flow's "perpetual order filling" state, which triggered the form requirements every-time a user wanted to enter a new order. Additionally, this flow also required a third party payment processing system outside of their website for order completion.
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/b01cb5d6-f87c-4443-9717-0a79e81f4c99_rw_1200.gif?h=f59702ddcecf2ca74d856c1891afb533)
Approach
Aligning Processes
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/9cd5779e-aba7-49b5-913d-fe9d7c3333bd_rw_1200.png?h=0099942029f769f2b2c1d454d42b6877)
A cohesive flow had to be created with such high-intent surfaces , the checkout flow needed to be addressed by creating a process that linked the selecting and purchasing experience with more digestible steps. This was decided by researching current checkout flow for similar products and e-commerce websites.
Adaptable components
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/9ffe72b7-b6a6-47a3-a6b6-163151d65367_rw_1920.png?h=f4fb9df634edd30a312c6f13f6a19353)
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/0a55d3bb-0322-4843-a3f8-70aa651d18f7_rw_1920.png?h=008be59c09ef6fbc4b6d1b89b9352d00)
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/1104513e-d6f6-43d6-af38-f235dbee42d2_rw_1920.png?h=d2da5f291083a01080ef3ed0201ecbb4)
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/eaea73f2-2883-439b-8f03-e4b9c2e13e87_rw_1920.png?h=471f8a965db5849a3f112345fdb7badf)
To address the steps-required-to-prurchase , a modular system aimed at supporting necessary actions while maintaining a consistent customer experience was implemented. Modular components were used to support a number of required tasks without leaving the website.
Previous information Flow
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/503c8c07-8bbd-4383-b6f9-8f7021d79435_rw_1920.png?h=4b61c19402868484a50edb3be182deb4)
Solution
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/d936eb74-619f-48e3-9c73-b59e37bf4441_rw_1920.png?h=96bae5923aedc57c45a68023c8d8c942)
After exploring several concepts, a central page approach was the best option. The use of modules would use min-flows so users could complete all necessary steps seamlessly without leaving the checkout page. This aimed to set clear exceptions for the user and kept some the original objective of the previous page architecture.
![](https://cdn.myportfolio.com/dea962da-1dd2-4bc2-bdf0-abdde603f6fa/3cc452f6-cddb-4211-aa00-cb5fd9c0c7b3_rw_1200.gif?h=a1738d249eaf475d5613bb7615e308a4)
Current Prototype