Designing a white-label directory for local associations

The first step is to carry out a two-part audit:

• an expert audit of the “Bordeaux Métropole association directory” portal;
• an analysis of the platform solution proposed by the technical provider in charge of developing the future portal.

The aim is to identify the blocking points, but also what already works rather well.

Alongside this analysis phase, we build a competitive benchmark of the sector across several association portals. This lets us categorise a number of areas to work on by grouping together good practices:

• presenting the associations;
• displaying the available activities;
• how to become a volunteer;
• and the search journey: filters, advanced search.

We bring together the project and technical teams to work jointly on the features of the next association portal.

The directory’s main pages are prioritised: activity directory, information sheet about an association, logged-in area… We now need to iterate on integrating the components and features that will structure these interfaces.

This time of exchange addresses several strategic, political, editorial and technical stakes.

Indeed, the interfaces must be improved by relying as much as possible on the existing solution proposed by the technical provider. This new platform must also be designed white-label so it can be easily deployed across all the municipalities.

We combine all the expressed needs as best we can, making sure the target user’s experience stays at the centre of the final decision-making. A vote on the “favourite” sections of each sketch proposal is held to sift through all the ideas and agree on the components to include in the mock-ups.

The homepage must be modular so municipalities can highlight the sections they prefer. Likewise, the individual sheets must adapt to the content: blocks can be removed if no content exists.

These first low-fidelity mock-ups are produced in continuous iteration with the technical provider. The aim is to ensure development stays in step with the design.

To confront the mock-ups with potential users, testing sessions are organised. Several profiles, citizens and association administrators, face the association portal prototype and are questioned about the journeys. This immediate feedback helps identify blocking points and points of confusion for the user. For example, there is confusion between the component presenting the activities and the one for volunteering. The same goes for the search filters, which need to be improved.

A directory means a search engine.

Particular attention is paid to this essential feature.

The aim is to offer an efficient, practical search to find an activity, an event or an association.

To meet this need, we work on three axes built into the association portal:

• an advanced search: it lets the user specify the type of search, the theme and also the desired neighbourhood. By offering this first filtering stage from the homepage, the user finds the content they are interested in more quickly;
• the filters: for each section (activity, event, associations, volunteering), specific filters, thought through according to use cases, are offered. For example, the day for activities or the availability period for volunteering;
• categorised search results: if the user prefers to search across the whole site, the proposed results are sorted by category (news, activities, associations…) to make information easier to read and avoid mental overload. Moreover, only the most relevant items are pushed to them. They can also ask to see just one category of their results.

In addition, suggestions of synonyms close to the search are offered to guide the user.

In the same way as for the desktop version, we work in iterative loops with the project team and the technical provider.

To be sure we meet users’ expectations whatever the device used, user tests are organised on the mobile version.

The lobby of the Bègles municipal swimming pool is chosen for the diversity of profiles you can meet there (seniors, parents, young adults…) as well as for the testers’ availability.

For anyone curious about how to run effective guerrilla tests, we invite you to read our blog article on the subject.

Since the information hierarchy was worked on upstream during the desktop design (while keeping the responsive format in mind), the constraints mainly concern mobile ergonomics. For example, some users are bothered by the absence of a link directly in the menu to return to the association portal’s homepage.

As you have understood, this new portal must fit into a white-label logic. The main challenge here is to define an art direction that adapts to each town’s visual identity.

To meet this need, we simplify the customisation of this platform as much as possible.

Indeed, municipalities will only be able to change the interface’s primary colour, for example. And to preserve accessibility, the colour must be chosen from a palette we define, one that meets RGAA contrast standards.

Each town also has control over the visuals selected for its own association portal.

For reasons of time and technical constraints, we cannot completely re-adapt the components through mobile adaptive design. Every component of the design system is thought through with responsive design in mind. We check the usability of each of the components we design across the various desktop, tablet and mobile formats.

The UI design sprint is also the opportunity to refine the mock-ups to improve the user’s overall experience on the association portal. For example, the “activities” and “volunteering” cards are reworked to differentiate them better and avoid any confusion:

• the activity cards are made of a coloured square and an icon representing the theme addressed;
• the volunteering cards contain an image, a timing tag and the theme icon.

Depending on the type of filters, the components are also adapted.

For instance, you find accordion “dropdown” components to choose the themes, a calendar to select a period, or checkboxes for specifics such as “remote missions only”.

The way filters are shown is identical on every page to make the experience consistent across the association portal. Components such as the category filter tabs are also given a specific style so they are not confused with the anchors present on the homepage, for example.

To make navigation easier and encourage clicks, we plan to keep the main action buttons fixed while scrolling on tablet and mobile formats.

To simplify understanding of the clickable actions, we underline links and other tertiary buttons by default.

With some experience in the association sector, this white-label platform project for the municipalities of Bordeaux Métropole makes it possible to take on interesting challenges:

• making several directories coexist on a single portal (associations, activities, volunteering…);
• making the search and access to this information easier;
• designing an interface aimed at a multitude of profiles (with varying degrees of digital maturity);
• adapting the interface design while taking an existing solution into account.

The final design takes the form of a digital directory offering multiple entry points. Whether the user is looking for an activity, a volunteering mission or an association, each grouping has its own directory page with specific filters and individual sheets.

Moreover, association news and the events organised are both highlighted from the homepage and easily reachable via the menu or the association’s sheet.

The advanced search, which lets users filter by type of search, theme and desired neighbourhood, makes navigation more intuitive and meets users’ needs during their association-related search.

From the point of view of association administrators, the simplified activity-creation form reduces the risk of errors and completion drop-offs. Only the essential information has to be filled in, allowing more flexibility for the smallest associations.