Web App UI Improvements

28 February 2013 by Tim Campbell

Earlier this year we rolled out a complete redesign of our website with a new look & feel, cleaner interface, and more comprehensive App Gallery. Once that endeavor went live, we immediately took aim at doing the same thing for our web app.


We usually like to avoid the passage of time being the sole catalyst for redesigning something; i.e. “it’s old, surely it needs a redesign by now, right?”. However, with the positive changes we made to our website, we took that as an opportunity to not only push out some improvements to the app, but to give the brand some much needed visual cohesion. Previously, the look and feel of our website & web app were not quite on the same page, so it was a bit jarring when going directly from one to the other. The visual styles of each are now much more synchronous which gives users more confidence, if even subconsciously, that they’re in the right place.

UI Improvements

App Designer

Underneath the surface we made layout and behavior refinements to different areas of the app, not least of which involved one of its most important features: the App Designer. On a good day the old Designer could be described as plain, and on a bad day, dark & muddled. With not much visual feedback or differentiation between the different areas, sometimes it could be a challenge to know where to look and what to do next.

Improving the visual drabness was accomplished without too much fuss since we could follow the style already established by our earlier website redesign. Once things were brightened up, we moved on to the guts of the App Designer itself. We added headers to the top, bringing clarity to what you could do in each section and inserted a few labels and tooltips to the App Settings area that’d been conspicuously absent. Since it’s the nucleus of the App Designer, the Field Settings section received quite a bit of attention. The main area of focus was making sure everyone could tell the difference between each field level. Sections, and the fields within them, used to have the same background color no matter how deep the levels went. This made for some very intense staring before your eyes honed in on the desired field. We’ve made that easier by zebra-striping the levels with white and gray so they’re more clearly delineated.

UI Design

Supporting Pages

Crucial as it may be, the App Designer would be useless without the ability to create a Fulcrum account, so we paid just as much attention to the app’s supporting pages. For the most part, everything is functionally the same as before, but big improvements were made to the layout, typography, and flow of the subscription, import wizard, and organization membership pages.

Addition vs. Omission

Quite often the evolution of usability requires removing something rather than adding to it. While we made sure to plug any holes in the interface by adding necessary improvements, we also eagerly removed as much visual clutter, confusing roadblocks, unnecessary distractions, and redundancy as we could to make the use of Fulcrum as smooth as possible for everyone who needs it.

What’s Next?

We still have some small (and pretty huge) things in the pipeline for the upcoming weeks and we always love hearing your feedback, so keep it coming.

About the author

Tim is our creative director. He oversees the visual and interactive aspects of our development process.

comments powered by Disqus

Sign Up Today & Start Collecting Data In Just Minutes!

Start Your FREE Trial