Facebook Event Map

Summary

I created an “Event Map” feature for the Facebook mobile app. This project was inspired by my observations that a lot of my peers seem to be unaware about events taking place in the area. Facebook emphasizes their mission to connect people to the world around them, so this project is a step towards achieving the company’s higher level goals.

By ideating through solutions, I arrived at an interactive map design that displays information about events in the area. The design considers Facebook’s design patterns while implementing new patterns around my feature.

Skills and Tools Involved

Product Design

Rapid Exploration

User Research

Sketch

UWP Project Preview

Introduction

The Problem

Because I live in a college town, there are a lot of events in my area. Unfortunately, a lot of the time, students aren’t aware of what goes on in the area due to insufficient marketing. Whether there are social events, academic events, or career events, there are always a lot of valuable opportunities that I feel like people are missing.

There was a review session?
We missed the BOGO deal today!

People in the community use a variety of mediums to keep updated, but there’s no denying that Facebook is an important hub for event awareness. I looked at Facebook’s mission statement, and I saw that this issue around a lack of awareness disrupts the company’s vision.

Facebook Mission Statement

Facebook's mission is to give people the power to build community and bring the world closer together. People use Facebook to stay connected with friends and family, to discover what's going on in the world, and to share and express what matters to them.

I wanted to think about solutions to this by improving the discoverability of Facebook events.

Exploration Steps

  1. User Research
    • "Speed Interviews"
  2. Ideation
    • "Wireframes"
    • "Feedback"
  3. Mockups
    • "Screens"
    • "Decisions"
  4. Conclusion
    • "Outcome"
    • "Thinking Forward"
3 Days

User Research

Speed Interviews

Because the observations stated above are subjective, I wanted to test them using 5-minute interviews with 10 of my friends.

Name Age How does FB contribute to your awareness of events in the area? How many events have you missed this month that you were unaware of? How much time in a day do you spend on FB?
Angie 13 'It doesn't' 0 < 10 mins
Lee 19 'If Facebook didn't exist then there wouldn't be much I would know about.' 10 30 mins
Brian 20 'It depends on how often I check it.' 4 30 mins
Sachi 21 'I would say a lot!' 0 2 hours
James 21 'That’s primarily how I find out about events.' 5 1.5 hours
Sierra 21 'Facebook is really useful for staying aware.' 2 2 hours
Ting-Ting 22 'Facebook is 15-20% of how I find out about events.' 2 1 hour
Mohamed 24 'I’m only aware of events that my social circle attends.' 3 2.5 hours
Steven 31 'Nope; I rarely use Facebook.' 0 0 mins
Celeste 58 'I don't use it for that and don't know how to.' 0 0 mins
Weaknesses

I was able to get a lot of responses from my age group, but I didn’t have much access to younger and older populations. Nevertheless, the evidence I have suggests that these groups wouldn’t use Facebook to search for events as often. I assume that children and adolescents don’t have the liberty to freely go to community events, and working-class individuals have less free time on their hands. Ideally, I would have more resources and access to test these assumptions, but that is not the case here.

Results

As seen, in young adults, Facebook is a very important resource for event awareness. In rare cases like Sachi, Facebook users may not feel like they’ve missed any important events; but the majority of users say that they have. Lee had the highest number of missed events (with 10 in a month) and said that he is only aware of 50% of events that he’d like to go to.

Ideation

Wireframing

Since my redesign would need to fit in the Facebook app's ecosystem, I prepared for my wireframing session by looking at the app's UI to keep my visual patterns conistent with its standards.

While wireframing, I had several considerations and assumptions while thinking about improving event discovery:

  • ”What basic information do you need to present to a user so that they can decide on whether or not they want to go to an event?”
    - Location, time, and an event description.
  • "How do you keep a user aware of events when they’re not using the app?" - Lockscreen notifications.
  • ”What events should people be notified for?”
    - Only the events that they have the means to get to; however, this could vary. If you have flexible transportation options, like a personal car, you might consider events that are farther away than someone who bikes or uses public transportation. Therefore, people should have the ability to modify the distance of the event notifications.
  • ”How early are we notifying people about these events?”
    - With leisure activities, people are usually last minute planners, so it wouldn’t make sense to notify users about events happening in 2 or 3 months. That information is more likely to be disregarded and lost. People should be notified about events that are happening soon.
  • ”How do you present events information in a way that’s not boring?”
    - Create visual stimulation with graphics. This could be using pictures, or a map of the events in the area.
  • ”Do people want to know if friends are going to events? Is that important?”
    - Yes, it is important for people to know if friends are going. People usually want to be with people that they know. Having the right people at an event can promote turnout.
  • ”What if people don’t discover that the feature has been added to the app?”
    - Place the information in their feeds so that they can’t miss it (unless they turn the feature off).

Feedback

Out of all of the ideas, people seemed to be most excited about the map and the notifications. People don't seem to be content with the calendar idea since it already exists and doesn't work well. I decided to use both ideas in the design solution and moved on to Sketch to create mockups.

Mockups

Screens

Based on the solutions and feedback that came out of the ideation step, here are the screens that I came up with:

UI Screens

Newsfeed: The Newsfeed section now has an event map below the stories module. It is placed high on the feed so that people can easily discover the feature and are more likely to interact with it.

Events: As seen in the subnavigation bar on this page, there is a new link to the new Map feature.

Event Map: Users can pan, zoom, and select events on the interactive map so that they can become more aware of events in their area. Selecting an event highlights the corresponding event thumbnail on the carousel above. Users can select the thumbnail and be brought to the event page if they want more details. People can also gain awareness of events at other locations or times using the filter section above the map.

Settings Overlay: Enables the user to access Notifications and Preferences settings.

Events Notifications Settings: Allows users to control when they recieve notifications about events and modify the proximity of the events that they are notified for.

Lock Screen Notification: Exemplifies what an event notification would look like on a lock screen.

Decisions

The tricky part about designing a product or feature on the Facebook app is picking “correct” design patterns. Facebook has a lot of separate product teams that create their own design systems. This means you might find two different symbols that allow you to do the same thing, or you might find heading counterparts with different font weights.

If I were to hypothetically place myself in a product team at Facebook, the cost of creating my own system with more relevant symbols, typography decisions, and intuitive navigation would be inefficient (considering designing and development time). Therefore, to streamline implementation, I would want to use Facebook’s existing patterns.

To make sure that my design was as intuitive as possible, I used design patterns from several different Facebook products and have annotated where I took them from.

UI Annotations

Conclusion

Outcome

In the end, I came up with two ideas that were supposed to create more opportunities for people to be aware of the events happening around them. By creating more awareness around events, Facebook takes another step towards their mission statement of helping people “discover what's going on in the world”.

Thinking Forward

  • Next time, I should do a lot more research into design systems, or seek out a Facebook designer’s advice; because there was an overwhelming number of synonymous design patterns that I could choose from
  • Hopefully, I can reserve more time to test how users feel about my design solutions
  • Creating an origami prototype would be in line with Facebook’s workflow, and would help bring the design to life