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.
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)
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.
Usability Test
Affinity Map
Priority Revisions
High-fidelity Mockup
Live Prototype
Project Goals
Product Roadmap
Sitemap
UI Requirements
Task Flow
User Flow
Wireframes
Brand Identity
Responsive UI
POV Statements
HMW Questions
Brainstorming
Research Plan
Market Research
Competitive Research
User Interviews
Empathy Map
User Persona
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.
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.
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.
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.
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.
7/7 participants mentioned Lucky 13's atmosphere as a factor when visiting
7/7 participants credited Lucky 13's outdoor seating as a reason for visiting
7/7 participants visited Lucky 13 out of convenience without prior planning
6/7 participants appreciated Lucky 13's extended hours late into the night
5/7 participants have struggled to find drinks offered or know what's served at Lucky 13
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.
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.
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.
Bold = Goal met
Italic = Inconclusive, not enough data
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Evaluative Research
Think Aloud Testing
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.
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.
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.
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:
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:
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.
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.
Striking, Contrasting, Bold
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.
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.
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.
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.
