UI Enhancement
Zero States Redesign
About the Product
Realm is a Church Management platform that puts the most important tools for ministry all under one roof.
It’s one place where staff can perform all their administrative and accounting tasks. It’s the one place where pastors can access all their church analytics or communication tools. And it’s one place where every congregant can sign in to stay informed, be connected, and focus on multiplying their ministry.
Project Overview
As part of the Realm UI redesign, the team implemented zero-stage / empty pages for all the areas of Realm that includes 80+ pages.
My Goal and Responsibilities
As the only designer on this project, my job is to redesign the illustrations for all the zero states and consider more appropriate wordings. The goal is to attract users' attention to the no-data situation and encourage them to have the right action to start the journey of interacting with products. The visual language of the final design is consistent with the new UI system and the layout of each zero state is consistent.
Product Type /
Web
Role /
UI Design
Year /
2022
Color Palette
The higher the color contrast, the higher the priority, the more emphasized the idea.
* All the colors are from the design system of Realm.
Graphic Design Guideline
Since Realm will be iterated, and new functions may be added in the future, it is possible that new zero states will be needed. So, I created a guideline to help other designers who might work on a new zero-state page design consistent graphics quickly.
Instruction for Developers
There are some rules for the size of illustrations, texts, and spacing:
-
The display size of all the zero states illustrations is 232 px * 224 px (W: H).
-
Content Headings fonts: Lato, Bold, 18.
-
Content Body fonts: Lato, regular, 15.
-
The horizontal size of all the texts under the illustrations should be limited to 600px and they’re still responsive.
-
The space between the Title words and the body words should be 8px.
-
The space between the illustration(232 px * 224 px) and the Title words should be 0px.
Final Design
Final Design
