Design ideas for your Housing Association website

It is critical for the prototype designer to meet with the focus group of the Housing Association via a workshop in a discovery phase.

Focus on the audience

It is critical for the prototype designer to meet with the focus group of the Housing Association via a workshop in a discovery phase; this helps to really understand who the audiences are, what they key needs are and how they journey through a site. It is the basis of a successful design process. It is however important not to come to any project as a fait accompli. Every audience differs in terms of specific requirements, demographics, digital literacy etc.

Design is split into two distinct processes:

  1. The creation of the layout, navigation and interactive nature of the site
  2. The form – i.e. the creative design and brand layer created on top of the proven functional approach

This is delivered by wire framing the layout of the new site, prototyping it and testing extensively with the end user audience. It is the only way to truly get under the skin of your audiences and define the optimum approach to layout, calls to action, and navigation.

True on-line branding is the user experience. Enable a user to easily find out what they want, do what they need, and your brand is in credit. Follow the trend of many corporate sites and use a large home page image and wishy-washy language, but you’ll annoy users and your brand suffers.

Our starting point for good design is to put the user objectives at the heart of the process in the context of your desired outcomes. For example, your strategic goals are likely to be:

  • Increase Channel Shift by encouraging more self-service
  • Increase the relevant targeted audiences our homes can be marketed to
  • Increase digital engagement and adopt a strategy of digital first
  • Increase digital inclusion and promote the accessibility of the website

Our approach is to break down these outcomes into deliverable tasks by individual user types to reach across all of the diverse audiences you have and meet their needs in terms of ability, digital literacy and their desired needs.

Test and test again

The only way to test effectively is to prototype: test, amend and include the learning and repeat.

This is a tremendously useful way of approaching user-centric design especially when we employ user-tracking tools such as eye-tracking techniques in small focus groups and click tracking tools for wider web-based testing. It enables us to thoroughly identify what works for users such as:

  • Priorities of navigation
  • Calls to action
  • Appropriate language used
  • Size and position of buttons

So it is essential to create interactive wireframes bringing the knowledge gained from past designs and testing processes as well as the HA desired design approach; an initial simplified prototype to test with your audience will suffice first. The feedback and observations received are instrumental in developing the prototype and refining it to fully meet the organisational outcomes in the most efficient and elegant way we can. It is important to involve all stakeholders. This approach sets the scene for a successful online brand by putting the user at the heart of the site.

We want the user to have a comfortable sure-footed journey through the site which is also visually pleasing. But it is also critical to establish brand equity especially after a rebranding exercise and by adding visual assets to complete the brand such as iconography, a special font or typical use of imagery, make it personal. Ideally the user should feel the website is a friendly useful tool from them to pay rent, communicate, or find information, a place they will return to over and over, because there is interest.

Design not for design sake, but with the user in mind

There are many web design trends to follow and they change quickly, and even though we want to help shape this trend, with our solid graphic design foundation we advocate simple design, as in most cases it gets the message across uncluttered and engages best. As users, we deal with a non-stop flow of information, some of it important and relevant, most of it not. Hence, as a user, we are constantly evaluating and filtering information. With the use of smaller screens the visual communication of messages and content therefore needs to be uncluttered, flat, and to the point. We welcome the reduction of clutter in a user interface, but believe this requires attention to detail and good quality checks.

Create a design with personality

A simple design approach however does not mean that a design will end up impersonal; with the right use of good quality imagery and illustration we can create a very creative and personable space. This can be helped with the choice of narrative images / illustrations, as images that have a strong emotional, conceptual and often artistic meaning can add value to usability. This is especially popular with the audience within the housing sector. A really nice way of illustrating facts and figures is via infographics, which are popular and aid online marketing. The designs require large ‘call to action’ buttons; the user must feel supported and the design needs to offer a ‘friendly hand’:

  • ‘How can we help you?’
  • ‘Have you found what you are looking for’

And by using a large friendly font, nice strong colours, and good legibility, we can emphasis these messages.

Meet the objectives

A web design must not be pretty to look at but should be functional and very usable. The objectives of a designer is to communicate a message, to engage and to help the user identify core-tasks as well as give orientation; online that may mean offering content which may be a critical requirement a user has, such as reporting a repair. Then, when we have checked that the user needs is satisfied, we can make the design look good and communicate the brand values of the organisation.

Content is king

Working up focused navigation which is consistent and user-friendly is a good starting point. The design process looks specifically at content, helping editors establish content early so that there is a plan ahead for styles of headings, break out boxes, etc. – the overall objective: to communicate key messages and make sure the user understand the key tasks. Scaling down content by introducing executive summaries and conclusion each page really helps; design to-the-point- and don’t make the user guess.

And now to the design ideas

The ‘story’/ ‘the narrative’/ the human aspect is key to a design,. The user should be at the centre of the design. How imagery is used signals a message to the target market, and hence including images of people who do, engage, are active within the neighbourhood and reflect the brand are ideal. Getting people to have an emotional connection with your organisation is a key factor in securing long-term engagement.
Suggest a core palette with the brand guide, possibly have a colour coded site which allows residents or homeowner to find their key task easily. The site should become a ‘place to be’ AND a place to come back to: offer interesting, changing content, supported by engaging imagery.

The design process

The homepage design will be a very personal journey for the stakeholder involved in the project, therefore it maybe an idea to park the design of the Homepage and commence with a key landing page such as ‘Find a home’ or ‘Residents’. As the content is important, look at a very engaging information page which has photos, highlight boxes, teaser content, testimonials etc, all styled with as much space around it to let the design breathe. Appropriate inviting large images could change each time the user returns to the page, this will then almost become part of the online brand. Keeping it sequential is a nice touch, for example choosing a narrative in an illustration style, potentially signposting with icons, or a similar style of a teaser content or a quote which follows through each Landing page can give continuity.

Research – mood boarding

Researching the sector, discussing ideas prior to design process is important as it ensures that the design brief is comprehensive and aligns the understanding of the objectives early on. Start a mood board which shows ideas, wild cards to give a feel of the online brand, the visual language. Play and be free with this. This first phase also helps us establish good communications between people working on the project, and it highlights risks early, such as personal preferences, likes and dislikes.

Testing – testing – testing

Every design requires testing for business objectives, design objectives, engagement, responsiveness and contrast. A design must be memorable and support the online and offline brand strategy and help the marketing objectives, be that a channel shift or a new brand approach.
Even though we love the mood boarding phase and designing, we know very well that it’s all about details: making sure all content deserves the correct treatment. At all times it is critical to check brand guidelines and values, to make the whole website a complete design piece that holds together with integrity. Take it further and engage with the customer to ensure they adhere to the design vision set out at the beginning, once the content goes into the site, especially with different editors in an organisation it is critical to have an objective hand observing that process.
Furthermore engage in a post-live A/B testing process using the advanced features of Google Analytics can help testing; it helps to identify what works and what can be improved by measuring comprehension by the audience.
For example, we present the user with:

  • a graphic containing a large font, and image with an orange call to action and try
  • a large font only with a call to action

– and then test which engages more. This is exciting as one can actually measure the engagement accurately by recording how many users engage with that approach.

Working with in-house designers in parts of the design process

Internal designers are able to communicate the organisation’s brand values and help assure the corporate identity side of the project; this can be positive for a project. There may be a potential risk for putting too much reliance on a designer’s understanding of the graphical elements of a brand. It is important that an in-house designer has a good understanding not just of print design but all aspects of interactive nature of the web.
The joint process works best when working together as one team with one objective; and both parties bring what they do best.

Working on a re-brand alongside the website project – risks

  • Rebranding is a very emotional phase for an organisation, especially if there are also mergers involved, (with additional issue of possibly working with a brand agency)
  • involves the visual communication for the web but possibly take this forward and offer other off-line printing and branding assets (seamless)
  • important to create an right image that clearly and effectively communicates with your target audience
  • test the drafts online
  • have an agile design phase, to be able to swap in an out logos and test, but also give advice on suitability of colours and fonts on the web
  • give advice on font styles and sizes, tracking, leading etc. It is great to receive a completed branding guide but in most cases adjustments to brand fonts chosen are required, liaise with the agency to find alternative substitute fonts, or we can advise if embedding style sheets or licensed fonts is preferable.
  • advice on Colour palette, check contrast for accessibility/ legibility for link colours etc to comply with standards and give advice on alternative options
  • imagery: advice on page load
  • most graphic designers are Apple based, so it is important as an agency to be the middle man to make the fonts and other design assets work for both Apple and PC
  • always ask/ give honest feedback
  • give advice on resizing and shape of a logo may be particularly tricky, a logo may look good on a letterhead but then not be so legible on a mobile
  • also give advice on straplines as critical for titles/seo
  • support the content editing team to find the right ‘tone of voice’ for the web to be aligned with brand values

Designing for the Housing Association sector is exciting as real people and real stakeholders are involved. Helping people to channel shift and for example help them pay their rent online is a real achievement, not just for the HA but also for the user. Produce a good prototype, test all user journeys and the sitemap, whilst really listening to the audience adapting if necessary, and this can make a real difference to the residents as well as the Housing Association as an organisation in the future.