The purpose of the St Munchins Community Centre website is to boost knowledge on what is going on at and around the community centre situated in Kileely. The centre is a hub for many amenities, hobbies and services of the area. For my module 'User Experience In Practice', my group were given the task to redesign the St Munchins Website. We followed a user-centred design approach to complete this redesign.

The mission we followed was to :

Research

We started out this assignment by conducting a wide variety of research into the website and community centre users. We sent out a survey to get data from people who use/d community centres and what they feel would be useful on a centres website. The surveys were beneficial as we wanted to get as much information as possible in a quick time frame from local Limerick people who may be able to help us gain some knowledge in this field.

The validated user needs of a community centre website as taken from our survey results are-

People browse community centre websites to see what’s going on in the community and see what’s available.
Users want to see more info on events.
People new to the area are looking to meet involved members of the community.
Fast spreading of news.
Great to know the main people in the various organisations.
Could be great for tourists to see what’s on offer.
To know the opening hours, costs, facilities and parking etc.
Easy scheduling of meetups for group exercise.
A list of professionals and trades in the community that hold qualifications, skills and wealth of knowledge could be of Local help especially in a crisis or emergency.
A list of local shops

Following the survey distribution, we then interviewed two people to see if there were any specific issues with the survey and to get a grasp of what feelings people held about different aspects of community centres and their websites. The following points were made by both interviewees:

Community centres are viewed as community-driven and built centres that provide facilities and events for the local population
The website must be quick and easy to use, read and understand
Events are one of the main reasons to visit a community centre website - a live calendar that shows events and rooms for booking is desired
Facilities, times and costs are also looked for on the website
The website must be accessible to those with disabilities or mobility illnesses.

After setting up and sending out a Google Form to gather real insights, we did a site evaluation in which we found the poor parts of the website before moving forward.

We then looked at 5 ‘Competitor’ Community Centre Websites and created a simple table in Miro to evaluate them based on 9 metrics/headings.

Following the interviews and surveys, we were able to create more accurate personas on the target audience of the website

Following this, we created two user journey experiences and mapped them. Firstly we did a user experience of St.Munchins Community Centre web page and then secondly, we completed a customer journey map of one of the direct competitors, Roxboro Community Centre. As a result of comparing and contrasting the magic moments and pain points, we decided to implement a number of their strategies and designs into our redesign.

Accessibility

A major priority for us when transitioning to the design stage was how accessible our design is for our users. We found from our research in the previous stage, many of our users are of the older generation who may not use the internet often and also may have visual and hearing impairments that could affect them viewing the relevant content.

To ensure that our website is designed for all abilities and that no one is at a loss, we used different tools and researched the best practices in accessibility for all types of users. Such sites include ‘wave.webaim.org’ which is an evaluation tool where we took note of errors, structural elements, contrast level issues etc. Another website we used was the ‘Easy Checks’ on ‘w3.org’ which describes basic issues of accessibility.Both these resources were extremely helpful for us and highlighted accessibility problems we might not have been aware of in the redesign of the website.

When designing for the new website we focused on making sure that contrast issues were not present. Generally, we have brought the prototype up to level ‘AA’ accessibility in terms of contrast; and we have alternative indicators where necessary.

Design

Before we began creating the updated site map for our redesign, we wanted to ensure our navigation structure is effective. A way in which we could test this is by using a card sorting technique with our new tab headings. We used a close sorting method in which we used our new tab headings as our categories and the specific titles that link to them as our supply cards. We then asked the users what menu tab they think each page is linked to. From the results we gathered in the card sorting exercise, certain issues were raised that had to be discussed before creating the final site map. Below showcases an example from the results:

Here is our finalised site map:

We decided to create a number of user flows to present some of the new features we were planning to implement in our designs, this really helped the whole design team visualise screens for the users.

Finally, we were able to proceed to our wireframes and low fidelity prototypes in which we first created our screens on paper and then created our low fidelity prototypes.

After making our final decisions on our paper prototype and picking the best features and pages suited to our redesign, we began creating our medium fidelity prototype on Figma. This involved us first creating a standard UI Style Guide that would be implemented consistently across the website before moving onto creating our prototype.

Below shows an overview of the high fidelity design:

St Munchins Community Centre Website Redesign

2021

In order to get useful feedback on the teams layout and UI style early on we conducted some guerilla tests. Feedback from these dictated many design decisions and insights we found that have been addressed are all in the table below.

Click the image to link to the interactive high fidelity prototype:

Here is the link to the overall Figma file that contains the 3 responsive screen types of desktop, mobile and tablet:

https://www.figma.com/file/IyhlF8wdcTpAKXIlCUiu1B/St.-Munchin-s-Wireframes?node-id=112%3A0

Usablity Report

When conducting our usability testing after creating the interactive prototype, we took inspiration from the test template provided on ‘Usability.gov’ when creating our usability report.

The purpose of the test was to assess the usability of the web interface design, information flow, and information architecture. Five attendees participated in the test.

In general, all participants found the St Munchins redesign to be clear, straightforward, and 80% thought the website was easy to use.

Test participants attempted completion of the following tasks:

Find the Cafe menu
Book a space in the ‘Salon’
Book a crafts room once on 9-11 Wednesday
Find the Meals on Wheels number
Find out more about the boxing classes in St Munchins
Find the Community News

Here are examples of the tests and results: