Style-Guide-Cover.png

MortarStone Style Guide

Creating a style guide to streamline the MortarStone development process and enforce consistency throughout the platform.

Covering a broad range of topics

Covering a broad range of topics

The objective of the MortarStone style guide was to cover a wide array of topics related to the MortarStone user experience. 

Members of the MortarStone dev team can use this document as a resource to catch up to speed with our fundamental principles and style but also use it as a reference tool to enforce a consistent user experience.

Outlining design principles

Outlining design principles

I felt that ensuring that the MortarStone team is on the same page from a high-level conceptual level was important to highlight. Our approach to solving problems is itself a style. By ensuring that we look at problems and work towards their solution in a conscious and consistent way, we make a big step forward towards building a better user experience from the start.

Accounting for error

Accounting for error

The MortarStone style guide shows team members suggested ways to deal with several different contingencies that may arise in the user interface.

The style guide covers everything from error states, displaying UI elements inside of modals, loading and saving states and more.

Terminology

Terminology

A big problem that affected the user experience when I started working with MortarStone was the fact that there were many different terms used throughout the interface. Sometimes two similar terms were analogous and sometimes they had wildly different meanings. To make things harder, none of the terms seemed to be used in a consistent manner. This made the experience confusing, as users were constantly wondering what these terms meant.

I created a list of terms with descriptions in an effort to enforce more consistency in our language and reduce confusion.

You can view the full style guide here.