Web Redesign For Hanson Canada — A UI Case Study
--
Across the sea or across the street, universally imperative to any bright future is an adequate education. Being Canadian, the idea of hitting the books and attending class has become a rather “rinse, wash, repeat”, kind of process, often forgetful of how widely inaccessible of a resource education is outside of our borders. Lectures, projects, deadlines: adhering to such a schedule is difficult enough a task on its own. Factor in relocating to a foreign country, along with a healthy dose of culture shock, and such a process can quickly
become overbearing.
Client Spotlight
Built upon the principles of collaboration, inclusiveness, and integrity, Hanson Canada is a private education group providing secondary, post-secondary, and language programs to domestic and international students
of all ages, programming students for college.
Working in partnership with Cambrian College of Applied Arts and Technology, Cambrian at Hanson delivers Cambrian College programs exclusively to international students at three campus locations throughout Canada: North York, Brampton, and Vancouver.
Scope Of Work
In collaboration with Hanson Canada, our task was to recreate their web interface with the intention of establishing increased visual hierarchy
and legibility of content. Given the school’s targeted demographic being new immigrants (with english as a second language), it was important that we created a platform that was highly accessible, providing a rich experience that was easily perceivable, without bloat.
Medium: Web
Tools: Figma, Adobe Illustrator
Establishing Our User
Prior to design, it was first necessary to establish our primary user, and to develop a persona to represent them moving forward. As mentioned, Hanson offers courses at both the College and Secondary level, leaving a large potential age range for us to focus on.
Our UX team set out to identify our target demographic through the deployment of online surveys and in-person interviews, asking for insight into the following criteria:
• Demographic information
• Learning habits/preferences
• Perspectives on living as an immigrant in Canada
Meet Afhsa
We created Afsha to serve as a fictional representation of all of our primary data points collected from surveys and interviews.
Data points painted cited that our primary persona was:
•Between the ages of 18–24 (71%)
•Immigrating from India (69%)
Primarily motivated by using their education to aid in gaining permanent residency, Afsha is often struck with homesickness, and needs locate a college that empathizes with her cultural-specific practices, in order to help her feel more included in an otherwise foreign environment. Additionally, she highly values her social life, and wants to gain further insight into her prospective school’s social programs/event schedule before enrolling.
“As a prospective student immigrating to Canada, I need a school that will offer me a variety of post-secondary programs and social events, so I can better manage my learning experience.” — Afsha
What’s In a Screen: Moodboarding Inspiration
Kicking off my UI process, I first looked to seek inspiration from a number of my favourite post-secondary landing pages. Performing research of my own, I created an annotated moodboard, setting out to locate recurring themes amongst the following criteria:
• Implementation of negative space
• Visual hierarchy
• Formatting of hero content
• Use of imagery
With a broader understanding of our competitors, I next set out to curate a moodboard that spoke to Hanson’s identity and desired brand image. Conducting research into the principles of colour theory, I searched for colours that reflected Hansons core values of integrity, inclusion,
and opportunity.
I opted for an organic palette comprised of soft whites and rich browns, paired with rounded textures, veering away from the formal (and often unsettling) nature of geometric shapes.
As seen below, shades of white symbolize neutrality, creating feelings of opportunity and inclusion, which I feel accurately spoke to Hanson’s
brand archetype as the caregiver, or everyman.
In addition to colour psychology, I focused on white as a primary colour due to its inherent strength at creating contrast across an interface, adhering to WCAG 2.0 accessibility guidelines. It is important to note that, although no included in the moodboard, I did need to ensure I factored Hanson’s pre-existing brand colour of maroon (Hex: 813237) into my final design.
So, What’s The Word?
Successful design is intentional, and creating a set of visual language to compliment my imagery was vital to establishing brand identity moving forward. An inception sheet helped me to establish keywords that spoke to the site’s shape, space, movement and mood.
As mentioned, I wanted Hanson’s digital interface to evoke feelings of trust and companionship in its user’s looking to enrol (like Afsha). My approach? Bright, muted tones that were scholarly, yet highly approachable. A grid-like formatting structure of elements, finished with rounded edges, creating a clean and highly legible interface, without the overly formal nature of
hard edges. Moving forward, I opted to hone in on one keyword from each category to help guide my design process:
• Space: Tidy
• Colour: Scholarly
• Movement: Organized
• Shape: Rotund
• Mood: Inclusion
The why, not by coincidence, is placed as the bullseye of the inception sheet. The nucleus of my scope, it was crucial to understand and justify my design decisions up to this point, prior to moving forward. Why are we taking
this approach?
“To promote Hanson Canada as a Haven that is blind to all qualities, except one’s willingness to learn, encouraging feelings of trust and acceptance for its prospective students. “ — Me
Designing The Product
In simultaneity with my own preparations, the UX team curated our mid-fi prototype. In contrast to the original site, some major changes/additions to note that we included in our redesign were:
• A Student Experience page, highlighting all of each campus’ upcoming social events
• A leaner nav bar experience with less tabs, to create a more easily perceivable browsing experience
• An e-commerce flow to offer Hanson apparel for purchase on-site
Minding Hanson’s pre-existing design assets, I created our Hi-Fi with the intention of creating a more welcoming experience, without taking away from the brand’s identity (i.e. colours, imagery, and structure). Our client’s primary need was drawing a larger emphasis toward the student experience, highlighting how student funds are re-injected back into organizing
social events. As pictured above, a new Student Life page was created to fill this void, providing an in-depth look into upcoming events on and
off campus.
Taking inspiration from Google’s Material Design system, I implemented drop shadows onto all interactive elements in their default states, with the intention of creating an added sense of depth across the interface. All elements (such as CTAs) become flat in their active states, signifying that they have been clicked to further aid in creating hierarchy.
So, what about formatting? Adhering to Nielsen Norman’s aesthetic and minimalistic design heuristic, I worked to include only the most relevant information contributing to the user’s experience across the interface. This inherently increased readability and overall accessibility by integrating more negative space between elements and blocks of content.
Creating A Cohesive Style Tile
Imperative to ensuring my design was created cohesively was a style tile, which served as a high-level reference tool to concisely communicate my design direction to colleagues and clients. I utilized the perfect fourth typescale in order to create a higher degree of contrast between my headings and body copy. I opted to use Roboto as my typeface. Geometric yet curvy in nature, it is known for its modern and approachable appearance, easily readable without sacrificing its ability to present itself formally. Offered in a selection of weights from black to thin, its versatility allowed me to create adequate visual hierarchy without implementing a font pairing.
Also included was the selected colour palette, icons, as well as our primary, secondary, and tertiary CTAs in their default, focused, and active states.
Enriching the Experience with Animations
Naturally, the scope of any design sprint is to create a final product whose functions provide a highly realistic experience for users and developers
upon handoff. Completing my final wireframes slightly ahead of schedule, I dabbled in creating some playful animations to help in enriching the
digital experience. With one of the site’s primary functions being designed as an enrolment/application flow, I opted to design a processing animation for when users confirm their application, prior to receiving confirmation. More important than mere aesthetics, including processing animations provided more feedback to users about their actions, along with their whereabouts in the application process, preventing confusion, and decreasing rates of abandonment across the interface. NOTE: For some reason, the circle was continuously cut off at the top when placed into GIPHY Capture.
Final Takeaways
With Hanson Canada propelling itself forward as one of Canada’s leading private colleges for new immigrants, it was crucial that we designed a final product that was highly accessible, specifically through the inclusion of descriptive copy and contrast ratios, in order to cater to users primarily speaking foreign languages.
Being forced to keep the interface simple and easily navigable as a result of our target user, this sprint was a great opportunity to consider audiences with contrasting cultural and digital conventions, and ensure that we created a universally understood product that catered to more than just a
Western demographic.
View our finished prototype here!
