{"id":4763,"date":"2016-11-24T17:47:42","date_gmt":"2016-11-24T17:47:42","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=4763"},"modified":"2020-10-30T14:21:49","modified_gmt":"2020-10-30T14:21:49","slug":"scalable-design-foundation","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/scalable-design-foundation\/","title":{"rendered":"Scalable Design Foundation"},"content":{"rendered":"

Steps for building a scalable design foundation and to help set large-scale design projects on the path to success.<\/h2>\n

Designing for large-scale design is one of the biggest challenges a designer will face. Every aspect of the project is amplified and the complexities, risks, and unknowns can have a crippling effect. Luckily, there are some steps we can take early on to build a scalable design foundation and help set our large-scale projects on the path to success.<\/p>\n

Designate Space<\/h2>\n

Large-scale design projects involve a lot of moving parts: timeline, budget, milestones, objectives, dependencies, etc. A dedicated physical space<\/a> (aka \u2018war room\u2019) is invaluable for extending a team\u2019s collective memory and establishing a centralized location for developing a shared understanding of the project. This space becomes a room-sized communication tool that facilitates team collaboration and knowledge sharing.<\/p>\n

Collective Memory<\/h3>\n

Digital documentation is useful, but nothing can replace seeing important knowledge and artefacts from the project on a wall together. It doesn\u2019t take long for this information to grow as the team adds notes, additional documentation, design iterations, etc.<\/p>\n

Since human visual short term-memory is limited<\/a>, this space will extend the collective memory of the team by providing a means to finding crucial project information and free them up to focus on the tasks at hand.<\/p>\n

Centralized Hub<\/h3>\n

Another benefit of a dedicated project space is it serves as a centralized hub of project information that is visible to everyone. It becomes a facilitator for the team, allowing them to effectively and efficiently make informed decisions, collaborate, solve problems, address concerns, etc. And last but not least, this space fosters a sense of team commitment and accountability.<\/p>\n

<\/div>
<\/svg><\/div>

\"... this space fosters a sense of team commitment and accountability.\"<\/p><\/span><\/blockquote>\n

Define Design Principles<\/h2>\n

Large-scale projects require a lot of design decisions and it\u2019s essential that these decisions be made in a consistent manner. You\u2019ll quickly hit a bottleneck if your team is relying on a gatekeeper to make each and every decision. A more sustainable approach is to define a set of useful scalable <\/span>design principles which establish the core values from which all design decisions should be made.<\/p>\n

As Julie Zhuo points out, these principles enable design decisions to scale across many decisions and designers:<\/p>\n

\u201cInstead of relying on gatekeepers to keep a high quality bar, better instead that everyone gets to agreement on a smaller set of guiding values, so that the best decisions get made in a consistent manner, scaling across many decisions, and even many designers.\u201d
\n\u2014 Julie Zhuo, A Matter of Principle<\/a><\/span><\/p>\n

Useful Principles<\/h3>\n

Useful design principles avoid being too obvious, open-ended, or weigh a positive against a negative. For example, \u201cThe design should be simple\u201d is not a useful principle because it\u2019s hard to disagree with and it lacks specificity. An effective design principle is one that helps to solve a practical design problem while also being able to address questions in the future.<\/p>\n

Develop Language<\/h2>\n

Large-scale projects often require a wide variety of user interface components and patterns. These can quickly become fragmented, inconsistent, and hard to manage if the proper measures aren\u2019t taken to document them.<\/p>\n

A pattern library<\/a> can provide many benefits for a team, including a means of documenting established design patterns in order to remain consistent and systematic, making testing easier, and providing a foundation for future growth.<\/p>\n

Additionally, pattern libraries help to align team members on a common design language by isolating the elements that make up the interface in a central location. It is a check and balance measure that is mutually beneficial and one that promotes an understanding of each other\u2019s discipline.<\/p>\n

In turn, design will stay grounded in the patterns that have been established and reduce design fragmentation, therefore reducing development time and making the end user experience more consistent.<\/p>\n

Modularity<\/h3>\n

A significant challenge for many teams is moving beyond the \u2018page mindset<\/a>\u2019. Building a design system around solving problems on a page-by-page basis creates a design language that is unable to scale. The more scalable design approach is to build a system of reusable components and patterns that can be used in any context, and are detached from specific viewport widths.<\/p>\n

The key to building modularly is to ensure each component or pattern follows specific criteria. Each should be clearly defined, have specific functions and named according to this function, standardized, reusable, and detached from specific viewport widths.<\/p>\n

Following this criteria will ensure a cohesive library of components and patterns that can be assembled to build interfaces that work across a myriad of screen sizes, devices, browsers, and environments.<\/p>\n

<\/div>
<\/svg><\/div>

\"A significant challenge for many teams is moving beyond the \u2018page mindset\u2019.\"<\/p><\/span><\/blockquote>\n

Naming<\/h3>\n

Language is fundamental<\/a> to establish a design system. The first instinct of many is to name components or patterns according to how they appear. For example, a \u2018promo banner\u2019 which displays promotions and consists of a large image, title, supporting text and a button. The name given to this component defines how it will be used: when we need to display a promotion, we use a promo banner.<\/p>\n

The problem is the lifespan of this component has been defined in it\u2019s name: no promotions means no component, and therefore the component is not reusable in instances where we need other kinds of banners.<\/p>\n

By detaching components and patterns names from their styling and naming them according to their function, you extend their lifespan and enable reuse. In the instance of our promo banner, naming the component \u2018banner\u2019 will ensure it can be leveraged whenever there\u2019s a need for any type of banner.<\/p>\n

Test and Iterate<\/h2>\n

The amount of unknowns and potential risks grow with the scale of a project. This can affect our design systems in a number of ways, and can easily result in some false assumptions about how our users will interact with the interface.<\/p>\n

If design is working toward one big \u2018hand-off\u2019 to the development team, these false assumptions will be discovered when the costs of fixing them is much higher.<\/p>\n

A more effective process is to incorporate prototyping and testing into the design process in order to validate design decisions, discover potential issues, and address them early. This will effectively mitigate risks and ensure we are building a design system that is grounded in validated decisions.<\/p>\n

Prototype<\/h3>\n

Prototypes<\/a> are a great way to quickly test an idea and validate assumptions. This can be done on a component level, or expanded to test a collection of patterns or components. Building prototypes early in the design process enables us to identify potential issues that might occur later on. As a result, we can quickly address issues before they become larger problems when the stakes are much higher.<\/p>\n

An example of this, which I find myself repeating on each project is the global navigation. This crucial interface element can get complex when adapting to various screen sizes or content.<\/p>\n

By prototyping a solution early on, I am able to not only test if it's a viable solution, but I can ensure that any design moving forward is grounded in a solution that\u2019s best tested and is more resilient.<\/p>\n

<\/div>
<\/svg><\/div>

\"Building prototypes early in the design process enables us to identify potential issues that might occur later on.\"<\/p><\/span><\/blockquote>\n

User Testing<\/h3>\n

User testing<\/a> gives us the ability to inform design decisions and free ourselves from relying solely on design intuition or subjectiveness. This analytical understanding of how users interact with our product\/website will not only improve the work, but it gives us solid reinforcement when justifying design decisions to clients and stakeholders.<\/p>\n

In addition to this, user testing gives us measurements to gauge success and to identify places that need improvement after launch, ensuring that the work will continue to evolve and respond to users.<\/p>\n

The amount of challenges that a designer will face is proportional to the scale of the project, but we can manage these challenges by building a scalable design foundation.<\/p>\n

A dedicated physical space will extend our team\u2019s collective memory and establish a centralized location for developing a shared understanding of the project. Scalable Design principles help to establish the core values from which all design decisions should be made, and ensure that decisions are made in a consistent manner. A pattern library is useful for documenting established design patterns in order to remain consistent and systematic, making testing easier, providing a foundation for future growth, and aligning team members on a common design language. And lastly, incorporate prototyping and testing into the design process is fundamental when validating design decisions, discovering potential issues, and addressing them early.<\/p>\n

This post was originally published on Jon's Medium profile<\/a>.<\/em><\/p>\n

Further reading:<\/h3>\n
\n