© 2019. Jothish John. All rights reserved.
August–September 2017; Vancouver, British Columbia, CANADA
Project: Branding, Responsive Website
Role: Lead User Experience (UX) Design, Lead User Interface (UI) Design
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.
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:
Pen, pencil, paper, sticky note: Interviews, story board, affinity diagram, feature prioritization, design studio, wireframes & paper prototype
Axure RP: User flow & site map
Trello: Project management, scrum notes
Slack: Communicate, share and collaborate ideas
Sketch: Persona, mid-fidelity & high-fidelity screens
InvisionApp: Mid-fi & Hi-fi prototyping & user-testing, client walk-through
Photoshop CC: Image edits, animated gifs, screen/product mockups
Illustrator CC: User journey map, user-testing results
Canva: Final presentation
From conducting organization and domain research we learned that the three popular features clients come to VATJSS were for:
Competitive and Comparative Analysis
From doing an analysis on the services they provide and cross-referencing into the community, we found that VATJSS is the only organization of this kind that serves the need of the aboriginal community in the Vancouver area.
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.
Since the services VATJSS provide is personal and for the well-being of the client and plus the nature of the business being confidential, we did not conduct any contextual inquiry.
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.”
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:
After learning our client’s business goals and the target audience’s needs, we used the bucket method to prioritize them into three groups: Must haves, nice-to-haves and not needed. We also did a 2×2 matrix to prioritize the features by measuring their impact level -vs- effort level.
Based on the research part of our process, we were to able to identify the goals of our users.
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.
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.
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:
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.
We created few user stories, which were used to describe certain things the users— in this case, our persona, Susan—wanted to achieve by using website.
“Since Susan has been evicted, she wants to be able to get housing assistance, so she can feel safe.”
“Since Susan has been charged with a minor crime, she wants to be able to complete the transformative justice program, so that she won’t get incarcerated.”
“Since Susan is unfamiliar filling out tax forms, she wants assistance with filling out her forms, so that she doesn’t get audited.”
To show how our persona would interact with the responsive web design, we created three scenarios to set the mood and her needs and how she would engage with the our solution.
We created multiple scenarios that are relevant for our user:
“Susan is sitting on her couch and stressing that she is about to get evicted. She needs help to mediate with the landlord. She has a friend who has just been helped by VATJSS with income assist so she turns to them for help. She wants to be able to pay her rent while having enough to feed her kids. She looks up VATJSS on her iPhone for more information.”
“Susan has been evicted. She is sitting on a street corner next to McDonalds. She wants to find low income housing as soon as possible. She has heard of VATJSS, and how they assist with home searches in the lower mainland for those who identify as aboriginal. She latches free wifi from McDonalds, and searches the person in charge of housing services on the VATJSS website.”
“Susan stole a chocolate bar from the convenient store. She was subsequently arrested for this petty crime. Because she was of aboriginal descent, she was offered to partake in the transformative justice program as an alternative to retributive justice. After getting home from court, she looks up the VATJSS on her iPhone to investigate what the program entails.”
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.
Prototype & Testing v2.0 (mobile mid-fi)
We applied changes we learned in the desktop version and created a clickable prototype in InvisionApp and submitted to online User-Testing.
I am hoping I have implemented enough of the changes from testing the first version, that users will have better experience.
Fears of my Design
I think users will look around to click on other links, since so many clickable buttons are present.
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.
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.
Just say hi or let me know how I can help tell your stories.
© 2019. Jothish John. All Rights Reserved.