Hackney Windrush

To begin the project and translate their idea, the client provided us with some wireframes and a loose sitemap. Our first task was to analyse them both to gauge their appropriateness in respect to what could be feasibly built within the 1 month timeframe we were set.

The main issue with client site maps put together by clients and not designers is that they can sometimes overcomplicate journeys and not accurately map out what can actually be developed. With all things considered we designed our own site map to first establish the scale of the website and to understand the key actions we want users to take on each page.

The first major design requirement we were set was that the client didn't want scrolling on the homepage. This was more of an aesthetic choice rather than a function one, but it wasn't a challenge that was too difficult to work around. We were also given a "mosaic/tile" theme to design to which, considering the lack of scrolling, made the design a lot easier to produce.

With a solid map and aesthetic decided we were able to produce some low resolution wireframes to illustrate how users could navigate across the website, highlighting key sections and a layout that could be optimised across different screen sizes. The main action we wanted users to take on the website was to register their attendance to local events that were being hosted in their area, so with the wireframes we were able to show the journey that would make this possible.

We set out the wireframes with indications to the key actions, aesthetic and features we were looking to include in the final design, and after getting the sign off from the client and a few rounds of user testing, we were able to develop some higher fidelity wireframes in preparation for the development phase.

We used the feedback and rounds of iteration to get the wireframes ready for development. Important decisions were made to keep the scale of the website down, like to direct users to off-site booking forms, in order to ensure we weren't overcomplicating the build and keeping within the timeframe.

With respect to an older user base, we had to adhere to strict usability guidelines; considering colour contrast and text size/scaling to aid users with visual impairments, navigational assistance on to ensure users with site readers can navigate understand the imagery and a tabbing system that allowed users without keyboard access to engage with the website.

We hosted additional rounds of user testing when we had finalised the wireframes and at stages the design to ensure we were appealing to our desired cohort. At the point where we were satisfied with what we had, we used Webflow to develop the final website, and set up a custom CMS on the backend to ensure the client could manage the website and content after the onboarding phase.