1 of 3 UI/UX Designers
August 2020 - October 2020
When I joined Commit the Change as a designer, I had the opportunity to work on an existing project for the non profit organization Crime Survivors. The mission of Crime Survivors is for victims of crime to recover from their experience mentally, physically, emotionally, and financially, by receiving the respect, support, and protection of law enforcement, the judicial system, and the community. They are committed to serving others by being an advocate and resource for crime victims and their families.
<aside> 💡 One of the main initiatives of this organization is to provide as many resources for victims of crime as possible. One category of resources that they provide are physical booklets filled with locations and phone numbers to call for a variety of services. Patricia Weskunas, the founder of this organization, curated these booklets by hand on a word document. She stated that these booklets are extremely helpful to crime victims, but are burdensome in terms of content upkeep and expensive in terms of printing. She hopes to find an alternative solution to continue distributing these resources without the cost and friction associated.
</aside>
<aside> 💻 Working with Patricia, we came up with a solution where we will build a digital version of these resource booklets. The intuition of this website is that it will follow much of the same formatting and navigation of the physical counterpart, such that the transition between the physical and digital versions should be seamless. One other requirement is to support the dynamic nature of the content of the booklets. Old resource groups close and new resource groups form, so the information needs to be readily configurable by Patricia and her organization. To support this flexibility and give the organization control and ownership of content, we will integrate a 3rd party content management system so they will be able to easily update the content at any time.
</aside>
For the preliminary sketches, we wanted to attempt redesigning the resource guide in a way that avoids the use of a very long sidebar since it can get clunky when using the feature to navigate from one resource to another in an easy manner. I created sketches for our four main pages we were working on: general guide landing page, general guide resource page, county guide landing page, and county guide resource page. I suggested to have some sort of way to link subsections on the general guide resource page so that users can easily jump to the subsections they need information on. Another suggestion I made was to implement a "Back to Top" button so that users can easily go all the way back up to view other pages in the online resource guide instead of scrolling up a lot of information they don't need to see.
When we got to the ideation phase, we decided as a team to use two sidebars where the left sidebar is a dropdown of the main sections while the right sidebar would be there to show subsections in the main section, as you can see from Figure 1. In the mobile version, we take out the right sidebar due to development limitations.
.jpg)
*Figure 1. Wireframes of Web Version of Crime Survivors Online Resource Guide*
We initially began building the wireframes for our 4 main pages. For the landing pages, we wanted to make sure that users can navigate to resources easily through this landing page. I specifically worked on the general guide resource page (on the top right), and my main focus for this page was to make sure the user can clearly read the information in an orderly manner. Instead of having two columns for the text, I went with one column since I believed that users would immediately know to read up to down instead of having to question if they read left to right or up to down.
.jpg)
*Figure 2. Wireframes of Mobile Version of Crime Survivors Online Resource Guide*
I specifically worked on the general guide resource page (on the top right) for the mobile version, and I also followed the same mentality I had for website version when designing the mobile version since I also thought of my design through a development perspective as well. If I can make the layout easily responsiveness and it makes sense for the user as well, then why not?
After showing and discussing our wireframes with the development team, the design team moved on to the next step of developing mid and high fidelity mockups. I mainly focused on colors and typography for my own page. When choosing colors, I wanted to go with a color scheme that had a more serious feel to it since users are reading heavy information. With typography, I went with Lato since it's a universal font for displaying information that users can easily read.
.jpg)
Figure 3. Mid/High Fidelity Mockups of Web Version Crime Survivors