Redesigning Cloudforge with Lean UX

UI/UX Design and implementation, HTML, CSS, and Javascript all in a RoR & Bootstrap environment.

This was a complete redesign of the entire core application UI/UX. Collabnet Inc was looking to bring their Perl and custom JS based framework into the modern age of rapid application development. Strict SCRUM processes and agile processes.

This “green-field” project was a ton of fun. They had an existing product with thousands of users. Many of those users were major fortune 500 company accounts. We had to come up with a UI/UX that accommodated consumer, enterprise, and contractor user stories.

The end result was night and day compared to the original. Proud of the work we did here with a great team and an amazing manager.

When we walked into the product Collabnet had already owned Codesion (formerly CVSDude) for a year. They had a Perl backend with a custom Javascript client. The assignment was to bring the entire product out of both of those technologies as much as possible, rebrand it, and create and platform that any dev could work in and extend. The lead developer chose Ruby on Rails and while he started building the foundational application I got to work with a hired design firm.

Six months later we landed here. The designs from the firm had been dropped, we committed to the Bootstrap look and feel after three full explorations, and most of the application was off of the older platform. We had a new name, a new brand, and new customers.

From a UI/UX stand point the idea was to pull a more consumer experience into the development tool (think what Github did for a terminal tool) without losing credibility with our engineering based customers. We had thousands of existing users that didn’t love the old UI but did know it. We needed to pull them into a new paradigm without shocking them.

I  moved in the more modern approaches to UI, especially mobile paradigms. I got rid of as many checkboxes and drop downs as possible. We needed to step out of the 90’s. While the Bootstrap library was an outside restriction, it did provide us with a great excuse to leave many established but antiquated elements on the cutting room floor. Luckily the team agreed and we ended up with a product that was a major step ahead for Collabnet. In fact, they soon began to adopt many of the patterns and UI elements into their flagship product, Teamforge.

While our visual styles came directly from Twitter Bootstrap, the design patterns on the UI widgets were designated in a living style guide. This allowed engineers to create without the need for a designer at every turn.

Learned skills.

The CloudForge project allowed me to explore some new tools; Bootstrap, JasmineJS, HighchartsJS, Balsamiq Mockups, and MindNode. This was also the first real Lean UX project that was handed to me. Personas, user stories, wireframes, all of it was learned in the fires of live sprints building a real product. I had one hell of a manager.

What would I do differently?

First thing I would suggest is moving into an MVVM framework like Angular or Backbone. I always thought that CVSDude had the right idea about decoupling the UI from the controller and model side but the custom JS… man, that was a monster. Now that the Perl side is gone it would be great to take the final step and move the presentation off of Rails and turn it into a Restful service accessible from mobile, web, etc.

The dashboard seems to be built more for pushing features than for quickly communicating relevant information. Current best practices suggest that dashboards should be more about giving the user information than for being springboards for or containers for actions, purchases, etc. I should have stood my ground more on this but two different product managers wanted more “bells and whistles” and insisted on designing the dashboard themselves.

I’d also pull out a lot of the PNG’s and start using SVG’s. I’ve noticed a lot of anti-aliasing issues as I’ve been revisiting the application after my exit. There’s lots of jaggies on the icons that come from resizing images outside of the 8bit scaling rules. SVG’s would allow them to use any size without worrying about such issues and start playing with low cost animations.

Project Detail 2.1 is an imagining of iterations on the UI/UX. It uses the updated Bootstrap lib, a more consumer grid layout, and updated iconic treatments.

While we pushed for a more flat design aesthetic, it just did not fit within the short term plan. It would have stood out against the other products in the CollabNet family so we stuck with the beveled look and feel for a lot of widgets.

It would have been nice to create a responsive layout but the owners decided not to focus on mobile. Shame given where all the growth in internet use is and this was really a “manager’s tool”.

#HighchartsJS #MindNode #JasmineJS #BalsamiqMockups #bootstrap