.svg)
Creating a Design System for in-house usage and as an open-source product.
Akveo is a company providing Software Development Services with extensive experience developing for companies of different sizes, in different fields, using different technologies.
We noticed issues that were recurring during different projects, so the Akveo team aimed to create a solution that helped improve in-house design and development processes, as well as being useful to external companies.
Inconsistency across products and platforms complicates maintaining brand standards
Lengthy design processes can be a hindrance to companies’ growth
Development teams need a unified language to streamline the design and development process
I started working on the project by identifying problems and goals and creating the first iteration. Then, I continued crafting the design files, defined style, and structure, laid out the components evaluation process, and prepared supporting assets.
After the first iteration, I was excited to expand my responsibilities as one of the core Product Designers. These included defining strategy, component and architecture development, supervising the design development process, releases, carrying out post-launch evaluations, and close collaboration with the development and marketing teams.
%20(12).png)
and GIST (Goals, Ideas, Step-Projects, and Tasks) planning and prioritisation methodology.
%20(1).png)
To better understand the recurrent problems in product development at Akveo, we conducted interviews with stakeholders from different departments, including: Designers, Front End Developers, Product Managers and Marketing Managers.
After the initial interviews, we analysed the key concerns and further narrowed the goals of our research, which were:
We started by auditing a wide range of products and platforms from our portfolio, paying particular attention to projects that had to be redesigned and projects developed following Lean design
In the absence of guidelines and a defined element hierarchy, almost all products had numerous inconsistencies, like different hex codes for practically identical colors as well as different shapes and strokes. Most importantly, we found many inconsistencies in terms of component styles across products and platforms.
All these aspects have significant detrimental effects on the overall user experience and brand image.
Investigating the team’s requests, concentrating on those that could increase performance and facilitate maintaining consistently high quality.
Designers working on a project without a library of components have to do repetitive work to create each new screen. This also applies to the implementation, since developers would have to spend more time creating new components from scratch. Should a brand request a seemingly small change like updating the color of an action button, this requires significant effort–and time–from all teams involved.
There was no button hierarchy or a clear structure for the different components used across platforms. This made maintaining a consistent visual style and architecture across all platforms complicated, time-consuming, and expensive. On top of this, onboarding new team members to the fine detail of a given project ate up resources unnecessarily.
Weeks pass from the beginning of projects until clients can see how the product looks and feels, and then months more pass until the product is actually ready to use.
Explored the most successful design systems, and uncovered some common patterns and principles, of which we chose 3 that addressed our needs as the pillars of our Eva design system.
The design system should have a consistent structure, hierarchy, and guidelines. It needs to share a single design language and a set of libraries that helps reuse existing designs, code-bases and facilitates collaborating efficiently.
The system’s modularity ensures maximum flexibility in execution. Its components are designed to integrate seamlessly in any combination that responds to a given user’s needs across platforms.
Given that the product is aimed at a large, diverse user base, it must respond to the needs of various kinds of users. These include states and statuses that facilitate the use of assistive technologies by those with visual, auditory, and motor impairments, to create inclusive experiences.
Develop a UI library with Mobile and Web implementations. Purpose:
A ready-to-use UI Library, able to adapt to and integrate with different brands
Coherent, logical structure of reusable components; consistent
Design system as a single source of truth, including naming, tokens, rules, usage, and interactions
.png)
All components are built using basic elements with shared styles, connected by a single visual language. Eva’s library is easily customizable, ensuring consistency between components, minimizing risk of errors, and decreasing the time spent on a given project.
.png)
Eva was developed as a unified ecosystem of tools and products, integrating seamlessly with popular tools like Sketch and Figma. This is done using implementations like: UI Kitten (React Native) and Nebular (Angular).
.png)
.png)
We chose Light and Dark as the main themes for Eva. The objective was to develop two basic themes with a cohesive structure, reflected in all implementations. This allows users to implement a light theme on a given design, and instantly create a corresponding dark theme from it, saving time and other resources.
The Akveo team has been creating designs based on the Eva DS since its first iteration. As a result, our in-house team has had a fantastic opportunity to collect valuable feedback – based on live-use cases – about topics like:
After we release Eva as a product, we regularly analysed solutions based on user requests through customer support, surveys and interviews. These were important steps allowing us to test the product in real-use scenarios, as well as gleaning crucial feedback from users, which helped facilitate a clear overview of the project.
We carefully gathered and structured all feedback and, based on our analysis of this data, planned stages of expansion and improvement of Eva’s capabilities using the GIST methodology.
One of the team’s priorities was maintaining accessibility for those with various visual impairments through the level of colour availability. We achieved this through baking in accessibility features from the base components upwards, and rigorously tested the results using proven testing methods.
.png)
The Akveo team wanted to deliver a solution that allows users to focus on business needs, rather than battling with processes and tools.
Eva has become the basis for a large – and steadily growing – number of projects and products, proving that expediting and optimizing the design and production process has a clear, positive impact on growth.
The customizable UI library of ready-to-use components makes creating consistent, high-fidelity interfaces straightforward.
We reduced lead times for designing hi-fi mockups from weeks to days; incremental design updates now take less time, allowing the team to implement changes that respond to business needs and even trends much more rapidly. This has reduced the number of repetitive tasks in designers' routines, freeing them up to solve actual user problems.
The Eva DS has reduced overwork by decreasing the repetitiveness of designers' and developers' tasks when designing internal UI systems as well as systems for clients. It has allowed the Akveo teams to work more efficiently, iterate easily, and build comprehensive, unique products faster. The Eva DS has decreased our design and development team resource use by more than 30%.
This clear, coherent system significantly streamlined the development process, allowing teams to concentrate on features and solving business needs rather than on low-level UI primitives (color & space values, small components, interactions, states, etc.). Using the same terminology allowed developers and designers to discuss implementations and functionalities efficiently and effectively.
Eva DS has been downloaded more than 30,000 times – without a marketing budget.
It provides a way of manual and automatic UI customization based on the style guide of each company or product. In other words, anyone can get a unique, branded design style UI library and related code frameworks without significant investment.
%20(11).png)
A design system is a product that’s constantly evolving, something that’s easy to underestimate. The great response we received from teams, clients, and users demonstrated that the design system is a valuable product in and of itself.
