Web Application

  • Category: Web Design 
  • Responsibilities: Design and Layout
  • Tools: Photoshop, Balsamiq

I was tasked with coming up with a variety of designs for an important page.  I tried to produce something that was interesting and eye-catching, but still easy to use.  The system used modern technology and the intention was to use design to compete against the major players; the hordes of Windows 2000 style programs most clients used.  Any design also had to accommodate space for branding too.   

Design #1

Heimdall---Site-UI-Designs---BlueHeimdall---Site-UI-Designs---Blue

I had done a fair bit of competitor research and it seemed that other systems were clumsy, blunt and lacking any subtlety.  I decided to aim for something that people wouldn’t mind looking at all day –  a bit easier on the eye – but unfortunately all the soft edges and colours led to something that felt a bit too perfect.  Feedback I received told me that I needed to produce something more distinctive and to the point.

Design #2

Heimdall_Home_Draft_10Heimdall_Home_Draft_10

This was a better design, but it felt a little flat.  And it didn’t feel quite as if it’d work in the real world.  Certain elements were a bit too well groomed  Perhaps this was the curse of Photoshop, which is a fantastic sketch pad but can produce designs that don’t always resemble the real thing.  I was asked to look at creating something with more depth.  They wanted to see more tanglible surfaces, shadows and less flat elements.  

Design #3

Heimdall - Home - Ivory 9Heimdall - Home - Ivory 9

They were a lot keener on this version.  I liked it, but felt it was a little bland.  Whilst it was easier to visually navigate, the whole thing felt a bit homogeneous.  It didn’t lend itself to branding well either.  I decided to produce a dark version, just to see what it’d look like.

Design #4

Heimdall - Home - Glass - Awesome Header 2Heimdall - Home - Glass - Awesome Header 2

I really liked the look of this.  It was very distinctive and very different to anything else on the market.  Unfortunately though it was a bit far back into Photoshop territory.  And it didn’t lend itself to branding very well either.  Because it was styled in such a particular way, it needed the logo to look similar and we didn’t really have any that worked with it.  Thankfully, we were told that we could start work on branding and that opened some doors. 

Design #5

Heimdall - Home - Synapse 9Heimdall - Home - Synapse 9

Much more branded, this was a bit more interesting that previous designs.  But I was told it was too dark, and I felt it was too tech-focused.  It felt like a product for a different target audience and we had to bear in mind who we’d be selling the system to.

Design #6

Heimdall - Home - Cognition 5Heimdall - Home - Cognition 5

Matching the logo well, this design felt very vibrant and fresh.  It was a good take on flat design, where the principles were there but buttons and highlights still stood out.  But the usability was called into question – it didn’t seem quite down to earth enough and we were told that the logo wasn’t good enough either. 

Design #7

District - Home - No Name - 4District - Home - No Name - 4

Finally, we had a decent brand that was approved and a site design that didn’t work too badly either.  It was dynamic and eye-catching, but still quite easy to scan.  Putting the main menu at the top of the header helped too.  I wanted to spend some more time improving contrast and modifying various elements to make it better, but I didn’t get the chance.  Unfortunately I was pulled off the project on to something else.

Summing up

A difficult project this one.  Whilst it was good experience at skinning multiple designs around the same constraints, it was hard to deal with constantly changing expectations.  It also didn’t help that we hadn’t had a brand at the start.  We were asked to produce something distinctive, but that’s tricky when you don’t have a reference for the look and feel.  If I could do it again, I would have insisted on sorting a brand first.  At the very least, something preliminary anyway.

It would have been great to go back and work on the project more, but priorities changed and in the end we had to scrap the brand too.