Class Diagram Viewer

Visualizing your classes in MATLAB

For years developers and engineers have been using and authoring classes in MATLAB. Unlike other modern object-oriented languages, MATLAB lacked the basic tooling needed to help developers understand their architecture. The Class Diagram Viewer solved a big challenge. It gave developers a way to visualize the inheritance relationship of MATLAB internal classes along with user-authored classes. This highly visual diagramming tool was a huge boost for productivity.

Generative Research and Planning

A well known problem

Because this was a well-known problem space and there were many tools available for visualizing classes in other languages, my team had a good idea of what was required. We were also fortunate that our internal developers at Mathworks were MATLAB coders. Having our target users close by gave us the ability to speed up the feedback cycle. We didn't have to test or review designs with external users for this project

The research we conducted included

Interviews with internal MATLAB developers
Creating a large panel of stakeholders, some of whom were authors of many of the internal classes we were trying to visualize.
Benchmarking other UML and diagramming tools like Visual Studio, MagicDraw, Visio, etc.

Design Process

Mock ups and Wireframes

I designed the MATLAB ribbon to follow a workflow from left to right that started with importing new classes and ended with sharing diagrams. More frequently used controls were made bigger, while less frequently used controls, or controls that were also available through shortcut keys, were smaller. The layout of the main working area followed a left-to-right layout from a high-level folder view to a more detailed class property view. However, since we were designing for developers who used IDEs regularly, we made the layout customizable to allow the movement of panels to positions that suited different workflows.

Balsamiq was the tool of choice for creating these mockups and was useful for conveying basic layouts and interactions.

Interaction Design

There were many micro-interactions and transitions that I didn’t have time to prototype, so i utilized a diagramming technique developed by one of my colleagues to convey interactions. This was also done in Balsamiq

Visual Design

We were fortunate to have a talented Visual Designer working with the team. We knew we'd have to create a visual language and an icon system for various aspects and characteristics of classes.

Since the Visual Designer was not a domain expert, I conducted brainstorming sessions with the team to generate ideas she could build upon. This was a nice collaboration and the development team enjoyed being part of it.

Many small badges were needed to indicate properties of classes and connections.

User Research

Interactive Design Review

We conducted an interactive design review which is similar to a usability test with multiple concurrent users. Our users were stakeholders and internal developers. Here are the Results from the interactive design review.

One big challenge with this project was setting up the environments to run these sessions remotely.

UX Pilot Results.pptx

My Favorite part

Conducting the Interactive Design Review was fun. Coordinating all the moving parts with multiple participants was challenging. A lot of planning went into the session, but the results were well worth it. I learned some new skills when setting up servers to allow participants to directly connect to MATLAB instances remotely (we were in the early stages of the COVID-19 pandemic). Participants were paired with notetakers and given a set of tasks to complete, not unlike a usability study. The depth of feedback and the experience the stakeholders had interacting with the feature firsthand helped us decide whether or not the feature was ready to ship. It was.

Lessons Learned

If a problem is well known, there is no need to do rigorous research to understand the problem. That time is better spent doing benchmarking.
Leverage internal users if you have them. They make great test participants and can provide valuable feedback along the way.

Next project

Page updated

Google Sites

Report abuse