Saiyushi Kumar, Audrey Talmi, Mayson Rutsky, Anna Haller
Adobe XD, Adobe Illustrator, Figma, Miro, Trello
In this video, we walk you through our project from beginning to end. We explain how we conducted experiments, how we established our style guide, and our goals for our product. The process is slightly different from a UX case study because we focused on advanced quality planning, which is a critical tool used during product development to guide communications, reduce risk, and increase chances for overall project success.
Define the Problem
Understand the Current State
Conduct Experiments
Understand Users
Visualize Ideal State
Develop Solutions
Implement Ideas
Conduct More Experiments
Evaluate Results
Make the Change
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.
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, lacking professional photos, and are not targeted towards their primary customer demographic. Most students do not use Yelp and Facebook often. Students are more likely to use Instagram, Twitter, or mobile apps.
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 to find out students' opinions on Campus Bottle, their current website, and whether or not they would utilize an app for Campus Bottle. We had to make a few revisions and obtain approval from our professor before sending it out to Cal Poly students.
90.6% of customers surveyed reported an app including deals and promotions would increse 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 Survey
If we create a Campus Bottle using our BHAG, then we will increase the number of customers who use Campus Bottle as their primary alcohol purchase destination form:
To deeply understand the user experience, we initially crafted detailed user personas. Drawing inspiration from our university's student body, we meticulously developed profiles for two representative college students. This process provided valuable insights into the diverse needs and preferences of our target audience, offering a clear roadmap for our app's design.
Age: 21
Gender: Female
Occupation: Student
Casey delights in the offerings of Campus Bottle, reveling in the quality and appeal of their products. However, residing at a distance from Campus Bottle and lacking personal transportation poses a challenge for her. In her wish for an enhanced shopping experience, Casey envisions a more convenient option, specifically a delivery service that would bring Campus Bottle's curated products directly to her doorstep.
Despite her love for Campus Bottle merchandise, Casey finds herself pressed for time amid the demanding responsibilities of academic pursuits and work commitments. Her dynamic lifestyle, characterized by a penchant for entertainment, a keen interest in the latest trends, technological proficiency, and an avid presence on social media, highlights the need for a shopping solution that seamlessly integrates with her busy schedule. As someone who loves to have fun, attend parties, and stay on top of the latest in technology and social trends, Casey envisions a shopping experience that aligns with her vibrant and tech-savvy personality.
Age: 22
Gender: Male
Occupation: Student
This individual takes genuine pleasure in curating a selection of beers from Campus Bottle, perfect for those easygoing get-togethers with friends. However, the absence of formal employment adds a layer of frustration, particularly when he misses out on the enticing deals and promotions that Campus Bottle has to offer. His wish is simple: to effortlessly stay in the loop with all the sales buzz at Campus Bottle and seize those exclusive offers that enhance his socializing experience.
A true aficionado of technology, his brand loyalty extends to companies that not only deliver quality libations but also seamlessly integrate technology into their operations. A well-functioning app, in particular, earns his admiration and becomes a pivotal factor in determining where his loyalty lies. In essence, the convergence of his appreciation for fine beverages, the demands of academia, and a penchant for technological proficiency shapes his aspirations and allegiance within the consumer landscape.
In order to organize our app's features and pages, we created an information architecture flow. This helped us organize our thoughts and gave us a good grasp on how many pages we need to design to create a full functioning mobile app.
In order to further immerse ourselves in the user's shoes, we created a task and user flow from the user's perspective. This strategic move not only provided invaluable insights into the diverse needs of our users but also facilitated a profound understanding of their journey.
Lo-Fi Wireframe
Our design journey kicked off with the creation of simple low-fidelity wireframes, translating research insights into visual representations. Informed by data from our research and planning, we opted for a starting point of six fundamental pages, with the flexibility to expand as needed. These wireframes served as a foundational canvas, enabling us to sketch out key screens and user interactions.
After sketching out a preliminary wireframe, our focus shifted to strategically placing elements like images, text, and buttons for an enhanced user interface. Dark grey areas were designated for captivating images, carefully chosen to align with the aesthetic and capture user attention. Simultaneously, light grey spaces were reserved for text, ensuring a balanced and readable layout. As we fine-tuned these design details, we kept the overall user journey in mind, ensuring that each visual and textual component contributed seamlessly to a cohesive and engaging narrative.
Working with my partner, the two of us curated a style guide for the mobile app design and rebrand. 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 to the app. We also picked Abirl Fatface because it is a modern font with varying line widths, which we thought fit the look we were trying to achieve well.
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.
of customers surveyed voiced the new instagram would increase their engagement with Camus Bottle.
of customers surveyed voiced the new app would improve their purchase experience with Campus Bottle.
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?
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.
After an intensive 10-week journey marked by unwavering 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 establishment, and the chosen beneficiary was none other than Campus Bottle—a quintessential hub 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 novel 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.
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.