Tearfund.org

We were involved from an early stage of the project in a consultancy capacity, to work with and mediate between Tearfund’s design and IT teams. In contrast to the previous mobile “bolt on” site, we made the case for a single responsive website to better service the organisations growing mobile visitors. In addition to providing technical development we also introduced several new design and development techniques to encourage a responsive thought process throughout the transition.

We built interactive wireframes at a very early stage in the project to better explore how components would work across devices and to give non technical stakeholders fast access to some of the difficulties (and solutions) to issues surrounding mobile first responsive design. This fast iterative approach encouraged cross departmental collaboration to the design process.

By prototyping early, we were able to cost effectively explore the best solution to each individual component. Instead of treating each “page” as an atomic design we instead focussed on individual components as the building blocks to the site. This enabled us to build many re-usable sections that could be re-deployed elsewhere on the site in the knowledge that they would work responsively and be aesthetically and functionally consistent.

Time was not only spent on how components & content scaled to different screen sizes, but how different input methods could be best used to tailor the user experience for each device. We introduced 1-to-1 touch input for the slider when appropriate to make the website more intuitive to smartphone and tablet users.