UX Case Study: Be There
Project Brief
Be There aims to bring people together by providing personalized incentives to attend events and by curating an easier, more seamless experience of event creation and discovery.
My Role
A project brief was provided to me that included basic research insights, a description of the brand, the problem at hand, and a sample of pre-existing wireframes. My specific role included:
• Competitive research
• Screenings, user interviews, and result analysis
• Information Architecture
• Wireframing, lo-fi designs, hi-fi designs
• Usability testing & iterations
The Problem
The number of people that say they’re going to an event is much higher than the amount of people who actually attend. Research shows that only 20% of people that say they will attend an event actually end up going.
The Solution
A website that helps the user discover events that they’re genuinely interested in, provides users with a one stop shop for all of their event going/hosting needs, and gives users incentive awards for attending events they sign up for.
Discovery
Event anxiety is something everyone has experienced — whether you’re the host that got food for 50 only to have 20 people show up, or you’re the invitee that says they’re going to something just to back out last minute. We’ve all been there.
But what are the drivers for this behavior? What push do people need to actually go to the events they intend on going to? Or, maybe users aren’t getting properly notified of events on their calendar and need additional reminders? The only way to try and figure this out would be through research.
Research Plan
I decided that with my relatively short time frame, the best course of action to take was to take a look at competitor websites to see how successful brands dealt with this issue, and furthermore conduct guided discussions to get more qualitative insight from potential users. But before beginning any sort of secondary research, I needed a plan to organize my process:
Included in my research plan were the methodologies I would use to gather and synthesize information along with my target participants, recruiting methods, and a timeframe of my project schedule.
Industry Leader Analysis
To begin my research, I browsed through relevant industry leaders such as Meet Up, Facebook, and Eventbrite to understand their approach to the problem at hand.
I chose user journeys that I could relate to my own solution, such as creating an event and discovering events, and took notes on what I found successful, frustrating, and actionable.
Understanding what I liked and disliked from an industry leader gave me the perspective of the user, allowing me to more easily empathize with my own potential users. It also gave me inspiration for features that I could see being applicable for my product and guide me for my discussions by asking what features others found favorable or frustrating.
Guided Discussions
Using my research questions and insights from my industry leader study as a foundation, I drafted a script to use for my guided discussions. I conducted 4 discussions with individuals that actively attend and host events. Some of my essential questions were as follows:
— How do you usually feel about attending events? Do you get excited, or is it something you end up feeling anxious about? Why?
— Walk me through planning an event with your friends.
— When you are planning an event, what are the parts about it you enjoy? What are aspects that frustrate you?
— Do you ever attend events to meet new people? If so, describe to me what that experience typically looks and feels like.
The results of these discussions gave me a wide scope of insight towards how people typically feel about both hosting and attending. To begin synthesis, I categorized aspects of my discussions that were the most informative and relevant:
Research Synthesis: Affinity Mapping
After categorizing information in all of my discussions, I gathered these statements and began placing them individually into an affinity map using Miro.
Now that my information was more digestible, I could begin making more thorough connections. Using my prior categorizations from the discussion documents, I separated the post its into 8 main sections:
From here, I was able to extract more specific themes in my research that led me to these conclusions:
— Main motivators for attending events are seeing people they are familiar with and if it is an event they’re truly interested in.
— Anxieties occur when the attendee doesn’t know what to expect out of the event, and if they feel they won’t know anyone there. This leads the attendee to back out of their plans.
— Hosts use many different applications simultaneously to inform guests of events, which causes frustration.
— Main pain points when hosting are lack of guest communication and how time consuming it is
Now that I had a better idea of my users’ needs and pain points, I understood what features that needed to be brought to the table.
How Might We…?
Before diving into any architectural mapping, I always find it useful to organize my thoughts and make sure my work aligns with the psychological goals of the application. I find How Might We statements to be helpful in this process, so I used them as a guide for my user flows.
How might we…
— further motivate users to attend events?
— make it easier for hosts to create and maintain events?
— help users more easily discover events that interest them?
— ease any anxieties that come with attending events?
Using these statements, I was ready to begin begin building a product that matched these ideals. It was time to create the foundations for the website!
Ideation & Design
After discovering what the main goals were for this product, I felt confident and excited to begin building. I started by creating a user flow to map out the site, moved on to brainstorming sketches for red routes, created a mood board to guide aesthetic design decisions, and then finally mapped out wireframes for lofi/hifi designs.
User Flows
Creating a foundation for the website is imperative before beginning any sketches, so I needed to draft how users would properly navigate through their journey. I concluded what the website’s red routes would be and went from there to begin creating a user flow:
My users needed to accomplish three main goals: discovering events, creating events, and viewing their intended events. Therefore, I mapped out a journey for each one of these items and combined them to ensure the site would be navigationally cohesive.
Now that I had a basis for most of the screens I’d need to create, I felt prepared to move on to sketching.
Ideation: Sketches
Before beginning, I went back to look at the industry leader study I completed earlier in the research process — except this time, I was looking for aspects that I liked and disliked in regards to the interface of these products. I wanted my brand to have the friendly disposition that Meet Up had, while maintaining the intuitive and simplistic design of Facebook events. With these qualities in mind, I began drafting my red routes.
I started with the navigation bar, and decided there were 5 main aspects I wanted to include in that — the logo, which would lead the user directly to the homepage, a search bar, and icons that led to a menu, notifications, and the profile page.
As for the rest of the interface, I referenced findings from my affinity map to dictate most of the features:
— It’s important for the user to always see what’s up next on their schedule. I liked the idea of having the user’s upcoming events frozen on the homepage as they scrolled through discoverable events, so that they are always reminded when they log in.
— Event clarity will make the user feel more comfortable with attending. I took a lot of inspiration from Facebook’s detailed event page layout so that discovering events felt familiar to the user, and kept in mind all the features that users needed in order to know what they expect out of an event.
— Communication is vital to both attendees and hosts. The discussion thread on the detail event pages will ensure that communication is always readily available to both parties.
— People are more likely to go to an event where they know people, and have a reason to attend. It’s important for users to see the guest list, and Be There’s reward system would provide incentives to those that actually attended events through scannable QR codes.
I couldn’t translate my sketches into low fidelity designs without first styling my brand, so my next step was to give my brand a personality.
Mood Boards
The company provided me with specific attributes for the brand’s personality: a trusted friend that cares about helping people and making a difference in the world. Be There is caring, familiar, humorous, and optimistic.
I used these characteristics to dictate the aesthetic, color scheme, and typography for the brand.
I started by gathering a collection of photos that exhibited people laughing and eating together to paint the correct picture of friendship and comfort. From there, I chose a color scheme that was warm and exuded optimism. Orange, yellow, and pink are analogous colors that represent both excitement and passion — so I thought they’d be perfect for a brand that championed those attributes.
As for the typography, I chose Fredoka One for bigger headings and Quicksand for smaller headings, bodies, and captions. Both of these fonts are round, casual, and readable — giving the brand a more playful aesthetic that would ideally make the user feel at ease.
Lo-fi Designs & First Round of Testing
Now that Be There’s brand was carved out, I finally began bringing my sketches to life with low fidelity screens. I decided to reserve color for the development of my hi-fi screens so that my testing participants could really focus in on the navigational aspects of the product first.
Check out my designs in Figma below!
I tested my design with 4 participants in person, and my results were as follows:
— 4/4 participants found the design to be simple and easy to navigate.
— 2/4 participants wanted to be able to see their past events that they’ve attended, but that feature was not available to them.
— 2/4 participants were confused by the event checklist on the “Create an Event” screen.
— 1/4 participants weren’t sure if the “upcoming events” on the homepage were events the user was going to or if they were just general events that were happening soon.
Iterations, Hi-Fi designs and Testing
After my first round of testing, I had a good amount of changes to make while transitioning to my hi-fi designs. I added color to the design and created the profile screen and the “Your Rewards” screen. I then tackled the issues that were discovered during testing:
— I added a drop down menu next to the headlines in “Your Events” that gave the user access to past events and invited events without overcrowding the space.
— Added more context to the event checklist to improve understanding.
— Changed text in “upcoming events” on homepage to “events you’re attending”.
— Made location aspect in the detailed event page smaller and added additional details on top of it to provide more information to the user in a digestible fashion.
In my second round of testing, I drafted a new script that included prompts for the profile page and the rewards page. I tested with 4 new participants and these were my key results:
— 4/4 participants had no navigational issues.
— 2/4 participants found the pink accent color difficult to read.
— 4/4 participants found the “create an event” screen to be intuitive and found the checklist helpful.
— 1/4 participants thought there should be an added direct messaging feature to improve communication.
— No issues with the profile page or the rewards page. Participants liked that they could personalize their profile by adding their interests, and found that the option to click to view their reward was beneficial to privacy.
Final Iterations
Keeping in mind my results from my second round of testing, I iterated on a few aspects in my final design:
— Made the pink accent a darker hue and bolded the text where it appeared so it would be more readable.
— Added a messaging feature to the navigation bar that includes chat rooms for events and direct messages between two users.
Check out my final prototype below on Figma!
Final Thoughts
I had a lot of fun creating this product, not only because I’m passionate about creating a space for people to get together and find experiences that they will cherish — but because it changed my perspective on this issue. I’ve always enjoyed hosting parties and attending local events, and have found myself frustrated countless times with the amount of energy and time it takes. I’ve caught myself asking: “Why hasn’t anyone perfected this yet??” But it’s not easy to come up with a solution that covers everyone’s needs, there’s so many variables! It was a challenge that I enjoyed facing.
Some things I learned and would do differently for next time:
— Complete more secondary research in the beginning of the design process.
While my industry leader study and guided discussions gave me enough insight to come up with a solution I’m satisfied with, I know there are so many psychological factors that come with this problem. There are deeper reasons as to why people do the things they do, like not attending an event they had intentions to go to, or finding reasons not go to at all. I’m sure I would have found more insight on this if I had more time to dedicate to studying scholarly articles on this matter; next time, I hope I’m able to make the time for it regardless of my limitations.
— Add color to lo-fi designs as well!
The decision I made to leave the color out of my lo-fi designs was something that I thought would save me time, but it ended up equalling out in the long run. After testing, there were a couple of accessibility issues that I needed to iterate on, so it ended up costing me time anyway. Plus, looking back now, it would have been better if I had tested the website’s color scheme for both rounds of tests instead of just the final round.
