A UI/UX Project

A Smarter Way to Shake Smart

Redesigning a health cafe’s website to reflect their branding, target their users, and increase usability.

For UCSD course COGS 187B: Practicum in Professional Web Design

Project Type

Group Members

Alfonso Alfonso

Gemilei Bundoc

Kerri Chow

Tho Huynh

Date & Duration

January — March 2023

Role

UX Researcher & Designer

Project Overview

Shake Smart is a healthy and campus-accessible destination for college students to fuel up on protein shakes and nutritious food. We revamped Shake Smart's website to match their branding, attract customers, and improve usability. My team partnered with the UC San Diego branch to create a functional mobile and desktop prototype, emphasizing a user-friendly design that aligns with their vibrant, healthy image.

Challenge

Address the needs of both the business and its customers. Enhance usability and information architecture while adhering to Shake Smart's existing style and content guidelines.

Research

Client & User Interviews

To begin our design process, we spoke with the manager of the UCSD location, with a goal to gain insight of the businesses’ goals and gripes with their current website.

We also conducted interviews with a total of 14 UC San Diego students at the Shake Smart location, at the campus gym next door, and remotely to learn about the various types and needs of customers this business served.

Goals & Issues with the Current Site —

User Personas —

As a result of our customer interviews, we found students who differ in lifestyle, health habits, and overall knowledge of Shake Smart and its products. We then created two user personas to focus our design on.

Current Site from a Designer’s Eye —

We analyzed the current site from our designer perspectives - aiming to find the roots of the issues mentioned above.

Competitive Analysis

We chose these businesses to compare due to popularity within the same target market. They all are healthy juicery and food shops that are close in proximity, drawing in a consistent customer base within the same area.

Based on our findings from our interviews, we compared various different features of each competitor’s website.

We found that competitors had a lot of the features that Shake Smart’s current website lacks and that their customers would like to see implemented — most notably, online ordering and customizability of items directly from the menu.

Solution

Wireframes & Prototypes

Prototype Key Features —

Location search

Users are able to input their location on any page of the website, which is especially important for this business because Shake Smart has various locations with varying menus and prices.

Menu with clear visuals, prices, and descriptions

A customization pop-up is directly accessible through the items in the menu page that are informationally rich and easy to navigate.

Online ordering

Users can order items directly from the online menu, simply by clicking on items, customizing them, adding them into their cart, and entering their information for easy, in-person retrieval.