Project: Pure Formulas Site Redesign
Role: Graphic / UX Designer
Duration: March 2022-Sept 2023 (6 months)
Redesign for PureFormulas, E-Commerce supplements
Project Vision
PureFormulas is an E-Commerce supplement business. The project vision is a website refresh in terms of design and function.
Improving on the sites pain points was a large goal in this redesign. Between the Initial Coupon system, the checkout, and progressional brands.
Challenges
1. Design a cohesive website experience and rebrand the graphics.
2. Create a streamlined process for checking out, lowering the average checkout time rate.
3. Redesign the PDP (Product Description Page) and PLP (Product Listing Page) pages to more modern and intuitive design.
4. Design new Brand pages for specific professional brands that help differentiate them from the others.
Kickoff
In this project, the team had to focus on making sure we streamlined the pages users spent the most time on. A large part of that was asking ourselves what these pages delivered to the user, and how we could improve upon them.
“What pages do users spend most time on?”
“What do our primary users need most?
“What changes should we make and what should we leave as is?”
Analytics
Using analytics we decided on what pages were commonly used and which ones weren’t. This let us decide on which sections to reorganize from the main navigation to create a cleaner and streamline visual.
This also helped us decide on which pages to focus on analyzing pain points carefully.
We found having too many links in the navigation lead to indecisiveness for the users. We removed the top bar and reorganized the navigation in order of usage base on the data.
Removing Iconography was also a goal for us as there was too much visual clutter.
Old Design
New Design
Meet the Users
Name: Thomas
Age: 68
Occupation: Retired, contractor
Thomas is a retired contractor that uses supplements that are recommended by his doctor. He enjoys small walks in the park and playing the violin. He usually purchases supplements at the pharmacy but the supplements he needs aren’t always available. So he resorts to purchasing online.
Name: Loraine
Age: 55
Occupation: Receptionist
Loraine is a receptionist for a doctors office. She is getting older and takes more supplements as suggested by her doctor because of her deficiency. Her coworkers recommend specific brands that her office uses but are rarely sold at physical pharmacies. Instead, they recommend to buy them online.
Competitive Analysis
Though, there are competitors to PureFormulas, they all offer something different as an experience.
Iherb and Vitacost, both compete with professional brands (specific brands recommended by doctors only sold online or through doctor offices).
but the retailers such as GNC and Vitamin Shoppe don’t. Though this puts them at a disadvantage to those who need specific products. They are physical retailers that don’t need to rely on online only purchases.
Preparing the Journey
I constructed a user flow chart of the app. This helps me understand way the users can interact with the product. This also helps me see navigation through user goals.
Checkout Iteration
One example of iteration we needed to really focus on was the checkout. We wanted to design a one page checkout that would collapse with accordions instead of a multi-page checkout of the old site. Here was some issues we iterated on.
There needed to be different flows for default users and dedicated logged in users. Logged in users has prefilled fields.
Different payment methods also affected the flow for a one page. This also needed to be accommodated for.
Even with all these use cases. The current cart and it’s items with discounts needed to be able to be displayed clearly.
Old
New
Design a cohesive website experience and rebrand the graphics. Many of the graphics and styles of the older site look dated. Creating a clean and simple design is more modern.
Create a streamlined process for checking out, lowering the average checkout time rate. Having a one page checkout helps speed up the process for users. Also having refilled fields for logged in users along with only requiring the CVV to do a quick purchase.
Redesign the PDP and PLP pages to a more modern and intuitive design. Redesigning the pages the users use the most was challenging. We didn’t want to remove all the visuals they were used to but we also needed to modernize its design. We changed the PLP by making the thumbnails larger.
Design new brand pages for specific professional brands that help differentiate them from the others. Professional brand pages have a different treatment for the redesign. By allowing more space for the professional brands to promote their product with educational information. As well as adding a navigational bar for all doctor trusted brands helps set the brands apart from each other.
Design System
We created a design system that would be consistent in style through the entire site. We used the new darker green color to help the contrast of the buttons throughout the site. We used various badges and colors to help differentiate items, along with new iconography and typefaces.
Takeaways
I learned a lot through this project and it taught me a lot of the possible challenges one could encounter when redesigning a website.
This is one of the largest websites I worked on at the time and collaborating with the team brought me new insights of E-Commerce websites and how to design for them.
From the challenges with the professional brands to the overall understanding of how changing the navigation could impact how users interact with our site.
