Transmit Design System

Building a language for one of the leading digital Bible ecosystems




The ESV iOS app alone has over 1 million uses a month. While it’s a reading app at its core, business leadership desired to introduce new forms of content to readers, such as audio readings and educational video courses. Sounds great! As the sole designer, I noticed several problems ...

The mission of Crossway is to present the Bible text in an uncluttered way that is respectful to the text and clarifying to the user.
Problems 🫤
Needs design consistency to build customer trust
Lacked design patterns that scaled for new features
No source of truth for design language
Current design failed accessibility standards
Large tech debt on iOS
Solution ✅
I built a design system for the ESV ecosystem and composed a shared language for myself and the development team. These actions sped up our delivery process, created design consistency to build user trust, and allowed for scalability for new features.
Building a Solid Foundation
High importance is given to uncluttered experience that lets readers focus in on what matters most, which is the text. With that in mind, focus was given to accessibility and space when building out the Design System. In order to have a solid base, building a language around color, spacing, and typography was the first step.
How the color roles relate to the variants, and how they’re applied across the interface.
Color tokens in action
These color tokens allowed us to apply color in a consistent and meaningful way across the interface. They provide a layer of abstraction from the hex values themselves, making it easy to implement large-scale changes across the app.
Embracing white space is an important aspect of the ESV brand, and it's an often overlooked part of product design. The current design used spacing inconsistently throughout the app, creating rhythms that weren't harmonious. My goal was to create tokens to take the guesswork out of spacing and help deliver clear, functional layouts.

Starting with a spacing scale based on a geometric progression within a 4px grid, I used a t-shirt naming convention. This limited the amount of options to create a consistent and purposeful use of space.

The current app used 7 total icons, but needed an expanded set to welcome in new features. Discoveries made in the audit revealed inconsistent weights, colors, and frames.

The ESV digital experience uses Hoefler & Co. fonts Gotham and Sentinel for headings and body text respectively. The goal was to create a hierarchy that improved readability by leading the eye through the layout.
"Our team has been very encouraged by the level of consideration and foresight that has gone into the design system. We have more velocity as we build new interfaces, and iterating on them is exciting!"
Aaron Falls
iOS Developer, Crossway
“The new design system is a huge win for the mobile team.  It’s really paying off big.”
Matt Reimer
Mobile App Director, Crossway
Introduced the business to Figma; onboarded stakeholders
Successfully advocated for accessibility standards
Started bi-monthly design/dev reviews
First iteration of app update launches fall of 2023
While working through the details of this project, it was a test in endurance being the sole designer. However, I learned that frequent communication with the development team is key for building a language. The trust that grows with collaboration and transparency in this process has allowed everyone involved to contribute to the direction of the product. I hope to continue to foster this type of environment.