Using Design Thinking to create a streamline user interface that simplifies complex data.

The Challenge
Co-create a new analytic tool that will reduce the time needed to gather key insights.

The Outcome
Create a dashboard design that monitors the manufacturing, finance and sales.

The Impact
Reduced data gather from 3-4 days to 30 min & saved millions in lost profit.

My Role
Lead designer

Industry
B2B

Who Is MediaTek &

What Do They Do?

MediaTek Inc. is the 4th largest microchip manufacturer in the world that provides chips for wireless communications, televisions, mobile devices and automated driving. In 2014, MediaTek shipped over 1 billion chipsets.
With a ever growing need to streamline their business process MediaTek needed an analytic tool that will allow key stakeholders to see and understand what is happening from all levels of business, manufacturing and finance.

The Problem

MediaTek used an outdated process of gathering data from multiple sources and manually processing data in excel spreadsheets to derive business insights. This process was extremely time consuming and difficult for users to manually calculate large complex data sets into reports, these reports can contain human errors and outdated insights that can affect MediaTek’s line of sales, supply chain, manufacturing and revenue.

My Role As The Design Lead

As the lead designer of a team that included a project manager and a junior designer, it was my task to understand the needs of MediaTek and strategize how design can make their business goals into reality. After meeting with sr leadership where goals, objectives, user needs and problem areas with current processes were discussed; I crafted a project roadmap laying out my teams design plan that defines our goals and desired outcome. Because of the complexity involved from MediaTek’s multiple lines of business, I used a Design Thinking workshop to co-create their ideal solution. With key stakeholders and end-users, the workshop allowed everyone to generate ideas that went into their ideal solution. The workshop allowed key stakeholders to create their vision for the future, at the end of the workshop MediaTek produced journey maps, personas and wireframes needed to create their ideal solution. My role from then on was to lead all research and design phases, create the interface, develop the visual design language and mentoring a junior designer along the way.

The Solution…
The New MediaTek Analytic Dashboard

I wish [we] had done this dashboard project with SAP earlier. What used to take us days to report now takes minutes!
- Kirin Liu, Assistant General Manager of MediaTek

The MediaTek analytics dashboard allows the entire company to run their business faster than ever before and provide real-time decision making into all aspects of their business. The dashboard serves as a integrated data analytics tool that manages and consolidate all their data needs into a single access point. In the past, MediaTek stored data in different locations where individual business analysts collected and processed data manually, now business analyst have the ability to gather data and generate data visualizations into every aspect of their manufacturing, sales and financing departments and know how their business is impacted.
High-level analysis reporting reduced from 3-4 days to 30 minutes and saves millions in lost revenue from miscalculated data and outdated reporting. Analysts for the first time, can solve complex problems and make real-time decisions and actions that can greatly affect productivity. By seeing real-time analytics, forecasting and prediction models in this dashboard interface, analysts gain valuable time to strategize ways to improve manufacturing, sales rates and business goals, pushing MediaTek further ahead.
Getting Key Insights At The Start

The Dashboard

Empowering Businesses

Understanding Forecasting

Making Better Decisions

Getting Deeper Insights

Seeing Data From A Different Perspective

Switching To A Different View

Let’s Start From The Beginning.

Exploring the problem space.

Current Challenge

MediaTek is broken into 3 major divisions or business units. These business units control and oversee every aspect of the manufacturing, inventory and the revenue of all the microchips produced and sold in MediaTek. In order to understand how each line of business is performing or underperforming, key stakeholders have to collect data from multiple data hubs and process the data to generate a report that allows a business analyst to understand how that business unit is performing and how MediaTek is impacted. The major pain points with this process the extensive amount of time lost by users needed to collect data, process data and generate a report. Because data is being processed manually, reports can have errors giving a false overview of the business unit costing MediaTek millions in missed revenue. Below is an example of the type of data being processed and a report being generated.

An example of data needed to be processed.

An example of a typical report giving insights into a business unit.

Design Research

Conducting user research to understand real needs

Quantitative Research Study

Before visiting MediaTek, I worked with MediaTek’s I.T. manager to understand how users are accessing and consuming specific types of data needed to learn how a business unit is performing. Working with I.T. allowed me to see the types of data used, the length of time it takes to gather data from different databases and the size of data being accumulated. Due to my NDA agreement, I can not disclose detailed information about this portion of the study.

Example spreadsheet of MediaTek’s users utilize data.

Quantitative Data Needs

Manufacturing

  • Chip production
  • Time of production
  • Quality control
  • Time & cost of materials

Finance

  • Cost of production
  • Cost of shipping & receiving
  • Cost of operations
  • Forecasting production materials

Sales

  • Product line sales
  • Customer
  • Industry
  • Forecasting & benchmarking customer need

Screen Size Analysis

Qualitative Research Discovery

Understanding Needs With A Questionnaire

The questionnaire was sent to 60 users within Mediatek, each department filled out the questionnaire with details about how they work, why they perform certain actions, the length of time it takes to complete tasks and how they use data to gather insights into measurable performance indicators. The result of questionnaire gave me a complete view and brake-down on how each department used data to track performance and how they visualized the data to gather insights.

3 Main Stakeholders

The 3 main stakeholders held a wealth of information about the day-to-day business process at Mediatek. From them, I learned that everyday tasks of the typical analyst slowed down by the manual process of basic information. Each stakeholder expresses the need for a tool that will allow everyone to see the same data and the ability to drill into a business unit and see all the relevant data to it. The next steps are to validate these assumptions with one-on-one interviews.

Sales

Manufacturing

Finance

Interviewed with 15 Users in 2 Days

The user research consisted of 15 in-person user interviews conducted in the user’s office to observe how they work. Each interview lasted 45 minutes long, where I asked questions about how they worked, the biggest issues they have with their current process and ultimately what they wanted and needed for themselves. The underlying theme of the interview sessions was the need for a real-time analytical tool that connects all their data sources together where users no longer need to manual process data but instead has a screen with different business units, click into the business units to see the insights of that unit with the ability to filter the data as they need.

Top 3 User Interviews

Jenny

Jenny is a manufacturing analyst, her main tasks ensure that specific quotas are being met and that products are being produced when they should. She spends 2-4 hours a day processing data from different data sources to understand key insights.

Thomas

Thomas is a sales analyst, his main task is understanding how MediaTek is impacted by the number of chips being sold compared to forecast rates. A majority of his time is spent comparing data to understand and foresee the future impact of sales. He spends 4-5 hours a day processing data and creating reports.

Danny

Danny is a finance analyst, his task is to oversee the production cost of a family of microchips. Danny spends his day looking at the cost of material needed and how it impacts MediaTek and their customers. His entire day is spent overlooking the costs of materials in different data sources and creating reports on how the business is affected.

Persona: The Analyst

Name: Beth

Age: 30-50

Education:
College or higher

Background:
Married with children, highly motivated, spends long hours at her desk crunching and processing data to see how her unit is performing.

Daily task?
Monitor how her business unit is performing, analyze ways to improve performance and increase production.

What motivates her?
Finding new was to increase performance.

Biggest painpoint about her job?
Having to gather data from many sources and manually processing the data.

Ways to improve her job?
Cutting time to gather data, being able to have different views of the data and automatically export data into a report.

Business Analyst User Journey

1

Check B.U. Performance

Actions

  • Receive emails on days performance
  • Talk to colleagues about the BU
  • Check with manufacturing leads
  • Check past performance

Emotion
Focused

2 Painpoint

Search Different Databases

Actions

  • Access D.B. #1 for performance
  • Access D.B. #2 for specific areas
  • Access D.B. #3 for past performance
  • Access D.B #4 for forecasting

Emotion
Frustrated

3 Painpoint

Clean Data From Source

Actions

  • Clean data manually
  • Correct inaccurate records

Emotion
Dread

4 Painpoint

Process Data In Excel

Actions

  • Copy/past data to run performance

Emotion
Scared

5

Give Report To Manager

Actions

  • Process data in excel create data visualizations

Emotion
Excitement

The Workshop

The workshop brought together the entire line of business, I.T., managers and end-users to focus on one common goal. The beginning of the workshop outlined the overview of an intensive user research study consisting of surveys, questionnaires and walk-alongs. The user research survey as the staring point of the workshop and allowed Mediatek to understand the problem at hand. Once we established the ground work of user pain-points, the workshop was geared towards designing for needs. During the workshop, we focused heavily on what users needed day-to-day. The focus therefore was on the types of data needed and how data can be used to make informative real-time decisions. In the workshop, we found that different units looked at similar indicators and therefore were related to corresponding units. As part of the workshop, we created exercises that allowed Mediatek to layout a new information architecture that all the business units can use to its fullest. Along with understanding the data, the workshop produced journey maps, user-personas, empathy maps, to-be processes and storyboards outlining their ideal new solution and process.

The start of the workshop outlining goals and expected outcomes.

Here, I’m explaining the design portion of the workshop.

Linking User Needs To Data

Mediatek expressed lots of interest in redesigning the way their users accessed and engaged with data. During my research phase, it became clear that users expressed many pinpoints with how the data was structured within Mediatek. As a designer, it was my duty to understand the needs of the users and understand the painpoints of the data from the users point-of-view. Below are a set of matrixes of the types of data needed from each unit and why they needed it. After having 10 matrix sheets of structured data laid out in front of us that myself and Mediatek understood the holistic view of data everyone needed and why. This is the first time that senior management and end-user saw this holistic view.

Data needs for KPI 12.

Data needs for KPI 15.

Data needs for KPI 16.

Drawing The Experience Together

During the last 2 days of the workshop, we focused on drawing the new experience. Each person in the workshop had the opportunity to have his and her voice heard. Teams worked both individually on their ideas while other teams created their solution as one team. Towards the end of the workshop, Mediatek produced an entire end-to-end experience in a sketch format.

User explaining his set of sketches.

A look at one team creating their ideal solution. 

A user sharing her ideas.

A look at Mediatek’s senior leadership seeing the holistic view of all the sketches.

The Outcome

Because the workshop focused on the needs of the user and based on user research, Mediatek was able to understand holistically the issues at hand. By knowing and confronting the pain points head on, the result was a solution that allowed users to use their expertise into sketches. The sketches below represent the workable outcome of the workshop. The sketches serve as a major pivoting point and allowed me as the lead product designer to understand the needs of Mediatek from a different perspective.

Starting with paper & pencil

Sketching is the quickest way to generate ideas and validate concepts.

Dashboard Flow

In total, there are 27 info tiles that give MediaTek’s users the ability to view and monitor key insights into all business units. The dashboard is the launching point in which users select which area of the business they need and see detailed information about that line of business. Users have the ability to filter, compare and drill into specific areas of data to understand what is happening within the business unit.

Drawing Info Tiles

The information tiles server 2 purposes, allows users to monitor a key matrix of a business unit and allow for deeper insight into that key matrix. Each info tile is unique and is calculated based on certain thresholds and parameters that are specific to that matrix. Some info tiles indicate a performance rate, while others give details of a line of business.

The Dashboard Experience

The dashboard is the area where users are able to quickly see and make decisions about each business unit. Prior to the dashboard users had to collect data from different sources to understand what is happening with a line of business. The dashboard aggregates the data they need into one area for the entire company to see.

Deeper Insights

Once an info tile is clicked, the user is able to see all the relevant data to that tile. The data within this internal page can display charts and graphs about a measured rate or have tabular data about an entire line of shipping supply of a family of microprocessors.

Finding Patterns

Working with Mediatek did not end with the workshop. Myself and my team continued our iterative process of refining the outcomes of the workshop with Mediatek. The sketches from the workshop only served as a starting point where basic ideas were drawn. During the iterative process of refining the outcome and defining how the solution will work, U.I. patterns began to emerge. Below, are just 1 example of the kinds of U.I components emerging by refining the outcome of the workshop with Mediatek.

Wireframing

The Experience

Interaction Flow for a Single Tile

The solution is made of a dashboard with KPI tiles allowing the user’s within Mediatek to see an overview of performance. The KPIs allows the user’s within Mediatek to see where areas of the business needs to be improved and allow the users to know why certain things are happening. Once a KPI tile is clicked, the user is able to see every detail of that department, which gives users great flexibility to make realtime decisions.

System Design

The Header

The header is designed to give the overall page hierarchy and allow the users to know where he or she is located within the page. Pages are controlled by U.I. elements located within the header, components like: tabs, buttons and drop downs give the user greater control of the page. Other U.I. components like breadcrumbs allow users to see how far deep within a business unit they’re currently in and allow them to quickly jump between areas previously visited.

I am text block. Click edit button to change this text.

I am text block. Click edit button to change this text.

Content Layout

The main content area is designed to allow users to understand their lines of business. Pages are designed to hold multiple cards consisting of data. A card can contain data like bar charts, pie charts, scatter plots and funnel charts. Each card can be filtered by U.I components, giving users greater flexibility over their data. The content area’s purpose is to allow Mediatek to see every aspect of their business and allow them to make realtime decisions.

Fonts

Roboto Bold

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Roboto

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Roboto Condensed

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z