Lucky 13: Responsive Website

A responsive website redesign for a local business

View Prototype

Project Overview


Lucky 13 is a bar located in Alameda, CA. They offer draft beers, bourbon, and local wines among other amenities such as a jukebox, pinball machines, and a patio. Their online presence is limited to Facebook pages, Yelp, and a website that is only accessible on desktop.

With the current nature of the ongoing pandemic, local businesses such as Lucky 13 have had to make alternative accommodations to make up for social distancing and county limitations on indoor and outdoor dining. Lucky 13 has shared updates regarding changes to policies and offerings through its Facebook page, however its website does not reflect said changes to their business.


  • To redesign Lucky 13's website for responsive access across all platforms
  • To extend Lucky 13's branding to best reflect current and desired clientele

Project Scope

Responsive design, E-Commerce, Branding


Figma, Adobe Illustrator, Adobe Photoshop, Hand Drawing, Zeplin


UX Designer (Research, Visual Design, Interaction Design, User Testing)


2 weeks (80 hours)

How can we help a local business through UX design?

Based on personal experiences, Lucky 13 is a local favorite among many natives of Alameda, myself included. In light of the COVID-19 pandemic, many have reached out to local businesses to show support in as many shapes and forms possible. While the scope of user experience and product design is typically limited to digital products, something as simple as redesigning a business' website can make a world of difference to a business' presence in the digital realm, and, in turn, attract a larger clientele as COVID-19 restrictions start to lighten in some areas.

Given Lucky 13's established reputation within an expanding community, something as simple as a responsive website redesign can potentially reassure customers, both new and returning, that their communities are indeed intact and are ready to grow again in light of disastrous times passed.

Design Process

5. Test

Usability Test

Affinity Map

Priority Revisions

4. Prototype

High-fidelity Mockup

Live Prototype

3. Ideate

Project Goals

Product Roadmap


UI Requirements

Task Flow

User Flow


Brand Identity

Responsive UI

2. Define

POV Statements

HMW Questions


1. Empathize

Research Plan

Market Research

Competitive Research

User Interviews

Empathy Map

User Persona

1. Empathize

  • The existing Lucky 13 website is underutilized
  • Customers are willing to visit Lucky 13 under COVID-19 related procedures
  • Customers are interested in Lucky 13’s variety of offerings
  • Lucky 13 has regulars that are loyal to the business
  • Lucky 13 has an established reputation with locals in Alameda

Research Goals

Research Plan

  • Identify Lucky 13 customer goals, needs, frustrations, and motivations
  • Collect user demographics of bars
  • Discover key trends in bars
  • Understand a consumer’s journey with Lucky 13 both in-person and online
  • Determine strengths and weaknesses of competitors of Lucky 13

To begin empathizing with users, I created a document compiling research goals, questions, assumptions, and methodologies before diving into research. This will guide the research process in a focused direction towards understanding and empathizing with user needs, goals, motivations, and frustrations.

This document would be provided to stakeholders and is intended to be revisited after synthesis to validate or invalidate assumptions.


I began my research by analyzing existing resources to understand overarching patterns within the bar and nightlife industry.

Secondary Research

Industry Trends

  • Market is expected to increase 15.7% in 2021. (IBIS World)
  • Due to COVID-19, many competitors have sprouted from relaxed alcohol delivery laws, causing bars to consider alternative strategies to draw people back into their establishment rather than drinking at home. (SBDCNet)
  • There is an expected surge of off premise alcohol sales in 2021 in response to the pandemic. (Webstaurant Store Blog)
  • Many bars have resorted to curated subscription services to increase revenue and support amidst the pandemic (Webstaurant Store Blog)
  • Many bars have expanded their merchandise selections to increase revenue and let customers show their support. (Webstaurant Store Blog)
  • Many bars have improved their social media presence for bar owners to connect with their customers while sheltering in place (Webstaurant Store Blog)


  • Consumers in the 21 to 34 age group comprise about 22.9% of industry revenue. (SBDCNet)
  • 35 to 44 age group is 19.8% of industry revenue. (SBDCNet)
  • 45 to 54 age group is 17.4% of industry revenue. (SBDCNet)
  • 55 to 64 age group is 17.4% of industry revenue (SBDCNet)
  • People aged 65 and above are the smallest sector, at 16%. (SBDCNet)
  • Revenue from the private sector comprises 6.4% for businesses seeking to rent facilities for special functions. (SBDCNet)
  • Customers are more interested in spending more for worthwhile experiences at a bar rather than for the actual drinks themselves. (On the Line)
  • 70% of people visiting bars say they visit the same types of bars every time they go out. (America Nightlight Association)

I analyzed current trends in the bar industry and general user demographics. This shapes a general image of what the target audience is and some of their broader goals.

Market Research

Competitive Analysis

I conducted additional research on nearby competitors to Lucky 13 that shared a similar target audience, noting key strengths and weaknesses that set them apart to gather further insights on what succeeds within the industry from a business' point of view.

Lost Weekend Lounge


  • Provides varied food offerings from their grill with takeout and delivery
  • Has a sizable parking lot; accommodates for outdoor dining
  • Posts regular updates on daily specials and weekly events on Facebook
  • Has responsive website containing detailed food and drinks menus
  • Sells variety of merchandise through e-commerce store


  • Located in a less central proximity to downtown Alameda
  • Does not have a pool table
  • Some areas of website are outdated or not functioning


  • Offers varied food selection with unique cocktails
  • Has food delivery and takeout available on website
  • Has multiple locations in same vicinity; accommodates more customers
  • Offers extended happy hour deals during peak times
  • Allows reservations


  • Amenities are limited to food and drinks
  • Does not offer outdoor dining
  • Long wait times


  • Has outdoor patio seating
  • Hosts occasional live music performances
  • Offers cheap drinks and classic cocktails
  • Provides varied amenities such as multiple pool tables, a jukebox, and flexible seating
  • Is open every day of the week with extended business hours


  • Does not have a dedicated website
  • Limited social media presence
  • Does not have food offerings


  • Specializes in organic comfort food and craft cocktails, beer, and wine
  • Has responsive website with detailed drink and food menus
  • Offers delivery, takeout, and outdoor seating amidst pandemic
  • Open for brunch on weekends with alternate food offerings and drinks
  • Provides other amenities such as karaoke, board games, and sports betting


  • Less casual environment than dive bar and pub alternatives
  • Does not have outdoor patio
  • Higher price point than dive bar and pub alternatives


  • Has outdoor seating
  • Provides a variety of amenities such as darts, ring toss, and a DJ booth
  • Offers a varied beer selection and drink specials
  • Offer pub snacks such as potato chips and jerky
  • Host events such as bingo and trivia night


  • Does not have dedicated website
  • Limited social media presence
  • No merchandise or e-commerce storefront
McGee's Bar and Grill
Monkey King Pub
Swell Bar


After learning more about the bar industry and local competitors, I began searching for more personalized findings by conducting research on a first-person basis.

I conducted guerrilla interviews at Lucky 13 during peak hours on a Saturday night. Each interview consisted of open-ended questions regarding customers’ experiences with Lucky 13. All responses were recorded with each participant’s permission and transcribed for note-taking purposes.

User Interviews

Peak hours on a Saturday night at Lucky 13
Outdoor seating area filled with Lucky 13 customers

I broke down key statements derived from the user interview transcripts and sorted them into identifiable patterns showing common themes and occurrences between participant interviews.

Using the top five (5) most common patterns, I drew insights to narrow down five (5) key user needs that I will focus on for the define and ideation phases of the project.

Empathy Map


7/7 participants mentioned Lucky 13's atmosphere as a factor when visiting

Outdoor Seating

7/7 participants credited Lucky 13's outdoor seating as a reason for visiting

On a Whim

7/7 participants visited Lucky 13 out of convenience without prior planning

Late Hours

6/7 participants appreciated Lucky 13's extended hours late into the night

Finding Drinks

5/7 participants have struggled to find drinks offered or know what's served at Lucky 13


  1. Atmosphere: Users visit bars based on the vibe they give off
  2. Outdoor Seating: Users consider outdoor seating when visiting a bar
  3. On a Whim: Users tend to visit bars based on their convenience
  4. Late Hours: Users appreciate bars that are open for extended hours
  5. Finding Drinks: Users struggle with finding drinks offered at a bar


  1. Users need to know what atmosphere to expect at a bar
  2. Users need to know a bar's seating accommodations
  3. Users need minimal planning required to visit a bar
  4. Users need to know if a bar is open late at night
  5. Users need to easily access a bar's drinks menu

With all of the insights gathered from market research, competitive analysis, user interviews, and empathy mapping, I generated a user persona that reflects users’ goals, needs, frustrations, and motivations within the bar industry. This persona will represent the primary user group throughout the define and ideation phases. Meet Christopher.

User Persona

Christopher is a 35 year old father with two kids, and is married to his loving wife of 7 years. He has been working from home for the past year since the pandemic hit, and now that places are starting to open up again in his area, he is eager to gather with friends in places with outdoor accommodations. He is an avid supporter of local businesses, and tries to show his support whenever he gets the chance.

  • The existing Lucky 13 website is underutilized
  • Customers are willing to visit Lucky 13 under COVID-19 related procedures
  • Customers are interested in Lucky 13’s variety of offerings
  • Lucky 13 has regulars that are loyal to the business
  • Lucky 13 has an established reputation with locals in Alameda
  • Identify Lucky 13 customer goals, needs, frustrations, and motivations
  • Collect user demographics of bars
  • Discover key trends in bars
  • Understand a consumer’s journey with Lucky 13 in-person and online
  • Determine strengths and weaknesses of competitors of Lucky 13

Assumptions (Revisited)

Bold = Validated by data

Italic = Inconclusive, not enough data

Before moving onto the define phase, I reviewed goals and assumptions made in the research plan and checked if they were either validated by research or inconclusive due to insufficient information. This will further define a path for generating ideas to address user goals, needs, frustrations, and motivations.

Research Goals (Revisited)

Bold = Goal met

Italic = Inconclusive, not enough data

Before we continue...

2. Define

I began to brainstorm potential solutions by framing user needs from Christopher's point of view, and created POV (point of view) statements and HMW (how might we) questions from the user insights gathered from the empathy mapping exercise.

POV Statements + HMW Questions

Now that we've defined some pain points from the user, we can start addressing these problems through various methods of brainstorming. Once we've generated ideas, we can start strategizing by narrowing down potential solutions that will help inform design when building the product.


Using the HMW questions revealed in the previous exercise, I began brainstorming potential solutions to each question through a mindmapping exercise so as to break down each problem and generate multiple solutions taking all factors into consideration. The exercise was completed a total of ten (10) times, twice for each HMW question.


View Document ⟶

3. Ideate

With the solutions from the mindmapping exercise in mind, I can start selecting features and considerations that will address the problems defined in research. I created a Venn diagram comparing business goals and user goals with technical considerations to identify overarching project goals that will assist in knowing which features to move forward with by determining whether they meet common goals considered for the project.

Project Goals

I used my mindmapping exercise and additional competitive analysis to identify  features that address the project goals identified in the Venn diagram. These features were then prioritized by their potential impact on the product and the cost and effort required to implement them.

Product Roadmap

Information Architecture

With the primary user identified, potential features considered, and overall project goals established, I can now focus on the structuring, labeling, and organization of content for the product. This begins the early stages of interaction design.

I created a structure for the product to lay out essential pages, sub pages, and features that will need to be designed and developed. Pages and features were identified based on their priority, effort, and confidence levels shown in the product roadmap.


I put together a fluid document to detail specific elements and features that will need to implemented for both the designer and the developer to reference.

Tasks were created based on the user persona’s goals, needs, frustrations, and motivations identified during research. These tasks address user needs and how they would be fulfilled. Each task was then elaborated on to dictate what essential pages, features, and actions would need to be created in order for each task to be completed.

This document will be referred to and updated throughout the ideation phase as sketches and wireframes are developed.

UI Requirements

User Tasks

  • Christopher wants to know if he can bring a group to Lucky 13 at 10pm on Saturday night.
  • Christopher wants to buy a Lucky 13 T-shirt to support their business.
  • Christopher wants to see if Lucky 13 offers his go-to drink.

Pages to Design

  • Homepage
  • FAQs Page
  • Shop Page
  • Merchandise Page
  • Item Details Page
  • Checkout Page
  • Confirmation Page
  • Drinks Page
  • Beer Menu Page
View Document ⟶

I generated three paths using features from the product roadmap to show how Christopher would accomplish three different tasks based on the sitemap. These paths help us visualize Christopher's journey while using the product, and detail specific actions and pages that will need to be designed and further developed.

Task Flow

Expanding upon the previous task flows, I made a flowchart to visualize different scenarios in which the user would complete the tasks given. Each scenario takes into account different entry points within the user's journey -- whether they are a new customer, a returning customer, or a stranger to Lucky 13. This diagram determines the different user interactions, decisions, and entry or exit points that may arise while using the product.

With the groundwork for the product laid out and visualized, I can now move forward with creating a user interface.

User Flow

4. Prototype

After determining what elements, features, and pages were required for the product, I was able to create preliminary designs for key pages that will be used for prototyping and usability testing.


To begin wireframing for the website, I made hand drawn sketches including features and elements listed in the UI requirements for the product. Three homepage layouts were created based on market research, competitive analysis, and user goals and needs derived from empathy mapping.

Hand Drawn Sketches (Low-Fidelity)

Taking key elements and layout placements from these sketches, I created a  digital wireframe using Figma to further visualize overall hierarchy, legibility, and usability. I expanded upon this and formed responsive designs from the low-fidelity wireframes to ensure accessibility across all platforms.

Responsive Wireframes (Mid-Fidelity)

Using the mid-fidelity wireframes, I mapped out interactions in Figma to provide a functioning desktop mockup of the product for users to interact with during usability testing. Each page was linked in a manner that would allow the user to complete all task flows assigned from the UI requirements document, based on Christopher's journey in the user flow diagram.

Working Prototype

View Prototype ⟶

5. Test

Evaluative Research


Think Aloud Testing

Participant Criteria

  • Total of 5-10 participants
  • Ages 21-60
  • Has visited Lucky 13


Usability testing is complete if all participants are able to complete their assigned tasks with a 90% or higher error-free rate, meaning that a total of 10 or more slips or mistakes would deem the product unusable in its current state.

During user testing, 100% of participants were able to complete the test. On average, participants made 0.8 slips and 0.8 mistakes per test, resulting in a 98.4% error-free rate, thus completing the test.

Participants were recruited to complete the three tasks from the UI requirements document by using the working prototype, and were requested to verbally describe their thought processes and decision-making while performing said tasks. These tests help with further understanding user behavior and preferences while using the product, and, most importantly, ensure that the product actually functions and works as expected.

Usability Testing


Since all participants were able to complete the test within the desired error-free rate, I was able to break down transcripts of each participant test into bite-size statements, and grouped them by common themes and occurrences among each  session throughout usability testing. These insights will be used to generate recommendations to be implemented in future prototypes.

Affinity Map

Key Words
Landing Page
Reviewing Info
Product Details


  1. Users look for key words while skimming information to find what they’re looking for
  2. Users had to depend on assumptions on bar information due to the lack of clarity
  3. Users expected key information to be found on a landing page
  4. Users made comments about the high price of the drink they wanted
  5. Users spent extra time reviewing personal information while purchasing an item
  6. Users prioritized health and COVID-19 regulations while planning to visit
  7. Users took extra time to review the product description before adding to cart
  8. Users expected to find information about the bar under the “About” page in navigation


  1. Highlight key information in body text
  2. Change wording in headings and body text to address key needs from users
  3. Add additional information on homepage elaborating on health, merchandise, and location
  4. Allow users to sort drinks by price
  5. Add additional “Review Details” page during checkout
  6. Create dedicated sections for COVID-19 on Homepage and FAQs
  7. Highlight key information on product details page
  8. Make “About” a dropdown menu  with links to “FAQs” page and “Lucky 13” page

With the design recommendations gathered from usability testing, I can now update the prototype to a more current state.

Recommendations from usability testing were plotted on a matrix based on their impact on the product’s functionality and the effort required for implementation. This well help when working within a limited timeframe, and guide development on a more concentrated path to maximize efficiency.

Prioritization Matrix

Priority Revisions

Revisions to Wireframes (Mid-Fidelity)

Using the recommendations from the prioritization matrix, I made recvisions to the mid-fidelity wireframes to improve usability and functionality before finalizing a design. The recommendations that were chosen were best suited for the product given their ranking on the matrix in relation to the timeframe and scope of the project.

Before moving on, we can revisit the original project objectives set before we conducted research:

  • To redesign Lucky 13's website for responsive access across all platforms
  • To extend Lucky 13's branding to best reflect current and desired clientele

Now that we have completed creating a responsive design for Lucky 13's website, we can start improving upon Lucky 13's existing branding. Using the current brand logo as inspiration, I referenced data from user interviews, Lucky 13's social media pages, information gathered from bartenders affiliated with Lucky 13, and overarching business goals determined in the ideate phase to specify brand attributes that would represent the brand's identity:

  • Punk
  • Retro
  • Edgy
  • Erratic
  • Bold
  • Dynamic

Using these attributes, I gathered images using Pinterest to seek inspiration for color, imagery, and typefaces to establish an overall look and feel for the product.



View Document ⟶

Using Lucky 13’s existing logo, I created vectors for proper use within the product and to allow scalability across platforms as needed. This also allows for additional logo variations and color customization within the spirit of the original logo.

Brand Logo


Striking, Contrasting, Bold

Style Guide


Retro, Edgy, Punk


Bold, Erratic, Dynamic

Building off of the logo design, I created a visual document further define brand image by specifying fonts, colors, logo usage, and imagery based on brand attributors and inspiration gathered from mood boards. This guide will assist in designing the user interface for the product.

With the brand identity established, I can apply the style guide to the previous mid-fidelity wireframes to create responsive high-fidelity wireframes.

Final Wireframes (High-Fidelity)

With the high-fidelity wireframes created, I can finalize the prototype and ensure that all prioritized revisions have been picked up so as to maximize usability and efficiency.

Revised Prototype

View Prototype ⟶

Before wrapping up, I created a document containing all UI elements that wereused in the final wireframes and prototypes to reference for consistency across the product as the overall product develops.

This document is to be revisited and updated regularly as changes are made throughout development.

UI Kit



Working with a familiar business and a crowd favorite has proven to be a rewarding experience, if not overwhelming. This was my first project that involved reaching out to a client and gathering data from actual customers, and while the presence of alcohol did help with interviewees opening up, it was a challenge to identify specific problems and generate solutions for a product and experience that many seemed to have no issues with as is.

One of the greatest challenges was not in the design itself, but in identifying proper use cases for users that could not already be satisfied through a simple Google search or Yelp review. Given the nature of dive bars, this challenge felt even more limited given the typical laid-back, care-free attitude associated with them. This resulted in more subjective goals and needs to be drawn from the users, which required a lot of inferring to acknowledge whether user goals, needs, frustrations, or motivations were met. As a result, I had to challenge myself by improving on more subjective elements such as visual design and tone to address needs such as convenience and familiarity, while also balancing usability and efficiency.

Due to the nature of the ongoing pandemic, recruitment for usability testing was limited to my personal network of friends and family. This can skew research and testing by limiting results to a broader audience with potential bias. Additional limitations were a result of the limited timeframe of two (2) weeks, as I was unable to secure a meeting with the owner of Lucky 13 in time to move forward with explicit goals stated by the business.

The process demonstrated is ongoing. The product will continue to go through iterations while revisiting various stages presented in this case study throughout development and release, in no particular order. All necessary changes or updates will be made accordingly as the product continues to be maintained throughout the process.

With the most recent revisions, the product is ready to be handed off to the developer. All documentation and necessary files will be sent accordingly using Zeplin to ensure that the developers will have all the necessary information to continue with building the product.


Next Steps

⟵ Previous

Next ⟶