Mobile browser video player
How might we design an immersive video viewing experience?
Sometimes the transfer of knowledge requires different technological tools, which creates a fragmented learning experience.
Teleport is a tool that allows their customers to create videos with interactive overlays. Their goal is to provide a more contextualized and immersive way to engage with content. At the time the product only had a desktop version and our role was to design a new mobile web version.
Expert review, Competitive analysis, Design pattern research, Task analysis, Hand sketching, Wireframing, Moderated usability testing
. . .
Teleport had made the product before finding their market and there was no data on if it even satisfies a market. Before we dove into anything else, we made it a priority to articulate to the co-founder the importance of this step or there would be no design at all.
. . .
Our research was rooted in benchmarking Teleport's current (or lack of) solution to how other companies approached or solved a similar problem. We also wanted to understand what was wasn't working so we don't design the same problems.
- Reframe the idea that Teleport is not about what features it can offer to their clients, but how information is communicated with the viewers.
- Teleport's UI forces the user to adjust to the technology, not the other way around.
- The poor experience relates to lack of user control and freedom, visibility of system status, and help/documentation. No other competitors were addressing this problem on mobile.
Designing for simplicity
What we know is that the more content in the videos = the more complicated the interface gets for the viewers. Our design goals were to address:
- how viewers could access specific sections of the video.
- what the interaction would be like where there is an annotation that corresponded with the interactive overlays.
Task analysis to use cases
Due to time restraint and small number of active users, one of our constraints was that we were unable to talk to any users. The viewer feedback we got was what the stakeholder gathered over time. To workaround this, we did a task analysis uncover what a viewer may run into to help inform our design.
"I like to access the content while watching the video so I can make connections with what I’m learning."
"I want to view a specific part of the video."
"I want flexibility when viewing a video. I’ll engage with the content when I want."
Optimizing for context and freedom to access content
In our wireframes, we wanted to address:
- how to show a range of content in a small space e.g. icons, videos, images, text, etc.
- how to keep the user informed where in the Teleport video they are.
- the orientation to view the videos (portrait, landscape, or both), how did it look, and why.
- communicating the ways to digest media through the UI.
What we learned and how we iterated
After testing our assumptions with wireframes, we tied the feedback from usability testing to iterate on our design once more so that it is usable and valuable to the viewer.
Although the project is finished and delivered to the client, I'm currently iterating to push the product further for my own learning and growth interests.
UX to pave the way to success. Teleport has the potential to make the transfer of knowledge easier as well as more engaging. I believe reframing the product to how information is digested and a major design overhaul for both types of viewers on the desktop and mobile can bring a major competitive advantage that will lead to product/market fit. If we had more time, I would want out team to talk to end-users who digest content via interactive media on the desktop, regardless if they use Teleport, to learn more about their challenges and needs to keep iterating on the design.
Together, everyone discusses, questions, defends, and works together to make design decisions. These interesting discussions can lead the team off track when the team discovers that there is more to fix that what’s outlined in the project scope. Learning to be aware of this and keep the team focused on the overall design intent is key.
Lastly, I discovered that writing helps me practice how to articulate my design decisions as well as solidify the design intent. We had to convince the client that defining product/market fit was important in helping him determine the direction of the company and us with the design.