Realpage Design System
Design System & Branding
About
Realpage Design System, is the resource of the global design, UI assets, tools, and guidelines development across 60+ applications for RealPage, a software development leader for the housing market.
Role
Reé Chen & Jess Nordquist
Senior UX/UI Designer  |  
Product Manager at RealPage Inc.

Objective

Realpage Design System empowers product teams to work more efficiently and holistically, creating user experiences that are cohesive and that elevate brand quality.

Realpage Design Ecosystem

All UI components and patterns have been pre-designed and coded for immediate use.
Design guidelines for use, examples and context, as well as documentation for developers
have been included to help guide implementation.

Global Shell
Grid System
Colors
Typography
Icons
Box Containers
Buttons
Calendars

Charts & Graphs
Checkboxes & Radios
Date Pickers
Drawers & Asides
Drop downs & Selects
Editable Form Elements
Error Pages
Forms & Layouts

File Uploads
Image Galleries
InboxesInvoicing
Labels & Badges
Lists
Login Authentication
Maps
Marketing & Commerce

Media Carousels
Messaging & Chat
Modals
Navigation
Notes & Reminders
Notes & Reminders
NotificationsPhoto
CropProgress Bars

Components & Patterns

Ratings
Scrollbars
Search & Results
Settings
Sliders
Social Widgets
Step Wizard
TablesText

FieldsTimeline
Activity
Tooltips
Validations

Foundation Elements

Realpage Design System utilizes a global navigation shell and common grid system built on a bootstrap framework. Structural rules coupled with style elements establish the base foundation for the system.

Design Guidance

Guidelines to enable product teams to make decisions that best address their product needs, while maintaining design quality.

Responsive Framework

Every application is required to utilize the global shell in order to support consistent navigation and easy transitions between multiple applications.

PRIMARY CHALLENGE

RPL introduced design standards that shifted development priorities towards design and usability. To establish trust, the RPL team focused on small wins that were achievable and could be used as models for success

Rebranding

Realpage Design System supplied design resources and support to a small group of top performing applications to assist with conversion. These applications formed the baseline from which we could iterate, having access to direct feedback and observation.

Scale Factor

We learned very quickly that flexibility was key to a successful transition. This sample shows how even with design support, applications of design system varied depending on interpretation and product needs.

Designing a System

Crucial to the design process was to also establish a system for managing current library assets, while creating pathways for expansion and scale for future development.

01
Product Teams select patterns for submission.
02
Library Submission Page is accessible via the Global Library and Provides submission criteria.
03
Collected Pattern Repository is organized into groups based on type & function.
04
RPL Committee sets priorities and approves or denies patterns. Denied Patterns are unique to one product or require revision.
05
Approved Pattern Repository is organized into groups based on type & function.
06
Evaluation, Design, Refine, Develop is managed by the UI/UX Design Team and Front End Dev.
07
Global Library stores all validated patterns for global access.

Our Process

How we build a culture of communication, collaboration & support

Related Projects

Propertyware
UX/UI Design & Product Design
Amulet
UX/UI Design & Product Design
iKnow
UX/UI Design, Editorial Design, & Illustration