Gencode
Gencode is a video encoding service in the cloud. It powers companies and fast-growing startups to encode on-demand content in a breeze.
Context
Gencode is an early-stage startup with an ambitious vision: to build the next-generation cloud encoding. From the beginning, they knew that design is not a requirement, it’s a strategical 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 to define design principles for the conception of the new brand. Designed their visual identity and participated in the initial research of the product development.
In this case study, I’ll deep dive into brand and App (SaaS) development. But the visual side, the Skeleton and Surface steps of the five elements of user experience. To focus and be concise, I will purposely skip the details of strategy, research, and testing phases.
To see my background in other UX disciplines, please visit the IBM and CME cases. If you want to skip the brand development, go directly to the App design case study.
Brand development
Visual language is about communication, a systematic model for sharing ideas and sentiments through common understanding. As a product or team grows, the challenges within maintaining cohesive communication also increase.
Anticipating the company’s growth, I advised developing an engaged and handy design language. A standard system to promote efficient communication through reusable and well-defined components.
Philosophy
When I started to think about how to visually represent a product that is essentially a bunch of application programming interfaces (APIs) and computing power to convert videos, it comes to mind what Paul Rand once said.
Without aesthetics, the computer is a mindless speed machine, producing effects without substance, form without relevant content, or content without meaningful form.
Aesthetic is the philosophy ruling outer appearance and actions. Applying this mindset to any experience is essential to its effectiveness.
Everything we do communicates. The meaning we put into every experience is what the brand should expect in return. Lead, facilitate, liberate, simplify, move forward into the future is the Gencode core values, and so it should be his brand.
Terraforming
I created a library of aesthetical representations of the abstract brand aspects in a visual language, terraforming the field for a design system. Below is the result of many iterations of testing and feedback of my visual experiments.
The freedom of a visual language abstract in forms and philosophy becomes a challenge to systematize it. Which means defining replicable rules and techniques. I cared to draw using vectors and mesh gradients, allowing the graphic elements to be editable and scalable.
I designed a system that has defined rules for combining graphic elements with backgrounds and how they come together in compositions. Hierarchy, scale, proportion, harmony, and rhythm were rules that defined how each element is arranged in a given space with the essentials to achieve the Gencode brand signature.
With asymmetry, contrast, and suggestion of motion, the language communicates simplicity and dynamism. Creative mixtures form unique and vibrant visuals, guided by a hierarchical system, natural for an engineering startup. Places, sizes, or styles always belong to contexts of a broader system.
Skeleton
I began pondering about how to address concrete communication needs. Incorporate the language with interface elements and functionality on a page. Systematize the visual language in the presentation of information so designers can understand and use it easily. Develop the information design to glue and hold all components.
Using wireframes, I explored the relationships between elements as micro-level information architecture. I researched the real needs of designers, such as usual goals and tasks, and developed templates to validate their use.
I ended up with a cards system that allows designers to compose pages as building blocks, applying those templates in a grid.
These cards had distinct functionality and rules for applying the visual language. For example, cards that worked as a call to action (CTA) should use visual language, as in a hero header. Cards with higher information density, such as text in columns to explain features, should apply plain color backgrounds and so on.
I’m a coding designer, which allows me to think end-to-end about components. The image above illustrates the process. I programmed the cards as responsive React components (click the image above to zoom in), with customizable properties that addressed function and aesthetics.
Implementation
For me, a design system is not just a style guide. Each component must have a function and must have its corresponding in code. In a cross-functional team, communication defines agile work, not just the methodology.
When a designer chooses a component from a repository to create a prototype, he must have confidence that a developer can implement it.
Below are examples of these cards assembling landings pages.
The design system created a conveyed knowledge of Gencode visual language and a powerful communication tool. It allowed high fidelity prototyping and experimentation faster and cheaper. Also, speed up front-end implementation with coded-ready components. But wait, we didn’t finish yet.
The App
As with all SaaS, there is the communication side, with landing pages, and marketing collaterals, and there is the product interface.
The Gencode product has a human interface (UI), a programming interface (API), and everything is part of the brand experience and must be in the design system.
Forking
In the open-source culture, forks are used to collaborate on a public project or to use it as a starting point. Among engineers, the open-source is innate. Reusing libraries is a 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
IBM Garage Brazil
CME Mobile Channel