MAC Design System

Overview

Project G.A.R.D.E.N.S

During our Senior Capstone class, our objective was to develop a pitchable project that integrated the 'Community' theme. With a timeline of 14 weeks, we transformed our ideas into an industry-level end-product. Throughout the process, we actively participated in stand-ups and presented bi-weekly pitches to showcase our progress.

Role
UX/UI, Branding, Design Systems
Duration
12 weeks
Tools
Figma, Adobe Suite

Revitalizing Electric Mobility: Crafting an Innovative EV App

AMC embarks on the ambitious journey of creating an EV application designed to elevate the experience for new electric car owners. The goal is to craft an app that not only resonates with a modern audience but also leverages a cutting-edge Design System to ensure a seamless and engaging user experience.

Redefining EV Control: Introducing the AMC EV App

Utilizing the MAC Design System, AMC's EV app aims to streamline user experiences by offering convenient access to comprehensive vehicle information and controls. The app incorporates essential features such as notifications, status badges, and appointment scheduling, enhancing efficient car management for users.

Process

Navigating EV Ownership: User-Focused AMC EV App Features

The AMC EV app prioritizes an intuitive interface to provide essential information like car health, climate updates, and battery status in a user-friendly and straightforward format. Ensuring uniformity across digital interactions, the MAC design system emphasizes contemporary design, accessibility, and consistency, enhancing the user experience for all electric car owners.

Elevating User Interaction: Gesture-Based Innovation in the AMC EV App

The AMC EV app pioneers a futuristic approach to car controls through gesture-based innovation, unlocking real-time accessibility for users. With features such as a badge system offering quick status updates and simplified vehicle maintenance scheduling, the app promises an elevated user experience.

Embracing Innovation: Rebranding for the Electric Era

AMC's rebranding for the EV market, symbolized by dropping the 'C' from its name, not only aligns with its innovative legacy but also fosters a modern brand identity. This transformation solidifies AMC's commitment to modern EV-focused design principles, embracing nostalgia to shape a futuristic brand image.

MAC's Design Principles

  1. Modern is Fast - AM EV is built to be on the go just like America
  2. Accessible is Easy - The MAC Design System makes it easy for anyone to use
  3. Consistent is Reliable - AM strives for consistency so user can always rely on them

Design System

Figma and Design Tokens: Streamlining Consistency and Collaboration

The design system uses design tokens to ensure consistency across all digital touchpoints and enable easy updates and maintenance. These tokens also facilitate collaboration between designers and developers by providing a shared set of design properties.

Design Token to Figma Styles

Figma styles were used to easily apply design tokens, ensuring consistency across all digital touchpoints and allowing for efficient updates. This approach also facilitated collaboration between designers, resulting in a design system aligned with the brand's guidelines.

Components for Accessibility and Maintenance

Components in Figma were utilized to create reusable design elements, guaranteeing consistency throughout the design system. This method made it easier to maintain accessibility standards and enhance the user experience. By using components, designers could swiftly update the design system while adhering to accessibility guidelines.

Badge Components for User Convenience and Universal Usability

Badge components in the design system provide status updates and notifications, including battery life and climate settings, ensuring user convenience. Their consistent design aids quick recognition and they meet accessibility standards for universal usability.

Outcome

1. Takeaways: Designing for User Needs and Simplified Experience

  1. Emphasize user needs as the cornerstone of the design process, ensuring that every aspect caters to their requirements.
  2. Aim for an intuitive interface, minimizing cognitive load, and reducing the need for excessive user thinking.
  3. Prioritize simplicity to eliminate confusion, delivering a user experience that is effortlessly navigable.

2.Next Steps: Enhancing Usability and Cross-Platform Consistency

  1. Conduct user testing to refine and enhance the usability of the design system.
  2. Explore the adaptation of the Design System into a car UI and Watch OS, ensuring consistency across diverse platforms.