LifeLine Canada

Overview

The Lifeline Canada Foundation (TLC) is a registered non-profit organization committed to providing mental health resources and aiding suicide prevention nationwide. TLC acquired a website where they provide Canadians with free mental health resources. TLC was looking for a way to renovate its website to make it more user-friendly. They also are looking for ways to make the website more intriguing, modern, and visually appealing. I worked alongside four UX Designers to improve the TLC website. 

Role

Product Designer

This project consisted of a group of 4 designers. I was responsible for the following: 

  • Conducting qualitative research by hosting interviews and testing the original website

  • Performing competitive analysis to detect any opportunity areas in the mental health industry that the TLC organization can benefit from  

  • Creating a platform analysis to determine the best suitable website platform for TLC.

  • Rapidly sketching wireframe concepts and presenting them to the design team.

  • Creating multiple sitemaps to organize the navigational flow of the website and to distribute information in a comprehensive fashion 

  • Developing a Mid-fidelity model and presenting it to TLC’s CEO

  • Constructing one of the three high-fidelity concepts presented to the CEO. 

  • Contributing to developing UI elements for the final high-fidelity model.  

  • Conducting user testing for the final high-fidelity model

  • Transferring project data, high-fidelity model, and UI assets to the TLC foundation for development purposes


Problem Area

The TLC website has an overwhelming amount of written information, making it difficult for users to comprehend. Finding the right resources is also difficult upon navigation. Additionally, the website requires visual modifications. 


The Research 

User interviews and Heuristic analysis were conducted to assess the usability of the website and the satisfaction of the overall visual appeal. Research was also conducted to evaluate the business model of TLC. For this research, a competitive analysis and platform analysis was conducted. 

A one-on-one interview was conducted  to understand better user behaviors, preferences, and feedback regarding TLC's website. The participants' responses were assessed by the following categories: overall design/first impressions, feedback for new features, navigation assessment, content viewing based on emotions, and decision-making. An affinity map was created to represent the user responses.  

User interviews

Heuristic analysis is a method that was used to assess the website’s usability features. The analysis was overseen to identify potential heuristic violations. Some of the issues that were detected revolved around the following heuristics: visibility of system status, match between the system and the real world, user control and freedom, consistency/standards, and error prevention.

Heuristic analysis

A thorough competitive analysis was performed by evaluating the website of other mental health advocacy organizations. This analysis has provided valuable insights and inspiration for this project.  

Competitive analysis 

To determine the most suitable website platform for the client, an online platform comparison was conducted using the SWAT analysis. This analysis helped assess each platform’s features, functionality, ease of use, customization option and overall sustainability for TLC. 

Platform analysis 


Concepts and exploration

Many sketches were developed to assess problem areas that have been gathered from the research phase. 

Sketches

Many sketches were developed to assess problem areas that have been gathered from the research phase. 

Site Mapping

Three high-fidelity concepts were developed to take a different view of the old website. All ideas share similar navigation and content organization methods but have different visual aesthetics. The concepts were presented to the client, who chose the final direction.

High-fidelity Concepts


Results and Takeaways

The final concept that was chosen was the third concept. The third concept was selected for its minimalistic qualities and visual aesthetics. Once the concept was chosen, we were able to create other pages. The following goals were achieved:

 - The website's appearance was re-designed to look more modern, calming and aesthetically pleasing

-Layout of the website that is easier for users to attain information about mental health and access hotlines

- Visuals were added throughout the website that enhanced the overall user experience  

- Achieved great feedback on the final website through user testing and in client reviews along the whole project timeline

Final Concept 

A Useberry testing was conducted one final time to assess the improvement of the new website layout. Positive feedback was received. Participants preferred the new website design due to improved layout, content organization, and visual appeal.

User testing

Key takeaways from this project are the following: 

User Research validates assumptions: Before user interviews, my team and I made assumptions about the usability of the TLC website. After doing user interviews, we discovered that some of our assumptions were correct but missed some problematic areas we did not expect. This discovery showed us the importance of asking users about the website before making design decisions.  

Sitemaps are excellent for data organization: It was initially challenging to organize the website's content. We tried sketching some ideas but needed clarification on the website's content. We then decided to use sitemaps to break down the pages, which was a big success. We learned to start incorporating this method earlier in the design phase if we have navigation or content management issues.

Repeating the Design process is necessary:  My team and I were stuck during the conceptualizing phase because we needed more raw data to develop more robust ideas. It took us some time to realize that we needed more secondary research to answer our questions. Sometimes we get carried away in one design phase and forget that we can cycle through the other design phases if necessary. We were reminded that Design is not a linear process but an iterative one.



Next
Next

AirNav