Let's Connect:
UX/UI Portfolio
Vogelmorn Bowling Club
Connecting a Community
What used to be a bowling club has become a wider community hub; home to a café, theatre production company, bar, toy-library, and so much more. My role in this project was to redesign the website for the VBC to improve the user's experience and overall website usability. Through my research I discovered major pain points around bookings and events, which resulted in the implementation of a new booking system for the redesign.
Scope: Redesign Website
Tools: Figma, Squarespace
Role: Concept, Research, Analysis, Wireframes, Prototype, Final Website
Context: Many people visit the VBC website to verify/find information about what is available or happening. Visitors often have difficulty locating the information in question. This situation causes frustration for the visitors and could inhibit their potential involvement in the community.
Research - Understanding The Problem
Initial meetings with a key stake-holder provided the insight that more research was necessary to determine the root problem and where the website was most in need of redesign. Together we identified the representative types of users to the website:
-
Theatre Member
-
Restaurant Patron
-
Parent
-
Café User
-
Volunteer
-
Child
-
Toy Library Member
-
Tenant
-
Event Attendee
Each type of user was represented in the following interview which was conducted with 16 members of the VBC. The questions started off fairly open ended, which allowed the interviewees to talk about what they considered important or interesting, and also helped build rapport and establish a comfortable environment.
Each interviewee was then asked to complete a short quiz and one card-sorting exercise.
The short quiz was to discover the users' familiarity with the VBC's values. They were to choose from the true four from a possible seven. I was curious to know which values were most and least obvious; giving me insight into how they understood the VBC. Knowing what was least obvious could provide an opportunity to promote that value, for example ordering from least to most familiar on the values page.
The card-sorting exercise was to determine what the users felt was most important to them when visiting the website:
-
History of the VBC
-
Groups and People
-
Fundraising
-
Community Events
-
Core Values
This helped inform the order of options on the header menu, as well as understanding the priorities of users on the website.
Analysis - Identifying Themes
In regards to the information on the website, the card sorting exercise revealed a strong trend towards a specific preference, namely features regarding events. This data clarified what should be easiest to find on the menu and on the respective pages.
The quiz results showed me that most users could identify the four values from a possible seven, and that the value of community was most obvious, with creativity being the least.
.png)
The interview results were organized into categories, half of which contained a subcategory for events, which supported the quantitative data finding that events should be a foremost feature.
These results were further filtered down to summarize the main features and pain points identified in the interview. Using a MoSCoW analysis these were ordered into what was most imperative to the users of the website. With so much information gathered during the interview, it was important to simplify the data and organize the priorities to manage the scope of the project.
Data Synthesis - Empathizing with Users
Six types of visitors were chosen to represent the community, and their journey was mapped out to reveal their goals, what actions were being taken, and what potential difficulties could be experienced on that journey. The insights pointed toward effective solutions and what internal ownership would be necessary to support those solutions.
Synthesizing the data into findings, insights, and solutions effectively sorted information into potential features and existing pain points while providing direction for the future design.
Finalizing Design In High-Fidelity
Using Figma I redesigned the existing website to reflect the information gathered from my research and data synthesis. I reorganized the main menu to simplify the options, and changed the order to make events more prominent, as per the MoSCoW analysis. To make the many facets of the building easier to navigate I used an image of the VBC, placing the tenants on their respective locations; this way visitors can easily understand where to find their space of interest both physically and on the website. Each element is linked to a page with more information, thus acting as a visual menu to discover more about the spaces. I used the same layout on the hours of operation page for ease of navigation and familiarity.
