KenticoCloud (now Kontent.ai) is a modern cloud CMS platform. Its primary focus is to keep all possible content in a single repository, allow stakeholders to collaborate, and enable developers to deliver the content to the desired application. This case study demonstrates how I used semiotics framework to design UI branding.
Challenge
My challenge was to design a visual language that feels like a modern and efficient application whilst taking into consideration the company's umbrella brand.
Responsibilities
- Propose, design and validate visual language
- Project management
- Communication with stakeholders
Process
Investigate what is done
The objective of the first step was to learn where the company's branding stood. I collected information from currently available sources.
- Company's umbrella branding
- UI kit of the original product
- Voice & tone archetype for the product.
Afterwards, I managed discussions with stakeholders from each part of the original documentation. I wanted to investigate their goals and where my initiative could help them. This allowed me to refine the project objectives.
Create Branding Proposition
According to the collected information, I proposed the evaluation criteria to measure visual design (or desirability if you will). Everyone (designers, managers and marketers) agreed and had a clear idea of the brand target goals.
Evaluation method: semantic differential scale.
Ideate Brand Narrative
As the brand target goals had been set, I had got a rough idea of the narrative. To dig deeper, I interviewed five brand representatives — employees who are recognised as brand idols.
The goal was to get inspiration for the story. The interviews were conducted around their sentiments — objects linked to their life stories. The method is inspired by Roland Barthes, where I assumed that by picking an object and using it as a symbol, I would recall a sentiment — a signified mental concept.
What are the objects that remind you of your values?
Films, Books, Idols, Photos, Places, Totems, Consumer Products
What are the stories that remind you of the objects?
Feel like a human, Acting fast, Pragmatic, Sharing Information, Being Helpful, Play for one goal
I collected objects into a sentiment mood-board to get an overview of all symbols. The mood-board was a source of inspiration for visual elements — Signs.
From the sentiment mood-board, I created design mood-boards and conducted an internal evaluation (semantic differential scale) with over 80 respondents. The results provided clear information on which visuals fit our desired look and feel.
Design UI for Screens
First, I discussed with the UX team which pages and components are most influential for the product design.
Rich text editor, Filtering content items, Workflow steps
Create a Design System
To create a design system, I had to consider two facts.
First, ownership would be assigned to someone else in the design team. Therefore, during the process, I maintained a weekly feedback loop. Besides feedback on the design itself, I gathered information on what needed to be documented and how.
Second, the design team was not using the same tooling. Therefore, part of the design system was documentation of decision-making. So, the new owner would be able to understand, for instance — why I decided to use a grid unit called "M" instead of a simple pixel unit.
Beyond the Atoms
Like a CERN physicist — I broke atoms into smaller particles. Whilst the atoms are particular HTML elements, I defined styles that determine how those elements are supposed to behave.
The styles system is the application of the proposed branding.
Summing-up
