Metacenter

UX Research, UX/UI Design, Design System & FE Development

About the Project

DAG contacted us to work on a database meta-management and data governance system called MetaCenter. Data Governance and Information Management are processes that include the data as well as the people, policies and procedures involved in keeping information in order.

From outdated to simple & intuitive

This complex platform needed a revamp urgently so we proposed a clear and concise UI.

Metacenter before
Metacenter after
Revamped
Original

Overview

We started off working on Personas and Data Analysis. Them we moved onto a Moodboard, Style Tiles and a Product Roadmap. Later on, we jumped into redesigning the platform and working on Frontend Dev. And since then, we've reskinned the most important workflows, while rethinking key userflows to provide an optimized experience.

Working with a remote team was an additional challenge that we resolved by ensuring effective communication and on point processes.

Problems the users were facing

Bug

Multiple issues with the application and lack of certain functionalities.

Search

The user had a hard time finding the tools they needed.

Touch

There were significant usability issues that needed to be resolved.

Responsive

Technology being used was outdated and didn’t run on certain browsers.

Personas

In production, each situation that is planned for will take all the user’s contextual needs in mind, but in this case we are not identifying any specific persona or situation outside of the DG Counsel/ Executives, who are the main marketing target for the new features and Information Management workers, whose participation is essential in running the system overall.

Executive Users/DG Users

In the management of data governance it is apparent that goal-setting, transparency, accountability and communication all play an important part in a modern and successful DG program. The DG Council and Executive users need to be able to see status and progress in a communicative and actionable environment in order to reach data maturity.

Data Governance Committee
Compliance Officers
VP / Director
Business Data Owners
Legal Department Officers
CDO
CIO

Manager/Worker/IM Users

The IM user is deeply involved in using the system as a day-to-day operator and project management tool. Meaning, these users would be operating a Data Governance practice management tool which helps them create, track, communicate and adhere to all of the specifications required to bring an enterprise to a mature state of data.

Data Modellers
Data Architects
Technology Managers
Technology Developers
MetaCenter Steward

End users

There are multiple types of end users and they can have various requirements depending on their role.

Data Governance Committee
CIO
CDO
Business Data Owners
Legal Department Officers
Compliance Officers
VP / Director

Moodboard

Moodboards are usually one of the first steps in any UX/ UI project. They are a great way to consolidate the references sent by the client and our own ideas.
They ensure we’re aligned with our client and consolidate the idea that we’re a team, and brainstorming is a group activity

Typography
Timeline
Layout & Tables
Iconography
Configuration
Charts & Widgets

The team

This project consisted of a large group of people located in different parts of the world. Our main challenge was to ensure that the team - composed of designers, developers, PMs and the client - was able to communicate seamlessly despite being in different time zones.

We scheduled weekly calls to discuss progress and define next steps, and used slack for daily communication. We also relied on other tools that contributed to making it work

3 Slack channels
2 weekly standups
5 developers
3 UXers
3 countries
Outcome

Design system

To create alignment within teams, there must be a shared source of truth—a place to reference official patterns and styles. That’s why we created a design system, a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

Icons

Design consistently

Standardized components used consistently and repetitively create a more predictable and easy to understand application. This allow designers to spend less time focused on style and more time developing a better user experience.

Heights detail

Scale

A design system is alive, meaning it will require ongoing maintenance and improvements as needs arise. The application automatically inherits improvements to the system, lowering the effort to maintain the application. This is the power of scaling that a design system offers.

Color palette
Add group
Add group#add-group
Alert
Alert#alert
Audit trail
Audit trail#audit-trail
Check
Check#check
Back
Back#back
Error
Error#error
Configuration
Configuration#configuration
Database
Database#database
Undefined
Undefined#undefined
Remove
Remove#remove
Menu
Menu#menu
Printer
Printer#printer
Compose
Compose#compose
Layout
Layout#layout
Add folder
Add folder#add-folder

Data Flow Graph

The Data Flow Diagram helps users to find the lineage of the data being used for a certain task. Data lineage is defined as a data life cycle that includes the data's origins and where it moves over time. It describes what happens to data as it goes through diverse processes.

Data Flow Graph

Conclusion

We were able to resolve the accesibility issue and allow users to access the platform from any browser, which is a huge leap forward. Additionally, by creating a design system, we have ensured scalability. There’s still lots to do because of the sheer magnitude of this system, so stay tuned, we’re just getting started.

Metacenter before
Metacenter after
Revamped
Original
UI Elements
We hope you've enjoyed it. You can see more Case Studies below.