MyGinnieMae Design System and mockups

A comprehensive design system kit for MyGinnieMae

Project Overview:

Role: Lead Designer
Software: Figma, Photoshop, Illustrator

GinnieMae (GNMA) operates out of the U.S. department of Housing and Urban Development (HUD), and guarantees investors principal and interest on mortgage-backed securities. The objective of this project was to architect, develop, and implement a unified design system for GinnieMae’s comprehensive portal redesign. By establishing a scalable library of accessible, reusable components, standardized typography, and compliant design tokens in Figma, we supplied our client with the foundation for good design.

Design System Development

Design Overview

A digital design guide page titled 'Design Overview' by Ginnie Mae, with sections detailing color palettes, typefaces, and usage instructions for branding.

Logos

A design guide for Ginnie Mae logos showing usage on light and dark backgrounds, clear space, lockups, and app icon examples with variations in size and mode.

Color Palette

A comprehensive guide to color palettes, including usage, palette types, color values, and accessibility considerations, with visual examples of palette schemes and color interactions.

Spacing

Page from a design system guide titled 'Spacing and Layout' by Ginnie Mae, showing a spacing scale chart with different sizes of spacers from 4px to 128px, and a bootstrap grid system summary table, both on a blue and white background.
Page from a design system guide titled 'Spacing and Layout' by Ginnie Mae, showing a spacing scale chart with different sizes of spacers from 4px to 128px, and a bootstrap grid system summary table, both on a blue and white background.

Typography

A webpage displaying typography design guidelines, including type systems, headings, body text, background colors, transparency rules, line length, and line height.

Iconography

Page from a design system guide exploring iconography, including design principles, brand icons, system icons, and pixel clarity, with example icons and a pixel grid comparison.

Controls

Section 05 Controls page from a technical guide, with diagrams and forms for display system settings, including controls, text inputs, feedback states, dropdowns, form fields, selection controls, radio buttons, and toggles.

Buttons

A detailed infographic explaining button design principles, types, styles, specifications, and pairing techniques, divided into sections with diagrams and examples.

Headers

Design system guidelines for headers on desktop, tablet, and mobile views, showing different header styles with logo, navigation, and account info for Ginnie Mae.

Footers

Screenshots of different footer designs for a webpage, showing various background colors, layout styles, and information sections, including links and legal notices.
Screenshots of different footer designs for a webpage, showing various background colors, layout styles, and information sections, including links and legal notices.

Alerts

A presentation slide titled 'Section 12 Alerts' from Ginnie Mae, illustrating different alert types, links, and icons with their descriptions and color codes, including standard alerts, alerts with links, and alerts with icons, with examples of success, warning, and critical alerts.

Breadcrumbs

A presentation slide on breadcrumbs design system for Ginnie Mae, a U.S. Government Corporation, showing light and dark background styles with color codes and navigation examples, with the Ginnie Mae logo in the top left and bottom left corners.
A presentation slide on breadcrumbs design system for Ginnie Mae, a U.S. Government Corporation, showing light and dark background styles with color codes and navigation examples, with the Ginnie Mae logo in the top left and bottom left corners.

Tabs

A Ginnie Mae design system guide page about Tabs, covering usage principles, types, tab specifications, and states.

Footers

A digital informational poster about table usage and principles, including sections on blueprints, baseline elements, interactive elements, sorting, types, states, and table examples for desktop, tablet, and mobile displays.

Modals

A webpage from Ginnie Mae's Design System V2.0 covering Modals, including usage principles, types, specifications, and an example interface with sample modals and form design.

Charts

An infographic featuring sections on chart types, including pie charts, bar charts, and line charts, with example data and explanations. The infographic is branded with Ginnie Mae and includes a footer with the company's logo and design system version.

Mock ups

Landing page

Login

Dashboard

Processing