TravelHG
Project Brief
This final coursework was for my graduate class. This coursework captured an information-rich topic, which was to design a website based on information architecture (IA) requirements. Travel was the topic I selected for this coursework. In particular, I focused on hidden gems in London.
Solution
The solution for this assignment was to create annotated wireframes of an information-rich website. The solution created was four different pages, which focused on travel and hidden gems in London.
Details
Role: UX Designer & UX Researcher
Type of Project: Final Coursework (MSc Final Coursework)
Course: Information Architecture (IA)
Length: 3 Months
Objectives
-
Design the IA travel website
-
Create a site map
-
Conduct a tree test to help with the site map navigation
-
Design wireframes
-
Interview two travel experts
-
Create an annotated domain model
-
Evaluate my design from an IA perspective
-
Recruit potential users to test the wireframes
Pain Points
Travellers that want to have more of a cultural type of experience are not finding that many options when going to common travel websites. Most travel websites feature the touristy kind of attractions.
Design Process
-
User Research
-
Design IA
-
Evaluating IA
User Research
I interviewed two travel experts. These two experts have been to over 20 countries and counting. The interview was around how they searched for things to do in the country that they selected. Also, how they decide on selecting that specific country and what they wish websites or whatever they use were lacking. Both mentioned how they valued local types of activities, and not so much of the touristy type of activities when it comes to certain countries. Both travel experts also filled out a qualitative survey about their general travel experiences. After I interviewed two travel experts, I then began sketching out the domain models.
Sketches
The sketches were created to figure out what the domain model would look like. There was an attempt to use a quad structure. There was also attempts to try out a trio diagram. The majority of the labels became from the two interviews. The next steps were to break down the labels into groups. I also followed up with the two travel experts after creating entities, and asking a few more follow-up questions.
Figuring out the relationships between the different entities and main themes.
Domain model sketch
Testing the main trio structure.
Figuring out the relationships between the different entities and main themes.
Examples of Domain Models
Design IA
During this process, I decided that a tree test would be more ideal for this situation because I wanted to test and refine my site map depending on how participants navigated through the proposed website.
I found a few participants, who did the tree test. Through the tree test, I found that there were a few participants, who placed certain names in a different section. Also, not all paths were successful when participants had to think about which title would have a certain type of information. Therefore, the “Attractions” parent page was added in the final version of the site map. So, that the other titles would be considered child pages.
After the tree test, I decided to sign up for the optional IA feedback showcase. So, I would be able to get additional feedback because I did not have any wireframes prepared for the showcase because I was still deciding on where different elements fit in my rough designs. Below, are the rough drafts I had submitted for the optional IA showcase. I only had my domain model and my site map. My professor and someone in the IA space gave me feedback on my designs.
IA showcase domain model
Site map for IA showcase
IA showcase domain model
IA Showcase Rough Designs
Feedback
Below, is some of the feedback I received from my two rough designs for the optional showcase.
Domain Model
-
Split up the cafe, restaurant, bar...
-
Have more types of examples
-
Break down attractions and hidden gems
-
Find other attributes that can be broken down into entities
-
Change "Types of Impression"
Site Map
-
Filter does not have to be right in the beginning
-
Location can be split into different neighborhoods
-
Can have different faceted navigation for different things
Domain Model
After the feedback session, I did change most things to improve the domain model. For example, I added more examples from the interviews and changed certain names. I also deconstructed and added new attributes.
Trio Domain Model
Site Map
The screenshot below shows the newest site map. The new site map was based on the feedback that I had received, and reviewing over the path that participants took for the tree test.
TravelHG Site Map
Journey Map
Traveller Journey Map
Evaluating IA
Then, I evaluated the four annotated wireframes from an IA perspective with three potential users. The three participants that I found all enjoyed travelling. I had asked the three participants to complete four tasks. For example, one task was for participants to bookmark hidden gems. Then, another task, was for participants to view the hidden gems saved bookmarks on the site.
After the evaluation, I made changes to certain wireframes. For example, I added a member section, and I added a cart as well. I added a cart because a few participants wanted to buy tickets or a package to see certain events in London, but during that time there was no cart.
Annotated Wireframes
The four images in the gallery showcase the four different wireframes and annotations for each.These were the final versions because the goal was just to make it static.
Wireframe #1 - Hidden Gems
Wireframe #2- Maps & Guides
Wireframe #4 - Dulwich Picture Gallery
Wireframe #1 - Hidden Gems
TravelHG's Annotated Wireframes
Lessons Learned
I would have wireframed the whole page out. All four of my wireframes show that a user will have to scroll down to see the rest. I was missing a footer in all four of my wireframes since I left out the initially designed footer due to scale.
