Aligning vision and designing at scale

We first immersed ourselves in the live Zego product, already in use by their customers, so we could fully understand what they were experiencing, and what Zego expected from us. Zego had an established research team and hundreds of existing findings for us to absorb and draw insights from.

We analysed their direct and indirect competitors, and their approach to showcasing their service offerings. We also looked at their approach to branding, tone of voice, design, user experience, and their USPs and used our findings to inform our recommendations to Zego going forward.

We then explored what was and wasn’t working for customers and the internal Zego team. We conducted one-to-one stakeholder interviews to understand what each team member wanted the Zego product to do and why, as well as any challenges they were facing. Individual conversations yielded richer information as each stakeholder deeply reflected on their specific part of the business in depth. These conversations led to fantastic insights and fuelled the next part of the project.

Workshops

We used the information we gathered in the stakeholder interviews to prepare and facilitate a series of ideation workshops to help solve the problems that we uncovered.

By prioritising themes that were raised during the interviews, we had a good idea of what issues needed solving, and the positive impact those new solutions would make to the business.

We rewrote the problem statements as “How Might We” statements, and had the teams ideate possible solutions.

These collaborative, fun and informal sessions gave us plenty of ideas to work with and, by utilising the dot voting method, a clear vision of what the North Star product needed to resemble started to take shape.

‍

‍

Producing the north star

By leveraging insights from team interviews, workshops, and idea collation, we crafted the future vision of Zego.

We applied the business’ needs to our thought process to develop a unified customer experience, merging their B2C and B2B apps into one powerful product.

Our user-centred design approach solved the issues they had around onboarding new customers by making their conversion funnel as simple as possible and we introduced AI ID-checking to streamline the flow even further.

To empower customers with information and transparency, we added a price indicator early in the journey. As users share more details, the price becomes increasingly accurate which encourages customers to complete the journey and ultimately convert.

‍

‍

Handing over our concept

Through close collaboration and transparent communication with the Zego team, we produced the North Star which solved the challenges that our stakeholders previously faced.

Once the North Star was created, we took all stakeholders and Zego team members through the work we had done, so we could ensure that what we designed was fit to be handed over and incorporated into the current and future roadmap of the overall Zego product.

We embedded ourselves within the App team to help them implement and use the Design System (see more below) we created, and test out some of the hypotheses from the North Star concept to see how they would work in the field. Because we provided great value in identifying challenges and ideating solutions into practice, Zego embedded our team into another project area.

Delivering results

We worked with the app team to run some early A/B tests, validating some of the core concepts of our designs. Very quickly, we proved that our approach had a conversion uplift of 15%, a huge win for Zego, and absolutely in line with our hypothesis.

“Thank you for the support with the onboarding flow - it’s been really useful. We’re now in a place where it’s all been shipped to have a look at user research and really test that flow. Brilliant!” - Alix Lauzon, Product Manager

Design system

To help Zego iterate quickly and scale, we also built a comprehensive design system housed within Figma. With everything covered for common use cases, it would not only bring together the interfaces of their products across platforms but also work as the Source of Truth. This provided a reference point for the Zego team going forward.

Collaborating closely with Zego’s teams, we identified what elements worked for the brand while keeping the system accessible and developer-friendly.

Establishing standard operating procedures for managing and maintaining the Design System was essential to its longevity. We ran a series of training and design-along workshops with the Zego team to ensure that their designers and engineers were happy with their new tools and understood how to use them correctly. This immensely helped to further ensure buy-in from the whole Zego team and that all designers, engineers and product people felt that the Design System was truly theirs to use, contribute to and evolve.

We stayed aligned throughout the process because of the transparency in communication between the YLD and Zego teams. We encouraged early use and stress testing components to discover flaws, experimented with replacing older design outputs with new components to discover any missed features, and maintained seamless alignment across all updates, changes and additions to the Design System.

Atomic structure

These stages were defined as follows:

• Atoms: The basic building blocks of all components. (For example: Spacing or Iconography)
• Molecules: Groups of different atoms used to create a single component. (For example: Alerts or Tabs)
• Organisms: Larger components comprised of different atoms, molecules or other organisms. (For example: Headers or Footers)
• Templates: Pages that order components into predefined reusable layouts. (For example: Profile or Onboarding Pages)

We added further structure to our components by organising them by their function. This allowed us to bypass subjective namings as the component is firstly identified based on its primary function.

‍

Extensive documentation

A key aspect of the Design System was that its knowledge was to be easily accessible to anyone within the organisation. We provided extensive documentation around foundation design elements and individual components. By doing this, we clearly communicated what design decisions had been made and why, which allowed the Design System to be easily implemented or built upon.

Writing extensive documentation ensured not only visual consistency and brand harmony across elements such as colour, typography, iconography, spacing and shape but also detailed practical considerations. For example, naming conventions, component terminology and device-specific components (Web, iOS, Android), allowing for a smoother transition and shared language between Designers and Developers.

‍

‍