CR Juices
A UI Case Study
SCOPE
2 Weeks
MY ROLE
UI Designer
TEAM
5 Collaborators
In the heart of Ohio is a restaurant and juicery that's been quietly revolutionizing the plant-based food scene for the past five years. CR Juices has earned a loyal following with their delicious and healthy menu, attracting everyone from health enthusiasts to curious foodies. But now, with their success soaring to new heights, the owner has set her sights on something even bigger - expanding to multiple locations. To make this dream a reality, she knows she needs to provide her customers with the best possible online experience, starting with a brand new UI redesign for the website. Her top priority? A convenient ordering system that will make it easy for customers to get their hands on CR Juices' signature blends. Will this crucial website upgrade help the restaurant chain soar to even greater heights?
Our quintet of designers from Burlington Code Academy devoted two weeks to crafting revamped interfaces for both mobile and desktop devices. The objective of our redesign was to enhance the user experience, while highlighting the visual appeal of the CR Juices brand. We worked collaboratively, rotating the role of project manager throughout the design process. All of our deliverables were created in Figma, and our final client presentation was produced in Canva.
SKILLS & METHODS
TOOLS
Interviewing
SWOT/Competitor Analysis
Personas
Color Theory
Typography
Iconography
Mood Board
Brand Guide
Wireframing
Accessibility
Usability
Figma
FigJam
Canva
Research
Before setting out on our redesign, the team met with the owner of the company to get a sense of her vision and the needs of her customers. The CR Juices mission is focused on promoting health and wellness, and it draws in clients seeking to integrate nutritious foods into their busy lifestyles. Our client was interested in an app or app-like experience for the convenience of her customers and also stressed the importance of social media as a marketing and engagement tool.
Based on the information collected in our kick-off meeting, we landed on the following problem statement:
CR Juices’ customers need a succinct, convenient, and interactive digital hub that supports their healthy lifestyles.
Competitor Analysis
From here, we set out to learn more about the demographics of the local area and what other food establishments were nearby. Our cohort discovered several businesses in the fast casual restaurant space, and one direct competitor that also serves juice and other healthy options. To gain a better understanding of our competitors, we went deep into their websites and analyzed their strengths, weaknesses, opportunities, and threats (SWOT analysis). Armed with this knowledge, we could design an exceptional user experience that would make CR Juices stand out from the crowd.
Persona
We also sought to gain a deeper understanding of CR Juices’ target audience. To achieve this, we created a persona named Nina, a 20-year-old student and nanny with a busy, active lifestyle and health issues to manage. Through a combination of client meetings and ethnographic research, we were able to craft a persona that represents the typical CR Juices customer. By designing our user experience with Nina in mind, we were able to create a compelling and engaging interface that caters to the unique needs and preferences of CR Juices' core audience.
Process
With our research and persona in hand, we were ready to embark on the design phase of our project. Our objective was clear: to create a vibrant and appealing website that aligned with the brand's values and incorporated the benefits of a native app, without requiring customers to download anything.
Our design goals:
Highlighting the beauty of the ingredients themselves through photography and color choices
A hand-drawn quality to our iconography, to reflect the organic nature of the products and the grassroots beginnings of the family-run business
Clean, friendly, and accessible typography
Logical and efficient navigation through a large menu of products
Keeping social media links and posts front and center to maximize engagement
Conveying the company's mission statement, clearly and succinctly
Quick, easy ordering for frequent and infrequent customers alike
Allowing room for the site and business to grow and evolve
Easy site maintenance for the owner (Square POS compatible)
Brand Guide
First, we focused on some key visual elements. We landed on a color palette inspired by the existing logo and the furnishings outside the storefront itself. This helped inform both our mood board and brand guide, where we determined our vision for the site's imagery, textures, iconography, layout, and typography. By carefully considering each of these elements, we were able to create a cohesive and visually striking design that encapsulates the CR Juices brand.
Wireframes
Next, we shifted our focus to creating mobile wireframes that would serve as the backbone of the CR Juices website. To do this, we started by individually creating low-fidelity wireframe sketches, which we then brought together to form a cohesive set of medium-fidelity wireframes.
Throughout this process, our main focus was on establishing a clear hierarchy of information and ensuring that the overall navigation, layout, and functionality of the site were both intuitive and user-friendly. By prioritizing these elements from the outset, we were able to create mobile wireframes that provided a solid foundation for the rest of our design work.
Mockups
Having solidified our key visual elements, we wasted no time in transitioning to the high-fidelity wireframes and mockups phase of our design process. From color choices to typography, navigation to layout, every aspect of our design was carefully considered and refined during this phase. This is where we brought all of our research and design decisions together to create a final, polished representation of the mobile site.
Results
Our cohort put together a presentation for the company owner to expound on our methodology and show her the results of our work so far. We received excellent feedback along with a few constructive notes. Based on her suggested revisions, we made a few functional changes to the mobile design, and moved on to wireframing and mocking up the desktop version.
In the end, we created a redesign that effectively addresses the needs of the CR Juices customer and more cohesively represents the company’s brand. We put ourselves in the user’s shoes and asked ourselves what we would like to see in a juice bar's online ordering system, making sure to create a design that offers convenience and ease of use, allowing customers to check out quickly without any hassle. However, we wanted to create something that went beyond our client's expectations. We added an option to create a personal account, which would allow customers to track their reward points, past orders, and favorite menu items. Moreover, it facilitated the management of billing and delivery information, making the ordering experience seamless.
We were confident that our efforts would greatly benefit CR Juices, providing the growth and prosperity they deserve, while making wholesome, plant-based food more accessible to the local community.
KEY LEARNINGS
Native apps are not necessarily the best solution in every case.
Designers must balance the needs of the user and the client by taking the time to understand both the target audience and the client's goals.
Executing a SWOT Analysis can lead to better understanding of the current market, user needs, and competition.
How to effectively utilize iconography libraries and seamlessly integrate them into a cohesive design.
How to develop a comprehensive brand guide.
FUTURE OPPORTUNITIES
Continuing to explore the various features and functionalities of account profiles and how they can be expanded to improve the user experience.
In-depth exploration of the rewards system and how it can be optimized to increase user engagement and drive growth.
Enhancing engagement by integrating a food truck tracker feature.