Have you ever faced a situation when a simple button color change takes weeks to be implemented across all of your applications? I bet you have. Nowadays any organization that builds multiple web or mobile applications spends a lot of effort on keeping the UI clean and consistent across all of the platforms they support. Moreover, avoidance of repetitive work is one of the biggest struggle teams fight in their day to day job.

Working closely with organizations of different scale, here at Akveo we made these pains our duty to resolve. For the past year, our development & design teams have been putting their backs into delivering a solution that will allow us to finally start focusing on business needs that matters and stop the battle with processes and tools.

Today I'm happy to introduce Eva - customizable Design System adaptable to a customer brand. Eva isn't just a UI kit or a regular Design System with implementations to different platforms. Eva focuses on providing a lightweight process, that helps organizations and teams in solving multiple challenges during the development of web and mobile apps, from repetitive work and requirement losses to quality of the end product. Eva is built in a way it brings benefits to a company of any size - no matter to a startup or enterprise.

For enterprises having unique design is a must. Also, enterprises usually have a lot of teams that work on various apps and platforms. Thus their main challenge is to provide consistency across all of them. If an organization wants to change the brand color of an action button, this requires significant efforts from all of the teams. What makes it even more complex is that a large organization usually has some communication issues between the teams. Moreover, the teams usually have their own business-related tasks and such design changes make the teams irritated, they might not feel the importance and the business value of it. As a result, there can be a need to explicitly track such changes and manually apply them everywhere.

‍

Providing a single source of truth

‍

The larger the organization - the more complex the design and development process is. Ideally, all the teams within the organization (designers and developers) need to share a single design language and set of libraries, that would help them reuse existing design- and code-base and collaborate efficiently. This is why large organizations, especially leaders in the IT industry develop their own design systems at some point. For Google it is Material, for Apple - Human Interface Guidelines, for Microsoft - Fluent. But just developing a design system with design resources is only one part of the solution. The most important thing is providing the teams with a defined process and tools, to make their work more efficient.

We believe that Eva Design System solves this through:

• Single design source of truth - symbol-based Sketch file, that can be uploaded to online design platforms for easy access;
• Design token and mapping repository - a map of low-level design tokens and their mappings, that defines the visual appearance of the components;
• Implementations for the different platforms utilizing tokens and mappings (Nebular for web, UI Kitten for mobile), with the ability to extend it to a custom platform;
• Set of tools that helps to synchronize design and code assets;
• A defined process and a set of trainings, that helps to adopt best practices take the most of the above.

Reducing the cost of design system development and maintenance

When a company decides to develop its own Design System, it’s usually a good idea. Technically, existing Design Systems can be reused, but during the process of their adaptation designers and developers face different challenges. The reason for that is that most of the Design Systems were extracted from the products of some specific company. Such Design Systems were not really meant to be customized or re-used. That’s why if you try to use and customize such design systems you may end up with:

• Your products look really similar to the products of the company that originally developed the design system you’re customizing;
• Your designers and developers are spending a lot of time on implementing custom requirements and diving into the low-level code of the design or code resources. This makes the design system creation even more complex and adds additional complexities while upgrading the design system.

This is why a lot of large organizations prefer to create a Design System from scratch. But this is a quite expensive effort and there’s a high chance that mistakes will be made if this work isn't done by professionals who were already working on similar tasks.
But in any case maintenance of a design system requires a separate team, which adds annual recurring expenses for an organization.

Eva Design System has a solution for these issues, as:

• It was originally designed to be customizable. That’s why it can be easily adjusted to fit the style guide of some particular company. Some initial prototypes can be also made through the AI Color generation tool. For the simplest cases, the cost of Design System creation can be narrowed down from millions of dollars to a couple of mouse clicks.
• It has an open architecture, that allows to easily extend it to another platform and create additional components based on Eva rules.
• Implementations of Eva Design System to various platforms are open source, thus the maintenance comes free of charge.

‍

White-labeling and slightly adjusted design for different products in a single organization

Large organizations usually work on a large number of products. Sometimes it’s important that different products look slightly different from each other - different brand color, different shapes of a button, etc. Other organizations create applications that can be deployed on-premises and thus need to be white-labeled.
If such a concept is not introduced at the beginning, there can be significant difficulties in providing a custom look-and-feel later on:

• The teams might need to create a different branch for each client/product. As a result - complexities in maintaining the products. Reduced rate of the code reuse
• Also, no need to mention that the creation of a new visual appearance (theme) is a specific effort. Potentially, this can be also automated, but providing such software or functionality is an additional effort.

Eva Design System helps with this challenge as:

• It is customizable from scratch;
• It allows having different look-and-feel settings for different products/clients as the appearance setup is moved to a separate configuration layer;
• Eva already has several tools that can generate appearance settings automatically.

Incremental design updates

Design trends constantly change. This happens because people are getting tired of some designs that are being used everywhere. Also, UX/UI best practices also change, which can affect how the UI components should look. In most of the scenarios, if a company decides to change the design, this usually means throwing away the existing codebase and re-writing the application from scratch. No need to tell that this is quite an expensive move.

Yet again, as Eva design system is customizable by design, it allows performing incremental design updates by just changing the configuration layer. This approach helps to stay in line with the latest design trends while not spending too many efforts on it.

The collaboration of analysts, designers, and developers

Most of the organizations have following flow for UI development related tasks:

• Analyst prepares the requirements, high-level mock-ups;
• Designer prepares visual mock-ups;
• Developer does the implementation part.

‍

Despite this scenario allows delivering the functionality, in large organizations, this is a time-consuming process as there is a need for communication flow that should happen between these three roles. Without proper communication, there's a big chance that delivered functionality will not fit the requirements and some additional efforts would be required for providing fixes. It's quite obvious that this flow with the addition of deployment and quality assurance the time and efforts required for delivering even a small feature are increasing. This is especially critical for prototyping and proofs-of-concept, as business usually needs them as soon as possible.

Eva Design System, on the other hand, integrated into UI Bakery - a low code platform that can help you to speed up this process. In this case, the functional prototypes and PoC can be developed by analysts. Once the application gets approved, it can be taken into further development by a developer either by continuing working in UI Bakery or exporting the code. This can lower the costs and delivery time of PoCs by significate percent of the time.

Final words

A Design System is a fairly new concept, but it is already quite widespread across large organizations. Developing a design system for your organization can be quite a time- and money-consuming task, but Eva Design System can help you save here. It comes with the idea of customization as its core concept, this is why adjusting Eva to fit your brand is fairly easy. Besides that, Eva comes with a set of great tools and practices to set up the right process of UI development inside your organization.

Akveo, the company behind the Eva Design System, also offers consultancy services to set up the right UI development process. For any questions or inquiries please send an email to [email protected].

As usual, we look forward to your feedback on Eva.

‍

‍