Audrey's Café
Designing a website for the UCSD library coffee shop
OVERVIEW
This project was created in COGS 187B: Practicum in Pro Web Design at UC San Diego. For this class, we had to find a real world client, conduct user research on their patrons, and design both mobile and desktop versions of a website for them.
During our search for a fitting client, we came across a familiar sight, Audrey's Cafe. Audrey's is a student staffed coffee shop located in Geisel Library at UCSD. As a common destination for students looking for a quick fix of caffeine, we had all been there before. Because of this, my team and I decided they would be the perfect clients.
We began our design process by interviewing Audrey's' staff to get a baseline of the needs their website would cover. We also held multiple rounds of user interviews and tests with Audrey's customers. Based on their feedback, we condensed our users into 3 user personas that were most likely to come to Audrey's. The "Caffeine Addict", "Coffee Connoisseur", and the "Frugal Friend".
With both our client and their customers in mind, we ran through multiple design iterations until we had a design that incapsulated the Dr.Seussian backstory of Audrey's Cafe, was simple to navigate for thirsty students, and met all the needs of Audrey's staff.
The Problem
Hundreds of customers go to Audrey's Cafe every week to get coffee, snacks, and to study. Audrey's, however, doesn't have a website other than some words thrown on the UCSD bookstore page. Our goal was to provide Audrey's and its customers a website to enhance their consumer experience.
The Design Challenge
How do we design both mobile and desktop versions of a website for a coffee shop that meets both the needs of the client and their patrons?
The Solution
After 3 iterations of research, design, and testing, the result was an easy to navigate site that was representative of Audrey's' brand and enhanced the overall experience of both vendor and consumer.
Client Research
First things first, we had to find out what our client needed, as the final objective was to design a website for said client. We entered our first meeting with Audrey's' facilities operator, Brianna, with some client survey questions to get a gauge on what she was looking for in a website. These are the main takeaways we got from that meeting.
- Accessible and Readable Menu: Brianna explained to us that the menu they were currently using was a bit of a mess. A problem customers kept running into was that they often couldn't find what they were looking for because there were too many options to choose from. She believed that the a main purpose of a coffee shop website was to show the menu so customers can decide what they want in line, or before they arrive.
Knowing this, we placed easy access to and readability of the menu as a high priority.
- Quarterly Specials: Audrey's has quarterly specials that are not listed on the menu. Because UCSD is on the quarter system with each quarter being 11 weeks including finals, Brianna thought it was too short of a time period Brianna made it clear that these should not be included on the menu as it would be too much of a hassle to change them every quarter.
We had to find a way to feature specials on the site, without actually placing them in the menu.
- Stop asking us when we're open: Most of the phone calls that Audrey's staff answer come with the same question: "When are you guys open till?".
This was clearly an annoyance, and so making the hours clearly visible was also a priority.
- Consistent Branding: Audrey's Cafe is named after Dr.Seuss' wife, fitting as Audrey's is located in Geisel Library which is named after Dr.Seuss' last name. Because of this, the colors of Audrey's Cafe are bright and warm. Brianna wanted the website to have a similar color scheme.
With this in mind, we stuck with their color scheme, and tried to throw in as much Seussian flair as possible.
User Interviews / Personas
Now that we knew what the client's needs were, we had to find out what the website's main user's needs were. It was time to interview some customers.
We interviewed 14 potential/previous customers over the next few days. Based on our interview results, we confirmed that most of our users were students who happened to be studying in Geisel Library.
There were, however, some differences between these students, and we were able to compile our results into 3 personas based on overlapping answers to interview questions.
Coffee Connoisseur
"This user has a very refined palate for coffee/tea. In their free time, they like to try new coffee shops and brew their own coffee. As a result, they are knowledgeable about the coffee-making process and are very particular about the kind of coffee that they drink."
User Goals
- To be able to order a tasty, quality drink made with quality ingredients.
- To be able to order a drink specific to their taste.
- To be able to see whether a coffee place has good vibes.
User Needs
- Needs to know how drink is being made.
- Needs to know what ingredients are being used in my drinks.
- Needs to know the popular drinks, staff favorites, recommendations.
- Needs consistency in quality when I order drinks.
- Needs clear names for drinks.
Caffeine Addict
"They are taking 4 classes at UCSD, working a job, and doing a research position. They go to Geisel early everyday to get as much work done. Since they spend so many hours studying, they need caffeine to keep them going. They don’t care much about where they get their coffee from; they just need a quick and convenient fix."
User Goals
- To be able to order a caffeinated drink from nearby his study spot.
- To be able to quickly order and get a drink.
User Needs
- Needs to know when the cafe is open today and for how long.
- Needs to know which drinks on the menu are caffeinated.
- Needs a basic menu with familiar options.
Frugal Friend
"This user is a broke college student. They try not to buy coffee everyday, but every so often they want a coffee to keep them going throughout the day. They’re trying to save money and be frugal so they'll buy the cheapest coffee to get the best bang for their buck."
User Goals
- To be able to get an affordable cup of coffee.
- To not have to sacrifice quality for affordability.
User Needs
- Needs to know how much drinks cost.
- Needs a drink that fits within my budget.
To be perfectly honest, the "Coffee Connoisseur" persona was a bit of a stretch and the majority of users interviewed/observed were some combination of "Caffeine Addict" and "Frugal Friend".
Competitive Analysis
Before we finally started putting pen to paper there was one more step. Because Audrey's doesn't have a dedicated website other than some words thrown onto the UCSD bookstore website, we didn't have an example to improve upon.
Current Audrey's "website".
In order to address this, we performed some competitive analysis using other coffeeshop-esque website to identify their strengths and weaknesses. We were also hoping to identify standards across the board that should definitely be included in our own design.
The websites we analyzed were Boba Guys, Deja Brew, Lani Coffee, and Refill Cafe. We were seeking inspiration from each of their websites focusing on brand, functionality, site architecture, navigation, content, and overall design.
Boba Guys' website shows a colorful, "instagram worthy" brand
appealing to their millennial demographic.
Deja Brew's website also appeals to a younger customer base
with its aesthetic. Menu is quickly accessible but overwhelming.
Lani Coffee is the least aesthetically refined of the four, but has a menu system that employs a collapsible categories that reduces information overload.
Refill clearly shows off their brand by displaying their store space
and including a clearly visible navigation top bar.
Here are some of our overall takeaways:
- Prioritize Menu: Each competitor website had a common theme of clear, prioritized accessibility to a menu. We sought to emulate this in our design as well, with other content like an about page taking a supporting role.
- Homepage: The homepage should display important information for users to see right away. We want users to know immediately what to expect and what is being sold; no need for beating around the bush, this place is a coffeeshop.
- Navigation: Navigation titles need to be clear and simple.
- Design: Keep the design clean and minimal so that pictures and important information can stand out. Make sure the menu is not overwhelming: break it into sections and and use a collapsible menu so users don't have too much information on the screen at once.
Click here for a more in depth analysis.
Design, Test, Repeat
Now that we had done research on our client, users, and competitors, it was finally time to put pen to paper and design our first mock up.
We started off with paper mobile mock ups to quickly brainstorm what key pages could/should look like.
After we had an example to work off of, we created mobile and desktop prototypes on Figma. We chose to use Figma because we were all able to work on it at the same time and were familiar with the tool.
This first mockup was pretty barebones and was more of a proof of concept for ourselves. With our ideas more fleshed out, we built upon this mockup by adding interactions and Audrey's' colors and created our first prototype. We focused our efforts on the mobile prototype due to the nature of our college student demographic.
Now that we had a functional prototype, we began our first round of user testing. First we went to our point of contact and facilities operator, Brianna. Because we had kept in regular contact with her, she was fairly aware of what had been worked on. Instead of giving her specific tasks, we allowed her to explore the prototype to see if she ran into any issues.
Brianna was thrilled with what we had presented to her. She especially liked the display of specials on the homepage, intuitive navigation, and non-tacky display of Audrey's' brand. She also provided us with Audrey's' official mission statement, which we added to the about page. Honestly, she felt like nothing else needed to be improved, but we disagreed.
The pages that I worked on the most were the home and about page, and I felt like they, along with the rest of the prototype, could definitely be improved. To confirm these beliefs, we proceeded to do more tests with potential customers; people who would most likely be using the site.
Before we began testing, we asked each user if they were okay being recorded. After they said yes, two people would take notes while another person video taped the screen and user. We also asked the users to voice their thoughts and actions as they navigated the prototype to obtain a better understanding of their thought process.
Users were presented with 6 tasks:
- Find Audrey’s hours of operation for today.
- Find the ingredients in Kian coffee.
- Find a drink you’d be interested in purchasing that’s under $4.00.
- You need to get catering for March 27th at 10:30am. See how much it would cost to get 2 airpots of coffee and 3 carafes of iced tea at Audrey’s.
- List the 4 quarterly specials.
- Find out more about the people who run Audrey’s.
We chose these tasks so that users would interact with each page of the prototype at least once. After compiling data and feedback from these tests, we concluded that users ran into two main problems during testing:
Difficulty expanding menu sections: On the menu page, we had it such that the menu sections only expands when users tapped/clicked the “+” icons. However, users instinctively tried to tap/click on the names of the menu sections or the entire accordion header to open a section. In response to this finding, we adjusted the interactions in our prototype so that the entire accordion header was clickable.
- Difficulty finding quarterly specials: During this task, users’ first thought was to check the menu page to find the quarterly specials as there was no clear indication that the home page had specials unless they scrolled. Although users were initially confused, they managed to find the specials when they returned to the homepage.
Despite the fact that users had trouble with this task, we decided not to add specials to the menu page. We had considered it in past designs, but Brianna was strongly against it due to customers in the past asking for drinks that were no longer available. She wanted to make it clear that the quarterly specials were limited edition.
Although we decided not to include the specials in the menu page, we knew that we had to more clearly show that the specials are on the home page.
Fixing the menu issue was tedious but simple, we just had to expand the interaction zone on Figma, but we now faced our most difficult design decision. We kept getting stuck on the same question until finally we reached a conclusion.
Q. How are we going to make quarterly specials stand out with our current design?
A. We can't.
And after much deliberation, we decided to completely redesign our home screen. Our current design simply didn't translate as well on mobile as it did on desktop and it wasn't quite clear that the specials were in the carousel.
We knew that what users cared most about was access to the menu and hours, while Audrey's' staff wanted to clearly display the specials. Our new design showcased this with two of the first possible interactions being "view menu" and "view hours". Right below those buttons is a banner that says "Winter Quarter Specials". We hoped that by always having this visible, users could see that they can scroll to see more about the specials. We also added more detailed, appealing descriptions about the specials themselves.
Mobile v2.0 Top
Mobile v3.0 Top
Mobile v2.0 Bottom
Mobile v3.0 Bottom
After one more round of user testing, we confirmed that users had an easier time navigating through the given tasks. We polished up our prototype and presented it to our client to their joy and satisfaction.
Brianna assured us that if they could convince upper management to provide funding, ours would be the design they used for development.
Mobile v3.0
Desktop v3.0
Reflection
This was an extremely satisfying and fun project to do. I had done projects in classes before, but they often felt structured; like a walkthrough with a rigid path laid out in front of you. With this project, however, there were few constraints set for us. There was little babying from the professor, we were simply expected to have a complete design that would be evaluated at the end of the quarter. But this also meant we had to be on top of it in gathering client information, user interviews, and resolving design conflicts.
There were also the typical difficulties of working with a team, but I grew immensely as a designer. I learned that the most difficult part about designing a website in a team is compromising between different design perspectives. There were many times where we had conflicting ideas on what would look best and had to run through several iterations and meetings to land on something we were all happy with. User testing definitely helped with this because it gave us objective information that we could capitalize on.
Getting content was also difficult at times. We learned that we had to be polite, but also firm in our requests and make it clear that we were on a timeline. Letting the client know that you have a deadline as well tends to help.
For prototypes it is so important that you manage assets properly, either through symbols in Sketch or components in Figma. A big problem we had were tiny inconsistencies throughout the wireframes that could have been resolved faster had we used components earlier in our designs.
Overall, this was a rewarding class where I felt like I wasn’t just doing busy work. Every design, whether it was scrapped or not, was helping us reach the end goal. I am proud of what we did and grateful for what I learned.
We also got free drinks the whole quarter so that was pretty awesome.
