WATARI

Click 👉 HERE 👈 to check out the deployed version! Please, keep in mind that this is a work in progress. Not all links will work as desired.

Introduction

Hello There! This is a re-design of the website watari.ca a counselling and support services organization based out of Vancouver, CA. In 2019, I collaborated with 4 other students and the client across 5 time-zones to complete this project as the final graduation requirement of McMaster University's Web Development program.

• the site has since been updated, screenshot of original homepage below vvv

The Concept

Watari Counselling & Support Services started in 1986 out of a basement in Vancouver. They deal with 4 main issues in the community:

1. Kids suffering from trauma
2. Indigenous families facing challenges
3. Refugees and immigration (integration)
4. Housing Subsidies (Due to Vancouver Housing crisis)

As a collaboration between Watari and McMaster University, we were tasked to re-designing their website from scratch using UX research/design processess to deliver a functional product.

Contents

• Old Design
• Re-design
• Technology Used
• Goals of this project
• User stories
• Sketches
• Wireframes
• Conclusion

Old Design

Re-design

Navbar

Homepage

Technology Used

• HTML
• CSS
• Bootstrap
• PHP

Goals of this project

The goal of this project was to re-design a site using UX design processes and coding languages learned over the course of the McMaster web dev program. More specifically:

• Define User stories & KPIs
• Perform several UX analyses such as: technical needs and competative
• Follow UX/UI design processes by creating sketchs, wireframs, mock-ups, low-fidelity and high-fidelity prototypes
• Develop web pages using HTML, CSS, Bootstrap and PHP
• Practice asynchronous collaboration using Google drive/Hangouts

User Stories

• As a person who suffers from substance abuse, I would like find support.
• As a teacher I would like to educate my students on the dangers of drug use.
• As the family memeber of someone who struggles with mental health I would like to find finantial and counselling resources for them.
• As an orgainzation, I would like to donate to Watari
• As an individual, I would like to donate to Watari

Sketches

Wireframes

Homepage

About Page

Conclusion

Our team met our goal of producing a high-fidelity prototype. Working with the people at Watari was a humbling experience. It was inspiring to see how dedicated they are towards helping those in need. I was proud to be a part of their journey and to see the positive impact web development can have in helping people reach their goals.