Designing a mobile app for Our Grandfather Story (OGS), a small media company, to improve community engagement via volunteering and events.
TIMELINE
March - April, 2024
MY ROLE
UX Designer
UX Researcher
PLATFORM
Responsive
Mobile App
Introduction
What differentiates OGS from other media companies is their dedication to local news and community engagement. Beyond hitting the streets and recording honest conversations with locals, OGS hosts Facebook events that allows community members to interact with the restaurants and small businesses that are featured in their videos.
Problem
It’s noticeable from the research that there isn't enough awareness about OGS events or opportunities for fans and viewers to connect to OGS directly or the people/food stalls featured in the videos. Thus, there's a large opportunity to increase viewers' sense of community.
How Might We
How might we improve the overall OGS viewer engagement and sense of community?
Solution
Create a mobile app consistent with OGS website’s UI and playful aesthetic.
List OGS's Facebook events and allow users to sign up for them in the new mobile app.
Allow users to submit story ideas and sign up to participate in an OGS video.
Process Overview
Research Goals
-
Understand current trends in event apps.
-
Understand how locals find out what events are happening in their community.
-
Understand OGS viewer feelings on OGS, the videos, and their engagement with the content/company.
-
Outline the features, pros & cons of OGS competitors
Empathize - Secondary Research
What is the current landscape of event apps? How do younger generations find local happenings?
Findings:
-
Device usage: More than 8 in 10 U.S. adults get their news (including local happenings) from their mobile devices with half of U.S. adults getting their news from social media (ie: FB, Twitter, Tik Tok, Youtube, etc.)
-
Event engagement: More than 52% of Millennials and 59% of Gen Z'ers attend live events. This will only rise since young people are prioritizing experience over material things.
-
Food & drink is the #1 preferred type of event among millennials and Gen Z.
-
-
Significant trends:
-
A top value of Millennials and Gen Z is feeling like they're a part of something larger than themselves.
-
Young people care a lot about social issues, authentic connection, and finding community that shapes their sense of self.
-
Unlike previous generations who relied on hearsay, looked at bulletin boards, and newspapers, the young generations predominantly use social media and online clubs to find out about local events and happenings.
-
Empathize - Competitive Analysis
Key Takeways:
-
Common features: Among these media/event apps, users seem to benefit from bookmarking/favoriting, videos, sorting, search bar, recommendations, etc.
-
Specific to media companies, there's a lack of emphasis on or dedicated events pages. Despite Vietcetera and TED hosting regular events, both of their apps do not display upcoming events. For Facebook, the events are hidden in a hamburger menu so users have to actively search for events.
Empathize - User Interviews
Participants: 5
Background: Somewhat active OGS fans/viewers on FB or Instagram
Age: 20-34
Questions asked:
-
What do you like about OGS and why do you watch OGS videos?
-
What apps do you use to learn about local events/happenings?
-
Have you ever been to an OGS event? If yes, how did you find out about it? Can you walk me through how you would find an OGS event?
Empathize - Empathy Map
Key Takeways:
-
Says and Feels: Viewers love the mission of OGS in highlighting and preserving Southeast Asian culture/food and really feel a lot more connected to their local community and identity as a Southeast Asian.
-
Thinks and Does: Viewers who really love OGS keep up-to-date with their events on FB. In general, they wish there were more opportunities to engage with their local community, to interact with OGS directly, and support the shops/local businesses featured in OGS’s videos.
Empathize - Journey Map
Drawing from user interviews, this journey map helped me identify what the priorities of the new OGS mobile app would need to address.
From watching OGS videos, to wanting to eat at the featured hawker stall, to checking IG and FB for any upcoming events, the map reveals how there are opportunities for OGS to increase fan engagement by having a dedicated place for fans to sign up for events and volunteer to participate in videos.
Define -
Task Flow 1
Based on my competitor analysis, I saw an opportunity in focusing on events and event registration. I was further encouraged to pursue events since my research revealed that OGS viewers want to partake in events by OGS since it brings the people and stories they see on screen to real life, connecting them to their local community. That's why in the below task flow, events has its own section and icon in the app.
Define -
Task Flow 2
Based on the user interviews, users will benefit from having a dedicated section for volunteering that will help them feel more connected to OGS and their local community. One person suggested that it’d be nice to volunteer to be interviewed in one of their video series such as Can Ask Meh, honest conversations around sensitive topics.
Define -
Sketches
Vietcetera was the closest competitor with a similar target audience and mission. Thus, I drew inspiration from their UI elements like the sliding nav bar and iconography. One OGS fan liked how TED organized their videos, so I sketched a similar layout.
Ideate - Wireframes
Below are annotated wireframes outlining my thought process of what the user would be presented with for each task flow. Starting with how the user would be greeted with an "Upcoming Events" banner, to viewing the details of the event, and lastly, registering/paying for tickets.
Design Changes - Icons
User testing revealed some confusion in the design of the wireframes, specifically with the calendar icon, with some users thinking it was a date picker. Users were also confused on where to go to volunteering opportunities from the home screen (see below). My original intention was to have both events and volunteering opportunities accessible with one click of the calendar icon. Based on user feedback, I changed the icon to the ticket icon.
Originally, the calendar icon it to mimic real- world interactions by letting users see a real calendar, assuming it’s more natural that way. From there they have a bird's-eye view of upcoming events, "18th as a volunteering opportunity", "the 5th is a community event". However, users didn’t like that they had to click on events one-by-one instead of scrolling to view events. Also, they all wanted to read a brief description of the event/volunteering opportunity before committing to seeing details.
Thus, in my final design, I made sure to separate both offerings: events and volunteering into separate screens indicated by two different icons.
Design Changes - Layout and Details
Because we're visually-driven, in order to make the image larger and more attractive, I changed the layout of the event card.
In addition, because we're socially-driven human beings, seeing our friends and general public interest levels for an event encourages us to sign up for the event too. Thus, for the final prototype, assuming that users sign in via FB login credentials, the app will display similar information in stating how many friends & people are interested in the event on the event card.
UI Design - Brand Evaluation
To respect the UI of OGS, I did some digging on their brand philosophy and typography.
Their forest green, muted orange, and subdued blue, all represent OGS’s friendliness, freshness, and retro aesthetic. Orange was also used since orange represents harvests, happiness, and celebrations in Asia.
The logo is minimalist and geometric while the typography, Montserrat and PT Serif, is casual and modern.
UI Design
- Events
Based on research, users will benefit from having easy and visible access to events and volunteering opportunities. Thus, two separate icons and pages were created for events and volunteering. This will directly encourage viewers to engage with their local community.
UI Design
-Volunteering
In the interviews, users were interested in finding ways to engage with OGS content beyond going to the food shops featured in OGS videos. One interviewee stated that he would like to participate in an OGS video to share his experience but didn't know where to do that or how to contact OGS. OGS's "Contact Us" form on their website is a catch-all form for media and general inquiries. Thus, having a dedicated page with volunteering details and a form will increase viewer engagement.
Prototype
User tasks:
1) Find an upcoming event and register/checkout for the event.
2) Locate volunteering opportunities and sign up to participate for a video.
Usability Testing
Objectives:
-
Test the two task flows: 1) Sign up for the upcoming OGS event and 2) Volunteer to participate in an OGS video
-
Discover where users expect to find/register for events and volunteering opportunities
-
Observe points of difficulty/confusion (ie: CTA design, placement, wording, etc.)
-
Identify current successes of the navigation, UI, and user flows
-
Observe user interactions and reactions to the new OGS mobile app
Participants: 5
Background: Somewhat active OGS fans/viewers on FB or Instagram
Age: 20-34
Questions asked:
-
At what point(s) of this process were you confused?
-
What sticks out to you? What did you notice?
-
What do you expect to see if you click on the hand-heart icon?
-
On a scale of 1-5 with 5 being extremely difficult, how would you rate your experiencing registering for an event?
Affinity Map
In general, UI was clear (except for two people who thought the hand-heart icon meant charity/donations) and the tasks were easy to complete. There was minor confusion regarding wording and having two people expect there to be a "My Tickets" section when they clicked on the tickets icon.
Lastly, volunteering surprisingly received more enthusiasm than the events feature.
Overall, the app was easy to navigate, understand, and use. A few interviewees (3/5) stated that they would definitely use the app to be more engaged and involved in OGS and their local community.
Next Steps
What I Learned
1. User research is all about understanding the WHY. What are the users' true motivations?
Drilling down to why users kept coming back to OGS videos, I realized that when users identify with a product and/or mission, there's a good chance they want to externalize their feelings. All the participants felt great pride in seeing OGS bring their neighborhood stories to the world on YouTube. They felt motivated to preserve SE Asian food, traditions, and culture. Thus, they wanted more ways to participate in OGS's mission.
2. Cultural context is important and so is cross-cultural design.
Almost all of my participants are from Singapore (with one interviewee located in Malaysia) and while OGS appeals to viewers globally, their viewers are mainly Asian. Western society promotes individualism while Eastern cultures encourage collectivism. At the heart of it, the app hopes to bring the OGS community together, encourage locals to connect to each other, help advance OGS's mission, and strengthen the collective SE Asian identity.
While I have a long way to go, it was exciting to develop a localized user experience for a YouTube channel I'm a big fan of.