Software used: Adobe Photoshop, Adobe Illustrator, Sketch, Atom/Sublime Text/Code, Transmit FTP, Github, many others
In 2012, I was approached to help design and build a new front-end for Wisetail, a small Learning Management System out of Bozeman, Montana. At the time, there was one full-time developer and the company founder worked part-time on some code. The existing front-end was a table-based layout, making it unfriendly for anyone using mobile phones or tablets.
I was responsible for designing a familiar, yet more modern layout for the user-facing part of the product, writing the mark-up, and creating the styles. The aim was to keep the personality of the product while modernizing the look and underlying code.
I chose to use a modified version of Bootstrap (version 2 at the time) because of it's built-in support for media queries and responsiveness for large displays, tablets, and mobile phones. Styles were written in LESS to allow for some variables and other customizations.
The design itself was cleaner than the previous design, echoing design elements users would be familiar with such as YouTube and Facebook.
Over time, requests to make the front-end theme match the branding of each corporate client called for an update that allowed many more elements to have custom variables for color, corner radii, line thickness, and fonts.
This most recent version of Wisetail allowed bespoke on-brand learning to be presented to employees of over 150 companies mainly in the restaurant, fitness, educational, and medical fields.
The initial redesign launch was a success, helping drive revenues and building Wisetail from a company of five employees to one of over 50. Many clients chose Wisetail based on its ability to be customized for their brand.
When Wisetail was acquired from its founder, the responsiveness and ability to be branded were cited as reasons Wisetail was an attractive acquisition.
Even six years after its initial design, with incremental improvements over time, the interface remains one of the leading factors in Wisetail's growth.
I'm proud of the work I did in six years at Wisetail. However, I also can look back knowing how the product is used, and realize I would have done some things differently.
For instance, I would have designed the UI styles in a more modular way to require less specific styling in order to customize. I'd also build from the start for mass customization, utilizing variables in places where the product currently uses a rule, then overrides it with a second, customized rule. This would reduce redundancies in the LESS code that bloat the final CSS quite a bit.
Overall, the entire codebase could be more efficient now, eliminating things like browser prefixes and support for antiquated browsers.
Wisetail UI First Iteration
This is the initial redesign of Wisetail's UI circa 2013.
Wisetail UI Second Iteration
The default UI was refined with a flatter appearance in 2015.
Wisetail Soul Cycle
Wisetail UI customized for Soul Cycle's brand.
Wisetail's UI branded for Jazzercise.
Wisetail's UI branding for Chopt. Fonts and colors were customized.
Wisetail Pivot Point
Wisetail's UI customized for Pivot Point.