UI DESIGN / UX DESIGN
How might we rebrand a content-heavy website to increase engagement with a young audience?
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:
What goals and concerns do we need to address?
What outcomes do you want to achieve, as a result of completing this project successfully?
Whose goals and concerns do we need to address to make this project successful?
At the end of our discovery sessions, we developed an outcome statement with our stakeholders which was to:
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.
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.
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.
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.
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.
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.
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.
"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."
Owner/Director @ MediaDoc Inc.
© 2019 Cindy Clarke