Tiki Haven Website Redesign
I, along with two other classmates redesigned the website for a local San Francisco tiki bar, "Tiki Haven" to attract more business, showcase happy hour and highlight their specialty drink, the Volcano Bowl.
Role
Timeline
Tools
Exploring the problem
We wanted to create a website that has more depth while still maintaining a sense of familiarity and ease of use. Their current website has a lot of photos of drinks, but does not explicitly highlight anything in particular to grab the audience's attention and entice them to come in. For example, when the interviewer's were asked what made them come visit (aside from the local convenience) they responded with the bar's "volcano bowl". This had turned out to be a main seller, so we wanted to incorporate this as a highlight so we would be able to provide Tiki Haven with increased traffic through an online platform.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Conversational Interviews
To start, I needed to gather data about how bartenders adjusted to the shift in structure, how they made a living, and how COVID would shape the future of bartending. Conversational interviews were a great way to collect rich stories and perspectives about individual decisions and uncover any pain-points my users may have.
Research
Our research was conducted through a general interview process in which we interviewed two customers sitting at the bar and a bartender. Questions were predetermined in order to better understand the identity and general information about the business and its customers. Here is a summary of the collected information received by the interviews:
There are 10 employees (2 managers, 8 bartenders)Friday and Saturday Nights are the busiest Locals are typically older in age, however there are a lot of college students from San Francisco State University. The Tiki drinks are all blended and the #1 selling is the volcano bowl. There are specials everyday which are offered at affordable prices
Wireframes
We decided on a promising solution that would draw more business, highlight happy hour, display the current menu, and sell more volcano bowls. We made some wireframes of the solution.
Built entirely from with code
After designing our wireframes and mockups, we then built the website through a repository on GitHub by using various HTML, CSS, and Javascript elements.
Design System
We applied colors and typography to evoke a classic tiki theme while still retaining a modern and professional tone. The design decisions were crafted to display the theme of the bar and to draw people into a more refined brand
Research
Our research was conducted through a general interview process in which we interviewed two customers sitting at the bar and a bartender. Questions were predetermined in order to better understand the identity and general information about the business and its customers. Here is a summary of the collected information received by the interviews:
There are 10 employees (2 managers, 8 bartenders)Friday and Saturday Nights are the busiest Locals are typically older in age, however there are a lot of college students from San Francisco State University. The Tiki drinks are all blended and the #1 selling is the volcano bowl. There are specials everyday which are offered at affordable prices
Wireframes
We decided on a promising solution that would draw more business, highlight happy hour, display the current menu, and sell more volcano bowls. We made some wireframes of the solution.
Built entirely from with code
After designing our wireframes and mockups, we then built the website through a repository on GitHub by using various HTML, CSS, and Javascript elements.
Design System
We applied colors and typography to evoke a classic tiki theme while still retaining a modern and professional tone. The design decisions were crafted to display the theme of the bar and to draw people into a more refined brand
Thematic Analysis
I decided to analyze the conversations and categorize them into themes through a card sorting exercise. It was very useful to refer back to the thematic items and themes during the design process.
Prototype
Design Goals
After conducting and analyzing my interviews, I was able to summarize a few findings in which I would design around.
One important finding during my user interviews was that bartenders will often educate their guests while making their drink.
1. Integrate an online presence and provide bartenders an alternate source of income.
2. Provide an easy way for patrons to book bartenders
3. Provide a COVID-friendly environment
One important finding during my user interviews was that bartenders will often educate their guests while making their drink.
1. Integrate an online presence and provide bartenders an alternate source of income.
2. Provide an easy way for patrons to book bartenders
3. Provide a COVID-friendly environment
Profile Selection
Users looking to hire a bartender can look through a catalogue of all available bartenders. Filters are available to help users find a bartender for their specific needs
Bartender Profile
Users can view the bartenders profile before making the decision to book.
On this page, users can view future classes that the bartender will be offering and can choose to sign up for the classes.
Users can also choose to book the bartender for a private event.
On this page, users can view future classes that the bartender will be offering and can choose to sign up for the classes.
Users can also choose to book the bartender for a private event.
Booking Flow
For the booking flow, I chose to incorporate a progress indicator to inform the user where they are while filling out the booking form.
The calendar was designed to allow users to select an available date.
The calendar was designed to allow users to select an available date.
Confirmation Page
A summary page is given at the end of the booking process to highlight important information before the user pays.
Design System
For Barbook's design system, Rufina was chosen to as the heading to give a sense of elegance. The color palette was created to create a feeling of class and importance.
Test
Calendar
While attempting to select a date, users couldn't tell what the outlined date and the blue and the red dates were trying to convey. They were also confused by the grayed out dates. One user mentioned, "why are some of the future dates grayed out, but the dates in the past aren't?"
The new design emphasizes the dates that are not available by staying grey and including a strike through line. The red dot indicates the date that the user selected
The new design emphasizes the dates that are not available by staying grey and including a strike through line. The red dot indicates the date that the user selected
Certain language was hard to understand for some users
In another usability test, one user mentioned that they were confused by the language of the user information form. In order to better communicate this to the users, I chose to add text that read "Your Information" and I added corners to the rounded edges because it better communicated a text box.
Conclusion
Through this project, I learned the value and importance of the role of research in a project. Defining my users helped better inform me when making my design decisions. For the next steps of this project, I would have done another round of usability testing, created prototypes for desktop/tablet sizes, and I would even be interested in implementing this into an actual website service.