Héritage Montréal
Timeline: 2 weeks
Team: 3 members
Role: UX/UI Designer
Tools: Canva, Figma
Héritage Montréal is a non profit organization that works to protect and promote the architectural, historical, natural, and cultural heritage of Greater Montreal. They do this by representing Montreal’s unique identity through education and various forms of activism.
Project Summary
Initial usability testing revealed that the Heritage Montreal website has a confusing layout, hindering users from easily finding relevant content relevant to their interests. Booking tours is challenging, and the lack of engaging details discourages users from making purchases. Here are the reasons for these issues:
A homepage that doesn’t state the purpose of the organization.
Lack of useful content on the tours page to encourage users to buy a tour
Inefficient checkout process for booking a tour
Disorganized information architecture that makes it difficult to navigate through the site.
We decided to redesign their website to improve user experience, focusing on one streamlined user flow for purchasing tours and making tour-related content more engaging and useful.
Our Goal
We chose to reorganize and refine how their content is presented so that it is more engaging and streamline the process of buying a tour. By doing so, we want people to interact with heritage sites and be inspired to participate in their preservation.
Constraints
These are the limitations we had to work with.
Time
We had only 2 weeks to complete our high fidelity prototype. We focused on one user flow, the functionality and visual identity of the website.
Technical limitations
Desire to build complex features were present but our technical capabilities were limited. Focus was on accessibility, usability, and visual identity of the site.
Access to right users
Would have been nice to have interviewed people who visited the website and booked a tour through it to understand their experience.
Assumptions
These are what we already held to be true regarding our users and the organization.
Population type
Ages between 25- 40. People are sociable and like to travel. This makes them more likely to search for tours and attend them often.
Business
Heritage Montreal can provide the in-person experience that is reflective of the anticipation the content we reorganize and refine.
Culture
Locals and tourists prefer taking tours that provide them insights about their local heritage as opposed exploring sites on their own .
Discovery Phase
What is Heritage?
Heritage is the expression of a people’s legacy in terms of historical and cultural significance. Tangible markers of heritage can be festivals, food, and architecture. They make cities vibrant and give them a unique identity that tells a story across different generations.
Why Heritage Montreal?
We chose Héritage Montréal for its focus on preserving the city’s historical architecture, paralleling our view of natural ecosystem preservation. Just as preserving nature benefits humanity, historical architecture fosters human ingenuity. By showcasing this heritage, we can educate potential users about the rich cultural ecosystem of humanity.
Initial Impressions of the website
1
Homepage
1
2
Inaccessible colour scheme. Yellow background with white text is hard to read for many people.
2
No hero section that introduces the purpose of their website.
Tours page
2
1
2
2
1
The graphics should be clearer, wish they had chunked the information, making it digestible.
There could’ve been another CTA button under the tour description as opposed to a general one for all tours.
Donation page
Nice description that is thought provoking. However, instead of giving a list of reasons why to donate it would be nice to show examples of preservation efforts.
Revealing the Problem
We interviewed 6 people to understand their general attitudes toward heritage sites. Our list of questions stemmed from two high level questions:
When and how did they interact with Heritage sites
How was their experience visiting a Heritage site.
What people said....
People said they valued heritage sites but also said learning about them is often difficult and boring.
Value
Appreciative of heritage sites for the unique identity they give to their local cities. They wouldn't mind paying for a fun heritage events.
Hesitant
People find it difficult to access information about heritage sites. They don't search for them or encounter relevant information.
Bored
Visiting a heritage site and learning about them is not engaging enough. The stories are not memorable for them to go back for another visit.
However...
Due to the internet, it can't simply be that information about heritage sites is hard to find. Rather, people seem to feel that useful and engaging information about heritage sites is hard to find.
Definition
The problem is this...
People find it difficult to acquire intimate and engaging experiences with heritage sites that are memorable enough to inspire them to take part in heritage preservation and understand it’s significance.
The solution....
How might we provide a user experience where people can find information about heritage sites that is accessible, novel, and insightful, that inspires them to take part in heritage conservation by attending in person events?
Meet Gabriel...
Now that we knew what people are looking for in regard to heritage sites, we could create a user persona that reflects their needs and goals.
Gabriel Bélanger
Age : 31
Software Engineer
Location: Montreal, Quebec
Apps Used
PhotoShop
Spotify
About
Has been an avid history fan since high school. While he’s not at his job or hanging out with friends he is learning about architectural styles he finds fascinating and wants to see them in person. Always looking for an opportunity to travel, he wants to see new places and share his experience on his instagram account.
Needs
A way to find out about more upcoming local heritage related events / tours
A way to support his local heritage sites other then a donation
Wants to be more engaged when attending a tour or an event
Needs to experience the city’s heritage sites in person
Goals
Get more involved with Heritage architecture and preservation efforts.
Attend events and tours at heritage sites with colleagues and friends.
Learn fascinating heritage sites and their history.
Share his experiences on social media and spread awareness.
Frustrations
Gets bored when visiting heritage sites.
Sites become development opportunities instead of living/commercial spaces.
Being unaware of entertaining and edifying events at heritage sites
When visiting hours and events do not line up with his schedule
---Gabriel doesn’t just want to learn about his local heritage sites, he wants to learn about them through an exciting in person experience. What does Héritage Montreal offer that has the potential to accomplish this?
They offer tours.
We set out to redesign how they offer their tours to reflect what someone like Gabriel would look for.---
Ideation
Our User Flow
Taking the user scenario, we turned it into a user flow. This would be helpful for us create a new information architecture and specify the steps Gabriel will take to book a tour.
What features should our prototype have?
We looked at similar non-profit organizations that had a competitive advantage. I looked at the various strengths of their features and instead of simply emulating them in our redesign I understood the theme and came up with ways we could implement them in our redesign of the site.
Inspiration
Vancouver Heritage Foundation
- Wait list for sold out tours
- Gallery of past tours
- Introduce their tours.
Themes
General. Introductory.
The general and introductory information about the tour should be important and meaningful in helping them decide on a tour.
Get Your Guide
- Reviews of tours
- Can purchase a tour as a gift
- An itinerary for the tour.
Engaging. Informative.
Details about the tour is insightful and informative in a way that emphasizes the quality of the tour and what people can expect to experience in the tour.
GuruWalk
- Map shows meeting point
- Visual highlights of tour
- Photos in the banner
Accessible. Visually Pleasing.
The tour needs to be presented in a visually pleasing manner. It should be easy to browse through them and understand what is being offered.
Implementation of themes
Now, we not only had some ideas of the features we could implement in our redesigning of the website, but had a better understanding of how the new information architecture should look like.
Homepage
We will bring tours to the homepage so users will immediatly notice theme. General information will convey the organization's purpose.
Tours Page
The tours are visually pleasing and have a short description of the tour. Must be easy to browse through the tours and choose one.
Tour Content
Description must be Informative. Users must be able to anticipate what they can expect from the tour by reading the details.
Prototyping and testing
The Wireframe
Keeping in mind the time, I quickly came up with a rough sketch of what our pages should look like and consulted with my team members to see if the general outline was good enough.
The Mid Fidelity Prototype
We built a prototype based on the wireframe in mind and added substantial detail into our prototype in order to quickly start testing and identify any major issues the user might have with the flow.
Homepage
Events and Tours
Tour description
Payment confirmation
User Testing Version 1 - Booking a Tour
The focus of this user objective was to understand how easy or difficult it was for users to book a tour. The users were given an objective and 3 tasks to complete.
User Objective
As a user you would like to attend a heritage tour offered by Heritage Montreal and learn interesting historical facts about the site. The speakeasies tour piques your interest and you decide to book tickets for you and your friend.
The Tasks
1. Find the tour you are interested in.
2. Book the tour for you and your friend.
3. Pay for the tour and your friend.
The Feedback
The feedback we received was concerned with the process of booking a tour and paying for it. Video illustrating mistakes shown below as well.
Missing fields
Though meeting point was mentioned it was hard to see. Users wanted to see maps, reviews, the cost per person, and maybe an interesting.
Counter intuitive behaviour
The booking process is not intuitive - the ticket confirmation pops up before all fields selected . No price breakdown before purchase
Return to previous page.
Users sought a way to return to the previous page to change their tour or browse available options.
Updating our Prototype
Based on the feedback we received, here are some of the most important changes we made to our prototype.
Tour description page
1
3
4
2
1
4
3
2
We not only added reviews into the tour description but added a few testimonies as well.
A price per head was added so it’s clear that it is not the cost of the tour itself.
A back button was added so the user can easily go back.
A map of the starting point was added so users can quickly know whether they are close by to the location or not.
1
No confirmation dropdown before fields selected.
Counter intuitive behaviour was fixed by ensuring the drop down confirmation does not show up before all fields are entered.
Confirmation dropdown appears.
Confirmation is only revealed after the users click on ‘Proceed to book’.
Payment details before payment is made.
Payment details are shown once again just before a user makes a purchase.
User Testing Version 2 - Usefulness of content
This user objective focused on understanding whether or not they found the content interesting and left them encouraged to book a tour. Hence, we asked questions instead of giving the users tasks to complete.
User Objective
You’re in Montreal for the weekend. As a user you stumble upon the Héritage Montreal’s website and start exploring the website. The ‘Discover the city’s Speakeasies tour’, piques your interest and you want to find out more.
The Questions
Can you tell me what the website or organization is about?/ how long did it take you to find out?
Can you list anything that you found interesting about the tour description?
How did you find the tone and language used in the tour cards and description?
If you could add one thing to the tour information what would it be?
The Feedback
The responses we received revolved around the content being uninteresting or confusion about the website's purpose.
Purpose of the site
Figuring out the purpose of the organization took time because the user spent a few seconds to read through the hero section of the site.
Creating interest
Users found the Speakeasies tour concept interesting but didn't find the tour interesting. They also didn't find the images visually pleasing.
What's nice to have
Users said they would like to see an FAQ section, or some images of previous tours. Otherwise, not sure only that it should draw their attention.
1
Updating our Prototype - Version 2
Based on the feedback we received, here are some of the most important changes we made to our prototype.
Homepage - Less time to understand purpose of organization
2
Mission statement has been reduced to one line and is made more prominent so users can quickly get an idea of what the organization is about
We reduced the length of the mission statement. Now, it takes less time to understand the purpose of the organization while remaining succinct and precise.
1
2
2
Tours page - Better images and shorter but intriguing copy
1
2
1
2
I reduced the amount of copy the user had to read, instead I made it more intriguing or “enticing” to pique user interest.
Used more visually appealing images that resonate with the mood of what the tour would expore.
Tour information page - Better copy and more useful information
1
2
4
3
3
2
1
Names were added as well as a short but interesting description of the tour.
Even though users didn’t say they wanted to know about the tour guide, we thought adding it would convey a feeling of transparency and make the tour a more intimate experience.
An interesting fact was added to capture the user's interest and keep them engaged.
A section with disclaimers was added. Not only was this an implied request by a user but this kind of information is important for establishing user confidence.
4
Visual identity
Mood board and creative direction
While the purpose of our features was to reflect user needs and the user flow, the visual design was not communicating the site’s identity. This subtracted from the user goals. For example, not understanding how users processed the information on the tour description led to a poor design and several user complaints.
Moodboard
I collected images that reflected these themes and reviewed them with my team.
Museums
Old architecture
Visually appealing places in Montreal - cafes, churches etc.
Buttons and design layouts for inspiration
Choosing the color scheme
Since we were redesigning an organization that focused on french heritage I began thinking about the ‘fleur-de-lis’ (‘french lily).
A symbol used on the traditional coat of arms of France from the Middle Ages and even after the Napoleonic era, has historical significance. The flag is blue and the lilies are yellow.
In this painting of Napoleon, arguably the most famous french figure in history, is wearing a navy blue uniform with gold on the lapels and in many instances elsewhere.
In my mind, the consistent use of these colours was associated with french history and heritage.
Brand colour/ Accent Colour
Hex code: 0C2340
Hex code: FFCB04
Neutral colors
Hex code: FFFFFF
Hex code: F0D283
In certain instances I would use a lighter tint of the gold (accent colour) to add warmth and hierarchy without overwhelming the interface. Paired with a deep navy and soft neutrals, the palette balances bold heritage with clarity and ease of use.
The Typography
I began to think of some adjectives that are associated with the concept ‘French heritage’; but found it too broad. So, I narrowed it down to a related concept, ‘old architecture’. Here is what I came up with.
Elegance
Grandeur
Classic
Captivating
I decided on a font pairing that would reflect these adjectives and showed them to my team.
EB Garamond: Promoting the city’s DNA for over 50 years
Helvetica Neue: Heritage Montreal works to protect and promote the architectural, historical, natural, and cultural heritage of Greater Montreal.
Testing schemes..
Unsure of how the new typography and the colour scheme I chose would look on our redesign, I started to put together some sample screens and visual elements to see which ones looked the best.
Text and Background
I ensured that colours and text I chose were accessible and visually pleasing and in line with the organization's identity.
UPCOMING EVENTS
Immerse yourself in the heart of Montreal.
UPCOMING EVENTS
Immerse yourself in the heart of Montreal.
Cards and other visual elements
The cards and other visual elements conveyed key information. A visual hierarchy that emphasizes this being designed and iterated over.
Old Montreal
Walk through the cobbled streets of from Notre Dame to the old Harbor
22.95 $
Sophie
July 4, 2024
Toronto, ON
Lorem ipsum dolor sit amet consectetur. At pretium urna risus nec nulla penatibus. Nisl fusce est bibendum enim morbi eleifend quis. Nisl fusce est bibendum enim morbi eleifend quis.
Hi-Fidelity Prototype And Conclusion
The High - Fidelity Prototype
With our colour scheme, visual elements in place, and redesigned pages in place, we completed a high fidelity prototype, building on the visual language we had established at the beginning of the protoyping phase.
Here are some important updates we made to our final prototype
Clear and concise communication of important information presented throughout the website
Elevated visual identity that helps the user navigate the website and establish it’s authenticity
Went beyond user expectations to enrich the user experience (e.g tour payment confirmation before and after purchase, tour guide information, sold out tour statuses)
Future Opportunities
While we accomplished so much, here are the useful features that could be added in the future to enhance the user experience.
Become a member
Develop a feature flow enabling people to participate and become a member of the organization. Also, make it quick and easy.
Personal features
Add account creation where people can see their profile details. download their tickets for their tours, save pages they have visited.
Interactive map and points
People could get points based on the tours they visited. They could tell others stuff they found at interesting at a site by pointing it out on a map.
My Learnings
I learned that communication is key to overcoming challenges as a team, testing provides valuable insights, and I should be bolder in my design decisions.
Be confident
Trust your decisions, be outspoken, always review your work. This enables myself to be more confident with my insights and designs.
Liase and cooperate
Cooperation, being receptive to critique, and communication were quintessential to overcoming challenging hurdles.
Keep testing
Test often and fast. Every iteration brings me closer to a polished product that fulfills user needs because it gives me valuable insights.
I am still learning when to use my accents in French…
The end
Made with Figma and Framer
Héritage Montréal
Timeline: 3 weeks
Team: 3 members
Role: UX/UI Designer
Tools: Canva, Figma
Héritage Montréal is a non profit organization that works to protect and promote the architectural, historical, natural, and cultural heritage of Greater Montreal. They do this by representing Montreal’s unique identity through education and various forms of activism.
Project Summary
Initial usability testing revealed that the Heritage Montreal website has a confusing layout, hindering users from easily finding relevant content relevant to their interests. Booking tours is challenging, and the lack of engaging details discourages users from making purchases. Here are the reasons for these issues:
A homepage that doesn’t state the purpose of the organization.
Lack of useful content on the tours page to encourage users to buy a tour
Inefficient checkout process for booking a tour
Disorganized information architecture that makes it difficult to navigate through the site.
We decided to redesign their website to improve the user experience, focusing on one streamlined flow for purchasing tours and making tour-related content more discoverable and engaging.
Our Goal
We chose to reorganize and refine how content is presented to make it more engaging and streamline the tour booking experience. Our goal was to help users connect more easily with heritage sites and feel motivated to explore and support them.
Constraints
These are the limitations we had to work with.
Time
We had only 2 weeks to complete our high fidelity prototype. We focused on one user flow, the functionality and visual identity of the website.
Technical limitations
Desire to build complex features were present but our technical capabilities were limited. Focus was on accessibility, usability, and visual identity of the site.
Access to right users
Would have been nice to have interviewed people who visited the website and booked a tour through it to understand their experience. This would given us deeper insights.
Assumptions
These are what we already held to be true regarding our users and the organization.
Population type
We targeted ages between 25- 40. This group of people are sociable and like to travel. This makes them more likely to search for tours and attend them often.
Business
Heritage Montreal must provide the in-person experience that is reflective of the anticipation the content and information we reorganize and redefine.
Culture
We assumed locals and tourists prefer taking tours that provide them insights about their local heritage as opposed exploring sites on their own.
Discovery Phase
What is Heritage?
Heritage is the expression of a people’s legacy in terms of historical and cultural significance. Tangible markers of heritage can be festivals, food, and architecture. They make cities vibrant and give them a unique identity that tells a story across different generations.
Why Heritage Montreal?
We chose Héritage Montréal for its focus on preserving the city’s historical architecture, paralleling our view of natural ecosystem preservation. Just as preserving nature benefits humanity, historical architecture fosters human ingenuity. By showcasing this heritage, we can educate potential users about the rich cultural ecosystem of humanity.
Initial Impressions of the website
1
Homepage
1
2
Inaccessible colour scheme. Yellow background with white text is hard to read.
2
No hero section that introduces the purpose of their website.
Tours page
1
2
2
2
1
The graphics should be clearer, wish they had chunked the information, making it digestible.
There could’ve been another CTA button under the tour description as opposed to a general one for all tours.
Donation page
Nice description that is thought provoking. However, instead of giving a list of reasons why to donate it would be nice to show examples of preservation efforts.
Initial Impressions of the website
Homepage
1
2
1
2
Inaccessible colour scheme. Yellow background with white text is hard to read.
No hero section that introduces the purpose of their website.
Tours page
1
2
2
2
1
The graphics should be clearer, wish they had chunked the information, making it digestible.
There could’ve been another CTA button under the tour description as opposed to a general one for all tours.
Donation page
Nice description that is thought provoking. However, instead of giving a list of reasons why to donate it would be nice to show examples of preservation efforts.
Revealing the Problem
We interviewed 6 people to understand their general attitudes toward heritage sites. Our list of questions stemmed from two high level questions:
When and how did they interact with Heritage sites
How was their experience visiting a Heritage site.
We interviewed 6 people to understand their general attitudes toward heritage sites. Our list of questions stemmed from two high level questions:
When and how did they interact with Heritage sites
How was their experience visiting a Heritage site.
What people said....
People said they valued heritage sites but also mentioned learning about them is often difficult and boring.
Value
Appreciative of heritage sites for the unique identity they give to their local cities. They wouldn't mind paying for fun heritage site events and supporting them.
Hesitant
People find it difficult to access information about heritage sites. They don't search for them or encounter heritage related information often in helpful ways.
Bored
Visiting a heritage site and learning about them is not engaging enough. The stories are not memorable and engaging for them to go back for another visit.
However...
Due to the internet, it can't simply be that information about heritage sites is hard to find. Rather, people seem to feel that useful and engaging information about heritage sites is hard to find.
Definition
The problem is this...
People find it difficult to acquire intimate and engaging experiences with heritage sites that are memorable enough to inspire them to take part in heritage preservation and understand it’s significance.
The solution....
How might we provide a user experience where people can find information about heritage sites that is accessible, novel, and insightful, that inspires them to take part in heritage conservation by attending in person events?
Meet Gabriel...
Now that we knew what people are looking for in regard to heritage sites, we could create a user persona that reflects their needs and goals.
Gabriel Bélanger
Age : 31
Software Engineer
Location: Montreal, Quebec
Apps Used
PhotoShop
PhotoShop
Spotify
Spotify
“The farther backward you can look, the farther forward you are likely to see”
About
Has been an avid history fan since high school. While he’s not at his job or hanging out with friends he is learning about architectural styles he finds fascinating and wants to see them in person. Always looking for an opportunity to travel, he wants to see new places and share his experience on his instagram account.
Needs
A way to find out about more upcoming local heritage related events / tours
A way to support his local heritage sites other then a donation
Wants to be more engaged when attending a tour or an event
Needs to experience the city’s heritage sites in person
Goals
Get more involved with Heritage architecture and preservation efforts.
Attend events and tours at heritage sites with colleagues and friends.
Learn fascinating heritage sites and their history.
Share his experiences on social media and spread awareness.
Frustrations
Gets bored when visiting heritage sites.
Sites become development opportunities instead of living/commercial spaces.
Being unaware of entertaining and edifying events at heritage sites
When visiting hours and events do not line up with his schedule
---Gabriel doesn’t just want to learn about his local heritage sites, he wants to learn about them through an exciting in person experience. What does Héritage Montreal offer that has the potential to accomplish this?
They offer tours.
We set out to redesign how they offer their tours to reflect what someone like Gabriel would look for.---
Ideation
Our User Flow
Taking the user scenario, we turned it into a user flow. This would be helpful for us create a new information architecture and specify the steps Gabriel will take to book a tour.
What features should our prototype have?
We looked at similar non-profit organizations that had a competitive advantage. I looked at the various strengths of their features and instead of simply emulating them in our redesign I understood the theme and came up with ways we could implement them in our redesign of the site.
Inspiration
Vancouver Heritage Foundation
- Wait list for sold out tours
- Gallery of past tours
- Introduce their tours.
Themes
General. Introductory.
The general and introductory information about the tour should be important and meaningful in helping them decide on a tour.
Get Your Guide
- Has ratings/reviews of tours
- Can purchase a tour as a gift
- Has an itinerary for the tour.
Engaging. Informative.
Details about the tour is insightful and informative in a way that emphasizes the quality of the tour and what people can expect to experience in the tour.
GuruWalk
- Map showing meeting point
- Easy to read visual highlights
- Nice photos in the banner
Accessible. Visually Pleasing.
The tour needs to be presented in a visually pleasing manner. It should be easy to browse through them and understand what is being offered.
Implementation of themes ...
Now, we not only had some ideas of the features we could implement in our redesigning of the website, but had a better understanding of how the new information architecture should look like.
Homepage
We will bring tours to the homepage so users will immediatly notice theme. General information will convey the organization's purpose.
Tours Page
The tours are visually pleasing and have a short description of the tour. They must be easy to browse through the tours and choose one.
Tour Content
Description must be Informative. Users must be able to anticipate what they can expect from the tour by reading the description provided.
Prototyping and testing
The Wireframe
Keeping in mind the time, I quickly came up with a rough sketch of what our pages should look like and consulted with my team members to see if the general outline was good enough.
The Mid Fidelity Prototype
We built a prototype based on the wireframe in mind and added substantial detail into our prototype in order to quickly start testing and identify any major issues the user might have with the flow.
Homepage
Events and Tours
Tour description
Payment confirmation
User Testing Version 1 - Booking a Tour
The focus of this user objective was to understand how easy or difficult it was for users to book a tour. The users were given an objective and 3 tasks to complete.
User Objective
As a user you would like to attend a heritage tour offered by Heritage Montreal and learn interesting historical facts about the site. The speakeasies tour piques your interest and you decide to book tickets for you and your friend.
The Tasks
Find the tour you are interested in.
Book the tour for you and your friend.
Pay for the tour and your friend.
The Feedback
The feedback we received was concerned with the process of booking a tour and paying for it. Video illustrating mistakes shown below as well.
Missing fields
Though the meeting point was mentioned it was hard to see. Users wanted to see maps, reviews, the cost per person, and maybe an interesting.
Counter intuitive behaviour
The booking process is not intuitive - the ticket confirmation pops up before all the fields selected were . No price breakdown before purchase
Return to previous page.
Users searched for a way to go back to the previous page in case if they wanted to change the tour they wanted to book or simply browse whats on offer.
Updating our Prototype - Version 1
Based on the feedback we received, here are some of the most important changes we made to our prototype.
Tour description page
1
3
4
2
1
4
3
2
We not only added reviews into the tour description but added a few testimonies as well.
A price per head was added so it’s clear that it is not the cost of the tour itself.
A back button was added so the user can easily go back.
A map of the starting point was added so users can quickly know whether they are close by to the location or not.
1
No confirmation dropdown before fields selected.
Counter intuitive behaviour was fixed by ensuring the drop down confirmation does not show up before all fields are entered.
Confirmation dropdown appears.
Confirmation is only revealed after the users click on ‘Proceed to book’.
Payment details before payment is made.
Payment details are shown once again just before a user makes a purchase.
User Testing Version 2 - Usefulness of content
This user objective focused on understanding whether or not they found the content interesting and left them encouraged to book a tour. Hence, we asked questions instead of giving the users tasks to complete.
User Objective
User Objective
You’re in Montreal for the weekend. As a user you stumble upon the Héritage Montreal’s website and start exploring the website. The ‘Discover the city’s Speakeasies tour’, piques your interest and you want to find out more.
You’re in Montreal for the weekend. As a user you stumble upon the Héritage Montreal’s website and start exploring the website. The ‘Discover the city’s Speakeasies tour’, piques your interest and you want to find out more.
The Questions
The Questions
Can you tell me what the website or organization is about?/ how long did it take you to find out?
Can you tell me what the website or organization is about?/ how long did it take you to find out?
Can you list anything that you found interesting about the tour description?
Can you list anything that you found interesting about the tour description?
How did you find the tone and language used in the tour cards and description?
How did you find the tone and language used in the tour cards and description?
If you could add one thing to the tour information what would it be?
If you could add one thing to the tour information what would it be?
The Feedback
The responses we received revolved around the content being uninteresting or confusion about the website's purpose.
Purpose of the site
Figuring out the purpose of the organization took more time because the user spent a few seconds to read through the hero section of the site.
Creating interest
Users found the Speakeasies tour concept interesting but didn't find the content of the tour interesting. They also didn't find the images visually pleasing.
What's nice to have
Users said they would like to see an FAQ section, more personal information, or some images of previous tours. Otherwise, not sure only that it should draw their attention.
Updating our Prototype - Version 2
Based on the feedback we received, here are some of the most important changes we made to our prototype.
Homepage - Less time to understand purpose of organization
2
Mission statement has been reduced to one line and is made more prominent so users can quickly get an idea of what the organization is about
We reduced the length of the mission statement. Now, it takes less time to understand the purpose of the organization while remaining succinct and precise.
1
1
2
1
2
Tours page - Better images and shorter but intriguing copy
1
2
1
2
A similar principle was applied to improving our tours page. I reduced the amount of copy the user had to read, instead I made it more intriguing or “enticing” to pique user interest.
More visually appealing images replaced older ones. This was done to convey a mood that resonates with what the tour would explore. Another way of sparking user interest.
Tour information page - Better copy and more useful information
3
2
1
Names were added as well as a short but interesting description of the tour.
Even though users didn’t say they wanted to know about the tour guide, we thought adding it would convey a feeling of transparency and make the tour a more intimate experience.
An interesting fact was added to capture user interest.
A section with disclaimers was added. Not only was this an implied request by a user but this kind of information is important for establishing user confidence.
4
1
2
3
4
1
Updating our Prototype - Version 2
Based on the feedback we received, here are some of the most important changes we made to our prototype.
Homepage - Less time to understand purpose of organization
2
Mission statement has been reduced to one line and is made more prominent so users can quickly get an idea of what the organization is about
We reduced the length of the mission statement. Now, it takes less time to understand the purpose of the organization while remaining succinct and precise.
1
2
2
Tours page - Better images and shorter but intriguing copy
1
2
1
2
I reduced the amount of copy the user had to read, instead I made it more intriguing or “enticing” to pique user interest.
Used more visually appealing images that resonate with the mood of what the tour would expore.
Tour information page - Better copy and more useful information
1
2
4
3
3
2
1
Names were added as well as a short but interesting description of the tour.
Even though users didn’t say they wanted to know about the tour guide, we thought adding it would convey a feeling of transparency and make the tour a more intimate experience.
An interesting fact was added to capture the user's interest and keep them engaged.
A section with disclaimers was added. Not only was this an implied request by a user but this kind of information is important for establishing user confidence.
4
Visual identity
Mood board and creative direction
While the purpose of our features was to reflect user needs and the user flow, the visual design was not communicating the site’s identity. This subtracted from the user goals. For example, not understanding how users processed the information on the tour description led to a poor design and several user complaints.
Moodboard
I collected images that reflected these themes and reviewed them with my team.
Museums
Old architecture
Visually appealing places in Montreal - cafes, churches etc.
Buttons and design layouts for inspiration
Choosing the color scheme
Since we were redesigning an organization that focused on french heritage I began thinking about the ‘fleur-de-lis’ (‘french lily).
A symbol used on the traditional coat of arms of France from the Middle Ages and even after the Napoleonic era, has historical significance. The flag is blue and the lilies are yellow.
In this painting of Napoleon, arguably the most famous french figure in history, is wearing a navy blue uniform with gold on the lapels and in many instances elsewhere.
In my mind, the consistent use of these colours was associated with french history and heritage.
Brand colour and Accent colour
Hex code: 0C2340
Hex code: FFCB04
Neutral colors
Hex code: F9F9F9
Hex code: F0D283
In certain instances I would use a lighter tint of the gold (accent colour) to add warmth and hierarchy without overwhelming the interface. Paired with a deep navy and soft neutrals, the palette balances bold heritage with clarity and ease of use.
The Typography
I began to think of some adjectives that are associated with the concept ‘French heritage’; but found it too broad. So, I narrowed it down to a related concept, ‘old architecture’. Here is what I came up with.
Elegance
Grandeur
Classic
Captivating
I decided on a font pairing that would reflect these adjectives and showed them to my team.
EB Garamond: Promoting the city’s DNA for over 50 years
Helvetica Neue: Heritage Montreal works to protect and promote the architectural, historical, natural, and cultural heritage of Greater Montreal.
I decided on a font pairing that would reflect these adjectives and showed them to my team.
EB Garamond: Promoting the city’s DNA for over 50 years
Helvetica Neue: Heritage Montreal works to protect and promote the architectural, historical, natural, and cultural heritage of Greater Montreal.
Testing schemes..
Unsure of how the new typography and the colour scheme I chose would look on our redesign, I started to put together some sample screens and visual elements to see which ones looked the best.
Text and Background
I ensured that colours and text I chose were accessible and visually pleasing and in line with the organization's identity.
UPCOMING EVENTS
Immerse yourself in the heart of Montreal.
UPCOMING EVENTS
Immerse yourself in the heart of Montreal.
Cards and other visual elements
The cards and other visual elements conveyed key information. A visual hierarchy that emphasizes this being designed and iterated over.
Old Montreal
Walk through the cobbled streets of from Notre Dame to the old Harbor
22.95 $
Sophie
July 4, 2024
Toronto, ON
Lorem ipsum dolor sit amet consectetur. At pretium urna risus nec nulla penatibus. Nisl fusce est bibendum enim morbi eleifend quis. Nisl fusce est bibendum enim morbi eleifend quis.
Hi-Fidelity Prototype And Conclusion
The High - Fidelity Prototype
With our colour scheme, visual elements in place, and redesigned pages in place, we completed a high fidelity prototype, building on the visual language we had established at the beginning of the protoyping phase.
Here are some important updates we made to our final prototype
Clear and concise communication of important information presented throughout the website
Elevated visual identity that helps the user navigate the website and establish it’s authenticity
Went beyond the user's expectations to enrich the user experience (e.g tour payment confirmation before and after purchase, tour guide information, sold out tour statuses, more engaging copy)
Future Opportunities
While we accomplished so much, here are the useful features that could be added in the future to enhance the user experience.
Become a member
Develop a feature flow enabling people to participate and become a member of the organization. Add relevant content. Also, make it quick and easy.
Personal features
Add account creation where people can see their profile details. download their tickets for their tours, save pages they have visited, share with friends and family.
Interactive map and points
People could get points based on the tours they've visited. Also, they could tell others stuff they found at interesting at a site by pointing out on a map.
People can get points based on the tours they visited. They could tell friends things they found interesting at a site by pointing it out on a map.
My Learnings
I learned that communication is key to overcoming challenges as a team, testing provides valuable insights, and I should be bolder in my design decisions.
Be confident
Trust your decisions, be outspoken, review your work, don't be afraid of making mistakes. This enables myself to be more confident with my insights and designs.
Liase and cooperate
Cooperation, being receptive to critique, and communication were quintessential to overcoming challenging hurdles. This kept the workflow smooth.
Keep testing
Test often and fast. Every iteration brings me closer to a polished product that fulfills user needs because it gives me valuable insights I can add to my next prototype.
I am still learning when to use my accents in French…
The end
I am still learning when to use my accents in French…
The end
Andrew Paul 2025