UI: Improving the Huddle user experience

Posted by Jaan on February 15th, 2011 | 4 comments

I have a long held belief that what you look at all day is reflected in your output. If you work in a clean, focused and friendly app like Writeroom or Things your output is likely cleaner and more focused.

Scratching the itch
One of the things I’d been itching to tackle since joining Huddle was the UI. Now, Huddle’s UI wasn’t bad, it was just showing its age. It hadn’t changed much since the app launched 3+ years ago. During that time it had grown and changed, just like the web around it. It was still alright, but lots of people at Huddle agreed that we could do better. Especially since Art Director Hudson Maul and I had made sure that the brand identity and brand elements we created would translate to the app it self.

So we did. I assembled a team, pencilled in a few weeks worth of ring-fenced time in the calendar and set out to rework the way the Huddle web app looks, feels and works.

Step one was to take the app to fixed width. Done. Step two was… several steps:

1. Reworking the navigation with tabs on top for moving between sections, and dimples (the elliptical links) below to navigate within each section.

2. Combining the quick links menu with the main tabbed navigation and moving the copy to the (orange) tooltip.

3.Removing superfluous lines, gradients and other distracting design elements.

> New nav, old nav (the dual Huddle logos are place holders for customer and project logos)

The missing ingredient

For the UI project to be a success in the context of a larger app upgrade I was convinced we needed to show off this new approach to a clean and intuitive UI in something… new.

Pick a date, any date
The new dual date picker came to our rescue. In Huddle’s tasks section one had always been able to set a due date. Now our customers had asked for the ability to add a start date.

This is where we would do it!

We went through a massive amount of ideas, concepts, sketches and wireframes. I even built a really rubbish HTML prototype in my spare time that I didn’t show to anyone (the concept was crap, idea ditched, mission accomplished).

> One of my work in progress (but close to the final result) sketches of the date picker.

At each stage we tried to remove something, rethink the standard, find a better way. Ultimately we ended up with the approach you see below. It’s very intuitive and beats many other date pickers, especially in collaboration apps.

> A special point of pride is the subtle styling of the start and end dates. In user testing this won rave reviews. (Thank you to our testers!)

More
Needless to say creating a better user experience and reworking the UI on a live app, used by corporate and government clients all over the world on a daily basis was, and still is, a huge project. It’ll be a long time before everything we worked on (and are currently working on) is rolled out. But as far as second steps go we can be quite pleased with what we accomplished. We created a new plateau, a new baseline, from which to continue improving and growing Huddle from.

The next set of improvements, i.e. our next step, goes live in March.

Some of my brilliant team members:
Alex Brown, UI Developer
Ioulia Anastasiadou, QA and Test Automation
Neill Pearman, Senior Developer
James Cryer, UI Developer (Date picker)
Dawn Carvell, QA and Test Automation (Date picker)