Industry: Ad Tech
Role: Senior UI/UX Designer

GroupM’s [m]PLATFORM is an advanced technology suite of flexible media planning applications, data analytics and digital services.

GroupM is the leading global media investment management group serving as the parent to WPP’s media agencies including Mindshare, MediaCom, Essence and Wavemaker, as well as the programmatic digital media platform, Xaxis.

 
 

Design Challenge

[m]PLATFORM is a consolidated product of four old individual products, the UX/UI team reworked the workflow to make sure there’s consistency and cohesiveness across the entire platform. It should make the users to feel like they’re in a single product that has multiple functionalities rather than four different product pieced together. The goal was to be as intuitive as possible because the platform is very powerful and complex.

We also needed a clean UI and dashboard that allows the user to easily visualize the charts and data. The UX/UI team developed a brand new style guide and component library to give the platform a modern and sophisticated look and feel.

 

We collaborated with the product leads to determine some primary persona that uses each application. Then we worked on what their task flow is for specific features. Below are some workflow for the Consumer Studio.

Design Approach

We researched some industry trends to give the platform a more modern and thoughtful look. The dashboard allows users to get an overview and quickly navigated to detailed features.

Visual Design

Scalable Skin For Each Agency

We also help each of GroupM’s agencies to customize their own skin, thus each agency’s gets to enjoy [m]PLATFORM’s tech stack while maintaining their own brand identity. Below are some of the GroupM agency skinning using each agency’s brand guideline.

My Processes

  1. My process begins with sprint planning with fellow designers and product managers to estimate efforts

  2. Read through requirements

  3. Conduct a kick-off meeting with stakeholders and lead engineer to go over specific requirements.

  4. Raise any questions and technical feasibility about the features

  5. Research, ideate, and more research. (Unfortunately we didn’t always have the time and resources to talk directly talk to users)

  6. Sketch and prototype (Axure)

  7. Peer review internally within the UX team; make any adjustments necessary

  8. Present our work during the first week of sprint review to stakeholders, PMs, engineers and marketing leads

  9. Make iterations based on discussions from the external review

  10. Continue communication with all the stakeholders.

Create step-by-step design screens even for the simplest functionality

 

Sketch Libraries

I also created sketch libraries for all the UI components. When the library is updated, all the files (and your teammate’s) that synced the library will be updated automatically. This makes it easier to create a page, and it ensures all the components are always up to date without manually changing individual layers.