A fun, fresh redesign of one of Toronto’s top walking tour sites
To create a new website and image for Tours of the 6, a walking tour company in Toronto. The clients wanted a new look that better represented the fun and friendly side of Toronto that the tour showcased. They felt that their current site was too urban and intimidating and that it focused too much on the side of the city that was directly involved with the artist, Drake.
The website would need to be formatted for desktop and delivered along with wireframes, mood boards, a style guide, and updated copy.
Photoshop, Sketch, InVision
Two UI designers, two UX designers
The average user of Tours of the 6 is a millennial from outside the GTA who wants an authentic, urban experience of the city, with lots of opportunities to take exciting photos for their social media account. They aren’t interested in the traditional tourist heavy areas of the city and are looking to connect with the city’s culture instead.
The pain points
One major pain point was bookability. The original website used Bookeo and only one user was able to successfully book on the first attempt. This was due to the fact that there was a tiny little form that asked users to specify how many were attending the tour before the bright, green book button could be successfully clicked.
Another pain point was the need to establish trust through the use of social proof. The original website had an Instagram feed showcasing photos from the client’s account, however users felt like they needed more persuading through being able to see reviews of the site and event wanting access to video content of the tour being discussed.
Finally, the photographs of Toronto. The photographs used by Tours of the 6 were predominantly of skyscrapers disappearing into clouds, and dark, desaturated street shots. These felt intimidating and did not allude to the colourful, accessible nature of the tour itself.
After talk to our client about their goals we were able to come to the conclusion that we were looking for a design that would help them extend their reach to other demographics, would stand out from their competitors, and showcase a more interesting side of Toronto than traditional tourist materials. To do this we decided that we wanted to create something that was like a square turned on its side: recognizable, familiar, but with a twist, perhaps even showing a side that hadn’t been seen before.
We decided on a vibrant colour palette because it was important to create something that would catch the eye, create lots of options for colours to play together, and create opportunities for high contrast to highlight important information. We also began sourcing images of Toronto and the different textures and street art around the city to use as the basis for our…
Toronto is a city of many moods. There’s the fast-paced, direct thrum of the Financial District, the laid back, easy going nature of Kensington Market, and the aggressive frivolity of the Entertainment District on a Friday night. It’s part of what makes this such a great city to live in, it’s also something that’s impossible to capture in one, cohesive mood board, so we did three.
The first one was inspired by the patterns found in Toronto’s Graffiti Alley and artwork created by local, Toronto artists such as Doublenaut and Emily May Rose. The idea was to capture the urban, cool feeling of downtown without tipping over into gritty and intimidating. Reds and purples were used as the base colours.
Showing the side of the city where there’s always something to do, someone to do it with, and a great photo to get from it was the goal with the second mood board. Toronto is so often shown as this drab city with brown brick and grey streets, it was important to show our local colour and shake that image up. The colour palette is probably one of my favourite ones to work with too, it’s an homage to traditional print design, and super happy and uplifting too.
The last mood board, however, ended up being my favourite. We tried to focus on the dark side of Toronto. Of course I’m referring to the side of the city that comes out at night. Even in the dark Toronto is a deeply colourful city, from the CN Tower to the vibrant colour schemes of our many bars, we take every chance we can get to decorate ourselves. With a deep indigo as the primary colour, pink, yellow, and a deep grey supplemented it to provide that chance for bright pops of colour.
Based on conversations with the client we were able to isolate elements from all three mood boards that they wanted to incorporate, so we created a fourth. They loved it, however expressed concern over the colour palette being too feminine so we decided to make the pink an accent colour and we were off to the (design) races.
The style tile
The original style tile started as an exploration of how these colours and textures could play together. Colour blocking was incorporated to provide contrast as well as the idea of using the physical shape of the tour route as a graphic.
The original Tour of the 6 font was called Alasar. It’s a very geometric font, with a high x-height. While I liked it because it felt representative of the angular shapes created by the city’s buildings, it also felt remote and inaccessible in the same way that a lot of the available online imagery of Toronto did. Ubuntu ended up being a great replacement because it maintained some of the geometric, stable qualities, but was rounder and felt friendlier. We used Helvetica Neue to support Ubuntu as body copy and to create some contrast with a lighter, much rounder font.
During the initial visual research we found a cheat sheet of sorts of the different elements used in graffiti such as arrows, circles, hashtags, and punctuation. It felt important to try to incorporate this since so much of the tour was based around Graffiti Alley and we ended up doing this with our buttons, which were designed to look like someone had filled them in with a marker while on their way to create more street art.
The (first) final version
So how did all of this come together? We began by blocking out the different areas of the site using coloured modules. Primarily we used the yellow to highlight certain areas such as the tour description, with the indigo as a secondary option. At one point we looked at using the grey instead of yellow, however this felt too oppressive.
The hand drawn elements were used as highlight elements, circling important information or with the arrows directing the user’s eyes down to the next section. We also incorporated a texture that was used as a spacer between the different sections to create breathing room while maintaining continuity and was a break from the blocks of pure colour.
Duotone stock images of Toronto were added behind some of the photography to add texture to the colours and provide some visual interest beyond the main photographs themselves.
For the stock photography I ended up deciding to take original photographs for the project. The reason behind this was that none of the stock photographs available portrayed the part of the city the tour went through in a way that made the city look at all fun or approachable. By taking my own photographs I was able to focus on areas tour participants would actually interact with and focus on things that were of specific interest to the tour as well as finding colourful areas of King Street West and Queen Street West.
For the hero image on the main page I was lucky enough to capture a shot outside of Strangelove Coffee on Spadina of some local Torontonians outside enjoying a moment of sunshine in front of one of the most Toronto pieces of street art in the neighbourhood. It took a couple of iterations but I settled on an image with a button in the centre lower third of the image and the title of the site to the left. This was a template that would allow Tours of the 6 to switch the image out as their company expanded and more tours were added.
It happened the day before the final presentation. After spending some time with version 1 the client felt that the site was too colourful, they did not want the hand drawn elements, and they wanted to use different fonts. They were interested in attracting more Gen Xers and they felt that these elements made the page feel too young.
This is something that happens sometimes and as attached as we were to the colours after a certain point it was important to recognize that it stops being about what we as a team liked and what serves the project and the users best.
We stripped down the colours, using an off white to create some visual separation between sections. The indigo was still used sparingly to create some visual contrast but we tried to allow the custom photography, which the client loved, to be the colourful elements. In the end we removed the duotone background elements as well as they were too out of place without the brightly coloured backgrounds and were no longer needed to break things up visually. We went back to basic buttons but we decided to leave the graphic texture in and the client seemed happy with that.
Overall the client was pleased with the final result and we were able to deliver a site that accomplished their original goals of making Toronto seem much friendlier and more accessible to the hopeful tour member. Finding the balance between too much colour and not enough was challenging and it was a good exercise in recognizing that no matter what your design must serve the user and the client.