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
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
To design a responsive website for Buena Lanes customers
To develop Buena Lanes branding in order properly reflect the business today.
My Design Process
Goals: Gain insight on the business, customers, and current market
Process: Research Goals / Market Research / Competitive Analysis / Provisional Personas / User Interviews
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.
Analyze competitors and their successful practices
Identify Buena Lanes current user along with their needs, motivations, and frustrations
Identify what part does the website play in the user journey
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.
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.
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
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.
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.
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.
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
Goals: Synthesize research and identify user needs, goals, frustrations, and motivation
Process: Empathy Map / Persona / POV Statements & HMW Questions
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
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.
Goals: To ideate website features, information architecture, and flows
Process: Product Roadmap / Sitemap / Task Flow / User Flow
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.
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
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
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
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
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
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
Usability Testing Plan
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%
Find the specials section
Find out the operating hours and address
Use the live waitlist and sign in
Make a reservation
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
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.
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
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
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
Goal: To iterate upon the design based on testing and develop high-fidelity wireframes
Process: Priority Revision / Branding / High-Fidelity Wireframes + Prototype / UI Kit
With the results from my testing, I was able to implement different elements in order to further improve my design.
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.
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.
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.
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
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.
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.
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.