MathWorks

MATLAB Mobile Application

MATLAB mobile is an application designed for users to be able to do basic file upload and synchronization, coding, media file creation for image and audio processing, and connecting to the cloud for acquiring and processing data. As the senior visual designer for this project, I did the UI redesign for the login experience and primary app features.

Live Product View

Deliverables

Sketch handoff files of all in-app screen sizes and specifications, Sketch handoff of start and login flow screens with specifications, prepared and packaged icons and illustrations

Core Team

Designer (Me), Android developer, iOS developer, UX Researcher

Background

Objective

The primary reason for the project was to redesign the application. The current version was inconsistent with many new design patterns being integrated into the MATLAB software. Leaving the mobile app without a more modern appearance and functionality risked accessibility requirements and a decrease in mobile users.

User Pain Points

  • Lack of adherence to with more recent mobile accessibility guidelines

  • Lacking interaction states and affordances

  • Inconsistent design patterns and iconography

  • Overall outdated appearance compared to desktop app and other mobile apps

Redesigned Elements

Iconography

  • toolstrip icons

  • icon colors for background variations across Android and iOS operating systems

  • icon and button sizing to meet accessibility standards

Visual Patterns

  • revised typography and font families for Android and iOS, and correct units of measurement for each operating system

  • spacing and sizes revised to increments of 4

  • colors that were consistent with the MathWorks design system, charting graphics, and brand

  • layout to seamlessly respond to orientation switching

Functionality

  • improved interaction by updating component states and increasing size to ensure accessibility

  • overhauled navigation to reflect standardized toolstrip and evolved industry standards

  • enhanced affordances to guide user expectation and expose gesture capabilities

App Start-up Experience

  • Improved start screen illustration to match updated brand colors

  • Enhanced login experience