UI Design


Feb/July 2018

Project Overview


Base is the third largest Belgium mobile telecommunications operators. The Base brand is part of the Telenet Group and this project was part of a larger digital transformation within the Telenet Group.

I've initially joined the project as the second designer, sharing responsibilities with another lead UI designer, a UX designer, a product owner and a web master from the engineering team. Eventually I've taken over the ownership of the project as the only UI designer having also the opportunity to liaise with the dev team as they were progressing in the development phase.

/The Brief

With an estimated 26% market share in mobile communications Base had a massive user base and an established set of brand guidelines.
The brief for this project was to streamline the user experience across all the Base eCare B2B and B2C products by adhering to the Base visual language. Once the user has logged in he had to able to successfully manage his own Base account...

/An Agile framework

The team has worked within the Agile framework by prioritising the features needed into epics and stories so we can always keep track of our progress. Along with frequent stand-ups and review sessions we've also used collaboration tools such as Confluence, Jira and Invision to communicate with our remote dev team.

/Design and iterate

Based on the early research and brand guidelines I've had to make sure the new designs are consistent with the Base visual language. The new components that would improve the product experience had to go through dozen of iterations, tested and reviewed before being delivered to the dev team.


/Evolving a design language

Building and maintaining a design system for a massive brand such as Base can be daunting at first. With over a hundred of pages and components designed, the devil is in the details (excuse the pun). But by understanding the brand values, tone of voice and visual attributes we were able to define the core design principles. Design consistency across all Base products was paramount.

/Base visual attributes

- Colours
- Iconography
- Photography
- Spacing

/Text styles

While defining the text styles and typography the decision was the fonts currently used by the brand. We've used Ample Base font for the main headings and Hind font for the body copy, notifications, labels and quick links.

/Defining reusable components

Working on such a large scale project all the components had to be defined to work on multiple scenarios. The components library consisted from reusable molecules and organisms that worked across all products and platforms.

/Boostrap grid

For a responsive layout a 12 columns grid was chosen to align the content. It was also considered the 3 main breakpoints : desktop, tablet and mobile.

/Quick access to what matters

The user is welcomed with a set of quick shortcuts to access the most important features