CommonBoston:
End to End Application for Discovering Events
Project Timeline
Sep - Oct 2023 (80 hours)
Role
UX/UI Designer
Tools
Figma
This project originates from my deep affection for Boston, fueled by a passion for exploration and a personal struggle I've faced in discovering new experiences in the city.
Why Boston?
Boston, rich in history and prestigious schools, thrives as a vibrant city with diverse residents, professionals, students, and visitors. And I am one of them.
Why Event Discovering?
Living here for several years, I've explored major sights but struggled to find unique cultural experiences. So, I wondered if others faced the same challenge.
Do people in big cities struggle to discover local gems?
Skipping forward, that wasn't the issue.
The real challenges people face are:
The absence of personalization and customization in the event discovery process.
A desire for a simple, uncluttered design.
Storyboard
I Discover
To assess the viability of my initial idea for creating a Boston-specific app, I conducted secondary research and performed a competitive analysis to understand the market landscape.
Secondary Research
According to the Museums of Boston website there are in Greater Boston:
13 art museums.
32 history, culture & libraries attractions.
12 nature & science attractions.
According to the Art Collecting website there are nearly 40 art galleries in Boston.
Indeed, Boston's cultural scene offers a wide array of choices.
The key question, however, is how accessible these choices are for users to discover.
Competitor Analysis
I looked at three types of applications:
The most popular apps for discovering and booking events.
City-specific apps tailored to Boston.
Apps related to art and museums.
While some apps offer customization options and a pleasant UI, they primarily focus on larger events, mostly excluding smaller ones.
Surprisingly, there is a noticeable absence of a Boston-specific apps dedicated to discovering local events.
By focusing on Boston, the app can capitalize on more customization, also allowing for a greater representation of smaller and unique events—a distinct advantage for the future app.
User Interviews
Insights
Participants:
Six individuals from Boston and various major cities who actively seek out cultural activities.
Research Goal:
To understand the challenges people encounter when seeking art and cultural activities and discover possible solutions to overcome them.
Insight 1
Every participant emphasized the need for a personalized discovery experience with a high level of customization.
Affinity Map Quotes
Design Impact
New users can personalize their event suggestions through a short questionnaire.
Signed-in users have the flexibility to adjust their preferences anytime using the Preference Settings.
Insight 2
People primarily rely on event official websites for discovering events and purchasing tickets, and having access to these websites is crucial for them.
Affinity Map Quotes
Design Impact
This insight helped me to prioritize features: by focusing on centralizing event discovery rather than creating a booking task flow.
Additionally, I ensured a visible and seamless transition to the official website.
II Define
Research Findings
User Goals
To discover a specific event.
To explore a variety of events and choose those of interest.
To uncover unique and unconventional experiences, discovering hidden gems.
Pain Points
User Needs
Personalization and Customization Preferences
Desire for the app to understand and anticipate preferences.
High-level customization for personalized experiences.
Effective filtration options.
Essential User Interface Features
Intuitive search functionality.
Access to the key information (date, time, picture).
Inclusive of local events.
Ability to save or reserve events for future consideration.
All of these needs were addressed in the design
Point of View Statement
Young adults, who don’t want to waste their mental energy and time, need to receive high-level customization for a personalized and intuitive experience in the event searching process because they are busy with their careers and relationships.
How Might We…
User Persona
III Develop
User Flow and App Map
I began the development phase by outlining the primary user flow: "Browsing events." This flow represents the most common action users take—searching for an event—and offers the option to customize their search.
Once the user flow is determined, I begin establishing relationships between the main pages. Drawing inspiration from industry standards, I identify four primary pages: Homepage (featuring recommendations), Search, Saved, and Account.
Sketches and Low-Fidelity Wireframes
While working on sketches, I recognized the need for an early-stage user test to identify user preferences in design.
Early-Stage User Test
Two questionnaire options for personalized recommendations were presented:
Version 1: Featured visible pills for easy selection within a list of customizable categories.
Version 2: Utilized dropdowns with hidden lists for category selection.
Feedback from users favored Version 1, citing its clarity, fewer actions, and ease of navigation. Users expressed concerns about potential errors with the second version's dropdowns.
Version 1
Version 2
Personalized Recommendations page featured two options:
Version 1: Scroll-down view of events from each category, with the option to load more.
Version 2: Carousel format displaying two events from each category.
All participants preferred Version 1, mentioning a preference for sorting events by the closest date. Feedback suggested replacing the "update" button with a clearer label, such as "filter."
Version 1
Version 2
Branding
The brand name, CommonBoston, draws inspiration from one of Boston's iconic places, the Boston Common park. This choice aims to establish a strong association with the city, creating a sense of familiarity and connection for both locals and visitors using the app.
Mood board for Fonts
Drawing inspiration from Boston's historical charm, I'm incorporating warm, dark colors reminiscent of the city's brick buildings. Inspired by the aesthetic of advertisements on historic structures, I'm using a dark background with gold text, shaping the overall color palette for the app.
Mood board for Colors
IV Deliver
Feature Set
Questionnaire
For maximum customization, users set preferences via a pre-account questionnaire.
Personalized Recommendations
Receive personalized recommendations based on your questionnaire preferences. Modify them anytime in filters or account settings.
Search
Search for a specific event, venue, or artist.
Filters
For seamless customization, utilize filters to adjust preferences, choose dates, and sort events by popularity.
Save and share
Save events for later and easily share them with friends.
Given users' reliance on official event websites for ticket purchases, a prominent CTA linking to the event website has been provided for easy access.
Account
Users can have control over personalized content by adjusting and saving settings in their personal account.
Usability Test
Test Goals
To test if the flow is seamless and straight forward: all necessary categories and filters are included and easily accessible.
Should something else be included?
Questionnaire page: should be the search bar placed at the top or bottom of the page?
Ask to find a specific event to observe the actions are taken.
Recommendations: should I leave icons ‘save’ and ‘share’?
Iterations
1. Adjusted the CTA button text from ‘Take Preferences Survey’ to ‘Set Your Preferences’ for a more user-friendly tone, making it feel less like a task.
2. In response to participant feedback, incorporated a 'Distance' filter to enhance user customization options.
3. Simplified the user experience by removing the 'Popular in Boston' section, aligning with user feedback that deemed it unnecessary. This reduction in content contributes to a more concise and user-friendly page, minimizing cognitive load.
4. Improved the visual clarity and visibility of the search-bar section by applying the principle of similarity.
Before
After
Optimized accessibility to the 'save' option for user convenience.
Before
After
Improved visual hierarchy by introducing a new font and incorporating icons for a more structured and visually appealing design.
Before
After
Next Steps & Learnings
This project underscored the significance of avoiding personal bias in research. The problem I initially assumed to be the most crucial turned out to be less prominent. Conducting user research and being open to participants' insights set the right direction for the design process.
Another key takeaway is that, even when you believe you've created the best design solution, users can provide valuable feedback. This emphasizes the importance of engaging with users, including conducting usability tests.
Given that this project involves a highly customizable product, I would plan to continue refining it. This includes ongoing testing and iteration of the questionnaire and filtration options to ensure no important categories are overlooked.
I would also persist in testing the search bar placement with more users and would continue to add relevant labels for events.
In the broader scope, I would aim to not only refine customization and personalization options but also consider the addition of other features, such as enabling event bookings through the app.
