VATJSS

Vancouver Aboriginal Transformative Justice Services Society

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.

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.

Interviews

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.”

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

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.

Survey

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.

Wireframes (Low-Fi)

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.

Prototype & Testing v1.0 (desktop mid-fi)

Because there were some challenges early on, and refinements were needed in a large scale, instead of redrawing all the design on paper, we moved to digital platform to implement the large scale changes and to conduct initial testing.

Current Version / Handoff State v3.0 (desktop & mobile high-fi)

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.

Hurdles & Lessons

We relied on each other’s strengths and fed off of each other during the entire length of the project. Some setbacks included unfamiliarity with the aboriginal culture, scared to push boundaries on sensitive topics and fear of stereotyping our target users. In hindsight, we all agree that, wish we asked for understanding of the culture at a deeper level, as well as ask for quantifiable data points of the services they provide.

Next Steps

Applying the final tweaks and exporting assets in a timely manner, so the WebDev (website development) team can take over and convert this from a fully functioning prototype to a fully functioning, useful, and responsive website.

———Thank you!———

Let’s Work Together

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

jothish.john@gmail.com