Team: Self-directed with feedback from mentor and peers

Roles: UX / UI Designer

Tools: Sketch App, InVision, and Photoshop

Client: Buena Lanes (Local Bowling Alley)

Timeline: March 2019, 2 weeks

Deliverable: Website prototype, Branding

 
 

The Challenge

In order to build an online presence, Buena Lanes wants to launch a brand-new website that show cases everything the bowling center has to offer.

This is a speculative project, and I am not affiliated with Buena Lanes

Objective

  • To design a responsive website for Buena Lanes customers

  • To develop Buena Lanes branding in order properly reflect the business today.

 
Mockup 2.jpg
 

My Design Process

 

 

User Research

Goals: Gain insight on the business, customers, and current market

Process: Research Goals / Market Research / Competitive Analysis / Provisional Personas / User Interviews

Research Goals

Before I dive right into the research, I like to create a list of goals in order to help me stay focused during my research. Here are the most important topics I wish to learn more about.

  1. Analyze competitors and their successful practices

  2. Identify Buena Lanes current user along with their needs, motivations, and frustrations

  3. Identify what part does the website play in the user journey

Market Research

After a few hours of researching online I noticed that the bowling market has been experiencing a major decline. As a result, bowling alleys are transforming into bowling centers. Looking back at Buena Lanes it is clear that they also understand this with their recently installed VR System. In conclusion a website would be the perfect opportunity to let the Ventura community know about their change in business model.

Statistics

  • Number of Americans who went bowling in the last 12 months (2018)

    • 18-29 years old – 20.72%

    • 30-49 years old – 17.09%

    • 50-60 years old – 10.63%

  • The total number of bowling centers has dropped by more than 33% since 1986 

  • Largest percentage increase of occasional bowling among adults was with full-time college students.

    • 1999-2007 increase of almost 1 million

  • More than 10 million children in the US choose to have a birthday party at their local bowling centers each year.

Challenges

  • Compared to the 1960s bowling have become less popular. In order to keep up with the times bowling alleys have to evolve into entertainment centers and attract people with more things than just bowling

  • Creating entirely new entertainment attractions have a large upfront cost.

  • Older bowling centers are not seen as attractive to younger consumers

Trends

  • Bowling centers have shifted their focus from League bowlers to recreational bowlers who now generate 70% of business through promoting cosmic bowling, drink specials, and other deals.

  • Bowling alleys are now transitioning into family entertainment centers, with attractions such as laser tag, arcade games, and go carts  

  • Before during the League era bowling was predominately a blue collar activity, Now bowling has shifted to predominately white collar participants.


Competitive Analysis

Next, I looked at both Direct and Indirect Competitors. Because Ventura is a small quiet beach town it’s really important to analyze other businesses that target a similar demographic. I differentiated the direct and indirect competitors by looking at which locations had a bowling alley.


Provisional Personas

At this point in the process, I gathered enough information in order to create the provisional personas you see below. These provisional personas help me determine who to target when doing my primary research.


User Interviews

In order to learn more about the customer experience at Buena Lanes I conducted 5 in-person interviews with customers at the facility. Through open-ended questions I listened and observed what people thought and felt towards Buena Lanes, as well their body language and how they acted. By the time I finished, I was able to learn more about who are Buena Lanes customers.

  • Number of Participants: 5

  • Gender: 2 male / 3 female

  • Age 21 - 45


Define

Goals: Synthesize research and identify user needs, goals, frustrations, and motivation

Process: Empathy Map / Persona / POV Statements & HMW Questions

Empathy Map

After conducting the five in-person interviews, I took all the data I gathered and created an Empathy Map. It is through this empathy map that allowed me to decipher key user insights as well as their corresponding needs. View Details

Empathy Map.jpg

Persona

In order to summarize all of my research, I created this user persona. From this point forward I used “Ashley“ as a reference point for all of my design decisions. This persona not only summarizes all of my past research findings, but also helps me make sure that all my design decisions are focused on Buena Lane’s core users.


POV Statements & HMW Question

After defining the target user, I created multiple point-of-view statements in order to frame the user insights and needs. It is from these point-of-view statements I was able to come up with the following “How Might We Questions” which I would later use in my product roadmap.

HMW Question.jpg


Ideate

Goals: To ideate website features, information architecture, and flows

Process: Product Roadmap / Sitemap / Task Flow / User Flow

Product Roadmap

Starting with the how-might-we questions, I brainstormed as many ideas as I could think of and took some time and filtered out the best ones. I based my choices off the amount of people the feature would impact, how big of an impact the feature would leave, as well as how feasible it was to implement the feature. Doing this, helped make it easier to focus on a handful of key features that would solve Ashley’s needs.

Product roadmap1.jpg

Site Map

With this site map, I am able to better organize the content of the website in order to make navigation easier for the user. I referenced information architecture patterns found on similar websites. View Details


Task Flow

At this point in the process, I knew that reserving a lane would be one of the main features of the website. So in order to get a better understanding of what pages needed to be developed I created this detailed task flow. View Details

Task Flow.jpg

User Flow

Because I knew different users don’t arrive to a website the same way and have different priorities I expanded upon my task flow and created this user flow that showcases 3 main flows. View Details

User Flow.jpg


Design

Goals: To design multiple responsive mid-fidelity wireframes and test them with potential users in person

Process: Low-Fidelity Sketches, Mid-Fidelity Wireframes / Usability Testing Plan / Usability Testing / Affinity Map

Low-Fidelity Sketches

Hand sketching helps me quickly iterate multiple versions of screens and get as many ideas down on paper. After I had several versions of each screen, I took the best ones and created a more finalize version which you see down below. View Details

Sketches.jpg

Mid-Fidelity Wireframe

After, I used the program Sketch in order to create these mid-fidelity responsive screens. During this phase I made sure to pay extra attention on the visual hierarchy, layout, and consistency. View Details

About Bkg Copy 5.jpg


Usability Testing Plan

Goals

  • Observe how users complete a set of task

  • Identify areas where the website could be improved upon in order to further how intuitive it is for future users.

  • Identify what in the design works well for the user

Now that I have a tangible prototype I can now go out and test it right? Not so fast, before I do any testing I first developed a plan. This helps me prepare how I will be conducting my testing. Click here to view the testing plan At this point I hypothesized that 100% of users would be able to complete the task but because the prototype wasn’t fully functional I expected a error free rate of around 90%


Usability Testing

Task:

  • Find the specials section

  • Find out the operating hours and address

  • Use the live waitlist and sign in

  • Make a reservation

Objective

  • Observe how users complete a set of task

  • Identify areas where the features can be improved

  • Identify what in the design works well for the user

Results

At the end of the day I was able to successfully interview a total of 4 males and 1 female all meeting my participant criteria. From direct observation and audio/screen recording I was able to valuable feedback from target users.


Affinity Map

In order to synthesize my findings, I created this usability map. By writing down key notes and observation, I was able to identify critical pain points and prioritize revisions for my next design iteration. View Details

Affinity Map.jpg

Recommendation

  • Include a drop down list on the nav bar in order to better inform users of the site map

  • Incorporate a scroll down icon at the fold of the home page

  • Have a confirmation popup after users submit their reservation

Insight

  • Participants tend to click on navigation link thinking it would lead to somewhere else

  • Participants tend to not scroll down on the home page.

  • Some participants couldn't tell when they submitted their reservation


Iterate

Goal: To iterate upon the design based on testing and develop high-fidelity wireframes

Process: Priority Revision / Branding / High-Fidelity Wireframes + Prototype / UI Kit

Priority Revision

With the results from my testing, I was able to implement different elements in order to further improve my design.

  1. Implement a dropdown menu in order to better inform users of the overall layout of the site as well as what information is under each navigation link.

  2. Due to users using various size computer monitors, a view more element will help encourage users to scroll down the homepage in order to view the rest of the homepage.

  3. In order to help better inform users that their submission have been received, I added a confirmation modal window that not only confirms users submission, but also informs them with details of how the live waitlist functions.


Branding

Before creating high-fidelity wireframes, I first defined MotoTech’s brand attributes and gathered inspiration in a mood board.

Fun, Friendly, Young, Modern


High-Fidelity Wireframes + Prototype

Lastly I applied my branding and styling to my revised mid-fidelity wireframes and created a high-fidelity wireframe and prototype using Invision. View Details

High Fidelity Wireframe.jpg

UI Kit

Note: While I was creating my final prototype I referenced to this UI Kit I made in order to help me stay consistent with my elements, if I was to do additional changes and edits to this project, having a UI Kit will help me pick up where I left off.

UI Kit.jpg

Finals Thoughts

From the strict two week timeline, to the main website not having much information to base my design off of, this project definitely had some challenges starting out. But with a little perseverance I am happy to have end my project with a design that I am proud of. Some things I’ve learned during this project was improving my skills in responsive web design, designing around an existing brand and setting a strict schedule for myself in order to meet deadlines.

Next Steps

Although we can always do more additional usability testing, as it stands the prototype is ready to be handed off.

If applicable I would use a hand off tool like Zeplin in order to prep my design before giving it to developers. After handing off my design, I would make sure to stay in close communications in order to help developers with any questions they might have.

 

More Case Studies

Spotify

(Adding Social Features)

MotoTech

(Motorcycle Maintenance App)