GroupM
This is a redesign project aimed at transforming GroupM into a cutting-edge "suite" that integrates data analytics, audience insights, data scientists, and technologists from various divisions.
PRODUCT DESIGN
Old Design
Align the engineering team with key business goals.
Product designers should engage directly with users to observe their behavior and gather feedback.
Improved communication between the UX, product, and engineering teams.
Teams should collaborate to identify existing UX problems and develop realistic solutions and goals.
Relatively good-looking.
Visually
👀
Somewhat able to navigate.
Structurally
🏠
…
Procedurally
🪢
Problems are not usually only about the product itself, it’s also about how we develop it. So I first conducted interviews with stakeholders and product leads to gain critical feedback surrounding what’s working and what’s not working in the product.
Generally, most interviewees struggled to identify things they could pinpoint as "working." The majority of the conversations focused on the frustrations caused by the product.
Product Problem
The platform struggles with continuity. Applications and features are developed in silos, without policy guidance or standardization, resulting in a product that feels disconnected and poorly developed.
☹️ Problem
There are significant differences in the way pages and page elements are deployed in different parts of the platform.
🥰 Solution
Develop a standardized method for page and function layout and UX components.
Consistency
☹️ Problem
Our naming conventions and terminology are all over the place, and much of the language we employ is confusing to the less experienced user.
🥰 Solution
Develop and leverage a standard glossary of terms.
Positioning
Due to the past ad-hoc approach to product development, shifting roadmaps, and quick deliverables, we have neglected key elements that are essential to creating a viable product.
Information Architecture
☹️ Problem
The IA is poorly defined and disjointed.
🥰 Solution
Product and UX will outline a proper Information Architecture showing all applications and sub-features.
Performance
☹️ Problem
The platform is plagued with slow or non responsive page loads, and new releases are usually so buggy they barely function.
🥰 Solution
Implement lighter-weight visual solutions while also optimizing the code structure and server configuration.
Responsiveness
☹️ Problem
The content is restricted to a small frame, which wastes margin space and truncates essential information.
🥰 Solution
Stop using iFrames to load features.
The goal is to clearly define and execute a set of global requirements and standards.
If done correctly, this will alleviate many of the pain points we've experienced in the past, caused by shifting objectives, requirements, and target users.
Process
Have a clear locked in, set of “Objectives” and “Key Results” for the platform as a whole.
Establish a core UI Application Framework. Set standards and patters for how each platform application will live and operate within that space.
Document and diagram the platform and all of it’s corresponding applications, to identify interdependencies, and cross application workflows.
OKR
Framework
IA / Workflow
User roles
Over years of development, the product has accumulated more and more roles across each app. The first step is to understand our users by documenting all the role types and their primary and secondary focus while using each tool.
Revised user flow
Based on each role and their primary needs, the revised user flow illustrates, from a user role's perspective, how and when different roles access the tools they will use. This chart also shows how data is collected and distributed across the tools within the entire [m]Platform.
Design Solutions
To solve the above problems, we can implement targeted solutions for each pinpoint. Here are three main changes: a customized navigation set for detail, the innovative application of the masonry layout, and system support for enabling dark mode.
Navigation
The most obvious UI change is the development of a new icon set in the style of brand-colored line graphics, with each icon representing the core functions of the app.
I explored three different UX layouts: horizontal, vertical, and an expandable panel. We chose the latter, allowing all submenus to be directly displayed.
Setup and Admin
Market Overview
Consumer
Intelligence
Media
Intelligence
Planning
Intelligence
Creative
Intelligence
Reporting
Audience
Studio
Data
Management
New customized icon set
Operation options
Masonry layout
Since the creation date is crucial for users, I decided to use a masonry layout instead of simply filtering by date. This adds more innovation and uniqueness to the product. The dynamic arrangement allows users to view all project descriptions without having to click an additional “expand/collapse” button. It also helps with visual balance and makes better use of space.
Dark mode
For users who consistently use dark mode across various apps and platforms, we’ve implemented a dark mode version on our platform as well, helping create a more unified visual experience.
Since our platform is chart-heavy, dark mode enhances the immersive experience by minimizing distractions. With UI elements fading into the background, the content itself becomes the primary focus.
Upgrading a mature product comes with several obstacles: team collaboration, identifying the primary problem, accommodating solutions, and, most importantly, changing the old way of thinking.
I’m glad that the resulting product is equipped with an innovative and practical design, supported by a better architectural framework and stronger team collaboration.
.png)