Overview | Internship | SaaS | Web-App | UX Design
Product Design | SaaS | Shipped Product | Dashboard | B2B

MathWorks

MathWorks

Role Sole UX Designer, owning end-to-end research, design, and stakeholder alignment

Mentors Jeff Goodwin (Manager), Tosh Sano, Yiming Lyu

Timeline May - August (2023)

Platform Desktop (MATLAB-integrated app)

Project Overview

Designing a scalable future for MATLAB's app-building tool

App Designer is a visual development environment (VDE) used in conjunction with MATLAB. It enables users to design interactive applications using drag-and-drop components and integrated code logic. It supports over 3 million users, ranging from researchers, scientists and even students.

As the sole UX Design Intern on the App Designer team during my 11-week summer internship, I was tasked with modernizing the tool to make it more intuitive, visually appealing, and competitive with modern prototyping tools like Figma and Adobe XD.

App Designer is a visual development environment (VDE) used in conjunction with MATLAB. It enables users to design interactive applications using drag-and-drop components and integrated code logic. It supports over 3 million users, ranging from researchers, scientists and even students.

As the sole UX Design Intern on the App Designer team during my 11-week summer internship, I was tasked with modernizing the tool to make it more intuitive, visually appealing, and competitive with modern prototyping tools like Figma and Adobe XD.

300+

Analyzed over 300 internal customer complaints reports to understand the product and the issues.

4/7

features from my proposal added to the product roadmap

8/∞

Participated in and incorporated feedback from design reviews, undergoing 8 iterations.

CONTEXT

What is App Designer and why do users use it?

App Designer is a visual environment for building interactive MATLAB apps using drag-and-drop components and integrated code.

With an estimated 3 million potential users, it holds strong reach—but its outdated interface and steep learning curve deter many, especially newcomers, from adopting it as their go-to prototyping tool.

SCOPE

Uncovering the 'Why' behind the redesign

The prompt to "modernize App Designer" was intentionally broad. I reframed the problem by asking "Why?" and conducted stakeholder interviews to uncover:

HOW MIGHT WE?

How might we modernize App Designer so that it becomes the default prototyping and app-building tool for over 3 million MATLAB users?

How might we modernize App Designer so that it becomes the default prototyping and app-building tool for over 3 million MATLAB users?

How might we modernize App Designer so that it becomes the default prototyping and app-building tool for over 3 million MATLAB users?

PRIMARY RESEARCH

Exploring the Research Landscape

Once the ‘Why’ was established, I delved into a comprehensive research phase. The steps I took included:

Comprehensive audit of the system

+

Comprehensive audit of the system

+

Comprehensive audit of the system

+

User Interviews

+

User Interviews

+

User Interviews

+

Competitive Analysis of 4 competitors

+

Competitive Analysis of 4 competitors

+

Competitive Analysis of 4 competitors

+

Cross-Functional Collaboration with Stakeholders

+

Cross-Functional Collaboration with Stakeholders

+

Cross-Functional Collaboration with Stakeholders

+

Surveyed more than 300 internal bug reports

+

Surveyed more than 300 internal bug reports

+

Surveyed more than 300 internal bug reports

+

Alignment with MathWorks Design System

+

Alignment with MathWorks Design System

+

Alignment with MathWorks Design System

+

CONSTRAINTS

Balancing legacy infrastructure with strategic innovation

Working within a legacy system

Developers requested minimal changes to the underlying information architecture. I was to focus on visual and interaction-level improvements.

Alignment with MATLAB's visual future

I consulted senior visual designers from the MATLAB team to understand their evolving design language. This informed my choices for color, iconography, and layout.

PRIORITIZING RESEARCH INSIGHTS

Grounding design direction in real user pain points

I led a workshop with two UXRs to map findings on a Functionality vs. Visual Design impact matrix.

This helped me identify high-ROI updates.

IDEATION & EXPLORING THE POSSIBILITIES

Wireframes

Reiteration Based on Feedback

  • Switched to lightweight iconography and modular spacing

  • Pitched bolder, fluid layout concepts

  • Reimagined App Designer as a modern, scalable, flexible platform

FINAL RECOMMENDATION - 1

Skeleton Screen + Progress Bar

Collaborated with PM and developers to build a two-layer loading feedback system:

Skeleton screen mimics app layout while loading

Progress bar under toolbar gives real-time load status

Together, these reduce user anxiety and improve perceived performance.

RECOMMENDATION - 2

AI Copilot + Agent Model

Proposed dual-mode AI assistant:

Copilot helps with layout suggestions and callbacks

Agent autonomously generates logic-based app templates

RECOMMENDATION - 3

Dark mode toggle

Added a smooth dark mode toggle based on high user demand.

Why It Matters:

  • 73% of devs prefer dark mode (Stack Overflow Survey)

  • Reduces eye strain in low-light environments

  • Enhances cognitive focus and modern appeal

  • Aligns with ongoing dark mode efforts in MATLAB

BEFORE AND AFTER

TESTING

Design reviews and user testing

These are some comments from design review sessions with six senior UX designers, where I iteratively refined my designs to align with team goals.

I've noticed how the system consistently provides feedback on my status. This makes the app feel more intuitive, almost as if it's communicating directly with me.

The elements appear less cluttered and cleaner. The new UI represents a significant improvement and aligns well with the direction we aim to move in.

These improvements will enhance the user experience by maximizing screen real estate, offering more space for interaction.

WHAT MY TEAM SAID ABOUT MY WORK

OUTCOME

4 of 7 proposed features added to the App Designer roadmap

Influenced direction of MATLAB's future UI plans

Positioned App Designer to unlock engagement from over 3 million potential users, encouraging more of the MATLAB community to adopt it as their primary tool for app development

LEARNINGS

Reflections

Deep dive into industry insight and visual development

Initially grappling with the technology, I took a user-centric approach, exploring coding to grasp potential user hurdles. Conversations with App Designer users provided invaluable insights into their workflow challenges, enriching my understanding of industry and visual development landscapes.

Collaboration over isolation

My project highlighted the paramount importance of effective communication and collaboration with multiple stakeholders. Each stakeholder brought invaluable expertise and insights to the project, contributing to a more well-rounded and successful outcome. Learning through this collaborative process was truly enriching.

Balancing functionality and aesthetics

While visual design is crucial, it's vital to recognize when something is 'good enough' and shift focus to the broader functionality for added value.

BEHIND THE SCENES

A summer in Boston: The internship was also a lot of fun

The summer on the east coast was truly unforgettable. Not only did it get to work on cool things and make an impact, I had fun doing it. I tried karaoke, participated in a scavenger hunt and attended a soccer game between New England Revolution and Atlanta United!

I even competed in the Natick Hack Day, a MathWorks hackathon, where my team built a smart code editor with an AI assistant, and I contributed as a UX designer.

Want to know more about my work?

Want to know more about my work?

Want to know more about my work?