Audrey's Cafe
DESIGN CHALLENGE
Work with a client to understand their goals, needs and opportunities to meet functional requirements and to design a significant website that the client likes and the professor recognizes as high quality.
Problem
Statement
For our challenge we chose Audrey's Cafe, a local coffee shop located in Geisel Library at UC San Diego. As Audrey's Cafe did not have a website, our central problem was to design a website that reflected their vibrant brand while still remaining simple and concise, with their basic, most essential information easy to find.
Research
Methods
Client Goals
1. Make the menu simple and easy to read
2. Easy access to hours of operation
3. Showcase the quarterly specials
4. Redesign their catering form
User Persona
After interviewing 14 potential customers, we found that Audrey’s had a very niche customer base. In general, all users were students who were at Geisel to study and wanted a quick caffeine fix, so they went to Audrey’s because it was convenient. For a more in-depth look at our findings, check out our user interview guide.
USER NEEDS
1. To be able to get a caffeinated drink.
2. To be able to conveniently and quickly order a drink.
3. To be able to get an affordable cup of quality coffee.
Competitive Analysis Insights
We performed competitive analysis on 4 local competitors: Boba Guys, Deja Brew Lounge, Refill Cafe, and Lani Coffee. For each competitor's website, we looked at brand, functionality, site architecture, navigation, content, and design.
Each competitor website had a common theme of clear, prioritized accessibility to a menu and a clear layout of information that showcased all options without overwhelming the user.
Mood Board
Paper Prototypes + Wireframes
After completing our research, we started designing by sketching some paper prototypes and then creating interactive wireframes using Figma. Our primary goal of our wireframes was to establish our site architecture and navigation. Our initial user testing found that our user was able to easily navigate through the website and successfully complete their tasks. With successful signs of functionality, our next goals were to focus on design and content.
Check out more details on the functional specifications of our wireframes.
A Process of Iteration
After creating our wireframes, we went through a process of 3 iterations before landing on our final prototype. After developing our wireframes into a high-fidelity prototype, we realized our home page needed improvement on its design, which became one of our biggest design problems. We struggled with how to design the homepage to look both luscious and within brand, as well as informative enough that users knew where to find the information they needed. The most important information users were looking for was the hours of operation and the menu. While our original homepage included that information, it didn’t especially stand out; the quarterly specials were the biggest attraction. We decided to completely redesign the homepage to make the design more cohesive and luscious, and create a greater call to action for users to view the hours and menu.
User Testing
The main goal of user testing was to discover usability issues and if custumers could find the information they needed. We asked our users to complete the following tasks, which required our users to interact with each of our pages at least once.
- 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.
During testing, the two main issues users ran into were trying to click the name of menu section to open it and trying to find the winter specials.
PROBLEM #1
On the menu page, we had it such that the menu sections only expanded when users clicked the “+” icons. However, users instinctively tried to 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.
PROBLEM #2
During testing, users’ first thought was to check the menu page to find the quarterly specials. Although users were initially confused, they managed to find the specials when they returned to the homepage. Putting the specials on the menu page was something we considered doing even in our early designs, but ultimately we decided against it for a few reasons. Due to customers in the past asking for drinks that were no longer available, our client wanted to make it clear that the quarterly specials were limited edition. Taking this into consideration, as well as observing how other cafes handle limited edition items, we decided to showcase the quarterly specials on the homepage only and reserve the menu page for permanent offerings. However, we did make a few changes to make the specials more obvious—namely making sure the “Winter Quarter Specials” headers were visible above the fold on both mobile and desktop versions.
Solution
THE HOMEPAGE
As soon as the user lands on the home page, they know exactly what Audrey's is: a friendly place on-campus to get a drink. Per the client's goals and users' needs, we added "menu" and "hour" buttons as a call to action for users to immediately find the most important information. Even though the menu and hours are also placed in the navigation bar, we wanted to make sure they were easily accesible and highly visible.
As the client wanted their quarterly specials highlighted, we placed them on the homepage and made sure the banner was placed above the fold so that the specials could not be missed.
THE MENU
To keep the menu simple and easy to read, we used an accordion menu. This provided users the option to hide and show content. We also provided users the option to preview each item's ingredients.
CATERING FORM
Audrey's previous catering form had been a rather confusing, disjointed Google form. It didn't list serving sizes and the customer had no clue of their total charge. We completely revamped the catering form to make it more user friendly and incorporated it into the website.
Learnings & Insights
1. WORKING WITH CLIENTS
One of the hardest parts of this project was working with a business as a client. At times it was difficult to get the content we needed, such as the staff bios or menu ingredients. It was a balancing act between being polite, while also firm in our requests, espcially since we were on a timeline.
2. NEXT STEPS
After final user testing and meeting with our client, they were very happy with our prototypes. Our next steps would be to meet with the web developer of our client's higher management to produce the website.
Selected Works
