Aboriginal Justice Services

Vancouver Aboriginal Transformative Justice Services Society (VATJSS)

Vancouver, British Columbia, CANADA (August–September 2017)

Project: Branding, Responsive Website
Role: Lead User Experience (UX) Design, Lead User Interface (UI) Design

The Opportunity

Vancouver Aboriginal Transformative Justice Services Society (VATJSS) is a small non-profit organization located in the heart of the community providing housing, legal and tax assistance to members of the aboriginal community.

VATJSS approached us for a website that is optimized for both desktop and mobile, so they can communicate within the Vancouver aboriginal community of the services they provide.

Project Goals

  • Create a responsive website
  • Increase awareness
  • Increase engagement (social media & online)

The Solution

Create a responsive design so the organization can stay in touch with the local aboriginal community and make sure they have access to relevant and up to date information on transformative justice, housing needs and tax help.

To get started with this project, we followed a pattern, which time and time again has shown to be very effective.

We started off with:

  • Research where we conducted interviews, surveys, contextual inquiries to learn about the goals from the business side, identify the goals of the users.
  • Valuable information from research helped us plan some designs and see how we can solve this problem.
  • In the design stage, we were able to sketch out our ideas and see how our solution might translate.
  • We then were able to prototype using tools such as MarvelApp and InvisionApp to test with real users to get feedback and iterate the design that will allow a better experience.

Domain Research

From conducting organization and domain research we learned that the three popular features clients come to VATJSS were for:

  • Alternative justice methods
  • Housing needs
  • Emergency help for the immediate moment
    (something to eat, somewhere to sleep)

Site Visit

To gain more valuable insight into the operation, our team visited the offices located close by. Since the day before we went in was walk-in services day, the staff was able to recruit few of the clients to come back the next day.


But we did have the opportunity to interview eight (8) of the clients to learn more about their needs, goals/expectations and frustrations. Monica and I introduced ourselves and ensured the participants that, everything they shared was confidential and that we would not share it with anyone. We let them know that, we only wanted to collect information, to help us redesign the VATJSS’ current website, so they could provide their services better—to meet the clients’ needs.

Although most of the client’s immediate goals were to find contact info and the location of the business, there were couple of folks who would’ve liked the information presented to them a little differently.

“I am not good at English. So if they could provide the information in small bits and add pictures and videos, it will help me and others like me—it will be easier to understand for us.”

—Interviewee 1

“Couldn’t find an extension of the person I was trying to get in touch with. It would be nice, if they provided extension.”

—Interviewee 2

Affinity Diagram

We took our interview and used affinity diagram to gather observation. We initially grouped them into different categories and within each category, we noticed certain patterns.


To collect quantitative data to support our design decisions, we had our client send out a survey to their email list as well as post on their social media. Some of the key findings:

Based on the research part of our process, we were to able to identify the goals of our users.

Primary Persona

The research allowed us to see that the primary persona fits the scenario of a female in her mid 30’s who is struggling with personal obstacles. She is determined to get her life back on track and likes the support her local cultural community centre provides.

She is motivated by sense of safety and trust and extrinsically, to satisfy the court ordered alternative program. Her goals include financial stability, affordable housing and get in touch with knowledgeable people. She is frustrated by financial instability, unaffordable housing, poverty and hunger.

Information Architecture

Once we got to learn about the business goals and the user goals, we set out to plan our design. We started off with a user flow to meet our Minimum Viable Product (MVP) as well as created a structure of the app to see where all the elements lived.

User Flow

We mapped out a possible user flow for our persona to complete certain tasks to test the functionality and goals of the MVP.

The user flow on right shows potential 4 paths:

  • Learning about justice and contacting someone about it.
  • Learning about community events and contacting someone.
  • Getting to know a staff member better and see what services they provide before getting in touch with them.
  • Would prefer browsing later, but just need to contact someone right away

Site Map / Flow Chart

To get a visual representation of the layout of the app, we created a site map. We organized the structure based on key features we identified were important for our target users, based on interview and survey. In the site map, we also identified certain avenues a user might be interested in and showed a flow, on how they could potentially navigate through.

Design v1.0 (Low-fidelity, Paper Wireframes)

Our design started off with sketching wireframes on paper, based on the user flow and the sitemap. My UX partner and I did a design studio where we timed ourselves 2 minutes to sketch how homepage would look like. Then we took 1 minute discussing our designs and did another sprint for 2 minutes, this time taking feedback into considerations. We discussed what elements of our design users will find useful and agreed on a cohesive design pattern to carry through the rest of the design process.

Design v2.0 (Mid-fidelity, Sketch App) for Desktop & Mobile

We moved to the digital platform, Sketch, to implement the changes we learned from paper sketching so, we could conduct initial testing.

Prototype & Testing v2.0 (Mid-fidelity)

Prototypes for both desktop and mobile were built in InVision App and then tested in-person as well as remotely to ensure users had a seamless experience fulfilling the tasks assigned.

Usability-Testing Feedback (Mid-fidelity)

After testing the mobile mid-fi remotely and testing the desktop mid-fi in person, we considered a number of iterations to implement before handoff to dev team. Below are just couple of the new features we implemented into the high-fi state:

One of the items selected to improve after user testing, was to change the button style for one particular item that lead to another page (orange circle in below image) -vs- another item that expanded into an accordion (yellow circle in the below image).

A simple, learn more button (orange ellipse), differentiated the call to action and increased the click through rate.

Another simple but valuable lesson learned was that user’s were not scrolling past FAQ. They mentioned they wouldn’t look past it, with the expectation that it is usually the last item. The screen shot is of the quick links section of the desktop view to show the order after changing it (pink ellipses). In reality, the resources content would be buried in the main container and users may have missed it, if they didn’t scroll past FAQs.

Design v3.0 / Current Handoff State (High-fidelity, Sketch App) for Desktop & Mobile

After testing the mobile mid-fi remotely and testing the desktop mid-fi in person, we considered a number of iterations to implement before handoff to dev team.

Desktop Walkthrough

Mobile Walkthrough

View the fully functioning, interactive prototype in mid-fidelity state.

———Thank you!———

Let’s Work Together

Just say hi or let me know how I can help tell your stories.

error: Content is protected !!