I collaborated with a design team tasked with improving the user experience of an existing app. In the span of one week my team managed to design and test a new feature for the TikTok app. This feature would allow users to create albums in order to better organize bookmarked videos. This project was a submission for a Hackathon event held by Thinkful in Fall of 2021.
I took the role of UX Designer for this project. I was responsible for the deliverables created during the early ideation stage of this project such as user flows and wireframes as well as conducting user testing. I collaborated with one UX researcher (Mariah Sells) and one UI Designer (Naomi Mccoy). We all provided provided support and feedback throughout this project from end to end.
TikTok currently has no way to organize or catergorize bookmarked videos. Because of this users have difficulty finding videos after they been bookmarked. Users can end up scrolling endlessly through favorited videos without avail. As a result, my team and I set out to solve the following problem during our design sprint:
How might we allow users to better organize favorited videos?
Users are able to sort favorited videos into custom albums for better organization.
Users are able to create personalized favorite albums from the share modal.
The first phase in designing a solution involved getting to know TikTok's user base. We had a UX researcher on our team who created a survey and competitive analysis in order to collect data. We surveyed 26 participants who are avid users of TikTok. Our UX Researcher managed to identify the demographics, behaviours, and needs of TikTok's target audience based on the data collected and created 2 personas from that same data. The competitive analysis helped us identify opportunities for improvement. All of the competitors have features majority of survey respondents utilize. All competitors showcase accessibility settings-- however they only focus on visual and hearing accessibility and do not consider accessibility for users with different mobility abilities
Before jumping right into creating wireframes, I wanted to make sure my team and I were aligned with the overall flow for each of the tasks we were designing. After we agreed on the user flow, I began converting them into wireframes. I analyzed the bookmark and album functions within Facebook and Instagram and decided to adopt their convention. One of the obstacles I faced was figuring out where to place this feature. Thankfully, TikTok already had a bookmark option that would pop-up when a user tapped on the "share" button. This button would open up a menu that would allow users to share, send, and save a video. Therefore, it made sense to add the "add to album" option to this menu.
User Stories & Process Flows
1. As a user I want the ability to create albums in order to better categorize my favorited TikTok videos.
2. As a user I want an easy way to find favorited TikTok videos.
Once the mockups were finished they were used to create a functional prototype that we could use to test with our target audience.
We now had a functional prototype that we could test with TikTok's target audience. I conducted remote & in-person usability tests in order to collect at much feedback as I could. Both of these tests consisted of the same 3 tasks. For the in-person tests I found 4 participants who were avid users of TikTok and familiar with the interface. The tasks of album creation, navigation, and organisation were viewed as straight-forward and easy-to-understand. All participants managed to complete all 3 tasks without and felt these tasks were straight-forward.
For the remote test sessions users managed to finish most of the tasks with a success rate of around 90%. However, 5 users did have difficulty completing task 3 which required them so find a specific video within an album. I took a closer look at the results from this task and found out all 5 participants gave up on the same screen. It turns out users had trouble locating the the bookmarks button and were unfamiliar with what the bookmark icon represented. A good solution to this issue would have been to label the bookmark icon with a word such as "bookmarks", "favorites", or "saved."
4 Participants (In-Person & Moderated Test Sessions)
22 Participants (Remote & Unmoderated Test Sessions)
One of the biggest hurdles I encountered was learning to participate in collaborative design with remote teammates working across different time zones. We managed to complete our project in time by establishing clear roles and responsibilities and keeping each other updated with our progress each day. At the beginning this project my team and I created a schedule outlining with tasks and deliverables we needed to complete during our 1 week sprint.
1. Design a feature that allows users to search within albums.
2. Test prototype with more left-handed users over a longer period of time.
3. Conduct a heuristic analysis to uncover more accessibility issues.