McCreary Centre Society
McCreary Centre Society is a non-government not-for-profit committed to improving the health of BC youth through research, evaluation and community based projects. Their vision is that all youth are supported to be healthy and connected.
Timeline
3 Weeks
The Team
Project Goal
To use information architecture to better organise the existing McCreary website to enhance the website experience in time for the launch of Adolescent Surveys in 2019.
Business Goal
To increase usability of the website for staff and their users in order to reduce complaints and have them easily access data, research and information on McCreary
Context
______
McCreary Centre Society conducts their BC Adolescent Health Survey once every five years and is their biggest research piece for them. Their useful information and research about youth is mostly accessed by people who want to learn more about youth in BC, such as educators and researchers. They want to make sure that their website is updated and appealing to their target demographic when these results become released. They have received several complaints from users that the website is hard to navigate and they have trouble finding the information they are looking for.
The Problem
The website is not communicating the right information to their audience and does not seem to appeal to their target demographic.
Research
______
Overview
- Competitive Comparative Analysis
- Surveys and Interviews
- Affinity Diagram
- User Persona
Competitive Comparative Analysis
We analysed four different websites that supply research and articles for the general public to access in order to gain inspiration for our project and to understand what works and does not work in existing websites.
Below are screenshots from these websites.
The BC Centre on Substance Use (BCCSU) is an organization supplies evidence-based approaches to substance use and addiction. The website is quite plain, and has a list view of all their resources that link to external pages
Vancouver Coastal Health has a series of pdfs that users can download but are not organised well. The colours are appealing, but the resources are not easy to navigate
The Representative for Children and Youth supports children, youth and families who need help in dealing with the child-serving system. They also offer reports, statements and resources on their website and utilise a great search and filtering system which we wanted to take inspiration from. The colours are also professional but appealing.
The Heart and Stroke foundation has results and funding opportunities that are shown on their website, but is not visually appealing for the users. The colours here are also not appropriate for youth.
We created a chart to compare the features that these website had in order for us to determine what would make our design successful, and in order for us to know if it will fulfil the users needs. These needs were taken from our survey responses and what they would like to see, or think are aspects of a good website
Interviews and Surveys
We conducted interviews with 5 users and surveyed with 10. Most of our interviewee’s contact information were given to us by our client and most of them are staff or board members with very thorough understanding of the website.
Our main goals were to find out:
- What our user’s main frustrations are
- What research sites they go to, and why they like them
- Our demographic to create a user persona
We took our insightful main findings and then put them into an affinity map to fully understand this information and work our project around.
Affinity Diagram
By mapping out our findings, we can really make sense of the common frustrations that the users have.
Our main findings were:
Frustrations:
- Content too overwhelming and disorganised
- Search engine difficult to use
- Too many steps to get to the result they are looking for
- Low legibility
- It needs an easier way to access information
Content people look for:
- Projects
- Medical data
- Announcements
- Information about youth
Motivations:
By looking at the motivations and how we can improve a general site experience for the user, we can focus our project’s features with them in mind.
- Trustworthy and reliable sources
- Ease of use
- Organised system
- Seeing a variety of projects without being overwhelmed
- Fast downloads and free
- Appealing visuals
- Simple
- Responsive design
The demographic information helped us determine our user persona that we design this website for.
User Persona
Samantha Martin is a high school teacher in Vancouver, BC. who loves her job and youth education. She is passionate about making a change and improving school curriculums one step at a time.
In her spare time, she likes to read and/or volunteer to read to children. She is always eager to learn more and try to help out in her community as much as possible. She is wanting to further her career and eventually create curriculum for children and/or youth in BC as she thinks that there can be a positive shift in how we see education today.
Her motivations are: Trustworthy and reliable sources , Ease of use , Free downloads
Frustrations: hard to navigate through webpages, cannot find what she’s looking for.
User Goal: Her goal is to find a reliable source to download research material for her students as easily as possible.
Planning
______
Overview
- Storyboard
- Key features
- Content Audit/Analysis
- Card Sort
- Site map
- User Flow
Storyboard
We then drew out a storyboard to visualise and fully understand a scenario in which Samantha might access the McCreary Centre Society website.
Key Features
From our storyboard and research, we created a list of key features and goals that this website must meet. The website must:
- Build user’s sense of trust
- Emphasise the three main services offered
- Include infographics and/or visuals
- Be designed for responsive web
- Have a search function
- Be easily legible
- Have accessible downloads
- Have staff portal hierarchy
Content audit/analysis
With the project scope, none of the content was to be audited but this exercise helped us understand the content better. We created a content audit and analysis so that our team can fully understand what exists on the website and where each link takes them to. This way, we can find out where there are too many links and ways to get to a page and narrow it down for easy navigation.
Card Sort
We conducted a card sort study with our target demographic to better understand how users organise information that makes sense. Our main finding was that many people were confused with the content, and came up with fewer groups than what existed on the website. Most users wanted a reports and resources page that stands on it’s own so that they can find all of them at once, instead of it being scattered everywhere.
Site Map
From the card sort we decided to do a site map. The main findings helped us determine that we needed to have a top navigation and a footer. We also discussed this with the client to find out what pages we can group together, and how to move around pages to eliminate too many steps to get to a page.
User Flow
From all our research and understanding the users goal, we created a user flow to help us visualise the user’s decision and steps to complete their goal. This flow also helps us understand where the user might exit, or where they might have to make a decision so that this informs us on which areas to concentrate on more.
User Goal: Samantha’s goal is to find a reliable source to download research material for her students as easily as possible.
Design
______
Paper Prototypes
We started off our design phase with sketching quick paper prototypes of our main screens as a team. This way, we can flush out both of our ideas and find the perfect balance through ideation and testing to best appeal to our user.
We tested these prototypes and our main findings and changes were:
Footer — We asked the user to contact McCreary but they could not find it. We added McCreary Centre Society’s contact info on the footer and rearranged the layout for this to be easier for the user.
Top Navigation — We decided to put the logo in the middle of the top navigation so it’s easier for the user to go back to the homepage. However, after testing, the users were looking for a search bar and we redesigned this in our next design phase.
Reports and resources — Our tabs didn’t test well. The user was trying to find both reports and resources but they couldn’t select both. We decided to add a filter for it in the search function.
Mid-fidelity Screens
We added the search bar into the top navigation in order for the users to easily access information if they know exactly what they are looking for. From our research, we found that most people using the website already know what kind of information they are looking for so the search function will benefit them instead of clicking too many times to get to the certain page.
We initially had a news and updates section for people to be up to date with everything about McCreary, but when we tested, a lot of users said that they would not find this function useful. McCreary rarely posts updates so we decided to remove it from the homepage.
We took our testing results and applied it to the search page by making it buttons instead of tabs. We tested this again and found that evaluations were the same information as resources, so we decided to take this out.
We tested our titles and found that they were too small for users to read and did not give a sense of hierarchy to them. We decided to make our titles bigger. Also, we had a fairly small contact us button in the about us page, so we decided to make it a big button that opens into a bigger box that shows the contact information
Mobile Version
We created a mobile version so that the website can be responsive as well. We created a hamburger menu instead of a top navigation as it has a lot of buttons on it. We initially did not include the search bar but after testing our users found that they needed it. The users also pointed out that there should be arrows that point down so they know it is a drop down and not a button. We also initially separated the staff section but the users said it could go altogether, and under it can sit the contact us information.
During our hi-fi process, we also added a logo to the hamburger menu so that users can always access the homepage easier. We also added visuals that were inspired by some collateral given to us by our client.
We also tested our individual pages with our users and they said that it seemed as though reports and resources were not related to each other. So, we put them side by side and when tested the users agreed that this worked better.
Illustrations
Our team created some illustrations that match the style of collateral given to us by our client so that we can add some life to the website. We took keywords from the website and drew out a more messy but simple style that reflects youth and simplicity. Below are examples of some that we drew:
Final Screens
______
To view the prototype click here.
To view the mobile prototype, click here.