THE CHALLENGE
There are many apps out there that track the prices of cryptocurrencies, yet many of them seem to require a degree in finance just to check a few values. Often users are overloaded with many tiny numbers and giant tables, or they are lost in a sea of black and gray graphs and buttons. When in reality tracking a portfolio of time-sensitive information should be all about patterns and readability. The main goal in creating this was to ensure that after just a few moments of use, users would no longer need to find anything or wonder how it worked — they’d just know.
Regardless of the size of the app or the team building it, this type of project stands to benefit perfectly from a well-planned design system.
DESIGN SYSTEM
Design Systems are a combination of component libraries and style guides, with the addition of documentation and structure. They define UX patterns, usage info, specs, and product principals; as well as create a process to ensure alignment and consistency between teams and to users.
Overall Structure
Principals — The overall direction of the product, the feelings it should convey, and the standards it should uphold.
Foundations — Branding and layout guidelines that set a baseline for all designs.
Components — Interface elements and tools that compose all screens and features.
Downloads — Images, icons, and fonts that are needed to build the application.
Components
These may be the most used pieces of a system. They are the plug-n-play parts that designers and developers could follow the documentation, place a few on a screen, and make a successful page/feature/etc. For this app there are three levels of components: Basics, Tools, and Templates. Each level expands upon the one before it.
There are 5 parts to every component:
Preview — An image showing what exactly we’re talking about
Purpose — When and why is this component used.
Rules — How a component functions and how to use it; including what to Always do, Never do, and Optionally do.
Examples — Different versions and possibilities that could be configured
Specs — Details on sizes, margins, colors, etc.
Completed System
I used InVision’s Design System Manager (DSM) to not only house all of the designs and documentation, but also setup a robust and dynamic library, editable codebase, and sharable styles.
APPLICATION DESIGN
There are three main features of the Crypto Tracker app (1) Inform on the value of all major cryptocurrencies (2) Track the value of the user’s cryptocurrency (3) alert to changes in the market. Determining what these functions were, what they displayed, and where they lived was the easy part. This is the part that almost every crypto app gets right, it’s that next part – making it usable, helpful, and simple – that’s what took the majority of my effort.
Important functions that would be used over and over again were lists of currencies, form fields, and graphs. Instead of designing these items for each use case, I created a set of rules and then made designs that could flex to the rules. Of course, unforeseen use cases came up, but the designs adapted perfectly. This process also worked beutifully for small ideas that were continually reused, such as filters opening drawers and how to display price changes. The tone principal in the design system also led to one of my favorite ideas, the sentence style form.