WMT
Wireless Movie Transmitter UI
In 2019, I had the opportunity to contribute to the UI development of the Wireless Movie Transmitter (WMT) by Mobile Viewpoint. This innovative device allowed broadcasters to connect it to studio-sized cameras and transmit videos using a connection of up to 6 bundled sim-cards. It offered a portable alternative to large satellite vans for broadcasting purposes.
The WMT, including its Baselink and Airlink versions, gained popularity among renowned broadcasting corporations like the BBC and DR, as well as prominent sports clubs such as AZ Alkmaar. It was an exhilarating experience to work on a project that catered to these significant stakeholders.
The existing UI for the WMT, developed by backend developers, lacked a coherent design and design system. As part of my primary goal, I focused on establishing a clear aesthetic and design system for the project, improving the overall user experience.
Year
2019
Category
UX/UI Design
Front-end
Role
UX/UI designer and front-end developer
Made for
Mobile Viewpoint
A company that produces various devices allowing large broadcasting channels and amateur channels to broadcast ultra-high definition video over bundled simcards.
Tools and stack
Figma, React, Sass
Project Kickoff
I began the project by having a debriefing session with Michel Bais to gather initial information. With the data at hand, I initiated the research phase to understand the existing system better and identify areas for improvement.
Thorough Research
To gain a comprehensive understanding of the complex device and its usage, I created a digital overview, conducted in-depth screen analysis, and documented the system's functionalities. User task diagrams, design principles, interviews with existing users, and persona creation helped summarize my research findings. Additionally, I analyzed a user experience test conducted by a colleague.
Design and Prototyping
Using the insights from my research, I developed a new style tile, established a visual hierarchy for each screen, and identified design patterns to incorporate. I created initial visual designs and customized a separate design for the different screen size of the WMT Baselink. Seeking feedback from active users in the office, I iterated on the designs and eventually created a high-fidelity prototype. Conducting user experience tests and gathering more feedback allowed for further refinements.
Development and Integration
With the final design approved, I proceeded with front-end development using React and Sass for CSS. Leveraging the design system I had established, I ensured the codebase was prepared for seamless integration with the existing back-end infrastructure.