‍

‍

‍

Context

The Nouvelle-Aquitaine region offers a public transportation service for young schoolchildren living in the area. For the 2024 school year, they wish to overhaul the existing platform and implement a Design System for their services based on the region's charter.

‍

‍

‍

Methodology

In terms of defining the standard structure for elements within a design system, Brad Frost's Atomic Design serves as an excellent starting point.

‍

‍

‍

My role

• Conduct user research (5 interviews) and perform ergonomic analyses of the existing journey
• Define and implement styles such as colors via variables/tokens
• Design interfaces (mobile and desktop)

‍

‍

‍

Design journey

Below is the established retroplanning at the project's outset.

‍

‍

‍

#UX/UI Research

We commenced by conducting a series of analyses on the current platform, focusing on usability and user journey. This was aimed at gaining a deeper understanding of the genuine needs of users, predominantly parents, when registering their children for school transport. Subsequently, as the UX Researcher, I conducted 5 interviews and extracted insights that enabled the team to reimagine the registration process.

Additionally, we conducted UI checks on the existing journey by selecting 5 key screens from which we began to formulate a redesign strategy and consider how to develop the design system.

With these elements in hand, we began crafting a flowchart encompassing the entire user journey and key interactions users may encounter during the registration process. This proved invaluable as it served as the architectural reference, guiding us in determining which elements to prioritise initially and avoiding the creation of unnecessary or overly complex elements in the initial stages.

‍

‍

‍

#Definition of styles and assets

For this part, we opted not to create our own icons and typography. Instead, we selected standard resources that have been extensively tested and are commonly used in digital interfaces by people. When generating our colour palette, we conducted a brief research, drawing inspiration from the colours of the Nouvelle-Aquitaine region's traditional flag. We then adhered to the 60-30-10 colour rule (60% for neutral tones, 30% for interactive elements, and 10% for branding) to ensure the coherence and consistency of the future design.

Additionally, we employed semantic tokens by utilising Variables from Figma, a practice that has been proven to be more efficient and effective when delivering design elements to development teams.

‍

#Construction of UI element kit

As mentioned earlier, to avoid over-anticipating, we chose to begin by creating key screens. This approach provided us with a clearer vision of which components are most crucial. Subsequently, we incrementally expanded upon these components in our UI kit, basing our additions on immediate needs. This method proved effective as it prevented us from delving too deeply into creating an exhaustive variant system from the outset, many aspects of which ultimately proved unnecessary.

‍

‍

‍

#Interface design and user testing

To ensure that every step of the user journey is covered in our MVP (Minimum Viable Product), we planned some in-person tests with users to gain further insights and refine the design through iteration. This iterative approach will enable us to enhance the target user experience and address any potential pain points identified during the test sessions.

‍

‍

#Documentation and handoff

Absolutely, developing a design system goes beyond just creating a UI kit in Figma or any other tool. It's a crucial aspect of the project as it provides essential information to everyone involved in the project. This includes delving into foundational rules such as design principles, content guidelines like UX Writing, and, of course, technical specifications. Establishing a robust design system ensures consistency, efficiency, and scalability across the project, making it easier for team members to collaborate effectively and maintain coherence in the user experience. While challenging, investing time and effort into crafting a comprehensive design system is essential for the success of the project in the long run.

We have already considered certain guidelines when creating my design elements, but we still need to allocate more time to document the system. Therefore, we have chosen Zeroheight, which will assist us in structurally building the documentation for our design system.

‍

‍

‍

Outcomes

Here are some key screens depicting the school transport registration process. As previously mentioned, it's undeniable that the button, stepper, and text field are among the key elements that require careful attention.

‍

=> To view the prototype (mobile version)

‍

‍

=> To view the prototype (desktop version)

‍

‍

‍

‍

‍

‍

‍

‍