Mojio

This new design system for Mojio’s website delivers on their new vision: to provide effective and effortless mobility solutions to their customers and partners. They pivoted from solemnly focusing on hardware offerings to include scalable digital solutions.

CONTRIBUTIONS

Ideation, UX Design, Web Design, System Design

CREDITS

Airlift, Pete McClelland, Caleb Rabinowitz

UX Structure

The following five templates make up the foundation of the new Mojio site. After the initial kickoff and ideation phase, I identified which templates to design by assessing content needs. I used Mojio’s old website and set design priorities with their team. Iterating on the site’s architecture also aided my decision making.

Visual Design Approach

Mojio’s vision for the tone and language was for it to be friendly, authentic, and contemporary. In line with their brand pillars. The layout of each template took on a guided approach, anchored by a set of established interface cues.

Style Guide

Previously, the Mojio team was using Gotham’s heavier weights. The background and typography colors were set in shades of gray, bringing down the contrast further. I decided to use lighter weights of Gotham as it paired well with the more vibrant imagery. Each interface element makes use of the primary colors to draw attention.

Building a Component Library

This component library works on either a dark or light background. Each one highlighting a different content need: wether it’s showcasing a new product, an event, a new partnership, media content, or statistics. I also wanted each component to show its utility at a glance, helping non-designers make quick, informed decisions.