Designing a mobile app for a small media company to improve overall user engagement and sense of community.
TIMELINE
March 1 - 27, 2023
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 a direct line for fans/viewers of OGS to connect to each other and have a sense of community.
The current content (ie: videos, short stories, events, etc.) is spread out among different social platforms and there is a large opportunity to make the content and community accessible all in the same place.
Solution
How Might We
How might we improve the overall user engagement and sense of community for OGS viewers?
Create a mobile app consistent with OGS website’s UI and playful aesthetic.
Merge OGS’s offerings (videos and events) into one platform to keep viewers up-to-date and eliminates the need to check both YouTube and FB for the latest happenings with OGS.
Create flows with clear iconography that will allow users to register for upcoming events and offer volunteering opportunities such as participating in an OGS video.
Process Overview
Research Goals
-
Understand current trends in news media apps
-
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 news apps? How do the younger generations consume news/media?
Findings:
-
Device usage: More than 8 in 10 U.S. adults get their news from their mobile devices with half of U.S. adults getting their news from social media (ie: FB, Twitter, Tik Tok, Youtube, etc.)
-
Device engagement: Nearly half of gen Z and millennials engage with the news through sharing, texting, emailing, or commenting at least once a day.
-
News consumption: 86% of online Southeast Asian users consume news through online venues.
-
Three news trends:
-
Enjoyment of the news is falling, less than ⅓ of the 6000 surveyed found the news enjoyable/entertaining.
-
Trust in the press is declining and so is trust in social media. Local news fares better than national news.
-
The media is failing to accurately cover communities of color.
-
Empathize - Competitive Analysis
Key Takeways:
-
Common features: Among these news/media apps, users seem to benefit from bookmarking, video players, search bar, article/video recommendations, etc.
-
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 under a drop-down 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:
-
If you use news apps, which apps do you use most frequently? Why?
-
What do you like about OGS and why do you watch OGS videos?
-
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 and support the shops/local businesses featured in OGS’s videos.
Empathize - User Persona
Drawing from the target audience's background, this persona represents the young Gen Z who is interested in rediscovering their heritage and culture and wants to help preserve their local community's traditions and unique flavors by blogging and encouraging others to try new foods. Aleesha represents the population of young people who watch OGS content and wants to engage with their local community more but doesn't know how to except via food.
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.
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.
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.
