We worked as part of the JES team to design a responsive web platform and website to help support victims of violence in Guatemala.
Project Background
Justice Education Society (JES) is a Canadian nonprofit whose mission is to empower people to access and deliver justice.
Violence against women is one of the most highly reported crimes in Guatemala. Yet, the United Nations found that crimes against women go unpunished in more than 88% of reported cases. Fewer than 3% of sexual offenders end up behind bars.
To address the lasting effect that such violence has on victims, our team worked as part of JES in Guatemala to design a web platform. The aim was to improve services for victims of violence in Guatemala — especially for women, girls and members of vulnerable groups. The platform helps support victim service providers. It helps them standardize, document and provide services more efficiently. The platform then lets them refer them to outside organizations, “referral networks”, that can provide more long-term support.
We also worked on a website to provide support services to victims of violence. The site provides practical information for vulnerable populations about the justice system and the available support services. It enables victims to make informed decisions and further promote their safety.
Key Challenges
In-progress
When we joined the project, it had been in progress for over 2 years. Over those 2 years, there had been a lot of changes to the scope and even a project restart. There were some general designs the team was using but didn’t have specific designs for each feature. It was a challenge to learn all the intricacies of the project while the project was being worked on. We needed to understand the users, reasons why the project was being developed and learn everything that had been done up to date. Because the project was behind schedule, the amount of changes that we could do were minimal. And what we could change had to be done incrementally. Working within those constraints was a good challenge.
Lack of standards
As we reviewed and worked with the team, we came to realize there were little to no standards being used. Each screen worked slightly differently than the other and because of this, it made the app feel unpolished and not very intuitive. And the patterns that were being used didn’t follow best practices and made some screens feel cluttered.
No mobile view
Although mobile was a key part of the website the existing designs didn’t address this. All the existing designs didn’t take mobile into consideration. This made the original design harder to adapt to mobile. We worked closely with the developers to ensure the new designs worked within the existing application.
Content-heavy site
The public facing website had a lot of information about laws, regulations and how to get help or help others. All this information was very useful to our target audience, but it also made it very difficult to present to the user in a friendly, easy to digest way. Especially on mobile. We needed to find ways to make it super easy for users to navigate through the site, find the information they needed and be able to consume the content easily.
Solution
We were tasked with designing both the web platform and the website. We worked closely with the product owner defining user stories. We also talked daily with the dev team to ensure what we were designing made sense within the current application. We helped the team move forward by providing detailed mockups that we used during our backlog meetings, for development and QA review. Because of how tight the deadlines were when we joined, we had to keep certain design elements the same. These with more time we could have improved. The challenge was to keep moving forward while tweaking designs that will result in a consistent, simple to use experience.
Consistent, simple, clean UI
One of the hardest things we had to solve was how to standardize all screens. Because the application kept growing it was hard to audit all screens. Also, it was a complex application with many roles and states so ensuring all screens followed a standard that worked was difficult. Once we had an idea of all the screens, we created a layout all screens should follow with consistent spacing, titles, positions and more. The goal was to make the UI cleaner and simpler. We also removed a lot of unnecessary details that cluttered the screens like extra coloured buttons.
Cross-platform design
Both the web platform and website were required to work across multiple devices including phones. In Guatemala, a lot of people don’t have access to a computer so they rely on their phones to use the Internet. Because of this, it was key to ensure the experience on mobile was just as good as on desktop. By the same token, the web platform needed to be mobile accessible for service providers to access their cases, view a victim’s details and update their records.
Easy to digest
The website contained a lot of legal information (which is not the most fun to read :| ). We aimed at making the content easier to digest and a little bit more fun through a few ways. We designed carousels on mobile to group pictures with information. We used accordions to hide sections of content that weren’t super important. We also included a table of contents to be able to quickly scan a page’s content and skip to the right section. We also paid close attention to text legibility through various font properties and layout.
Feedback and improvements
We helped conduct several usability tests and had a performance audit on the website. Based on that, we made several improvements to help people navigate and use the website.
Results
Despite the tight deadline our team was able to work with the existing team to deliver both products on time. It was a personally rewarding project for Martin. Having traveled in parts of Latin America, he had experienced the daily struggles of people trying to get access to justice. He also immigrated to Canada from Argentina so having the opportunity to work with and help people in a Latin American country was very special.
