We build the web.

Ready to talk about your project? Speak to us!
Ready to talk about your project? Speak to us!

Case Study
PitchPoint: Responsive user interface

Iphelion approached us during an extensive overhaul of their successful pitch generation project. They were upating a significant, battle-tested codebase into a more modern structure. Part of this involved critically rethinking the applications user-interface, in light of changes to browsers capabilities and user's requirements.

User-first principles.

We began the UI design process by assessing the needs of the end-users of the software. The bulk of the application is data-entry and transformation and so the primary goal is to be able to rapidly and reliably input data. The first consideration was therefore form input and layout design, to maximise utility.

A fairly conservative approach was adopted, in sympathy with both the target audience of legal professionals and the daily usage patterns anticipated. The design team drew inspiration from common paradigms on the web, always promoting clarity over novelty. Form elements were gently brought into line with brand guidelines, whilst remaining recognisably similar to the common browser defaults. Layout is clear and uncluttered, and all elements were designed to be fully accessible to users with visual or physical disabilites.

When composing the elements of the designs into a cohesive whole, the focus was on surfacing all the data required by the application in as recognisable a way as possible. Well-known UI elements were refreshed and recycled into a clean and modern look pitched to be instantly recognisable. A brand-appropriate colour palette was sparingly accentuated with common-usage colour language to highlight areas of immediate importance, although this is always as an aid, rather than a primary communication method, in order not to exclude colour-blind users from the critical information. The design team worked closely with project stakeholders to ensure that the correct focus was given to the correct elements.

Modern, inclusive technology

A major driver behind the front-end refresh was the fairly new adoption of smaller, mobile devices to access the online application, so when building out the front end consideration had to be made toward that. The grid-based, simple layout had been planned to easily break down into accessible, understandable components on a smaller screen. We built the application out as a responsive interface, ensuring that mobile users and desktop users all had the exact same content presented in an appropriate manner.

Care was taken to ensure that the traditional-looking, mouse-focussed design had room to breathe on a touch device, and performed well on smaller, lower-powered devices. Restrictions were enforced on our approaches here, as some key clients were still working on fairly old browsers, and also needed to be supported, so we kept javascript to a bare minimum and ensured it was portable and performant. All CSS was conceived and tested to ensure that the latest devices received the best experience, whilst older devices remained fluid and accessible.

The design was then built into the applications front end templates whilst work was ongoing on the backend application. The end result was rapid delivery of a fast and responsive application, with a very positive response from the project stakeholders and users.

Why not and we’ll get right back to you!

album cover

We're listening to:

BBC Radio 6

6 Music

What we’re tweeting about:

Follow on twitter for all the latest and greatest web trends.