Case Study: Rise Women’s Legal Centre
Our first group project working with a non-profit community partner truly brought out the empathy in us. We are fortunate to be given the opportunity to enhance the experience of vulnerable women rising from an unpleasant chapter in their lives.
Strategy
We were to deliver a user-centred design that must be handed over to our school’s web development team in three weeks, so we strategized accordingly. For the first week, we focused on discovery and research, then started the early planning stage by the end of it. Moving on to the second week and third week, we started designing which involved building, testing, and finalizing our iterations.
Discovery
On May 24, 2016, Rise Women’s Legal Centre opened its doors for a full service storefront legal clinic that will serve low-income women in the Lower Mainland and all across BC. It is the first of its kind in the province, and it focuses on providing women with much-needed legal representation in family law and related areas.
Family law legal aid is provided to less than 25% of the clients than were served before the cuts; even those who qualify only get services for high conflict cases, almost always where women who have been subject to violence from their spouses.
Law students and lawyers work together to provide women with legal advice on family law and related matters, file documents in court, represent them in their hearings and generally assist women with accessing their legal rights.
Project Goals
Before this project started, Rise already had a website under construction. Lack of proper communication between the third-party developer and Rise resulted in a cluttered website that improperly represents what Rise is all about, so they only had a splash page on their website.
Through our initial meeting with Rise’s Executive Director, we have gathered that the main goals of this project were to:
- have Rise be properly represented online,
- streamline the process of who contacts them for help in relation to their current offerings,
- and ensure that new services become known and get used effectively.
By the end of this project, we were required to provide a high fidelity responsive website that considers the vulnerable state of its users, and the users’ susceptibility to their sensitive data being exposed/unprotected to their spouses.
Organizational Research
In addition, we found more rooms of opportunity:
- content-heavy: their current website is very overwhelming for any user
- readability: the original content was heavy with big words and law terminology
- legibility: users squint at the text during testing
Early Testing
We tested their current content on students that had English as a second language to see if they understood the point of the text.
The Our Students section found under Our People specifically, we wanted to make sure they understood what the law students did at Rise, and what their role is. We asked them to find the information starting from the homepage, read it, then explain how they understood it. We discovered that the focus of this page was on the course and the program details rather than their role at Rise and how these students were involved.
We repeated this test for all of Rise’s content to refine it, and make it as focused as possible on the information Rise is trying to convey.
Domain Research
Emotional handholding is a key aspect of the legal experience. It is critical for the legal service provider to be sensitive to the emotions of their clients which should be conveyed right from the first impression —in our day and age through the users’ digital experience. Furthermore, enabling self-help approaches is an important part of delivering empowerment to an oftentimes frustrated and vulnerable user.
“Time, the degree of required emotional handholding, convenience, unbundling…and whether the transaction lends itself to self-help approaches, are all factors that need to be taken into account…” — Richard S. Granat, DirectLaw
User Research
Direct access to Rise’s primary user for research purposes was delicate and restrictive in nature due to the sensitivity of the subject matter. As a response to the challenge of getting key findings of our primary users, we devised a guerrilla research strategy, where we chose a low-income community on the Downtown Eastside, the corner of Main & Hastings, and approached individuals who fit the target audience demographic as far as general age, socio-economic status and viable access to mobile technology were concerned.
We were specifically gauging how tech savvy the users are in terms of their cognizance of app design conventions such as the “hamburger” menu icon, and comfort level of filling in live forms on a website accessed on their phones.
Additionally, one-on-one interviews were conducted with Rise’s Operations Manager, a law student, a major donor, and an advocate to give us a comprehensive sense of the women who approach Rise.
Persona
Our research findings showed that our primary user:
- is part of the minority,
- unemployed,
- not tech savvy,
- has English as a second language,
- and has a low socio-economic status.
Through these insights, we’ve created the persona of Katerina Petrova.
Planning
Now that we have our persona in mind, we can move on to planning a user-centric experience for them. We started with restructuring their information architecture.
We focused on organizing their content’s categories into a site map. We made sure the new categories were relevant to Rise and the users. Existing sections that didn’t apply to the business and user goals were immediately discarded. Sections that were related were then merged in order to create a smooth navigational flow.
- Rise didn’t have a blog, nor did they have events and a client portal.
- Our People became the About page.
- The FAQ page was mainly more about the the services they offer and eligibility, so we merged it into the Services page.
We have brought about three different user flows to create a seamless experience on the website that requires the least amount of navigation to attain a certain goal.
Concept Development
Our strategy was to approach the design with a mobile-first mindset to help us prioritize the content we are delivering. Mobile screens have less real estate to work with, so moving from mobile to desktop is a more logical process when designing content, architecture, and visuals. This creates a much more fluid and cohesive design across all platforms.
In addition, majority of our users don’t own a desktop computer, so our priority is to have the website accessible on a mobile platform.
Design
From coming up with new concepts to tackling problems and providing design solutions, a collaborative approach and brainstorming at many stages of the project brought us a more diverse pool of thoughts and ideas.
Design Studio
Before we collaborated as a team, we worked individually to come up with our own low fidelity wireframes. This way, we can generate our own ideas quickly, and have solid concepts that we can negotiate with other members of team.
After working on our own, we come together, share the ideas we came up with, and collaborate our sketches on a whiteboard.
Design Features
We hid our navigation items under a hamburger menu icon. To suit the level of tech awareness of our users, we added a label to indicate the purpose of the icon.
To help our users easily understand content and inform them of Rise’s intake process, we used simple iconography.
For their safety & security, we’ve added:
- a 911 message on top of the home page,
- a quick exit button,
- and a time estimate of how long the form takes to complete (in case they need to keep watch of the other party’s presence).
- We reinforced a sense of calm, movement, and direction through nature imagery.
Usability Testing
To put our design ideas to the test, we led our users to our prototype from the perspective of our persona, Katerina Petrova, with this scenario in mind:
You are experiencing threats and abuse from your husband, and you are afraid for your children’s safety.
Consequently, you have sought help from several legal aid services, but you have been rejected, and this leaves you very frustrated.
A close friend suggested that you check out the new women’s legal centre named Rise, so you want to look them up on your phone and find out if they are able to help with your situation. If they do, you would then set to meet with them. Keep in mind, you have a good 45 minutes before your husband comes home from work.
Key Findings
After testing in multiple stages of the design process, from low to mid-fidelity prototypes, we have found that:
- It was more important for the user to know about their qualifications and the Rise’s intake process than filling out a form, so it was unnecessary for the user to access it right on the home page. We made use of progressive disclosure this way.
- “Do I Qualify?” doesn’t give the user a sense of welcome or support.
- “Book appointment” was misleading, since it was more of an intake process than a guaranteed booking system.
- Using the red colour for the progress bar didn’t give a sense of accomplishment.
Iterations
Since the staff’s images couldn’t be available by the time we need the product delivered, we tossed version 1 of the About Us page. Moving on to version 2, we made a link that opens up a bio for each staff member. However, through our user feedbacks, they preferred to have a clickable button instead of a hyperlink that directs you the action taking place (“click for more information”). We learned that this step should be intuitive, and it should just work — which led us to version 3, our final iteration.
Great design does not need an instruction manual.
Additionally, we tested on the users’ live form preferences. We had them play around with prototypes of the two versions found below.
Majority of testers found Version A to be more daunting to fill out as they can see everything that needs to be completed on one screen. Whereas with progressive disclosure on Version B, the testers find it easier to digest information, and focus on fewer details at a time.
Design Evolution
To solve the problems our users have faced when interacting with our website:
We applied shadows to the buttons and made use of contrasting colours to have clear call-to-action buttons, and have a sense of hierarchy. We also changed the wording of the buttons to bring clarity and avoid miscommunication.
We made use of both warm and cool colours to evoke emotions:
- red → warm; grabs attention
- shades of blue → calm
- green → renewal, progress
We changed the progress bar’s colour from red to green to give a sense of accomplishment for the user, because it only makes sense!
Responsive Design
After having finalized our mobile design, it was easy enough to port it over to a desktop version.
Future Considerations
Through research and user feedbacks, we would love to see:
- Staff and board members’ photos on the About page to put a face behind the organization and build trust among clients and donors.
- A categorized list of third-party organizations on the Resources page, so the user can find information about them more efficiently.
- Testimonials/reviews from clients to encourage donors to support Rise, and also reassure prospective clients of the quality of service and legal advice Rise can provide.
Summary
Through careful planning, we were able to create a responsive website that keeps the delicate situation of its user in mind. With thorough research, we were able to properly represent Rise, and have made a potentially daunting task more accessible and welcoming for their users.
Our client is very happy to finally have an online presence that conveys its truest intentions to provide legal assistance to women in need.
Personally, this project was something I was really passionate about. I am truly grateful to have been given this opportunity to support a great cause, and use what I have learned about UX design to improve the experience of vulnerable women approaching Rise.
