Gencode Product
Gencode was a video encoding service in the cloud. It powers companies and fast-growing startups to encode on-demand content in a breeze.
Gencode was an early-stage startup with an ambitious vision: to build the next-generation cloud encoding. From the beginning, they knew design was not a requirement, but was a strategic asset. It was clear that they needed a strong brand presence to gain market share and compete.
I started helping them as a freelance design consultant early on. I helped define design principles for the new brand. Designed their visual identity and participated in the initial research of the product development.
The App
In the open-source culture, forks are used to collaborate on a public project or use it as a starting point. Among engineers, open-source is innate. Reusing libraries is good practice to accelerate development. For a startup with limited resources, open-source is more than ideal. There is no reason to start a UI Kit from scratch. The benefits of working collaboratively with an engaged community of designers and developers are huge.
Since the engineering team was working with React, we decided to fork the excellent Ant Design, a native React library with a complete set of high-quality components for building rich, interactive user interfaces. They also have a Figma library for prototyping that I customized to our necessities.
Our user
We had already done the research and created the personas that represented our users:
— Developers integrating with another system that would use the power of Gencode’s cloud encoder, usually a streaming platform.
— Editors encoding videos on-demand, either using automated folders or manually, usually video producers.
In both cases, my research indicated that they are used to the intricate interfaces of video editing software such as Adobe Premiere. I experimented several prototypes with simplified wizard-style interfaces, but due to the technical nature of the tasks and the numerous settings, they didn’t work. I ended up with something in between.
The interface
The skeleton is an intuitive and predictable layout, a usual responsive pattern: the app bar (1), navigation (2), and content (3).
The content area is also sub-divided in an intuitive pattern: the section identifier (A), the action area (B), and the information area (C).
I refined the interface through feedback from users. I wanted to make them essentially functional, with the minimum to accomplish tasks.
The screenshots below show the Projects and API sections and reveal their technical nature. Tables displaying unusual information for a lay user, such as Ids of jobs and API keys, but very convenient for developers testing API integrations.
The Jobs section shows the list of finished and in-progress jobs in real-time. The Gencode architecture was designed to give visibility of the job processing at all stages. Using webhooks, the App communicates with clients informing them of the job status.
Real-time progress feedback isn’t a common feature in cloud encoders. Interviewing users, especially developers, I learned that they perceive value and include it in the user interface.
As you can see are a lot of components. Even taking Ant as a starting point, I had a lot of work documenting and making complex components, such as tables, reusable in the system. Both as design components for Figma and React components in code.
Jobs builder
To finish this case, I will detail the development of a convenient feature for developers and video makers, but before we get to the solution, let’s understand the problem.
Simply put, video encoding is a process of making video files smaller through compression, reducing the size of the video data, thus, lowering the volume of data transferred in video streaming. From my research understanding the user journey, I designed a task flow of encoding a video, briefly illustrated in the image below.
In this example, the user wants to convert a high-resolution video, a 4k resolution, into smaller versions, Full HD and HD. In addition, for a modern full-package stream, the user also wants to encode in different formats. In the example, the two most common, wichs are HLS and Dash.
I learned that an encoding process could generate, from a single video source, many formats, and resolutions. So, my goal with the Job Builder was to help video creators navigate the intricate flow of setting up encoding tasks as intuitively as possible.
I started designing the information architecture, a representation of the task flow. This study revealed that the flow is a straight top-down categorical tree with a strict hierarchy, where sub-levels can only be accessed via the direct parent, illustrated in the first image below.
Next, I explored skeletons that would allow users to navigate top-level (parent) navigation and drill into sub-level (child) content. I ended up with an intuitive pattern, similar to those used in e-mails clients.
The user would select the input video sources (1), select the output format (2), select the resolution (3), and define the settings for video and audio (4).
I tested those architectural concepts in a concrete representation using wireframes. After a few interactions, I merged columns 2 and 3 in a tree component from Ant, a powerful component for representing hierarchical relationships.
The video below demonstrates the final version of the Job Builder. Additional features came up from user testing, like a JSON representation of the job. Since the JSON generated by the Job Builder is exactly the payload to post in the API endpoint, developers would use it to test API integrations.
Conclusion
It was a long project that required collective efforts from me, the engineering team, and the product leadership. I’m proud of the outcome, a design system that worthed the hard work. The system is being implemented and maturing by the ever-growing design team.
The Gencode team is excited too. They boosted their teamwork culture with this tool. They are focusing more on the user, quickly experimenting with concepts to develop the next generation of cloud encoders, a solid beginning for a promising startup.
See other case studies
Gencode Brand
CME Mobile Channel