Leave The Pack Behind

UI DESIGN  /  UX DESIGN

A modern wooden desk with an Apple computer on it, which displays the homepage of the Leave The Pack Behind website. A large photo is promoting a diverse group of students smiling and laughing at the camera.

How might we rebrand a content-heavy website to increase engagement with a young audience?

Overview

Leave The Pack Behind (LTPB) needed help with the rebranding of their website. As Lead Designer at MediaDoc Inc., I was involved in the discovery, strategy and design phases of this project.

My involvement included:

  • Meetings and presentations with the client and other project stakeholders
  • A complete content review
  • Assistance with copywriting (editing and creating new content)
  • Information architecture
  • Sketching / Wireframing
  • Visual design

Discovery

Stakeholder Goals

What goals and concerns do we need to address?

  • Rebrand the visual design of the website to reach our defined target users (mainly students, age 18-24)
  • Content audit to assist in
    • deleting old content and removing broken links
    • editing relevant content to better target our users
    • creating new content as needed
  • Site will be bilingual and will need to be flexible for content translation
  • Registration for events

Project Goals

What outcomes do you want to achieve, as a result of completing this project successfully?

  • Rebrand the visual design of the website to reach our defined target users (mainly students, age 18-24)
  • Increase engagement with contests and other promoted events
  • Improve promotion of upcoming events and featured resources
  • Reduce the amount of content we have to focus more on current research and activities

Target Users

Whose goals and concerns do we need to address to make this project successful?

  1. Students (18-24) who are ready to quit smoking
  2. Students (18-24) who are not yet ready to quit smoking
  3. Support systems (friends, family, etc.) for people who are trying to quit
  4. Health professionals looking for research/resources published by LTPB

Outcome Statement

At the end of our discovery sessions, we developed an outcome statement with our stakeholders which was to:

"Improve the quality of content on our digital platform, in order to increase engagement, so that we can better serve our users."

Strategy

Information Architecture

The LTPB website initially had over 150 pages of content. In order to make sense of what needed to be done with the existing content, we did a content audit. The team ran code to take inventory of all the pages onthe server. While reviewing this data with our client, we discovered that much of this content consisted of pages and documents that were no longer relevant, and there were a plethora of broken links. With the help of our client we were able to determine pages and content would be removed, what needed to be edited, and what new pages needed to be created - again, targeting our defined audiences.

Once I knew what pages would remain, I did an open card sort to categorize them, and started assigning new labels to the clusters. This gave birth to our new navigational structure.

Sketches & Wireframing

I began sketching out the new homepage of the website, and the landing pages for each section. After a few iterations and feedback from my team and the client, we decided on a paralax website that would display lots of diverse images of students being active and social.

Initially, the homepage was going to be a longer scrolling page, highlighting each section of the website (4-5 total). I presented this option because we were redesigning the entire layout of the old website and I thought it would be a nice opportunity to re-introduce users to the new sections and describe what information they would find in each. These sections could be removed or edited later on as desired. The client did like this idea, but had a concern about the length of the page. We discussed it, and ultimately decided to keep the homepage's focus on LTPB itself. In both cases we agreed upon having a rotating banner at the top of the page to highlight upcoming events, and resources that might be worth promoting.

Visual Design

Colour

The new branding colours were chosen by the LTPB team previous to our involment on the project. I encorporated the new colour scheme throughout the site. Yellow was chosen as the primary colour for the new logo, and blue was the complimented accent colour to be used throughout the site.

#FFC225

#27AAE1

#5C5C5C

Iconography

We used flat, minimalistic icons to visualize and simplify the data from key research findings in order to focus on five important statistics, and minimize cognitive load on the user.

iconography

Imagery

The previous website was research content heavy and did not target their 18-24 year old audience very well. The new site implemented imagery that reflected the youthfulness and diversity of a Canadian campus. We wanted to excite potential users with imagery that was fun and active. I spent time researching different stock photography websites to currate photos that were relatable and that had a casual vibe to them. We ended up with a wide variety of photos that really accentuated the new branding of the organization.

A diverse group of students sitting outside on a warm day, smiling and laughing at the camera.
A young man in a black hoodie and jeans, crouched down against a green brick wall, his hands rubbing together, and looking off into the distance.
A young, black woman with short, dark, curly hair, standing outside on a clear day, standing in front of a solid light grey wall, looking at the camera and smiling.
A group of three female friends hanging out together outdoors on a summer day. They are laughing and looking in different directions.
A group of friends fist bumping each other while working indoors on a project.
Two female friends sitting outside on a sunny day, looking at each other and laughing.

Website Layout

One of the biggest challenges with this website was how much content it had. How do we showcase this information in a way that won't overwhelm the user, and will entice them to engage more with the site?

I spent a lot of time with the client to edit and create new content for this project. Part of that discussion included the layout of the new pages, and how the content would be organized. We spoke about a few options on how to communicate a more effective message. One of my suggestions, and ultimately what we agreed upon, was to use a technique called progressive disclosure in order to briefly highlight a product before displaying all the information about it. You can see this technique being used throughout the website.

Progressive Disclosure

Summary

LTPB recieved a lot of positive feedback from students and faculty after the rebranded website launched. Particularly, they noted how easy it was to find information and join contests.

This website continues to be revised and edited since my involvement with LTPB, but the design work that I originally implemented is still being used.

Testimonial

"Cindy has an excellent eye for design. She is creative, professional, and able to turn client requests into beautiful, functional websites. She is a pleasure to work with, and is always adding cheer to the work atmosphere."

-----
Stephen Kingston
Owner/Director @ MediaDoc Inc.

Case Studies

© 2019 Cindy Clarke