VIOOH’s strategy to bring our product vision to reality

In this month's edition of our newsletter, Lisa, Senior Product Designer at Source, shares insights from her recent collaboration with VIOOH (a leading premium global digital out of home supply-side platform launched in 2018 by the JCDecaux group) on transforming their digital out-of-home campaign management software.

Can you tell us a bit about VIOOH and your work with them?

Over the period of a year, the Source team and myself have been fortunate enough to collaborate with VIOOH, a pioneering company offering a digital platform that links advertisers with physical, out-of-home advertising space owners, intelligently managing the buying and selling process.

Together, we've been working on enhancing the user experience, refining the user interface, and shaping the implementation strategy of their cutting-edge digital platform.

It sounds like an ambitious project. What were the goals?

The initial objective was to establish a unified vision, enabling the enhancement of their current offering while seamlessly integrating newly developed features, as well as providing a visual refresh. This involved consolidating three existing tools, each serving a different user demographic.

We then continued to work with VIOOH to bring the project to life, creating a design library and initiating the implementation process, collaborating directly with the product team and VIOOH's skilled design team.

What was your overall perspective on this project?

For me, this was an exciting prospect as we had the freedom to create the vision piece focusing on the ideal user experience, having the time to understand the product and build convictions, and then the satisfaction of being able to solve the puzzle of how to bring that to life, a task that is often taken in-house.

Design to Code

With Source in charge of design, and VIOOH responsible for development, can you walk us through the challenges of Design to Code in such an environment?

It is common for agencies to provide a vision concept, however, the biggest problem is it often falls short on implementation.

While evident factors such as time, finances, resources, and resistance to change can play a significant role, there's one aspect often overlooked: a company may not fully grasp the vision behind the agency's designs in full detail.

This can result in misinterpretation or the dilution of the original concept during the implementation phase.

How did you avoid misinterpretation or dilution of the envisioned design with VIOOH?

To address this problem, two approaches can be taken: provide extensive documentation or maintain an ongoing relationship between the company and the agency.

In this case, we continued to work with VIOOH to begin translating the designs into code and developing a transformation approach together.

So after a short break, we started having thorough discussions and carefully planning how we would convert designs into code.

Can you tell us more about the planning process?

We planned a series of screens that introduced changes in manageable steps, or 'releases'. Each release aimed to seamlessly guide users through the evolutions, avoiding any steep learning curves.

Following discussions with VIOOH's front-end development team, these screens were then fine-tuned to align with their roadmap and preferred working practices.

It seems you had to make trade-offs in design to consider constraints and priorities. How did you approach that?

Yes, in this phase it is a challenge not to be a perfectionist. I can see how, whilst a single piece of text or component can play a role in shaping the ideal user experience from a design perspective, technical constraints or product priorities may not always exactly align.

Nonetheless, I found a lot of satisfaction in collaborating with the product and front-end teams to find the most suitable solutions. These discussions were not only interesting but also involved individuals enthusiastic to explore various options with me.

You mentioned resistance to change as a common reason in unsuccessful design implementation. How was the buy-in with VIOOH’s product, business and other teams?

VIOOH is an ambitious company with employees who readily embrace advancements and new ideas, and importantly, are involved in creation processes. Consequently, there was minimal resistance, with the sole requirement being that the changes didn't disrupt the established roadmap.

This level of buy-in from the company and teams is refreshing and proved to be a time-saver, allowing the transition to rapidly start.

To move from design to code, were you able to work with the existing stack or was it required to build a new front-end from scratch?

We worked with VIOOH's existing technical foundation as rebuilding the front-end from scratch is costly and time-consuming. We worked with the current frameworks, aiming to gradually update the code over time.

Collaborating closely with the front-end team, we understood the current frameworks, component structure and future workflow preferences. This enabled us to craft an efficient implementation strategy that avoided the need to start again.

Release 1 – The Small Things

Can you share some specific examples of the work done in this first release, which you called The Small Things?

Adjustments were made to aspects such as the colour system and typography, along with refining specific areas of the product for enhanced consistency.

The initial release focused on establishing a robust foundation by removing prominent errors, ensuring that subsequent design and development efforts wouldn't be hindered by existing issues.

The outcome is a more readable and user-friendly interface, complemented by cleaner code that will save time for the VIOOH team in the future.

How did this first release with these small adjustments go?

Although we were sure that our transition planning logic was strong, it was a challenge to get started with the first changes, in a consistent way that easily matched the design system, so I had to find the right process.

To overcome this hurdle, it was best to just get started and try to map the changes in detail until a fitting solution emerged. As a designer working closely with a client in moments like this, it can feel uneasy, however VIOOH’s working environment was very conducive to this dynamic process.

How the small things have a big effect

We can use the example of colour system management to demonstrate how even starting a transformation project, with a small piece of the puzzle, can have bigger implications.

For those who are not familiar with the topic, what specific aspects does colour system management entail?

By this I mean the approach to constructing the product's colour palette and how this is implemented into code and utilised.

This involves choosing between various frameworks such as Tailwind's scale of 50 to 950 or MUI's scale of 50 to 900, among others, and making sure this is implemented logically into the codebase.

What problems does a colour system solve?

Creating a structured colour palette and a clear process greatly simplifies management for VIOOH. Providing structure is important as code and design libraries often become somewhat disorganised over time, therefore this prevents that from happening.

Using a framework gave the designers a structure in Figma, and integrating it cleanly into the codebase ensures it's developer-friendly.

Consequently, when a new designer or developer joins the project, they should grasp the rationale behind the choices without needing to ask numerous questions.

What are the benefits for the current team working on the product?

We also see significant advantages for the current designers and developers, as effective colour system management reduces miscommunications between the reference design and the final product.

Agreeing on a colour framework, using the same consistent naming conventions, and comprehensive documentation ensures that all teams are 'speaking the same language'. This has already led to a more streamlined workflow with less back-and-forth.

The knock-on effect is that the accuracy and consistency of implementation has improved, as VIOOH's designers know what to expect for the outcome, and developers have a clearer understanding of the documentation, therefore knowing precisely what needs to be built.

And how does this streamlined workflow benefit the business?

For the business, the immediate advantage lies in the accelerated implementation speed. However, equally crucial are the benefits of future-proofing and scalability. As the product grows and evolves, robust colour systems management can easily scale to accommodate new features and designs, which can be easily documented and tracked.

Release 2 - The Medium Changes

After implementing these small adjustments and solidifying our workflow, we progressed to the implementation of new features and the transition to the envisioned user interface, a phase we called The Medium Changes.

How were these features determined, and what process was followed for their implementation?

The features were defined by the roadmap and the requirements of both the product team and the business. We analysed these requirements and compared them with our transition plan, and very importantly the current implementation, deciding which changes made sense at this time.

Detailed screen designs were crafted, with close collaboration between the design team and the front-end developers to navigate any constraints. Following thorough review and approval, they seamlessly transitioned into development, with ongoing support provided by the design team.

Once the transformation process had been defined and set in motion for both small and medium changes, as agreed, Source exited the project.

How is VIOOH continuing the transformation independently?

This collaborative period during implementation facilitated the smooth exchange of knowledge, providing VIOOH with clear guidance to continue the transformation with confidence.

Currently, the VIOOH team is methodically applying this process to each new feature, steadily progressing towards the product vision while ensuring minimal disruption and respecting the constraints and needs of each team.

Release 3 - The Big Changes

And finally, can you share a bit about the last release, The Big Changes?

The final version of VIOOH's product will incorporate substantial new features. By this stage, the product will have progressed according to the transformation plan, allowing the team to seamlessly integrate these innovative additions into the interface.

Furthermore, VIOOH will have expanded their component library, enabling the swift incorporation of required pre-built components during the coding process for these features.

To conclude, what were some of the key takeaways for you?

Not all companies undertake such transformative projects, but this carefully crafted and bold approach has unified the product vision, encapsulating ideas from across the company.

It has fostered internal enthusiasm, improved the quality of implementation, and instilled confidence from stakeholders and clients alike.

It's a pleasure to see Source's design applied in this manner, and we're eager to witness VIOOH's continued success.