More than a site design or even a theme, our design team is developing an updated TCU design system for our web network. But what is a design system?
“A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.”
A design system is a collection of reusable elements, like colors, fonts and spacing, and rules that govern their implementation.
Lots of projects begin with mood boards and sketches to map out a feel for a design. From mood boards, a style guide will emerge. For a single site, a style guide is usually perfectly sufficient. When planning for a family of sites, though, the collection of elements expands and the need for guidelines and rules expands along with it. Visual continuity is critical to our brand; interface continuity is critical to the user journey. As a user bounces from one TCU site to another, you don’t want to force them to relearn our naming conventions and menu systems over and over again.
Wireframes & Prototyping
We began our visual exploration with low-fidelity (lo-fi) wireframes. These visually-simplistic diagrams allow designers to quickly explore layout mechanics and content relationships without getting bogged down with colors, photography and fine visual details.
Several menu and page layout ideas were considered and refined. Content hierarchy was also adjusted to align with our content strategy.
Now that we have two solid sets of lo-fi wireframes in hand, our design team is moving on to high-fidelity (hi-fi) comps. This is when the two design options really start to take shape. We will work through several rounds of internal revisions before turning these comps into clickable prototypes. Once we have the prototypes ready, we will begin user testing and collecting feedback.