Product Strategy
UX/UI
DESIGN + CODE
SouBud — media discovery for language learners
Designing and developing a platform to help language learners discover native content. Launching soon!
Team
Solo
RoLE
Product Designer & Software Engineer
TIMELINE
Dec 2024 - present
SKILLS/TOOLS
Web Design, Prototyping, Figma
CONTEXT
SouBud is a website that allows Chinese language learners to explore and find native media catered to their interests and language proficiency level simply by searching using natural language. I will be designing and developing this independently — all the way from a Product Requirements Document to deployment.
And why is it called SouBud, you may ask? Well, 搜索 sōusuǒ means 'to search for' in Chinese, and bud is short for 'buddy' — as you've probably figured out by now, SouBud is a buddy that'll help you search for Chinese media!
A sneak peek of the final designs…
THE MOTIVATION BEHIND SOUBUD
It's difficult to find digestible native media that I enjoy!
As a language-learning enthusiast who is currently studying 3 different languages, I want to consume native media such as TV shows and books, but often find it challenging to locate media that is both engaging as well as at my level. And it isn't just me — my other language-loving friends have this exact same conundrum with their target languages (TLs).
Excited to build a solution for a problem so relevant in my own life, I set out to solve this problem statement:
PROBLEM STATEMENT
How might we allow language learners to efficiently find media that caters to their interests and proficiency level?
INITIAL HYPOTHESIS
Assumptions & initial thoughts.
Based on my own experiences, I made some assumptions about the native media exploration process and hypothesized why language learners might find it such a struggle to find what they want.
It is difficult to know the right key words to search
Language learners are not familiar with which sites to use to find different media
The linguistic difficulty level of media is not easily accessible information
It is overwhelming to have to parse through dense descriptions in a non-native language
USER RESEARCH
Understanding user pain points.
I conducted user interviews with several language learners and synthesized my findings into an affinity map.
I was mostly accurate with the list of why it is difficult to find media. However, while I originally thought that comprehensibility was just as important as interest, it seemed that the latter was the main factor behind most language learners' choices in choosing media to consume.
USER PERSONAS
Dylan and Julie.
From these insights, I created 2 user personas to help me better tackle this problem.
pain points
Focusing on what matters.
Based on these user personas and the insights found through affinity mapping, I decided to focus on tackling 4 key pain points:
search terms
Language learners don't know the correct key words in their TL to search in
difficulty level
Language learners don't know the difficulty level of media until they start consuming it
Language learners don't know the correct platforms to visit or how to use them
similar media
Language learners don't know what media is similar to what they have previously liked
COMPETITOR analysis
Analyzing existing products.
Before beginning the ideation process, I analyzed four different competitors to determine how to craft my solution: Natively (a Japanese book/movie database), Heavenly Path (a Chinese native media database), Reddit (an indirect competitor), and Discord (another indirect competitor).
Overall, my main takeaway was that there is a genuine need for this product, as the current competitors are not able to solve the identified problem in the most effective way. From this competitor analysis, I decided on some features to adopt, as well as some features to avoid.
TO ADOPT
Thorough search + filtering options
Collated recommendation collections
Recommendation requests
Ability to save to a collection
Multiple nuanced content tags
TO avoid
Media items are manually added
Searching only looks at the names of media items instead of including metadata
Overly complex dashboard
Lack of personalisation
Technical limitations and scope reduction.
In order to create a database of native media, I will have to use APIs to fetch data from various media platforms. However, this cannot be automated across every single language — therefore, I will reduce the project's scope to focus only on Chinese, as it is the language I am most passionate about learning and most familiar with.
OPPORTUNITY AREA
NLP-powered database.
In order to address all four of these pain points, a potential solution is to create a database of native media that is searchable and filterable based on factors relevant to language learners (e.g. difficulty level, whether it includes audio, the type of media it is, etc).
Integrating Natural Language Processing (NLP) into this solution would not only allow for content to be tagged to support similarity-based recommendations, but it would also allow for accurate cross-language searching, eliminating the need for users to know the correct search terms in their TL.
MVP
Defining what is necessary.
Focusing on my users, their pain points, and the technical brainstorming I completed, I decided that the MVP should be a platform where:
Users can search for Chinese native media in either English or Chinese (searches metadata in an intelligent way using NLP instead of just looking for direct matches), filtering based on:
Content/genre
Difficulty level
Media type
Price
Similar content is displayed
Users can save media to collections
This addresses almost all of Dylan's and Julie's pain points!
Originally, I wanted the MVP to include an AI/ML-powered recommendation system. However, in order to prioritize launching a working product as soon as possible, this will be saved for future versions of the product.
proposed solution
Searchable + filterable database of native media that displays results based on users' preferences and interests
future features
Looking to the future.
Eventually, I also plan to implement these additional features, which are also extremely valuable, however, are not immediately necessary and/or require more time to implement in a technical sense.
Users can see recommendations based on their previously searched terms, media items they have saved, and media items they have “liked”
Profile page
Users can send recommendations to friends
metrics for success
What does success look like?
I decided that the North Star Metric (the primary focus for growth) should be the average # of clicks on media items per week. This means that not only are users searching for media, but they are also following through and exploring the results instead of simply searching and then not looking into the search results.
Discovery
Crazy 8's.
In order to kickstart my brain for ideation, I went through the Crazy 8's exercise — a challenge to come up with 8 completely different ideas in 8 minutes! Even though some of the ideas truly were a bit crazy, completing this exercise definitely helped me think of different approaches to the problem.
IDEATION
Low Fidelity Sketches.
Taking inspiration from some of the Crazy 8 ideas and with a potential solution in mind, I fleshed out some of the ideas a bit more while still keeping the flexibility for change. There was still a lot of optionality at this point — some ideas heavily leaned towards a focus on searching while others leaned towards feeling like databases.
mid fidelity sketches
Expanding on Low-Fis.
I ended up going with Iteration #4 as it seemed the most intuitive and natural for the user to use. Emulating the look of a search engine, it felt more welcoming than the other more layouts which presented the user with a lot of information and were overwhelming at first glance. On the other hand, my chosen iteration creates a flow entry point that is un-intimidating and keeps a focus on the main feature of the platform — searching.
navigation bar
Simplifying searching.
After conducting some preliminary user research, I also realized that the process for multiple searches in one session was unnecessarily complicated. Users would have to navigate to the search page each time they wanted to perform a search — while this might not be an issue in another product, since the primary function of SouBud involves searching for items, the process should not require so much navigation. Because of this, I decided to add an inbuilt search bar into the navigation bar.
no inbuilt search bar — too many steps
inbuilt search bar — only one click away
navigation bar
Dynamic display.
I created several different variants of the updated navigation bar, allowing the correct one to dynamically display depending on whether the user is authenticated and what page the user is currently on. For instance, if the user is already on a page where a search bar is present, there is no need to display another search bar in the navigation, as this would just be redundant and create clutter.
example one
Search bar present — do not display in navigation
User not logged in — display Log In button
example two
Search bar not present — display in navigation
User logged in — do not display Log In button
media information page
Organizing content.
In my midfi iteration of the media information page, there is a lot of awkward white space. By attempting to completely maximize the horizontal space, there is a large area of white space created at the bottom. This is even more evident for media items with very long descriptions, as in proportion, the image would seem very small as the description length increases downwards.
midfi iteration — vertical space not well utilized
To fix this in my highfi designs, I stretched the description area horizontally and moved the other components under the description, creating more balance and eliminating white space. This way, regardless of the length of the description, there is no awkward space. Under the media image, I also changed the circular button style to a rounded rectangle so as to be able to fit the 'Where to find' box.
highfi iteration — horizontal and vertical space well utilized
hover interactions
Information card.
In order to provide users with more information about each media item, I designed a popup that would be visible when a media item is hovered over. This allows users to quickly obtain necessary information about media items without having to navigate to a new page.
indicating liking
The most intuitive way to 'like'.
In order for the recommendation system to recommend content based on the user's interests and previously enjoyed media, there must be some kind of way for the user to indicate that they like certain media content. This means it is important to figure out the best way for the user to quickly rate an item without having to click on its detailed information page.
I experimented with using a smiley face slider on hover, as Netflix uses this successfully with its content.
However, this hover interaction does not work as it conflicts with the information card already being displayed on hover.
As it might be too inconvenient for users to have to click twice give a rating, I realized the next best alternative is to only provide the option to 'like' instead of also including neutral and negative ratings. This will allow for a regular one-click interaction.
A welcoming, friendly platform that allows language learners to discover and keep track of Chinese native media.
Users will be able to customize their searches based on filtering options catered to language learners, browse similar media, and save collections for future reference.
MORE coming soon…
This project is still in progress! Please check back in a while.