How to make the leap from creating a design project to a design ecosystem in 20 days

Would you like to know our secret to transforming a regular design-process into a visual brand ecosystem that will save time on development as well as decrease costs of all upcoming visual and marketing brand projects?

The visual eco-system is a powerful foundation that could help you with the above-mentioned points. With a single project example, I’m going to share with you how a designer should perceive their own work and also the ways how design studios are able to secure long-term contracts with their clients. This write-up is all about work ethics, methods and processes. With this design process, I want to dish out useful knowledge to everyone involved in the design.

So, who is this write-up for?

Stakeholders

Often enough, I face confusion coming from our partners who lack the understanding of how exactly we work around our processes. This ambiguity then conflicts with our ongoing partnership and collaboration. I hope that this time around, after completely exposing this design process in detail, it will clear the “fog of war” and finally help with creating a common ground between stakeholders and designers. You will also discover a better-grounded and more mature approach to a design in general.

Individual designers and design studios

The information relayed in this think piece will likely sound more familiar to you. Nevertheless, I’m not stating that these design processes and ethics are of a golden standard. I can confidently state that they are feasible within our team’s working environment and built with a fundamental, and more importantly, functional set of tools. It will be a big pleasure for me if you consider applying the provided information, and do decide to change your team’s internal processes or at least the attitude with your future upcoming project.

Raising awareness. Get to know your upcoming partner.

The beginning of a working relationship between a design team and client starts with a brief mutual greeting and introduction. It then quickly escalates into a problem-related conversation and how design here can be a solution. Nothing out of the ordinary, just general stuff. However, this stage is not exclusively a conversation about your partner’s problems. The first meeting sure feels thrilling with each side estimating one another’s professionalism and suitability. Each party has its own personal criteria.

Personally, I’m a strong believer of “internal values” and the fact that both solo design professionals and design teams possess these as part of their culture. After several years of work in the design field, I’ve managed to formulate our internal values. Now, when discussing any project with a partner, I try to deliver these ideas in every way possible. Such a method of checking for these criteria helps me to decide whether I’m ready to get involved with a particular project.

A design studio is not busy hands.

A designer is not a copy machine. Therefore, any professional individual or studio should strive for such self-positioning. This way, a client can’t simply request a team to copy someone else’s solution. In my opinion, a keen eye, experience, imagination, vision and braveness always diverge from the “busy hands” idea.

And design studio is not there to close gaps.

Sometimes you are requested to deal with the following problem: “We need to make it prettier, or at least to pull off our competitors’ level”. Such tasks have nothing to do with the actual business goals. I personally am a fan of projects that have a practical approach, those where design works for the sake of metrics and serves as a foundation for product’s eco-system.

A design studio does not partake in the competition.

If someone walks in the door wishing to compare your design studio with tens of other players on the market — watch out. Personally, I would think a hundred times before accepting an offer. Keep a neutral position instead, like Switzerland. Stay somewhere aside, loyal to your own precise processes and strong design recipes.

?A design studio is not busy hands, it’s not there to close gaps, nor does it partake in a competition?

Values act as an internal filtering machine, helping to start cooperating with those who you can relate to, as well as to cast aside the rest. To avoid conflicts and misconceptions, you should be clear on the working purpose by providing the reasoning on why you and your aspiring client might not be a good fit. A good form of response would be recommending an alternative, perhaps a different team that can address a particular problem by providing an appropriate solution.

Does this sound like an obvious way to lose a potential client? This might surprise you, but later down the way, these same people will most likely come back to you with a job offer. This time around they will be full of new ideas and an actual understanding of the design. Such cases often result in long term relationships.

Understanding the core of a brand, and the goal of a design.

If you’re skillful enough, and stakeholders share your vision and values, it’s time to move closer to real problems. At this stage, two documents called “Lean Canvas” and “Brand Canvas” mark the vector direction for an upcoming project and determine its time frames and successful execution. The power here lies in its simplicity. Between two designers, the one asking questions and preparing the two business-model documents will grasp the project’s essence much faster. Another designer which decides to dive into the endless documentation is the one who will end up biting the dust.

Lean Canvas gathers information about the core of a product and at this stage, the aim is to gain a complete understanding of a product. It answers questions such as: Why do people need this product? What would you list as the top problems of your clients? What metrics are stakeholders trying to influence? Information derived from Brand Canvas will be useful for a design team to find out the following: How stakeholders see their product from an emotional standpoint? How is it being positioned? What tone of voice is being used in customer communication?

But before you start, there are a couple of questions worth asking your partners:

Why have you decided to do this project now?

Such a question sobers up your partner and makes him wonder about the necessity of the whole deal. Sometimes it may sound rather unexpected. There were occasions when people were starting to doubt whether the design was their number one priority and wondering if they really should come back to it later. This question, just like sticking to your values, will help to focus on legitimate customers. Given the provided honesty and the desire for working with clients aware of their actions will return you immense rewards in the long run.

What do you need design for? Do you really need it?

The main question of the three. It helps to see if the stakeholders are mature enough about their intentions and design-driven, i.e. if in reality they want to reach their goals through design, not just feel the high from a working process.

How is success exactly quantified?

So, how is the whole process measured in terms of numbers? What metrics should be used to precisely determine the work getting sucked up into the guessing game of “like/not like”? It’s pretty simple. The design must function as it should, while partners should aim at a certain destination, without which it may turn the whole process into an everlasting nightmare. If stakeholders can’t seem to find reasonable borderlines with their goals, the purpose of a design team is to help them determine it by asking the right questions and providing suggestions.

A general client inquiry: “Help us make a quality design leap”

Straightly speaking, a general cry-out from most of the clients reaching out is the following: “Help us make a quality design leap”. This problem prevails even if the product team has its own designers on board. Let me explain why it exists.

One of the main values of an internal team lies in a deep knowledge of their product. For a product design team, it’s often difficult to get a global picture about a design, given the fact that no one is involved in any experiments or additional side-projects. With a lack of hands-on experience, their everyday experience stays on the theoretical level. This drastically affects the probability of outrunning their competitors through design. It even gets worse by the fact that these brands do a complete design rehaul once in 3–5 years.

On the other hand, just like us, other independent design studios keep creating fresh designs every 2 or 3 weeks. Because of this, their view of the business part is indirect, therefore keeping their sight clear, even if they focus on one particular area or industry.

Being on the verge of the design becomes the basis of their existence and professionalism. In other words, they externalize trends in real-life scenarios. However, they have to do it purposefully. It’s not about creating an ephemeric project that’s good for one day, but rather picking the best out of trends and combining it with proven design principles. This approach helps the design to stay relevant for many years to come.

Moodboard. A secret to a design process with no revisions.

After outlining the goals, the design team pairs with stakeholders to extract the essence of an upcoming visual image. Mood board is the main instrument that helps designers to do that. However, not everyone is clear on the purpose of this tool. It shouldn’t be mismatched with something that simply matches pictures to the mood of a client. A Mood board is a place where stakeholders’ business meets the keen eye of a designer. The designer’s careful approach to this matching process is a success-recipe for executing a project without endless fix rounds. One of the essential skills of a designer is to compile a worthy Mood board.

Moodboard is a place where stakeholders’ business meets a keen eye of a designer

A designer’s first step is to analyze the niche. Things like dominating colors, structure, patterns of the same niche products, usage of space. I can call it an “industry nerve”. It’s important to correspond to already formed traditions and metaphors when creating visuals for a product. By disrupting a market and bending a line with creative aggressiveness you have a chance to encounter a miscomprehension from a user audience. This particularly applies to those products within the low to mid-range tier. Aim for the best interface, which is always the most familiar one for the end-user. Leave dramatic changes for the top-tier players on the market.

After a careful niche analysis, a designer pulls out one of his main weapons, which is a keen eye or visual observance. He then goes on with mixing and matching visual assets, creating a product picture following his visual preferences. After compiling everything together, the Mood board is ready to be presented at a client’s meeting. The following act reminds me of a quiz fused with the Rorschach test. A designer finally proceeds to a demonstration of the few palettes while asking the following: “So, what do you feel about this? Chop-chop, don’t overthink it, I need only your emotions!”. He then asks the same question while showing a set of photos, fonts, illustrations, and interface elements. The received immediate client feedback lays out a certain selection of emotional responses which is usually hard to come by when asking for their feedback in other scenarios.

A small note. Ideally, it should be a single person from the client team performing the evaluation and stating decisions about the visuals. In another way, you will end up with an endless discussion and debate, turning the activity into something controversial to a designer. Let’s be honest, it’s tough to respond to two opposing opinions, isn’t it?

Stakeholder’s tastes are then smashed against designer preferences. Reaching a harmonious state matters most in the process of creating a Mood board. A careless or carefree attitude to the client’s vision will provide you the following response: “Congratulations on ruining my expectations. You did everything you could to make the whole thing feel wrong.”. This also works the other way around, when a designer tries to pursue the client’s tastes a bit too hard, which results in endless copying. In that scenario, a designer’s input is lost in the abyss, with the only benefit of “hands on the wheel” driving this activity forward.

There is definitely plenty of designers out there that are great with copying, besides, there is even a demand for that out in the market. I would agree that this one of the best ways a person can learn, especially when starting. But a mature designer is the one who can create and incorporate some personal input into a project.

Functionality and prototypes

Once both parties have matched their views and opinions, the next step would be for a design team to start creating mock-ups. By the term “mock-ups” I mean the raw functionality. The ultimate goal here is to make a full, clickable project prototype. At this stage, it’s important not to miss out on any details that were earlier covered in the Lean Canvas.

It’s generally a product owner or its team that provides at least first versions of either drawn or digital prototypes. By seeing a unique idea revealed by product stakeholders or their team, designers are able to quickly dive into creating the project’s brainchild.

If at this stage a design team starts mixing the functional part with a visual one, it will most definitely shift their focus away from what matters most, which is how users should interact with a product. Would they feel comfortable using it, or be able to see the logic and not easily be confused by the interface? Would they be able to get back to the content after being distracted from the screen? Would it be possible for them to use it intuitively as well?

Back to visualization

Let’s come back to a previously discussed visual part, where I was talking about the validation process between a stakeholder and the design team. It’s now time for a design team to incorporate those visuals onto prototypes. The goal here is to not forget about the Mood board and also to spice it up a bit with some individuality. A product should feel distinct, but at the same instance, it should be well associated with its niche.

At this stage, it’s all about zoning a product.

Different zones should have a different tone if there is a need for such differentiation. For instance, if we take the pair “App-Website”, then the website is the place that will speak “louder” visually-wise. On the contrary, that loud visual voice in the App will only distract a user from getting things done. Keep this principle in mind as it will play a pretty important role in the future visual eco-system.

It’s worth mentioning revisions, one of the designer’s pain points. The magic number here is 3. The ability of clients to make changes to the project should be limited to this exact number. It doesn’t always work for a 100%, but still, this limitation helps a project to go smooth. Stakeholders, knowing that there is a fixed number of revisions, will carefully follow up with their remarks which helps to restrain endless commenting on a daily basis. Therefore, a design team can quickly deliver the final result in just three iterations hence reducing that extra labor for both parties.

Now it’s only developers that stand in between the mock-ups and the design embodiment for a user. Let’s get back to the beginning where I’ve talked about a leap from a design-project to a visual eco-system. I’m going to share with you how designers can enter a front-end developers’ field and help them with their design implementation.

How design becomes something bigger

To make the design look as stunning as the designers’ template on both web or mobile versions it then is turned into a code. Not a single developer will be happy if he has to deal with the following:

Strong design teams look further ahead and put much more work into the process. They deliver designs containing all the components according to the Atomic Design guidelines. The smallest parts, called atoms, are aligned on the sheet and turned into molecules, organisms, and patterns. To find and replace things easier, provide clear differentiation among components, all names are standardized in a uniform way often referred to as naming convention. To preserve a balanced look, a fixed grid is applied across all pages, components’ dimensions and spacings can be divided by a shared multiple.

This is how a real order looks like:

It’s not only about caring for your fellow front-end developers. It’s more about helping your project get on its feet faster, meaning that it will finally start driving sales, gaining users and their interaction. It all results in an obvious and tactile favor. Utilizing this approach in the future perspective will noticeably lower labor for front-end devs, as well as the final cost of all upcoming projects. That’s why you need a design system to keep this process at a constant.

Speaking on a technical level, such a system is useful because it lets developers find components created by a design team with a very little distress since they’re all stored in the library and later easily apply them throughout all the following sprints. The same goes for newly created components and once a designer creates and adds them to a system — they’re there, ready to be used by a developer. Also, a designer can reimagine some of the existing components, but the principle stays the same. Nice and easy to work with.

Brands with such systems become stronger on a global scale. A brand becomes holistic and doesn’t scare off the audience by abruptly changing its appearance across different products or after employing new updates. A well thought out design system connects not only devs and designers but it penetrates through each company department. Therefore, such team and design professionalism help stakeholders save money and time and ultimately builds a trustworthy base for future contracts and the creation of similar systems.

Let’s wrap it up

So, this is how I see a real partnership between stakeholders and design teams in my universe. It seems like nothing revolutionary: everything is built on top of usefulness, attentiveness, and cooperation. Sadly, not every team decides to follow this process. I will leave this with a remark that I would be more than happy if someone could find the inspiration and transform his mindset after reading this.

To stakeholders. When you start your journey with designers or design teams, you might notice that there are all kinds of inquisitive questions from their side. If they are trying to reach design goals it’s not to show how prestigious they are. If designers don’t proclaim their tasks above yours, consistently follow through each stage and are in close connection with your team — they are acting in a way that is beneficial of your product.

A couple of questions I’m eager to find out. What do you think about design systems and their usefulness? Share your experience and tell me what problems have you faced throughout working with design teams? Maybe you have friends that suffer from design problems? Feel free to ping me and let’s discuss the root of a problem, and I’m sure, together we come up with a solution.

To designers. Did you find yourself something new and useful after reading this paper? Could you tell me how different is it from your usual working process? Maybe there’s something you would recommend?

We live in a big world and it would be no surprise to me if I receive comments from other designers or from internal product teams refuting my point of view laid out in this process. ??

Wonder about something? I will be happy to respond to each and every wanderer.

Leonid Stern / [email protected]