Table of Content

  1. The What
  2. The System
  3. The Visual
  4. The Language
  5. From Start-Up to Enterprise
  6. Maintain the System
  7. Conclusion

1.The What

The meaning of “design” is a plan or drawing produced to show the look and function or workings of a product, building or object before it is built or made (dictionary). I couldn’t agree more! And for this entire post to make sense, first we need to establish and understand the meaning of design. When it comes to design, there are tons of different branches under this profession. Let’s look at the design from planning, organizing, triggering, and automating perspective to create fluid one source of truth for all departments of the organization, from accounting to software, from marketing to mobile app department. The design system is everything from your organization’s business card to what kind of email templates you send, from your marketing website’s contact form to your application’s typography. It is essential for an organization to be consistent and in sync.

The Design System, in my personal and professional opinion, is a system and structure that enables people to work in sync and populate better success metrics to solve the problem(s) and serve the company’s/project’s mission statement.

Some people confuse “Design Systems” with UI Kits or frameworks. They are just a small portion of the Design System. We will get into what makes a Design System soon. 🙂

2. The System

The principles we will use help our organization to maximize our efficiency, finish tasks/sprints on time, deliver well designed and developed products. We will also think about the maintenance of our product.

Principles

There are different types of principles for different kinds of professions, but my approach is to pick the most dynamic and efficient of them. I personally like Atomic Design, User Familiarity, Consistency, DRY and Do not make me think. The principles you will adapt to your organization will become part of its culture and stick with it.

Consistency & Templating

Consistency is one of the most important things, in life, in projects, anything you can think. You can measure the success of consistency and make small updates to see how it works with the collected data to see what can be changed and make it better and better with trials, errors, and eventually success.

Templating is the portion of what consistently works. Imagine there is a repetitive task an employee has to do every morning and actively looking for more efficient ways to do the job. Imagine the task itself being a physical or digital (designing a landing page or email newsletter, etc.) For the sake of the example, let’s say the employee is designing and developing a daily newsletter to generate more sales and leads. Now the success metrics for this task would be making sales and leads.

Employee’s first attempt might not 100% match the acceptance criteria of our success metrics at first. Do we give up? Of course not. Confirming assumptions and trying a different strategy for the job might do the trick. I am not going into the market and user research in this post, but I want to say, whenever we are starting a new task, even if we have some data to complete the job, we are first confirming our hypothesis about the task itself. When I say us, I mean the team, your stakeholder, manager, the people who are making the decisions, or only you. The data you collect from the outcome of the task should be your roadmap for the upcoming version. The purpose of that is to get closer and closer to the success metrics’ acceptance criteria. Document each version into templates. What did you do differently? Were you closer to acceptance criteria of your success metrics? What can you do better next time?

3. The Visual

I could write about the visual part of the design system for days!

Every organization should, in my opinion, must have its branding. Your brand is vital for how your customers interact with your product. The organization’s colors, typography, logo design, business card, marketing website, browser, tablet, mobile apps, UI Kit, email templates, anything about your company that customers have to interact with is part of your customer’s journey and what makes your company, well your company.

So let’s break down the UI part of the system.

  • Logo Design (Icon, Logo)
  • Style Guide (Colors, Typography)
  • UI Kit (Marketing, App, Mobile, Tablet, TV, etc.)
  • Page Templates
  • Email Newsletters
  • Presentations
  • Motion/Animation/Transition

As you can see, depends on the type of product you have the UI Kit and the design assets you need might change. For this example let’s say our organizations’ visual asset needs are for marketing, the SaaS and the TV app. We would need three different UI Kit for being able to support our organization’s overall marketing, SaaS and TV app efforts. Why? I suggest three different UI kits because of the types of problems they solve are different. The marketing UI Kit is for promoting and making it easier for our company to market our main product, the SaaS UI Kit will help you solve your users’ problems on browsers, and the TV App UI Kit will have to be there because the way we interact with TV is different. There are 100’ televisions out there. 😀

How do we get everyone on the same page?

As an organization, you need to have one source of truth for visual assets. The UI part of the design system is an essential part of the system, so far. That’s because of the way we interact with our hardware(laptop, tablet, tv, mobile,etc.) If the product were something like Alexa or Google Home, instead of setting up visual UI Kits, we would create ways to interact with them via voice.

I do like setting up Design Libraries with Sketch in the cloud where everyone in the organization can open up their Sketch file, link the library (SaaS or Marketing or TV App UI Kit) to Sketch, and start creating user interfaces. What about presentation templates for super important marketing and business meetings? 🙂 As an organization, you should take the same approach for visual needs, create reusable presentation components and templates.

When the design decisions are pre-made for creating visual assets, your organization will stop wasting time on super small issues like, hey this text is not centered, or the color of the background is off by 10%! And hey, no more spending days on presentation’s visuals. 🙂

So the answer to the question, how do we get everyone on the same page, is documenting the process, storing files in a secure cloud where everyone in the organization can have access to, and the versioning. So why documenting even the process? Imagine that you are a new hire, and it is your first day. Would you prefer someone in the company is helping you out all day? (I think that is a waste of time.) I would prefer to login into a platform where the documentation tell me how to get the software I need, what to set up, who to contact if I need to. Long story short, documenting stuff makes it easy to onboard new hires, and I think it is part of your branding. You want your employees to be able to work freely and fluidly, one way to do that is to help them find the information they need from day one with the help of technology, and documentation 🙂 You heard me talking about branding in this post a lot now. In my personal opinion branding is not only how your customers see you but it is also how your employees see you as well.

4. The Language

The language? Yes! The language! The way you communicate with your user via your product is the language of your product itself. For the sake of this example let’s say the product itself is a SaaS (Software as a Service) application. One of the crucial parts of the SaaS application is communicating the state, error, and status of the app to the user. For physical products, the language part would be the instructions or the texts/labels on the product itself. The way you will speak/communicate to your audience will set the voice for your organization.

I mainly talked about the language for the product itself. However, the marketing and branding portion of the language also plays a significant role in your branding. When all the departments (marketing, design, development, customer success) are in sync and using the same language patterns to communicate to the audience, models are measurable and testable by the way, and it becomes easy to test, measure, update and maintain the language of the product and branding.

5. From Start-Up to Enterprise

The best part about the Design System, it is scalable for any organization. There are few ways to automate the process, and that’s what makes the idea of the design system so beautiful. It is not just about the pixels, colors, and images but the system, an organization that acts, looks, talks, interacts as one, tests, collects data, updates the way it performs, looks, talks, communicates to get closer to the acceptance criteria. Failing, testing, and updating is the key to making your product better and better.

6. Maintain the System

You probably heard me talking about templating, testing, and updating and updating a lot 🙂 The massive part of maintaining the system is making sure everything still is matching to our success metrics and acceptance criteria. Collecting information about how our customers are using the product will help the company make smarter decisions for the future version of the product and its updates.

7. Conclusion

So let me make closing statements by talking about why would your organization need a design system. When everybody at the company is on the same page, repetitive tasks are automated, and employees are focusing on solving problems instead of doing the repetitive tasks, something beautiful happens. We will be able to focus on the idea, customer and delivering the experience. Plans will move much faster from paper to production. We will be able to test more frequently, make smarter updates and decisions. A well-structured Design System can precisely give you that.

I will make future updates to this post. I am 100% sure; I will find out more and make future updates to my process. Take away whatever you can from it and please let me know what you think.

I will keep updating this post, as I will update my process. Researching, testing, and updating will make it better and better. Feel free to leave comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.