Calgary Legal Guidance

Guiding vulnerable Albertans through the legal system.

CLG

Role

UI/UX designer / Web developer

Tools Used

Adobe XD / WordPress

Length

3 Months

Client

Calgary Legal Guidance is a non-profit organization that offers free legal advice and assistance to low-income, underprivileged, and vulnerable Calgarians. CLG offers various programs for differing legal situations, such as domestic violence, immigration, Indigenous law, and identification obtainment. The organization relies completely on volunteer lawyers who assist in delivering access to justice for those who do not qualify for legal aid and offers wrap-around services that fill the gaps.

Project Description

The main goal for this project was to redesign CLG’s current website to generate an informative, accessible, and enjoyable user experience. To achieve this goal, a CLG branded custom theme via WordPress was created to allow the organization to update and alter their content, reducing the need for third-party assistance.

Problem

The previous iteration of the site lacked a well thought out user experience, leaving the ability to navigate the site rather difficult on both mobile and desktop. Additionally, the lack of control over the site left CLG with the inability to update or modernize information.

Target Users

User

Adults between 20-50 in vulnerable situations seeking legal advice.

User

Individuals that have not qualified for other legal services, such as Legal Aid.

User

Newcomers to Canada who are having trouble with their VISA applications.

CLG image 1

Previous Iteration

The previous iteration of the site had many accessibility issues such as small text sizes, poorly contrasting colors, varying image sizes, and overall had an inconsistent design language between each page. The main problem area for many users was the inability to find the information that they were looking for as some links lead to inactive pages or were linked incorrectly.

CLG image 2

Mockup

To start the process of developing the new site, reference sites were discussed with the client to determine a visual direction and an ideal structure, which allowed for a clear design language when creating both the mobile and desktop mockups. Once the mockups were developed and revised with the client, the site began development within WordPress.

Click to view full mockup

CLG sitemap

Sitemap

The redeveloped site map allowed for improved accessibility for all users. During this stage, it was important for reoccurring and new users to access relevant information in the least amount of clicks as possible while also maintaining an organized and well-thought-out flow of information. The redevelopment of the map also created for the opportunity to reduce any duplicated or irrelevant information that made the site difficult and confusing to navigate.

CLG image 4

Style

The overall site maintains a minimal information first design that optimizes navigation and interactivity by minimizing vertical scrolling. With the use of CLG’s brand guidelines, colours and logo details were carefully selected to give the site a very personal feel along with the completely updated imagery which truly brings the entire site to life and completely reinvigorates the experience of using it.

CLG image 5 CLG image 6
CLG image 7

Updated Design

The interface creates a very recognizable experience allowing the user to find exactly what they are looking for much easier on both mobile and desktop devices. Previously, CLG could not update their site due to the way it was build, but now the site uses a custom theme with multiple plugins allowing for site changes to become much more accessible in the future without external assistance. The updated site exceeded CLG’s expectations and created a much more optimized experience for their demographic.

CLG image 7

Challenges

The main challenge while working on this project was the amount of information restructuring that needed to be achieved to attain a very user-friendly experience. This process involved restructuring the site map multiple times with the client to optimize the user flow.

Lessons Learned

During this project I learned a lot about translating page layouts from mobile to desktop as the site had multiple instances where the content on a page would work better on one device, but not the other. This required testing multiple layouts to create the most user-friendly experience on both devices.

Full site launching soon.

Next Project