AtomicApp

About Tracks

Learning sales tracking has never been easier using Tracks and it’s amazing drag and drop interface. Tracks is focused on helping small businesses keep up to date with monthly sales and revenue that integrates with both Highrise CRM and Google Apps.

Tracks Home Page Design

Project Request

Tracks provided several comps showcasing their new design that was in need of development. It was requested that the libraries listed for this project be an absolute requirement to fit in with their currrent platform. Before the project began we suggested an atomic guide be created to keep track of components that were already in the system or could be used again in other contexts.

The approach to Tracks’ interface started with each component investigated and isolated using the principles outlined by Brad Frost. These LEGO-like pieces would eventually be constructed together to form a larger distinctive part of the interface.

Sample from Tracks' Atomic Guide

Process

Prototypes were created with InVision to build and structure a working and functional application interface. We also examined the design mockups to identify common UI values for white space, font-sizing and icons to ensure consistency was used throughout the CSS codebase. This thorough examination also helped to identify common naming patterns in order to keep classes meaningful and coherent when and if future updates are made by outside entities.

Flexbox for Header Layout

Since this was a build from the ground up, SVG was used throughout along with flexbox to assist in quick and easy layout typically resorted to with floats and margin trickery.

Motion Design

Motion was heavily based on Google Material Design Motion Principles stating interactions occur from the point of contact giving the user clear feedback and information as to the action without cognitive disruption. A smooth transition helps guide the user to the next step of an interaction.

Menu Toggle Animation
Expando Search Input Animation

Challenges

This project was not without it's challenges in multiple cases. It was required to create a dynamic calendar picker for custom selections that display dates in a very particular fashion. For this we hired the help of Shane Hudson.

Timeline Datepicker

This custom datepicker leverages the power of Rome as a base and config that is combined with a custom JS file to create special conditions and filtering in order to return the correct selections.

An additionally challenging aspect was flexbox layout implementations as cross-browser support was extremely fragile. To solve this issue with older browsers we reverted to table display in our CSS cascade to ensure layouts didn't break for these older browsers.

Final Product

After months of work the interface was ready for testing among a select group of individuals.

Final Interface Design

Noteworthy

This project was a deep exploration not only in atomic design, but also flexbox. Progress of the work was by chance discovered resulting in an invitation to write a guest post for Smashing Magazine titled “Flexbox Interfaces: Tracks Case Study” discussing the experiences when using flexbox for complex interface layouts.