Dave & Busters
Re-Design
Dave & Busters
Re-Design
E-Commerce
E-Commerce
2021 - Present
2021 - Present
Project Overview
Their original website was mainly dark and has a uninviting experience that confused users to get from A to B. There was no story telling or captivating content to grasps users attention. There was a low store visitation percentage, indicating that users were not aware of store locations.
Problem:
Users were facing issues with updating locations, understanding Dave&Busters gamified brand, and overall the excitement of what this place has to offer. The website lacked personalization and customization options, making it less engaging and user-friendly.
Goal:
A website experience that allows the guest to imagine themselves at a location, interacting with games, where they can “feel the fun” that is Dave & Buster’s.
My role:
UX/UI designer leading the Dave & Busters web and mobile designs.
Responsibilities:
conducting research
analytics
wireframing
design iterations
high-fidelity prototype
User Research
How might we create an emotional connection with guests by revamping their website design and identity that speaks to the gamified experience?
Pain Points
Navigation:
Important actions are not visually prioritized, which can slow down task completion and increase friction.
Visual Clutter:
The visual overload makes it difficult for users to quickly understand what the main focus of the page is or where they should go next.
Content Prioritization:
Users who simply want to find a location, view prices, or plan a visit must scroll through several marketing blocks before reaching the relevant content, which increases friction and slows task completion.
Old Design
Large promotional banners, busy images, and multiple competing calls-to-action (e.g., menus, events, rewards, locations, sign-ups) appear all at once, making it hard for users to quickly identify the most important action.
Content Audit
We audited 31 pages on the D&B site and found six key pages in need of critical content revamps. These pages are crucial to helping guests connect to D&B.
User Flows
We created a diagram of the experience for setting your location and planning a visit. This helped give us insight into how users approach the website and plan a visit to go in person.
User Journey Map
It is the series of experiences Carlos has as he achieve a specific goal. It was built on the his experience.
Goal
Choose a good movie in a cinema theatre nearby and select seats in an app in a fast and clear way
Sitemap (old & new)
For the sitemap, we created one that showcases the current site and our proposed site. We wanted the client to understand that users should set their locations to prompt geo-located content to increase store visitation.
Goal
Choose a good movie in a cinema theatre nearby and select seats in an app in a fast and clear way
Starting the Design
I created various diagrams and storyboards to clarify and analyze the app's information and architecture. Afterward, I sketched paper wireframes and then transitioned to digital wireframes, building a low-fidelity prototype to conduct initial usability studies with stakeholders.
Digital Wireframes
On this step I used the Figma to create digital wireframes of all the web and mobile pages. Then I bonded all of the interactions to create a working web and mobile prototype.
Usability Studies
This is an examination of users and their needs, which adds realistic context to the design process.
We conducted unmoderated usability studies with a few participants: they had to answer different questions about the designs and share their observations while using the initial low-fi prototype. The prototype was tested in mobile since Dave & Busters wanted a mobile first approach to the designs. After getting the data, I analyzed it and synthesized the information obtained. Finally, I found themes and came up with several insights. The goal was to identify pain points that the user experiences with the designs so the issues can be fixed before the final product launches.
Select your location
In the beginning, before going to Dave & Busters, it would be great to select your location to see what they have to offer nearby.
Book a event/party
Users have the ability to book an event with ease, making it quicker to prepare their visit.
Learn more about D&B
If user wants to learn more information on Dave & Busters, they should be able to go throughout the site to be educated.
Refining Design
On this step, I created the final low-fidelity Dave & Buster design, keeping in mind all the conclusions from the previous phase of usability studies to represent the final product.
Polished low fidelity wireframes
These are a low fidelity designs that represents a final product
I created all the app pages mockups, incorporating the right design elements such as typography, color, and iconography. I also included captivating and visually appealing placeholders, and developed all the necessary components and elements. The goal was to demonstrate the final Dave & Busters web and mobile site in as much detail as possible. Below is a snippet of the designs.
Final Mockups
It's the detailed, interactive version of designs that closely match the look and feel of the final product.
I worked with a visual designer who helped bring my wireframes to life, applying them to every page. We worked in sprints with developers to help build the live site.
Outcome & Analytics
The improved re-design resulted in a 35% increase in new user adoption rates.The addition of personalization and gamified options enhanced user engagement, leading to a 25% increase in user retention rates. We were able to increase number of clicks by 50% and increase visitors on the Dave&Busters website. Overall store visitations increased to a mere 42%, thus validating our design choices.
Key Takeaways
This was the most challenge project starting into my career, since I just started at Ansira and jumped straight into this project.
Impact:
With time constraints, the designs were changed drastically to speed development time to push the website live. Because of this, alot of the designs were construed and turned out to not be optimized at its best but this was out of my control.
What I learned:
I learned alot about working with a design system, collaborative teams, and handing off designs to development to create a live site.