Design systems
A design system is, essentially, a library or set of rules on the style and branding of a company’s web resources. It’s an important aspect of any design; even today, one can stumble upon clashing styles in a company’s website, social media, logos and advertising.
In regards to IT products, this is more than just a framework, a set of UI tools, a component library, a style guide or a set of coding rules. It’s a constantly evolving rulebook that determines the order of creation for products. A design system is necessary when dealing with a multitude of digital products under the umbrella of one brand, as well as with many teams working on these products.
In those circumstances, a design system doesn’t just impose a common style on all of a company’s products, but also solves a number of issues: it shortens the time needed to create mock-ups and prototypes, speeds up testing and makes a company’s resources more recognizable and user-friendly.
ITMO’s new design system
Four years ago, ITMO University began to redefine its brand with a new logo and slogan (“IT’s More than a University”); in the last year, it has updated its brand book, bringing a consistent, universal style to the brand. Earlier this year, the university’s Web Solutions Department began the development of the university’s own design system intended to unite all of the university’s online resources.
“The university’s website is no longer just that: it’s a full-fledged web-portal, an entry point for many other projects. Overall, there are around 200 sub-brands and projects created by the Department of Informational Technologies and others. There are a number of issues in the development of any project that make the process longer and cause complications for users. This was the main reason why we began to develop our own design systems. Our strategic goal right now is to balance our engineering solutions, aesthetics and internal business processes,” – comments Marina Kholodova, head of UI/IX Design at ITMO University.
When developing design elements, the key qualities are ease of use, intuitive user-interface interaction patterns, smartphone and tablet adaptivity and a modular nature of the system, she adds. The main purpose of the system that’s being developed right now is to make the university’s websites more recognizable by having a consistent design, as well as to reduce the effort and time spent on developing each new page, all of which are made for a specific internal customer, i.e. one of the university’s departments.
“The main issue we had is that most of the websites right now are quite different in design: buttons, text fields, etc. They were all made at different times and by different teams, so there was no universal design guideline. The university’s websites were not seen as one, unified network, and developers had to spend quite a lot of time making them,” – she continues – “We now strive to redevelop these websites under one common style. For that end, we’ve involved designers, project managers, researchers and programmers in the development. In the future, the research we’ve conducted and the communication lines we’ve established will help remove the amount of “kludges” that affect the quality of code and user experience, not to mention the final costs of development and the time it takes.”
The project team took time to analyze the experience and best practices of major Russian and international companies. It was decided that the team would use the atomic design method, which revolves around the separation of interfaces into fundamental blocks, which are, in turn, separated into components and elements and then combined again into gradually more complex systems. This method helps developers focus on the creation of a universal visual style for all of the university’s online resources.
How it’s going to work
Every day, the university’s Web Solutions Department receives requests for the creation of new pages, landing sites for events and conferences, course websites and the like from the university’s many departments. The creation of a new design system will help cut the time spent on the development of those sites by several times, says Marina Kholodova.
“We’ve already started working on the landing-site template; we’ll provide the template to others, who, in turn, can use it to create what they need,” – she explains – “The template includes blocks that are the most popular, as we’ve determined from the already-existing sites. Others can take the template, choose which blocks they need and then construct their site by adding the necessary information, pictures, dates, etc. and then hitting “send”. We give others the tools, and they do the rest on their own.”
The team has already created a layout that’s being used in the development of the university’s new web pages; they have also analyzed the existing sites and identified the most common templates and blocks. They plan to have the project’s first stage done this summer; by that time, university staff will already be able to test the template and provide feedback on the new solutions.
“We’ll use the data we gather from the testing of the template to initiate the second stage. For that stage, we’ll expand the design options. There’ll still be one template, but we’ll also create several themes for it to avoid repetitive design and make all new landing pages different from each other. Everything is going to be designed in accordance with ITMO University’s brand book. We plan to continue improving the system and keep it up to date so that other university staff will find it easy to use. At some point in the future, the design system website will contain a section on the various themes, popular modules and user manuals.” – concludes Marina Kholodova.
