Leukemia & Lymphoma Society of Canada

Full website redesign of LLSC with UX treejack testing, mockups, and a style guide.

Client:
The Leukemia & Lymphoma Society of Canada
Year:
2019 - 2020
Category:
UX/UI Design
Tools Used:
Adobe XD, Photoshop, Illustrator, JIRA, Basecamp, Optimal Workshop
My Role:
UX/UI Designer
Visit Project:
Link

Overview

While working for an agency, I took lead as the designer for the Leukemia & Lymphoma Society of Canada. This was a very robust project including a 2 day discovery I hosted in Montreal, Quebec. Some of their main goals were to improve content find-ability on the site through a better structured navigation, and to modernize the look & feel.

I managed contact with the LLSC team as I worked through tasks in bi-weekly sprints. We followed agile scrum as a production team consisting of a designer, 3 developers, a product owner (PO), and a project manager (PM).

Scope

  • Discovery
  • Heuristic Evaluation (Jakob Nielsen's Heuristics)
  • Content Inventory
  • Information Architecture
  • Personas & User Journeys
  • TreeJack Testing
  • Moodboard (Inspiration)
  • Design Concepts
  • Mockups
  • Style Guide

Tools

  • Adobe XD
  • Illustrator
  • JIRA
  • Basecamp
  • Optimal Workshop

Discovery, Heuristic Evaluation, and Content Inventory

These UX tasks and discovery session are crucial in gaining requirements and information that are necessary for a successful project. I focused on gathering project vision information, audience, persona, and journey

Information Architecture & TreeJack Test

After conducting card sorting sessions and persona sessions we decided the best approach to their content, since it was so specific, would be by audience type. I structured the menu items to cater to each group as call to action. The design needed to be easy to scan and read at a glance, so I used differing font weights to create that hierarchy.

Including a more prominent donation button was also important to the brand, but not the most important. One of their goals was to drive involvement with the organization, so we included a button for that as well in the main navigation as opposed to the utility navigation.

LLSC Navigation

Through multiple TreeJack tests of the evolving navigation structures, we saw an increase of ~25% through wording alone. Paired with a well thought out UI would increase the effectiveness even more. For more information on TreeJack Testing see an explanation here.

Moodboard

In the contract requirements, the LLSC team purchased a moodboard. I see moodboard as more of a branding task, so in this case I used this time to put together specific inspiration for the LLSC team to review and decide on a look & feel.

The design is approachable, clean, and meant to highlight the content as it's so important to those affected by a blood cancer.

website inspiration
Inspiration

Design Concepts

Using the persona and user journeys information I created design concepts.

3 design concepts
3 Original Design Concepts

Final Mockups

interaction heavy pages
Interaction Heavy Pages (homepage, about, careers, get involved)
events
Event Listing & Detail Pages
webforms screens
Webforms
download library
Download Library

Final Thoughts

When this project moved to development, we started the design for their 4 microsites. They are in similar styles, but are unique in color schemes and content.

[insert image of all 4 microsite homepage designs - use caption to specify each]

As the site is so robust and the client wanted to release it at the same time as the other 4 sites, it's not quite live yet. I will updated a button here for a live view when it's done.

Personal note about this project

The Leukemia & Lymphoma Society in Canada and the U.S. is a very special organization to me, and it was a very special project for me to work on. I have been affected on multiple sides of my family from blood cancers, some pulling through and some not. Getting to work with this company to make a difference in the information and care given to those affected by blood cancers means so much to me. Even meeting the empathetic, wonderful people behind the scenes that make organizations like this possible was amazing.

The team loved the work so much, when the pandemic hit and they had to move their main constituent event , Light the Night, online, they asked me to design the virtual event space for them. You can see that project in my works section as well. It was the first event of that size and type to ever be moved successfully to a virtual environment and it went over well with people who attend the Light the Night walk for blood cancers every year.

Latest Works

Angie Stewart Fitness

Full brand & website redesign as well as a product design.

Developer Portfolio Website

The goal of this project was to create a clean, one-page portfolio site that showcased Anthony's skills and matched his personality.

Actuary Concepts

This was a creative vision for a text and content-heavy website for a sales bid.