Screenshot of the Mitsubishi Electric online brand resource library

Mitsubishi Electric Global Brand Resource

Project Overview

For several years, I have worked to maintain and continually update the Basic Guidelines for Mitsubishi Electric. Working with an international team of translators, I have personally overseen the English, Japanese and Chinese versions of this 200 page guideline.

Printed booklet of the Mitsubishi Electric brand guidelines
Interior spread of the Mitsubishi Electric brand guideline booklet

The A4 sized layout was designed for print and digital PDF use around the world, being distributed by Mitsubishi Electric. More recently, my company started working on a massive, online service referred to as the Digital Asset library. During this lengthy process, I worked closely with stakeholders at Mitsubishi Electric, developers and additional designers.

My role was to oversee the consistent conversion of the traditional PDF version into the much more versatile web tool. I participated in numerous presentations and meetings with the stakeholders and developers where we brainstormed various solutions to the user needs, then iterated continually to improve the user experience and fine tune the user interface.

Design Process

The below chart illustrates the design process used while working on the Coto Japanese Academy redesign.

1: Empathize
Competitive Analysis
User Research
Problem Statements
2: Define
User Interview Analysis
Personas
Empathy Maps
3: Ideate
Brainstorming
Wireframing
Information Architecture
4: Prototype
UI Kit
Mid-Fidelity Wireframes
Prototype
5: Test
Usability Testing
Feedback Incorporation
Reiterate Where Needed

Design Library

Working with a team of designers and developers, we began to build out the design system and component library that would be use for the Digital Asset Library.

UI kit for Mitsubishi Electric Digital Asset Library showing color and component styles

Leveraging Interactions

One example of continual iteration was exploring how to use the inherit advantages of non-static design. In the traditional Basic Guidelines, all tables, text, rules, etc had to be displayed at once on the page. The Digital Asset Library however, opened up limitless options on how to organize and display information for the user. In the following example, I worked through many versions with both the stakeholders and developers to come up with a solution that was optimal for the user.

In this case, our user is a designer that needs to reference the detailed specifications and rules for a Table of Contents document. The high volume of complex information was rather confusing in the traditional Basic Guideline but became much easier to use and understand in this digital tool.