Overview
This was a project I completed during my internship at Digital Lab with the BC Children’s Hospital in 2022. Taking on roles of a designer and developer, I led the design iterations, high-fidelity prototyping, and website building/launching process over the span of six months.
Current Issue
The existing website featured the CHASE tool on the landing page, making it difficult for the audience to gage the goals and intentions of the program at first glance. There was an inadequate representation of the CHASE team’s capabilities and growth trajectory with the current website.
Objectives
The new website redesign process prioritized two main goals to reflect the team’s innovation and dynamic growth more accurately:
- Creating a platform to host the current educational intervention tool and introduce the overall CHASE research project. This upgrade enables direct and clear communication of the team’s objectives of raising awareness towards child safety to new and existing users.
- Implementing new and diverse visual representation to display CHASE’s new initiatives such as an explainer video, metrics, partnerships, and more. These additions enhance user experience by bringing a dynamic element to the platform.
"How can I organize information into easily digestible portions?"
Upgrades/Modifications
The redesign process, first consisted of developing a visual branding guide with reference
to the existing website elements, including typography and a colour system, to ensure the design is coherent and consistent across the both sites.
For typography, the previous font Muli was no longer available, so I chose Mulish, a sibling font, that presented the same modern, yet inviting tone, perfect for a more educational platform.
As for the colour system, I retained the core blue colour previously used for branding, but added a secondary golden yellow colour as an accent throughout the site for more contrast and dimension, maintaining simplicity and professionalism. Moreover, the yellow also references to one of the colours of the traffic light signifying safely stop if possible, which links back to the message of increasing the promotion of road safety.
Brand Identity
High-Fidelity Wireframes
I transitioned to developing three different visual styles for the high-fidelity mockups of the new landing page in Figma. With the final deliverable to be produced on Webflow, I also had to take in considerations of the feasibility of more complex features under the limited timeframe.
Style A
The integration of geometric forms and overlapping elements create a playful but professional tone that carefully guides users continually through each section of the page.
Style B
A minimal and clean design that features pops of colour, and modular and vertically-orientated elements to create a polished and editorial tone.
Style C
The use of an asymmetrical balance between the text and visual elements, mixed with
soft gradient colours evoke a sense of calmness and a child-friendly feel.
Final Design
After a long but necessary iterative process, the final landing page reflects visual elements and styles from all three mockups.
Explainer Video
The mixed media format explainer video created by Digital Lab’s talented media team captivates the attention of potential users through dynamic visuals and interactive storytelling that efficiently communicate the goals of the research program.
Call-to-Action Button
The inclusion of a Call-to-Action button after the mission statement entices users to act and further explore CHASE’s intervention tool to help increase awareness of safe active transportation for Canadian youth.
New Initiatives
Adding visual representation for the new initiatives, Education and Enforcement, allows users to digest key points at first glance without feeling overwhelmed with information overload. The linked CTA button enables further exploration of the topic through an external PDF.
Reflection
This project was the first I worked on in both the designer AND developer role. I learned a new platform, Webflow, designing, building, and launching the client website! Fortunately, with my design and web development background, initiating the project wasn’t too complex. I also took advantage of the crash courses and numerous tutorials provided by Webflow to seek assistance when challenged with an unfamiliar feature.
Working on this project taught me a crucial lesson: Ask for specific feedback during design reviews and stakeholder meetings. I discovered that sometimes the vision conveyed through a document brief may not translate the same visually. I understood how it was significant when designing for this project to avoid potential miscommunication and make the iteration process more efficient and seamless.
