A factory tour into a designer’s workflow

Okay, so before we start this presentation I want to give you a little bit of background about why I choose this topic — and how it can be useful to you. Because I hate that kind of presentations were the speakers just talk about themselves or their favorite sales and marketing topic. Without giving us any kind of actionable and practical advice.

Keeping this in mind I decided to share with you my own personal workflow as a professional designer — using the framework of the factory tour.

Now the first question that everybody always asked is… (What is the meaning of design?) And if you ask 100 different people you would probably get more than 200 different answers. So allow me to share with you my personal favorite — from design leader John Maeda.

Isn’t he great? But I like to take his definition a little bit further. Because for me, design is creative; problem-solving. Because everybody has the ability to problem solve. Project managers, business analysts, marketers and product owners — as long as they have some kind of common sense. Right?

But unlike them we designers and developers have a unique set of skills — that allows us not just to solve problems with ideas. But we are actually able to build our own solutions.

Take for example the story of Slack Design. Like in this medium article where Andrew Wilkinson shares how Slack beat all their competitors in the enterprise messaging market — by putting design first. Especially since they weren’t the first communication tool in their space — basically being just another carbon copy of tools like HipChat and Yammer.

Now the journey of becoming a professional designer starts by understanding the process of problem-solving using a design framework. And there are two schools of thought about this process.

The first one comes from the classical school of computer-human interaction which is called the double diamond approach. Where you discover, define, develop, and deliver solutions to business goals.

But there is also the most modern and popular approach created by IDEO — called design thinking. Which it tells us that first, we need to empathize and understand our users without any preconceived notions. We must empathize with our users first! And from this starting point is where we can start ideating and testing possible solutions based on our customers’ needs. This is why having a good problem-solving framework is more important than anything else you can learn.

But the problem today is that hiring managers are looking for us to know and understand over a hundred different tools and many other design skills.

And I can empathize with you all developers. Because you don’t have it any easier — because it feels like you need to learn a new coding language every week. On top of, all the other disciplines of computer science. As shown in these graphs.

But the good thing about design is that if you master the fundamentals you can do very well in your professional career — because they are the building blocks of everything else you need to continue to learn every day to be successful. And that is what I am going to do. Am about to share with you four years plus of design knowledge in under thirty minutes.

So let’s light this candle.

So the first thing you need to learn about… is what is called design principles — and there are two types of those. The ones that come from the classical arts like balance, unity, contrast, and symmetry. So remember at the beginning of this presentation when I said that if you asked 100 people the definition of design you would probably get 200 different answers. Well, I kind of lied a little bit — because yes, good design needs to be artful. And this is why learning all the artistic principles is so important.

Now the other type of design principles are the ones that companies use to communicate with their customers. Their brand promise, their tone and voice guidelines — so all their employees can communicate in a single voice. As an example, these are the ones use by AirbnbEng.

The next element that you need to understand and master is the use of colors. And let’s begin by stop calling them colors because as tech professionals what we need to start using are hues and depending on the intensity of how much light or darkness you add to them — you can start making different tints, tones, and shades. But remember to always empathize with your users and teammates. This is why here you can see that I added the CSS/Code equivalate so we can learn how to make the translation between design and development.

The practical example that you need to keep in mind here is… that color-blind users will need other types of considerations when choosing the hue pallet of your apps.

An easy tell between amateur designers and the pros is their vocabulary. Especially when it comes to Typography. In fact, it is so complex that I have yet to memorize every single term. Because when we speak about fonts sizes, weights, families, and line-heights — we designers and developers need to stay on the same page (pun intended).

Because let me ask you this…

In which Ikea would you be more likely to shop. Because as you can see just like color, different typography styles can communicate different emotions, brand, and experiences.

Next is the use of iconography. The gainful employment of icons and symbols are super important because the human brain processes images 80 times faster than plain text. So every chance you get to use a visual instead of just words in your designs — please take advantage of it. And in code, you control these by using icon-font libraries and vector CSS graphics with SVGs. Stop using PNGs!

The pro tip here is to use both. Because not every company have the same privilege as Facebook — especially new startups.

Finally, there are animations and micro-interactions. Which most are control with CSS animation properties. Because the right animation, at the right place and at the right time. Can add an extra boost of surprise and delight to your users. Resulting in higher conversions and a better user experience.

For these I recommend you to use the Material Design design guidelines from Google Design to avoid frustrating or confusing your users.

Now that we have all of these ingredients we can put them together using a concept called atomic design. Created by Brad Frost and we can start making our own recipes and design patterns like search cards, Facebook posts, login pages, etc.

And this has resulted in what today we are calling design systems.

Because when we put design principles together with style guides, component libraries, and brand and tone guidelines — we can start working faster and more effectively.
Now one of my favorite design systems right now is the one created by Shopify.

Like I said before; you start with your principles, your voice, and tone, visuals like color and typography and when you start mixing them together you can begin forming components like buttons and look they even share their codebase with you. But wait there’s more because you can actually download their UI kit. And as you can see anyone could copy their work for free.
And this is the most important thought that I want you to take away tonight. Which is… that knowing how to use tools like Sketch, Figma or GitLab is not our competitive advantage.

Our competitive advantage as makers comes from our communication and problem-solving skills.

For me as a designer that means information architecture…

Knowing how to define and implement user flows that can solve our customers’ needs is the one skill you can not fake or download for free on the internet.

Then only when we have a strong idea of how to solve our users’ unmet needs is when we can start wireframing and prototyping.

Then you can continue with the rest of the design thinking process and — test and validate your ideas by putting your prototype in front of the users. To then later move into the implementation and development phase…

By applying the visual styles and defining the specs. To later share it with talented people like you for development.

Which looks kind of like this — if your working under an agile environment. Where designers implement their design thinking framework inside a scrum process for cross-functional collaboration with business and development.

But let me also introduce you to the millennials’ kryptonite. The project plan!

Because no matter how good our designs and estimates are. The deadline would never change — because corporate always want more for less.

Because in the real world this is how our fortress of solitude looks like — full of scrum masters and product owners.

So while engineers like you are conducting unit testing to make sure that the code runs. We designers are responsible for the quality of the product and we do that by conducting heuristic evaluations. Because while you are responsible for making sure the product works from a system perspective people like me make sure it works from a human/user-centered approach.

The last and most important thing I want to talk to you about is accessibility. Because not only is the right thing to do — it’s the law. Especially if you work for a federal vendor or agency.

Now when it comes to tooling in your professional career you may use a technology stack that could probably look like this…

You will get your user stories are requirements from the product owner. Using something like Microsoft Team Foundation Server. Then you get your designs and wireframes from tools like Sketch and Axure. Plus the interactions, red-lines, and specs with Invision or something similar.

And again let me make sure I drive this point home. Your competitive advantage as developers doesn’t come from the tools or languages you can code with. They come from your problem-solving skills — knowing how to code is just the table stake.

Then again maybe one or two of you don’t care about user experience or design thinking. And you are only here because you want to know where can you download copyright free images from the internet. But rest assured I have something for you too.

So here are those links for the design templates, color pallets ideas, and free photos.

To recap the keys of this presentation are:

• That you are not the user. You are not the final customer of your products. Start by empathizing with your users.
• Focus on the fundamentals, and principles of design.
• Having the discipline of a design system gives you all the creative freedom you will ever need.
• Process over tools. Because that is your real competitive advantage!

This is it, my name is Irving Rivera and I market and sell to personas — but I design for the jobs that need to be done.