Design Portfolio
Case Study #1: Southwest Airlines - Design System Implementation
I currently work as a UI developer on the UX Design Systems Team at Southwest, building core components, ensuring accessibility standards, and developing new standards for the development teams at large. The work is fun and involves daily communication with a variety of different roles across the product development cycle including managers, designers, QA testers, and of course, developers.
Our current long-term project is to implement a new design system using design tokens. Design tokens will enable developers, designers, and project managers to reference design styles from a single source of truth, maintain brand consistency, and provide full cross-platform integration across design and development frameworks. I have contributed to this project thus far by providing research, analysis, and proof-of-concept implementation of potential technologies and standards we can use for the future design system.
Example of color design tokens, and POC design system reference table.
Current work in progress includes investigating 3rd party libraries for use in integrating between Figma and the codebase, and developing a comprehensive table for developers and designers to reference all design styles in one place.
Research process and findings.
I conducted extensive research that included investigating current industry-standard design systems, design token platforms, Figma design token plugins, and design token hierarchy naming conventions. I then made recommendations based on the research that Figma Tokens Studio would be the best tool for generating design token JSON, and Material Design would be the best model for naming conventions.
Stack:
Figma
Zeplin
React
Storybook
GitLab
Case Study #2: Southwest Airlines - Design System Prototypes
I redesigned the Southwest Airlines design system user interface as a personal project, in response to the company’s initiative to rebuild and modernize the multiple existing design systems into a single source of truth.
I researched design references including current design system frameworks and industry-standard models, created finished mockups, and built a responsive, interactive Figma prototype of the redesigned design system as a single-page app.
Redesigned responsive mockups and Before & After comparison.
The finished product included 3 responsive, interactive Figma prototypes of the design system redesign as a single-page app, for mobile, tablet, and desktop, detailed style guide, high-fidelity marketing mockups, and estimated timeline with next steps.
The style guide featured foundational visual elements of the design system user interface, including color, typography, spacing, iconography, and buttons.
User stories for target audience.
I conducted research by first defining the problem statement, then writing user stories, diagramming user task flows, and collecting design references from industry-standard models such as IBM’s Carbon Design and Atlassian’s design system.
I used the principles of Atomic Design to create low, mid, and high-fidelity responsive mockups, for mobile, tablet, and desktop, and built the mockups into 3 interactive prototypes in Figma.
Stack:
Figma
Case Study #2: Mindhack - Design System
I developed an extensive design system and style guide for the Mindhack app, based on researching several industry-standard models, and organized app elements into high-level categories including Brand, Foundations, and Components within a fully interactive Figma prototype.
Mindhack App Style Guide.
I created a style guide to summarize the most prominent app components and visual features, including color, typography, buttons, input fields, and logo.
Brand Mission Statement Overview.
The Brand category includes the app Mission, Voice & Tone, and style guide. The brand voice is direct, focused, and optimistic, with visual themes inspired by gaming, the 80s, and city nightlife, using principles from Material Design, Atomic Design, and Atlassian.
The Foundations category includes fundamental visual building blocks of the app, including Color, Typography, Logo, and spacing, as well as usage guidelines for Accessibility, and resources for other design systems referenced.
The Components category includes reusable components such as Buttons, Input Fields, Modals, and Menu, as well as usage guidelines for each case.
Stack:
Figma
Case Study #3: Mindhack - App Prototypes
I designed Mindhack, a mental health self-awareness and goal setting app, to help people keep track of all their personal data in one place, see trends over time, more effectively manage their mental health, and set goals in a fun and easy way.
I used all stages of the design thinking process to research, prototype, and test the user interface and user experience of the app, and documented the data and analysis in an extensive case study over the course of 9 months. The end product included a fully interactive and responsive Figma prototype of the app, a custom design system, live video demo, and example ad campaign.
Mobile screen mockups.The finished product included a mobile-responsive Figma prototype (mobile & desktop), and 5 user flows for onboarding, data visualization, saving medical forms, setting goals, and recording goal results.
Millennial persona card.
Research was extensive and included defining the problem statement, writing user stories, conducting competitive analysis, conducting user surveys & interviews, visualizing results using empathy and affinity maps, identifying target demographics, developing personas, creating user journey maps, and diagramming user task flows.
I built the entire user interface of the app from scratch, including pen and paper sketches, low, mid, and high-fidelity wireframes, finished mockups, and fully interactive responsive prototype. I used several Figma features to build the prototype, including component variants, auto layout, overlays, and official Apple mobile templates. I also used research results from card sort studies to aid in improving the UI/UX.
I conducted several rounds of usability testing on app, A/B testing, and peer review, analyzed results, identified design flaws, documented results in a usability test report, and applied revisions to the UI/UX, using Gestalt principles and guidelines from Material Design.
Stack:
Figma