ZEG Member Portal

UX Design for a closed B2B Portal

Project overview

The ZEG Member Portal is a collection of bike related products - offered to its business partners. Thus the main target group consists mainly of independent bicycle shop owners, franchisees and their respective employees.
The portal contains links to news articles, advertising material, bike catalogues, e-learning services and marketing highlights.
‍
Boutique tech consulting company dev5310 booked me to help improve the customer experience and set up a component library to then combine with their Magnolia CMS setup.

About the brand

The Zweirad-Einkaufs-Genossenschaft (ZEG) is a purchasing association of over 1000 bicycle shops in Europe.
The cooperative is representing big bike brands such as: Pegasus, Bulls, Hercules, Kettler, I:SY and many more.

Wikipedia/ZEG

The Challenge

Rethink User Experience
Integrate existing content
Build new CMS for members portal
Propose workflow: UX to in-house UI Design

A clear new navigation structure followed with a well sorted content hierarchy. Using a component library to organise all pages with consistent and recurring content modules/templates.
‍
I arranged workshops to get the client involved in the process, build trust and encourage quick decision making. The client was always up to date and we practiced a rather agile way of working as a team instead of the classic waterfall method.

Parties regularly involved: Backend, Frontend, UX (occasionally when needed UI), project management client side and dev5310 agency side.

The Solution

Navigation structure

The old structure was by far outdated. The portal grew over a long, long period of time.
In a quick survey the portal users commented mainly the time consuming navigation through the portal. Ending in same visits of a page to fulfil only necessary tasks, not exploring.

ZEG Memberportal in Feb 2022 [Screenshot]

The approach

3 main layers of navigation for the portal

1^st level | Main navigation
2^nd level | Content navigation
Meta navigation [ + exits to external platforms]

Sitemap

Navigation Concept Workshop

Together with the client we started to bring the concept into Miro App with client

SSO-login to 1^st level main navigation

2^nd level content navigation to content modules

Meta navigation

Content Hierarchy Workshop

In the workshops (and remotely) we reordered the majority of the content. Categorised and combined content topics when necessary, so that the user would be able to navigate and explore rather more subconsciously.

From a technical point of view we've used the workshops to also connect contents to functions of the modules so that backend devs could simultaneously set up their CMS systems.
So we focussed on the following:

Static CMS content
Dynamic CMS content
Dynamic content from foreign systems
Links to foreign systems
External integrations such as iFrames

Note: The use of iFrames is a temporary solution to the problem. In a mid term planning the goal is to replace with a custom management solution.

Overview

Close up view of Home Section + Legend

Wireframing

At the very beginning of the project I recommended to my client 'dev5310' that in regards to wireframing a high-fidelity UX Design could be ideal to discuss with the client and the wider team overall. In my experience it is far more efficient to communicate with a clearer design idea to all parties involved in the project. It would also reduce risk of misunderstandings.
This approach was welcomed and gladly accepted by the client.

The portal is very data heavy - an array of downloads in different file formats, bundled in lists, marketing imagery and very important: predominantly to be handled by content editors on client side. Therefore my idea was obvious to have the portal set up in a very modular way. Then do all the groundwork for the page templates before handing over.

Basics: Buttons, Inputs, Selection controls

Levels of Navigation

Variations of Content Teasers

Personalised Stage for Homepage

Stages for Overview and Content pages

Options to set up a Table/List

User Profile | Signed in / Logged out

The high-fidelity wireframing approach for this project paid off in the end.
In terms of collaboration it was smooth as. Developers could follow my ideas and translate into their CMS setup - all happening in the background.
Turned out there was a hidden benefit too, as the client preferred to do the UI Design in-house - handover to their UI Designer was a breeze.
If I had to name a disadvantage of the project setup then I'd say that high-fidelity is time-consuming in the beginning. So really the key was to set the document up the right way. It definitely put down more hours in setting up the sketch file. But in the long run adjustments and shorter meetings due to better understanding ultimately paid off in the end.
I'm glad the client took the risk and trusted my consultation.