Structural design: creating a website’s design language

profile picture

Kjelle UX Designer

20 Jul 2016  ·  5 min read

A large telco client asked us to completely reconstruct their website – without delivering the actual product yet. A great opportunity to highlight the importance of building a coherent design system!

If you’ve ever been involved in building or designing web projects, you know the usual flow: a website or platform is researched strategically, its features and guidelines are defined, designed visually, and then developed into the final, functional product.

In this case, however, things were a little different. One of our big telco clients asked us to thoroughly redesign their website and self-service platform, without delivering its screens and assets – the scope of the project did not include development or testing. We were brought in to create a concept, which could be brought to development in a later stage. In other words, we were designing a system that would eventually form the basis of the website’s structure and look.

This was the perfect project to focus all of our efforts on creating an iron-clad library and design system.

All good web design works with a strong set of design and structural guidelines – they are the foundation of the final product, supporting great user experiences and creating a framework for high-quality development.

However, these guidelines are not always written down and delivered with meticulous detail – when the project is small and manageable enough, and when designers and developers work together well, a simpler set of rules and more general guidelines is more than enough to clarify certain choices and ensure a good handoff for future maintenance.

But for projects of a larger size, with large amounts of possibilities, scenarios and user flows, lots of data and content, and a more complex structure, investing extra time and resources in creating a complete design library and rulebook –before writing a single line of code – is more than worth it. In this case, we delivered two major items. First, the component library, showcasing every re-usable component we designed for the website; and second, the web interface guidelines, further explaining the ideology and process behind our design system.

The component library

The basis of the new website was a complete component library.

When designing, we took our cues from Atomic Design principles. A telco’s website and consumer platform is a complex, large project. The use cases as we defined them today might not remain the only ones in the near future; changes in content are frequent; and several people and departments manage the content on the website, to name a few of the challenges.

Because of this, we focused on modularity when building our concept. We created a fixed set of components, which together need to accommodate every type of content and visual element needed for the website. We also designed a number of templates: pages with a number of components in a fixed layout. This way, we ensure that the branding and defined look and feel remains consistent across the entire website – no matter the content of a page and regardless of who adds it.

Component library

To make sure everyone gets a complete overview of all of these components and template pages, we designed our own platform to showcase them. This platform contains a detailed explanation, with examples on mobile and desktop, of each individual element, and a full collection of templates and pages. These templates are tagged with their used components, so that everything is interlinked. Finding the different use cases for a certain element, with all of its rules and functionality, thus becomes as straightforward as possible.

In a future phase, we can add the entire atom level, with coding patterns. This way, the library can be used both as a complete and easy-to-understand reference guide for anyone involved with the project, and as a developer guide complete with all code patterns.

The web interface guidelines

The component library is the concrete manifestation of our design process and gives a complete view of the website’s design elements. However, this is not the full picture: it doesn’t communicate the systematics and ideology behind the system. This is where the web interface guidelines come in: a separate document to bundle our different teams’ knowledge. It provides context and perspective to the component library’s more tangible system.

Solution-driven design was one of the key values of this projects from the start.

We spent considerable time researching and mapping all the possible micro-moments a user could experience on the website. Micro-moments are all of the little instances in which a product can support a user’s intention: every moment in which (s)he needs to make a decision, choice, or take action. The goal, of course, is to make sure that we could always offer a solution to their specific needs in those moments.

Web interface guidelines

By measuring every page layout and component against our micro-moment, the complex system of the website immediately became much more clear. However, we quickly realised that there wasn’t an easy way to integrate this philosophy into the component library – it can’t be explained properly with only a screenshot or concept design.

That’s why the solution-driven approach is central in the Web Interface Guidelines. The document gives us a chance to define the philosophy and essence of our structural approach. Using the guidelines, the whole story can be communicated as clearly as possible. For this reason, the design team works together closely with our Strategy and Service Design team to create the document – their expertise in structuring complex stories and research is essential to any such project.

Maintaining the behemoth

Another major reason to write up complete design guidelines is to give more context for the future maintenance of this project. A website redesign like this is, understandably, supposed to last a while, and a design “handbook” can detail certain important scenarios and caveats, even before the project is live. The document highlights the potential pitfalls that might occur along the way and how to avoid them.

In short, we think the component library and the web design guidelines are an incredibly valuable tandem of documents. Getting a grip on both will show anyone what can be done with the framework, and will ensure a strong structure and coherent visual identity for the future.

Want to read more about our practical design work? Click through to read about a web platform we designed for utility companies…