Giter VIP home page Giter VIP logo

watari's Introduction

WATARI logo

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

old site

Re-design

Navbar

navbar

Homepage

home

Technology Used

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

sketch1

sketch2

sketch3

Wireframes

Homepage

homepage wireframe

About Page

homepage wireframe

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.

watari's People

Contributors

anpospisil avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.