Project
Streaming service mobile app with innovative entertaining features.
UX/UI Design Intern
1 Project Manager, 2 Designers, and 6 Engineers
May. 2020 - Jul. 2020
Product Design Project @ Tribal III
Tribal III is a nonprofit aiming to help young filmmakers boosting their early career by providing mentorship, affordable space, and equipment. To make full usage of their existing resources, Tribal III was planning to develop a subscription streaming service that enables users to support filmmakers directly.
My role in the team was to explore the needs of users further, and focus on designing the video related features. I had also worked on the preliminary research, strategic planning, and the information architecture of the Tribal Network, please check here if interested.
While the "Explore" feature was the must-have part of streaming services, I started with researching on 4 existing streaming services mentioned in the preliminary research, including Netflix, Youtube, Quibi, and Vimeo. During the research, I focused on how these apps showcase the videos and how they integrate social features. With this quick research, I could 1) have a brief idea of the elements of streaming services and 2) learned about the design decisions behind them.
Based on the insight from the research that filmmakers may seek inspiration on streaming services, the management team had a rough idea of providing audiences a shortcut to explore random videos and provided me a low-fi wireframe.
The first version of the explore feature 1) had a "Random" button at the center of the page, 2) users got to choose the filters to limit the range of the random video to watch and 3) click on the "Pick for me" button to watch random video.
Not sure whether this feature was what users need, I conducted user tests with potential users. Through the tests, I found out that streaming service users didn't want to watch a really random video because 1) users tended to watch the videos they saved before and 2) the process was not understandable.
"I don't really want a RANDOM video. Give me something I'm interested."
"I may try. But I don't think it will be something I like. I would rather watch the video I saved before."
"I just want to spend some time watching videos. Why is the whole process so bulky."
"I won’t use it if it’s taking so much effort."
Based on user feedback, I realized that they prefer recommendations based on their watching history but random videos. So, I simplified the process, changed the random feature to recommending feature and enabled users to set diversity of the recommendations.
In this version, 1) Users could click on the "Pick for me" button at the center of the home page, 2) adjust how diverse they want the random video to be and 3) click "Confirm" button to start watching.
I brought prototypes to the users again. This time, they were more satisfied with the process. However, interviewees still didn't feel motivated to click on the random button because 1) they didn't trust the algorithm. Also, some of the interviewees told me that 2) they would rather scroll down the home page to check on more videos instead of trying their luck with one recommendation.
"It might work if the algorithm is better than Youtube's recommendation, but I doubt if it's possible."
"Why would I go for this as I already have so many videos in the recommendation section?"
"There’s no motivation for me to click on that random button. I'm pretty sure I can find a video myself."
Learned how interviewees thought of the feature, I figured out that a random/recommendation button might not be what users expected.
While the management team insisted on having the "random video" feature in the app, 1) I designed an "Explore" page based on what we learned about user behavior looking for videos. On the explore page, 2) I provided an option to watch random videos and 3) recommended the management team to keep track of the traffic and time on the page once the app launched.
To design a "Watch with friends" feature, I researched existing services and ways people used to sync videos with friends. In this way, I may uncover flaws from the existing solutions and improved them in the feature I designed.
From the competitive analysis, I found out that there was no streaming service with the video sync feature embedded at that time. Most of the user had to download plug-ins or manually synced with friends on live chat systems.
After reviewing multiple video syncing approaches, I conducted quick interviews with users who had done similar things to learn about their preferences.
Based on what I learned from the competitive analysis and the interviews, I noticed that 1) users were interested in the video sync feature and 2) prefered chatrooms compared to video chats.
"Wow! I don't know this kind of tool exists! I've been using live chat for so long and would definitely use them in the future."
"Noise from others is annoying through the headphones. You know, like the chewing and coughing sound."
"(Talking about the existing services) It's not real syncing. There is always a few seconds of time difference."
With the research findings, I designed the feature with the elements in the design system I built.
In my design, users could 1) click on the "Watch with friends" icon and 2) invite friends or copy links to share on other platform to 3) start a video sync session. During the session, they can 4) click on the "Watch with friends" icon again to invite more friends or to end the session. Also, 5) A confirmation dialogue box will shows up If they were tempt to end the session.
To see how people thought of the flow, I conducted usability tests with 5 potential users and asked them to go through several tasks about video syncing. Overall, users like the feature, the visual design and looking forward to it. However, users did 1) experience some issues recognizing the feature by its icon and 2) expected more flexible options during the syncing session.
"What is this (the Watch with friends icon) for? Is it something like I can cast the video to my TV?"
"Everything works well. I can't see any problem except for that it's hard to find where to invite more friends during the sync session"
"What if I wanna leave the session without ending it? Can I do that?"
During the test, I found out that users confused the original icon with Airplay.
So, I changed the icon after I finished 3 user tests, and the problem that users can't recognize the icon never happened in other tests.
During the test, some interviewees didn't think the original "Watch with Friends" icon can lead them to the pages editing the syncing related features and had a hard time adding friends.
So, I added an additional icon at the chat section to give users more diverse access to edit or end the syncing session.
"Dark theme, yellow for video, pink for live streaming, blue for studio services, and premium feeling" is the only instruction we got from the management team. We searched for movie-related visual resources for inspiration to reach all the required criteria and decided to reference the Oscars to add metal texture to the colors for a premium feel.
To improve the consistency of the interface cross-platform and help cross-team collaboration, I developed a grid system combining a 12-column layout and the 4-point spacing grid.
Considering the efficiency of the developing process for a less experienced team, I unified the number of columns to 12. While the screen size changed, the margin and gutters are adjusted to achieve responsive UI.
4-point spacing was applied to make sure consistent rhythm during users' browsing experience. Also, a smaller spacing provided me with more flexibility in designing pages with higher information density.
I built a standardized, hierarchical structured components library along with the user interface for future use. All the components are designed under considerations of accessibility, including the readability, the clickable area, and multiple statuses.
During my internship, I almost felt offended while the management team was trying to skip processes that they feel unnecessary. Then I realized that it's reasonable for them not to understand the importance of these procedures since it's not their profession. With that in mind, I convinced them with reasons they care - the resources and time saved by avoiding massive modification. Also, I worked efficiently to ensure the time I spent is shorter than expected to gain their trust. And of course, Surprised them with the research insights and thoughtful, elegant designs.
I reached out to the engineers with wireframes during the design process. The first thing was to learn about the feasibility of the features I designed. During the meeting, I also got feedback about what information would be helpful for engineers to bring my design to life.
The CEO joined the design team in the middle of my internship because I was the only designer at that time. While he's not familiar with UX but eager to design by himself, I shared the mindset of data-driven, detail-focused, and accessible design with him. At the same time, I led him to go through wireframing and information architecture design.
At the final part of my internship, I took the job of orienting the successor of the design teams. The new designer had a strong digital art background and was trying to get into the UX/UI field. To make sure he understood how we worked, I introduced the research, sitemap, information architecture, and prototypes to him. Also, I mentored him while he was assigned the mission to design the sign-up/log-in section.
I used to believe what UX designers do is to design only for the users. With the experience of designing for a nonprofit, I realized that while a product serves those with needs, it's also essential to think of how the company can profit from the product and maintain it. At this moment, my responsibility is to design for the company's own good without hurting the users.
It's never easy to convince people when they are confident about their new ideas, especially when they are your boss. Most of the time, I convince them with theories of cognitive psychology, information science, and visual design principles. However, it's not always working. So, I conducted fast researches, including competitor analysis and user testing. Things are always more convincing with words like "Users said..." and "That's how XXX (a huge company) do it."
