Overview
Our mission is to provide seamless, comprehensive and effective harm reduction services and a full range of addiction treatment services that are amenable to an individual’s needs and goals. Our services are offered through community-based facilities with a focus on street and community outreach. – Breakaway Official


I developed a brand identity and brand guidelines. I, fortunately, contributed to updating the website.
Tasks:
– Developing a user-focused website
– Implement new brand guideline into the website
– Research the best donation plugin and install it
Challenge
Situation
– Organization name, Breakaway Addiction Service, leads misunderstand to a user.
– Less usability for all staff, patients and sponsors.
Target
– Patient or family who uses Breakaway service.
– Sponsor.
Goal
– Implement new brand guidelines.
– improve usability and increase donor, sponsor.
Sitemap
A site map (or sitemap) is a list of pages of a web site within a domain.
There are three primary kinds of site map:
– Site maps used during the planning of a Web site by its designers.
– Human-visible listings, typically hierarchical, of the pages on a site.
– Structured listings intended for web crawlers such as search engines.
Wikipedia
Wikipedia well explains about site map. A sitemap helps both client and I to understand the overview of the project.

Style Setting
When I create a wireframe or prototype, I organize a style setting first, primally font, secondly font, combination, contents block, color palette, logo, pattern etc. In this project, I developed brand guidelines by myself. Therefore, this is much easier to create a wireframe and prototype. The setting style keeps the consistency and increases productivity.

Prototype
During the project, the client updates requirements, extra pages & functions. The biggest one is accessibility. I was not familiar with accessibility, but I collaborated with a programmer and overcome it.
Ontario: How to make websites accessible
Web Content Accessibility Guidelines (WCAG) 2.0






Website


Social Media



Result
I delivered the website in December 2020. The client and I aligned the direction when I developed the brand identity, previous project. Therefore, it was quite helpful for me in the process.
Canada is a relatively blessed country in the world, but there are many issues in society. Many non-profit organizations, like Breakaway, help people who struggle in life. I am pleased that I can contribute to this society even indirectly. I could find a reason why I am here, the North United States continent.
Case Study
Align with Client and Achieve a Goal
Let’s Work Together
Tell Me More About Your Project
Please feel free to get in touch anytime, whether for work inquiries or to just say hi, to info@openbookmarks.co. I am currently accepting a new project, and always excited to hear interesting proposals. Request a free estimate for your project. I’m ready!