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.


Project manager
Product designer


Expert review, Competitive analysis, Design pattern research, Task analysis, Hand sketching, Wireframing, Moderated usability testing


The screenshots show Teleport before the redesign. View the desktop walkthrough (here) and mobile browser walkthrough (here).


. . .

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.

Key Learnings

  1. Reframe the idea that Teleport is not about what features it can offer to their clients, but how information is communicated with the viewers.
  2. Teleport's UI forces the user to adjust to the technology, not the other way around.
  3. 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:

  1. how viewers could access specific sections of the video.
  2. 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. 

Teleport_Task Analysis_3
Teleport_Task Analysis_1
Teleport_Task Analysis_2

"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. 


Final Design

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.

There are few people in this business who approach user experience design with the vision, creativity, curiosity, and intellectual rigor as Tiffany does. The complexity of UX on mobile for our video based platform was overwhelming for any designer, especially when our customer base has different use cases. Within a couple of weeks, in a team of two and very limited resources, Tiffany was not only able to create an experience praised by our team but also unified design for many different use cases.
— Madhur Agrawal, Co-founder of Teleport


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.