Campus Bottle

UX and UI  Design
Project Overview
Campus Bottle is a unique store that encompasses the essence of San Luis Obispo’s college town style. Located at a walking distance from Cal Poly’s campus, this store is the most popular liquor store in San Luis Obispo. To elevate Campus Bottle’s overall presence, I designed a mobile application.
View Prototype Here
My Contributions
I worked  in a small group to perform quality analysis and find pain points for Campus Bottle customers. My primarily role was establishing the style guide and creating the user interface for the mobile app design.

Tools

Adobe XD, Adobe Illustrator, Figma, Miro, Trello

Design Process

Define

Define the Problem
Understand the Current State

Research

Conduct Experiments
Understand Users

Plan

Visualize Ideal State
Develop Solutions

Design

Implement Ideas

Test

Conduct More Experiments
Evaluate Results
Make the Change

Defining the Problem

Currently, Campus Bottle does not have an app for customers to use. This is a missed opportunity for sales and customer engagement.

90.6% of customers surveyed would use social media and would be more likely to purchase from Campus Bottle through an app.

There is no website, app, or official social media for Campus Bottle. Overall branding could use significant improvement.

Competitive Analysis

Currently, there is only a yelp and facebook page available for this store. Customers cannot purchase items or learn about promotions and discounts through the yelp or facebook page. As noted in the images, these pages are basic, lacking branding, and lacking professional photos.

User Research

We surveyed 30+ Cal Poly College students, and found that an overwhelming majority of students would use Campus Bottle more often with an app in place. We developed a survey using Google Forms and conducted 5 in-person interviews to find out students' opinions on Campus Bottle, their current website, and whether or not they would utilize an app for Campus Bottle.

90.6% of customers surveyed reported an app including deals and promotions would increase likelihood of purchase.

78.1% of customers surveyed reported an app including delivery services would increase likelihood of purchase.

97.6% of customers surveyed reported an app with promotions and informtion would increase likelihood of purchase.

"Campus Bottle is super well known from social media posts of students. I think they could do a lot more if they used social media and an app for branding and advertising."

- Customer from Interview

The Goal

If we create a Campus Bottle app, then we will increase the number of customers who use Campus Bottle as their primary alcohol purchase destination form:

15.4% to 50.4%

User Personas

Casey Smith

Age: 21
Gender: Female
Occupation: Student

She enjoys Campus Bottle products but does not own a car and lives far from Campus Bottle. She wishes there was a better way to purchase Campus Bottle’s products, such as a delivery option.

Casey loves Campus Bottle merchandise, but she does not get a lot of time to shop as she is busy managing schoolwork and work. She likes to have fun, enjoys parties, following trends, and is good with technology. She also loves Social Media.

Derek Gray

Age: 22
Gender: Male
Occupation: Student

He likes purchasing beers from Campus Bottle to drink casually with friends, but he does not have a job so he finds it frustrating when he misses out on deals and promotions. He wishes he could stay up-to-date with Campus Bottle’s sales.

He is busy with schoolwork so he does not have time for a job, but he wishes he had a flexible way of making money, such as delivering alcohol. He loves technology and is more loyal to companies with functioning apps.

Information Architecture

In order to organize our app's features and pages, I created an information architecture flow. This helped me organize my thoughts and gave me a good grasp on how many pages I needed to design to create a functioning mobile app.

Generating Task and User Flow

In order to further immerse myself in the user's shoes, I created a task and user flow from the user's perspective.

Lo-Fi Wireframe

As the first step of the design process, I created low fidelity wireframes. These wireframes served as a foundational canvas, enabling me to sketch out key screens and user interactions.

Mid-Fi Wireframe

After sketching out a preliminary wireframe, the focus shifted to strategically placing elements like images, text, and buttons for an enhanced user interface. As I fine-tuned these design details, I kept the overall user journey in mind, ensuring that each visual and textual component contributed seamlessly to a cohesive and engaging narrative.

Style Guide

Working with my partner, I curated a style guide for the redesign. We picked the colors from the original Campus Bottle branding because we wanted to preserve the iconic look and feel of the brand. For our typography, we picked Helvetica Neue to maintain a modern and accessible look. We also picked Abirl Fatface because it is a modern font with varying line widths, which we thought fit the look well.

Color Palette

Typography

Logo

Usability Testing

We created two voice of customer surveys: one analyzing the current Campus bottle Yelp account and another after implementing our improvements through our app and social media account.

These surveys measured users’ experience with Campus Bottle and analyzed how they responded to our solution. The surveys focused on whether our solution would improve their customer experience and increase likelihood of purchasing.

96.7%

of customers surveyed voiced the new instagram would increase their engagement with Camus Bottle.

100%

of customers surveyed voiced the new app would improve their purchase experience with Campus Bottle.

96.7%

of customers surveyed voiced the app would increase their likelihood of purchasing from Campus Bottle.

"This looks incredible!! I think having quick recipes for cocktails and other drinks would increase sales!"

-Customer from Survey

On a scale of 1 to 5, how effective is the design in this app mockup?

Would you utilize the pick-up and delivery services of this app to buy your alcohol and food?

How much more likely are you to buy from Campus Bottle with this app in place?

Iteration

Below is one example of an iteration we made. At first, we displayed all products on one page without categorizing them. Later, we decided it would be more efficient and user-friendly if we categorized the products by their type. This is just one example of many changes we made throughout the process after getting feedback from our surveys.

Final Product

After an intensive 10-week journey marked by dedication and collaborative effort, the culmination of our endeavors materialized in the form of a meticulously crafted product. Our venture was fueled by the ambition to enhance the presence of a beloved local business, and the chosen company was none other than Campus Bottle—a store that encapsulates the true essence and heartbeat of college life in San Luis Obispo.The creative process unfolded with a sense of joy and excitement as we delved into the task of designing a product tailored specifically for Campus Bottle. This establishment, deeply ingrained in the fabric of collegiate experiences, served as both inspiration and canvas for our creative pursuits.

Click to Enlarge

What I Learned

In retrospect, what began as a mission to elevate a local favorite business evolved into a multifaceted experience that not only contributed to the enrichment of Campus Bottle but also left an indelible mark on my personal and professional growth. The collaborative spirit, newfound friendships, and the tangible outcome of our collective efforts stand testament to the transformative power of teamwork and creative synergy. This was my first time collaborating to design an app user interface, so although it was not perfect, I enjoyed the process immensely.

home