The Spiers Centre Case Study
The Speirs Centre came to MESH to build and upgrade their old website in order to communicate the organisation’s vision to the wider community.
The Spiers Centre Inc. is a not for profit charitable organisation that has a vision of building a strong caring community, free of adversity. The purpose of The Spiers Centre Inc. is to relieve the poverty, misfortune and distress of individuals and families in the northern suburbs of Perth. In pursuing this, we aim to make a positive difference to the lives of individuals, families and the community through the provision of a range of practical and innovative services.
The goals for the new website are
- To ensure responsive growth
- To unambiguously state what the centre does.
- To have a design that’s user-friendly and beautiful
- To design a user-interface that flows freely, allowing users to navigate easily and find what they need quickly and efficiently.
- To have a site that targets the appropriate audience
Research
Following established industry standard research methods, the students began to have initial meetings with the client in order to establish the goals for the project. This meant visiting the Spiers Centre in Heathridge and taking part in the various community events. From these site visits, the students were able to put together a design and development brief that engages all the aspects of the project such as personas, competitors analysis, content strategies, schedules, a work breakdown structure, wireframes of the website content, a sitemap and design concepts.
The Design and Development Brief
Personas
A persona is a generalised list of psycho-social characteristics that the designer can always refer to when designing. As per the client’s goals for the website, the students settled on three personas, an office worker willing to donate time for volunteering, a wheelchair-bound man looking for work and a single mother who works part time.
Competitors Analysis
In order to understand the client’s context and industry, the students completed a competitor analysis. The competitor analysis provides the designer with a clear understanding of the communication and visual strategies of other organisations in the field. The competitor analysis generally delivers an analysis on- the competitor’s design strategies.
– the competitors content strategies
– the target market or range of personas
– a list of coding errors
– an accessibility rating of the website for people with disabilities
– a rating of website loading times
– the number of browsers that the website operates or does operate well within
Content Strategy
Much of the content on the existing Speirs website needed to be rewritten and updated in order to engage the Speirs Centre’s clients in a more productive way. The students first made a small questionnaire in order to understand what content the Speirs Centre’s clients wanted. The students then gained the executive directors support for the new content strategy. This required outlining the client’s responsibilities in relation to the project schedule and then developing clear guidelines around who was responsible for the creation and maintenance of the content.
The students determined that
-images and photos would be taken and sourced by the students
-content for the ‘upcoming event’ information, an ‘about us’ and ‘news section would be delivered by the Speirs Centre
– Facebook post integration into the website will be handled by the students
Mood Boards
Based on the research so far the students then created a series of mood boards that reflected the mood and feel of a possible design direction. Once the client has chosen the most suitable mood board the students use this mood as the basis for a range of design concepts. In this case, the client chose the professional and friendly mood
Wireframes
In line with the goals of the content strategy a series of wireframes were constructed and then shown to the client. Wireframes are about the flow of information on a webpage and they detail the functional as well as content areas in order to better gauge the information architecture of a webpage. The wireframe below is just one version of the information architecture for the new website.
Design Concepts
The design concepts are a synthesis of all the student’s research findings in visual form. Once the design concepts have been approved by the lecturer, the students must then present them to the client. More often than not the client requests revisions to the design, and so students must change the design in relation to the client’s requests until a final design is signed off and approved by the client.