Juice Beauty
Helping to build a new responsive website
Long Story Short
Juice Beauty is a health conscious brand that delivers antioxidants and essential vitamins to the skin by using organic and natural ingredients in all their beauty products.
Around the same time Gwyneth Paltrow joined Juice Beauty as a Creative Director, I was hired to provide UX Design support to help the team redesign and upgrade the site to a new responsive design.
Because we were working with an existing product, the process we used was a bit different from creating a product from scratch.
Step One:
Understanding why
The first step we took to redesigning the website was to gain a robust understanding of the project and the reasons for the redesign.
To do this, we employed the following strategy:
01 - Stakeholder Interviews
Interviews with key stakeholders were held to gather insights regarding goals and key values of the redesign.
02 - UX Strategy Blueprint
The team conducted a strategy definition exercise to create a blueprint of the assumptions and desired outcomes of the redesign.
03 - Site Analytics
Information on how the site is currently performing was analyzed to look for clues on what is and isn’t working, and to find popular pages and drop off points.
Step Two:
Taking Stock
Now that we understood the goals of the redesign and how the site was performing, it was time to get a handle on what we were working with. What about the current site is on the table to change? What is off limits? Does the redesign need to completely rework content and information architecture, or is it more about minor tweaks? To do that, we used the following steps:
01 - Brand Guidelines
Brand guidelines documentation was reviewed to understand the boundaries of the visual style, feel, and tone of the redesign.
02 - Content Audit
A robust content audit was conducted that captured all existing content in a spreadsheet. This allowed us to identify which content could be reused, refreshed, or removed entirely. It was also a good way to get intimately familiar with the website.
03 - Competitive Analysis
A careful evaluation of Juice Beauty’s main competitors and related businesses was done. We compared competitors' strengths, weaknesses, and opportunities. We highlighted areas to which we wanted to draw attention—and features we wanted to avoid.
04 - IA Review
The existing information architecture was explored to determine whether the structure was good or needed to be changed. An information architecture diagram of the old site was created that showed the relationships between the screens. Content, goals, and user paths were evaluated before any updates were made. The diagram also helped the team define the scope of the project and acted like a checklist as we worked through all the pages.
Step Three:
Ready to Design
01 - Sketches
I relied on sketching on paper throughout the redesign to help me think through problems and quickly iterate towards design solutions.
02 - Wireframes
High-fidelity wireframes were created to help visualize how everything would fit together and provide a clear sense of the flow of the page and how each piece of content related to one-another. These were turned into interactive mockups using InVision and shared with the team. They provided feedback highlighting problem areas and validated design choices.
03 - Pattern Library
In order to avoid inconsistencies in the designs, a pattern library was built to inventory common design patterns and establish a visual vocabulary. Having a source file to use as a go-to source of truth ensures the UI is consistent and scalable as the project grows.
04 - Design
Next, the wireframes were translated into final designs by applying design principles, best practices, and following the brand guidelines with regards to color, typography, imagery, and iconography.
05 - Prototypes
Using InVision, the designs were turned into interactive prototypes which allowed me to simulate design interactions. This allowed the team to interact with the final designs and help identify any usability issues before going to code.
Tools Used
