how
design thinking
facilitation
UI Design
photoshop
when
several
where
several
utilizing stylescapes as
co-creation process in interface design
Stylescapes are an excellent tool that I usually use at the beginning of a project. With this tool, I can create a clear and cohesive visual representation of the final product before even starting the layout, which helps avoid rework, increase design process efficiency, and improve user satisfaction.
Let me explain what Stylescapes are and how I use them in interface design, including the benefits of aligning stakeholders and clients in a co-creation process.
Furthermore, I will show various examples of when I have used Stylescapes, so I won't detail the final result completely.
managing expectations and
why I use stylescapes
When I start a new project without a design system or when I'm responsible for a new visual approach for a system, app, or website, there is a gap that emerges at the beginning of the project: expectations.
It's not an easy task to turn a visual thought into words. Usually, at this point, after the UX phase is defined, I start a conversation with a client or stakeholder. There's a certain level of expectation regarding the final result, even if it's not entirely clear yet.
During this phase of my projects, I begin implementing a methodology called Stylescapes, which aims to make this "transformation of visual thinking" easier for my counterpart.
The visual tool is simple: present a mood board containing colors, typography, icons, images, texture patterns, and other elements before the start of the visual design process.
But where the tool truly shines is during facilitation. I usually split it into two days:
-
1st day: Meeting with the client or stakeholder to define a "desired future state." Through co-creation and design thinking, we can envision the product launched and achieving all its objectives.
This helps us find the right words and, most importantly, adjectives that can describe the "feeling" the product conveys.
-
2nd day: after the first meeting, I spend some time gathering visual material that will serve to exemplify the previous conversation
I view this as a process of "translation" of a foreign language because I'm visually translating the meanings brought up in the last meeting.
Here, I create some variations of this representation because something may have a different meaning for me. With the versions ready, I meet my counterpart for a second round, where I present the variations. I aim to check if any of them achieve the goal or if they need adjustments.
Note that the goal is not just to create a mood board that helps me with the visual construction of the artifact, but to allow the person who requested it to see it even before the layout process begins. This creates an early validation process and puts me on the same page as the person.
Even if none of the versions are pleasing, the objective is achieved because I have inputs and tangible feedback to work with and iterate upon.
Below, I will exemplify with some cases:
conclusion
Aligning expectations with future desires makes the process more enjoyable for both the designer and the client.
A methodology that can save time and money is always welcome. However, as a designer, I believe the main point is the additional trust that clients/stakeholders place in me after seeing the result of Stylescapes in the final product.
This trust streamlines various other development stages and even opens doors to new projects.
step by step
facilitation:
The first step was to help stakeholders find common ground for the desired future of the company's visual identity. As a facilitator, I used a methodology that allowed them to imagine a "desired future" and translate it into words. After a good discussion, we arrived at: vibrant, humanized, and simple.
Creating the mood boards:
After the facilitation above, it was easier to recognize some paths that the new communication and interface of the institutional website could follow. The concept of "vibrant" and "humanized" was mainly addressed as a visual aspect, while "simple" was related to the "tone of voice."
Choosing:fter presenting several versions, there was a clash between the two models below. Notice that, despite being "static," I tried to bring movement with the graphic elements, humanization with the use of photos, and simplicity in the tone of voice. The two concepts were quite different, but they could represent the chosen words very well. After further discussion, it was decided to proceed with the second option (blue).
result:
It's essential to mention that the mood board uses references created for other projects, so one should not use copied elements entirely as is. However, even in the mood board, some elements were created from scratch to better exemplify the idea.
When I presented the final result of the website, I could see how useful Stylescapes truly are: it was approved right away. Being able to align the "desired future" with stakeholders beforehand and not solely relying on an exploratory process, kickoff, or even a briefing, was crucial to achieving the goal. Moreover, they followed a path they probably wouldn't have considered without this facilitation.
how
facilitation
UI Design
when
2018
where
agencia santa fé
1st case - implementing stylescapes for a
rebranding of an agency's website
This was the first time I applied Stylescapes, and it came at the right moment since the agency I was working for was seeking a new visual positioning but was facing some difficulty defining it.
step by step
Facilitation:
Once again, I started by gathering information. In this case, I directly contacted the marketing manager to identify the client's aspirations and future desires.
Creation of Stylescapes:
For the Stylescapes, I developed three highly distinct versions, all in line with the client's wishes. It was fascinating to observe how three such different options could address the client's needs.
Selection:
Presenting three different concepts generated a very productive discussion during the decision-making process. Having three options allowed one to be eliminated right away, focusing the discussion on the two most distinct options. The decision to present three options was intentional and facilitated the decision-making process. Ultimately, the darker-themed option (third option) was chosen, with just a few adjustments.
Final result:
After the selection, I moved on to the UI design of the new e-commerce and the institutional page. Stylescapes proved to be a powerful tool in helping the client choose the desired future for the interface, and at the same time, it also greatly assisted me in the decision-making process for colors, typography, and tone of voice.
how
facilitation
UI Design
when
2020
where
proline range hoods
2nd case - using Stylescapes for an
international client
This was my first experience applying the Stylescapes methodology for an international client. The client was seeking a fresh way to present some changes within the company and wanted it to align with their e-commerce identity. This project is not available to everyone as it was part of a seasonal strategy for the company.
step by step
Facilitation:
As a facilitator, I employed the desired future methodology to understand the client's aspirations for the brand's visual appearance in the e-commerce. During a meeting with the client, we accessed reference websites together to categorize them collaboratively.
Modboards Creation:
The modboard was organized in separate folders on Google Drive, ensuring that all stakeholders had access and could provide their input.
Choice:
The decision-making process involved three distinct folders, each approaching the visual aspect differently. We highlighted details such as typography, spacing, photos, white space, and navigation elements. The main reference selection was organized in a fourth folder.
Final Result:
With the selected reference images, I used them as a basis for the redesign, creating a clean and modern version with a focus on navigation.
how
facilitation
UI Design
when
2021
where
shoestation
3rd case - sing Stylescapes for
an e-commerce
This was a redesign project for the online store Shoestation, focusing on sports articles, especially sneakers. Due to the limited available time, we opted for an express version of Stylescapes.
Besides being a great tool, I find stylescapes very enjoyable to apply and facilitate. I have the same feeling with design sprint, how about reading about it? Or would you like to see how I participated in structuring a design department?