Lineups

Started by Philip Meyer a programmer and seasoned property management expert, Lineups uniquely fills a hole in the current property management market. Philip developed Lineups as a tool for other property managers to better understand and utilize competitor data. His personally built algorithm scans a variety of sources and then aggregates that data into a beautifully designed UI. Visit Lineups.io

Lining it all up

UX/UI Design

While the bulk of the web app had been designed already, no code had been committed yet. Lineups would be built in React and required a static HTML version of the design to be marked-up in order for the React development to stay inline with the desired look and feel.

Web design screens

A few objectives were defined. Several components still needed more UX consideration as well as adjustments to the UI and animation on the home and pricing pages.

Clean HTML5 markup
Informational animation
Wireframe HTML
HTML Wireframe
UI components

The Outcome

Front-end Development

Considering that the bulk of the designs had already been finalized, my first steps were to setup a proper development environment to begin building the system. I decided on an array of JS plugins to be built on top of the HTML5 foundation.

Front-end development tools

After discussions with Philip we decided to use Bootstrap, a widely popular boilerplate framework that will allow us to rapidly construct the various components. Bootstrap comes packed with tons of CSS3 and javascript-based interactions. To achieve more complex animations and animated interactions I used Greensock.js or GSAP / TimelineMax and ScrollMagic.

See the Pen Build Lineup Map - Lineups.io by Chris Samuels (@anycircle) on CodePen.

Lineups home page

After my portion of the project was completed Lineups then entered the heavy development phase. The app is being built with React and is currently still under development. Lineups has not officially launched yet but the marketing site is live. Visit Lineups.io