Tamwood Careers

Responsive Website Re-design (Web + Mobile)

What is Tamwood Careers?

Tamwood Careers is a part of Tamwood International College, which is a private post secondary college that offers vocational training programs in Canada, specifically 6 programs in hospitality, service and tourism.

The purpose of Tamwood is to provide students with opportunities to expand their horizons through the institutional and cooperative educational experiences designed to challenge and encourage personal and professional growth. They specifically target international students who want to gain experience working abroad.

The Opportunity — Redesigning the current website

We were given the opportunity to re-design the current Tamwood Careers website. Our team consisted of 3 UX designers and 2 UI designers including myself.

Before having our first client meeting, the UX team started on their domain research and CC analysis while we (UIers) started to investigate the website visually and looking at other similar educational institutions.

Client Kick-off Meeting

We met with our client, Lisa Dimyadi, the Marketing specialist at Tamwood.

To begin our visual research, we started off by asking brand specific questions to better understand the Tamwood brand, and to understand the level to which we could alter or expand on the current brand guidelines.

The take-aways from this meeting were the following:

  • Have complete creative freedom in terms of colour, typography and branding. “Go crazy with it” as Lisa put it.
  • They do not want a logo redesign.
  • Brand vision is “Innovative Excellence”.
  • Brand personality is smart, receptive and dynamic.
  • Brand values are effective, transforming and professional.
  • Want students to have “Transformative life experiences”, for them to leave this place with their lives transformed, so they are able to do something completely different than what they did in the past.
  • Hypothetical brand ambassador would be : Justin Trudeau.

As a team we identified the business goals to be :

  1. Representing the school vision of ‘Innovative Excellence’
  2. Increasing website engagement
  3. Increasing direct sales
  4. Having the ability to add new programs

After our first client meeting, once we had a better understanding of the Tamwood brand, we started to curate a gut test for Lisa.

Visual Research

Gut Test

We curated a set of website images and asked our client to look through the images, each for 10 seconds and to think of them as her own and score them from 1 to 5. 1 being very low — I don’t like this website at all, and 5 being very high — I would love this website as my own!

From a UI standpoint, the gut test we conducted was very valuable, as it helped us have a better understanding of our client’s visual expectation for this project. It gave us a clear idea of our client’s tastes and the desired aesthetics for the website, which influenced the 2 art directions we eventually came up with.

The top two images were the highest voted screens, followed by the ones below.

The common theme amongst the screens were:

  • Hierarchy — both visual and with content
  • Template is clean
  • Contrasting colours
  • Clear & consistent navigation
  • Typography — hierarchy and pairing
  • Boxes used for separating information

Design Inception

Tamwood’s mission statement is “Expanding student horizons”, however we wanted to further understand what it actually means to go to Tamwood. As we started to do more research and talked to our UX counterparts, we realized that international students are going to there because they want to gain experience working and learning abroad, and that it is not necessarily because of the programs that Tamwood offers.

The persona that the UX designers molded through their research is Mariana Silva.

After understanding our persona, our users and the brand we came up with the “Why” behind our design decision. Coming up with a “Why” is crucial to the UI design process as it allows you to further delve into the visual language and the mood that you want to create for the user.

Our “Why” is :

From there on, we started to create two separate art directions following the same underlying WHY.

For our third meeting with Lisa, we had prepared two separate art directions to present — which both have the underlying “Why” but different visual language to express the Tamwood Careers division of the brand.

Art Direction 1 — “Professional Excellence”

Moodboard

Mood

This art direction was focused around professional excellence, innovation and quality education.

Colours

For this art direction, we kept the ‘Tamwood blue’ and experimented with the accent colours. We did this because we wanted to keep the Tamwood Careers brand consistent with their mother brand Tamwood College.

Through our meetings with Lisa, we understood that they were thinking about making each underlying program distinguishable, but needed the brand to feel cohesive. Therefore, we experimented with accent colours and introduced a ‘deep red’ for the main CTA on the website.

Space & Movement

  • Structure
  • Clear hierarchy

Shape

  • boxes
  • sharp edges

Style Tile

The Style Tile above makes the visual elements of this art direction more tangible so that they are easily visualized.

Sample Screen Mockup

This is a sample mockup of what a screen could look like — we wanted Lisa to have a better understanding of how the elements could come into play on the screen.

Art Direction 2 — “Supportive Community”

Moodboard

Mood

This is the moodboard for the second art direction. Here, we wanted to showcase the multiculturalism that Tamwood is all about. Tamwood

During our time working on this project, we visited the campus 3 times and it was evident that community is a huge part of what Tamwood is about.

Colours

The colours here are more vibrant and fun. We still kept the ‘Tamwood blue’ so that we could easily integrate this into the overall brand and keep it consistent with the mother brand.

Space & Movement

  • Fluid
  • Open and minimalistic

Shape

  • Rounded edges
  • Organic & dynamic shapes

Style Tile & Sample Screen Mockup

This was the art direction that got picked by our client — so our next steps were to finalize our style guide and implement the art direction to the mid-fidelity UX wireframes.

The following day, I got an email from Lisa, our client, that they had decided to go back to the original brand. This was due to expansion of the company and therefore, we stuck with the original brand guidelines, in terms of colour, typography and logo.

We had a sudden change of direction. However we had to do best with what we had and so back to the drawing board we went!

On the left, is the current Tamwood Career’s landing page.

On the right, are the colours we now had to work with for our designs.

Colours

“How do we make these colours look good together?”

That was a question we kept asking each other. We had to find a solution to using the colours in a way that would not overwhelm the user and would be nice to look at.

Typography

They stated that they are using Bebas and Museo on their brand guidelines booklet. However, when winnie and I checked the Tamwood Careers website on the inspect mode we realized that these typefaces are not used anywhere on the website, but Montserrat, Open Sans and Oswald are.

Therefore, we decided to fight a little harder for typographic freedom!

We were given freedom to choose a typeface we thought would work well with the colours and brand in general.

Therefore, we started experimenting with typography and font pairing.

Once the UX designers had handed off the screens to us, with little time to spare, Winnie and I had a strategic plan of action on how to tackle the colours.

Typography

We used Fira Sans and Merriweather.

Fira Sans is a sans serif has a wide variety of styles and is very readable.

Clear hierarchy can be established with all of the different weights and sizes within this font family.

Merriweather was used for the body text. We did so because the website is very content heavy and this font will make the user’s reading experience easier. It is a serif font with the strokes helping guide the eye.

Colour Coordination on Navigation

We decided to colour coordinate the website, to create hierarchy with the colours to reduce the colour clash.

Colours Coordination on Screens

Buttons

Style Guide