Creating a new brand for dance group Diversity

Diversity (SYCO)

Branding | Art Director | Personal Client

Overview

I had the opportunity to work with global music sensation Tinie Tempah and his manager Dumi Oburota, inquiring about the enhancement of their brand and website for a more professional appearance. Taking charge of the UX and UI design, I spearheaded the transformation of the entire Disturbing London organisation.

This encompassed crafting artist websites, overseeing development, producing print materials for events, launching and curating social media platforms, as well as designing and managing the digital store, Art direction and services.

Spanning a freelance commitment over the course of five years, this occurred outside of my primary work hours.

Creating a new process for the design and delivery of the design system

Stakeholders pivot on new ways of working

During the design system migration, I conducted Figma workshops to prepare the Vodafone design team for efficient task handling. The workshops showcased Figma's collaborative potential, real-time editing, responsive design, and seamless integration with existing tools.

I addressed stakeholders' concerns with concrete examples of Figma's impact and influenced them to adopt it as the exclusive design handover tool.

The process was broken

The state of Vodafone's design process and tools was in disarray, necessitating a comprehensive overhaul. To address this issue, we embarked on a rigorous investigation to understand the root causes behind the mismanagement of tools and processes. It became evident that the existing tools were being misused or underutilised, leading to inefficiencies and hindrances throughout the design workflow.


In response to these findings, we developed new propositions aimed at streamlining the design process and optimising the tools for greater effectiveness. One critical proposal involved transitioning from using InDesign for documentation to leveraging Figma, particularly for the benefit of the development team. This shift was essential in fostering a more collaborative and agile environment, facilitating smoother communication and feedback loops, and ensuring that the development team could seamlessly integrate design elements into their work.


By instigating these changes and realigning the design process with more suitable tools, we sought to enhance productivity, promote cross-functional collaboration, and ultimately elevate the quality of our design output at Vodafone.

Project plan

Ideation workshops

How we addressed the problem

Using the design system

Setting up a simple plan for the client is always necessary, it sets a clear vision for the project deliverables and key meetings. It also gives you a structure to work to which was agreed before the workshop took place.

I organised a workshop with the team at the Diversity dance studios in London, where we came together to talk about how they wanted the brand to represent them as a group, how we could use this for tour material and eventually a clothing range.

We started by brainstorming on what Diversity stood for, how they want to appeal to the audience and what core words could be taken through to building the brand.

By importing the screens as PNG format, were able to save space on the files and also work from pixel perfect designs, the Figma import does not always show the true design, such as padding and fonts.

This also kept the file super clean, there were no ghost components in the background and everything was working as it should. Moving forward all 32 journeys used this method successfully.

Once the design system was around 80% complete, our focus shifted to creating new journeys. We incorporated additional components for these journeys into the system and documented them for developers.

This allowed us to ensure that the new journeys seamlessly integrated with the existing design system and provided a consistent and cohesive user experience across all journeys.

Building the design system

Once the process of mapping out the journey was completed, the team focused on integrating essential elements from past designs, ensuring their applicability to future journeys. Simultaneously, we dedicated considerable effort to refining fundamental aspects such as typography, colour schemes, navigation, and auto layout spacing.

To maintain coherence and progress, the team convened weekly to deliberate on the prioritisation of key components for inclusion in the evolving design system.

How and why?

During the design system migration, I took the initiative to conduct comprehensive Figma workshops and training sessions three times a week. The primary objective was to ensure that the Vodafone design team was adeptly prepared and well-equipped to tackle the upcoming tasks with confidence and efficiency.

After the initial training sessions, I then continued to support all members with a weekly Figma catch up. This regular meeting allowed anyone who had issues with components, auto layouts, or general questions on the ways of working to seek assistance and guidance from me. It was crucial to maintain consistent support throughout the project tasks to ensure that quality standards were upheld and deadlines were successfully met.

Challenges and how I overcome them

Challenges encountered on this project revolved around bringing the junior designers, who were deeply engrossed in utilising sketch, up to par. Stepping out of their comfort zone posed a potential threat to the smooth progress of the project. Recognising this, a significant decision was made to provide extensive support and regular one-on-one sessions for the junior designers. This proactive approach aimed at fostering their confidence and equipping them with the necessary knowledge to significantly elevate their contributions within the squads.

Online and offline training

Challenges encountered on this project revolved around bringing the junior designers, who were deeply engrossed in utilising sketch, up to par. Stepping out of their comfort zone posed a potential threat to the smooth progress of the project. Recognising this, a significant decision was made to provide extensive support and regular one-on-one sessions for the junior designers.

This proactive approach aimed at fostering their confidence and equipping them with the necessary knowledge to significantly elevate their contributions within the squads.

Migration basics

During the training, we focused on creating mini-documentations for the new ways of working. This documentation served as a valuable resource for understanding the basics of migration, enabling junior and inexperienced Figma designers to follow a structured and clear process. By breaking down the complex tasks into simple, step-by-step guides, we aimed to empower our team members with the knowledge and confidence to embrace the new workflow seamlessly.

The mini documentation not only provided a roadmap for the migration process but also served as a reference point for continuous learning and improvement in utilising Figma effectively. We believe that by equipping our team with these resources, we can foster a collaborative and supportive environment where everyone, regardless of their experience level, can contribute to the success of our projects.

Sprints

Our usual sprints would typically last for 2 weeks, with the occasional sprint extending to only 1 week based on the project's scale, urgency, and the specific demands from our stakeholders. Given that our teams were strategically dispersed across Europe to leverage specialised talent and local market insights, we factored in different time zones for our daily catch-up meetings and end-of-sprint reviews.

This approach ensured seamless collaboration, efficient progress tracking, and the ability to swiftly adapt to evolving client needs and market dynamics.

Team retro

After every sprint, each team would collate there thoughts on how the sprint went, everything down to communication, problems, what actions we need to take and also what went well.

This such an important part of working during a massive project, the earlier you can iron out the faults, the better the process will be in the long run. Also it’s about keeping your team happy which is must.

All findings would then be played back to the account director.

Conclusion

The design system has brought big benefits, like saving money and making it easier for designers and developers to work together. Using the same components has made work faster and saved time and resources. This not only saves money but also helps teams work better together.

The design system has been really important for improving how designers and developers talk to each other. By using the same language and design elements, it's easier to share work and there are fewer misunderstandings. The design system has also helped make collaboration better, resulting in better end products. In the last two years, the design system has saved about £4 million for Vodafone. This has not just made work more efficient, it's improved how different parts of the organisation work together.

Time to reflect

What went well

Really happy with the way I have introduced a new way of working for vodafone, especially upskilling the vodafone creative team in Figma.

What problems did we face

Partners holding us up with sign off for figma, I produced a pack to help them understand why we needed to push the migration through.

What would I improve

Better communication between Partners and design, It was always a huge task to bring them onboard to sign specific requests which could delay targets.