ON-Hotels Website
During the Pandemic, health officials recommended that travel stay as local as possible. Local travelers wanted to find hotels within Ontario only and support local businesses. Most users admitted to keeping multiple tabs or resources open at once to find promising hotels.
4 months-2022
Workflow
High Fidelity Prototype
Annotated wireframes
​
​
Project Cause
Roles & Team
​
​
(Team of 2)
My role was UX Designer, Researcher, and UI Designer.
I worked with another student who conducted separate user interviews. Together we conjoined our findings to create an affinity diagram.
​
Timeframe & Deliverables
​
​
Methods used
​
​
User Journey Mapping
Competition product testing
Affinity Diagram
Wireframing
User Testing
​
​
Research​
​
For the first research phase of the project, I conducted a competitive benchmark, 2 remote competition testing sessions, and online user surveys. I screened users based on whether they had experience using a computer, previous booking experience, and reliable internet connection. This helped me to understand users and their habits further. For competitive testing I had users try "TheJuneMotel.com" and "ChoiceHotels.com" which both provide stays within Ontario. For my benchmark analysis, I chose some Ontario hotel websites to learn more about conventions and repeated features.
​
From competition site testing I was able to learn that:
-Users get distracted when shown a pop-up or Modals, slowing their process (used in the June Motels tests)
-Users depend on a phone number to contact during and after their booking (demonstrated in both tests)
-Users look for distinct room differences from images (shown in both tests)
-Users don't want to work in two tabs at once (shown in the June Motels tests)
​
Analysis
​
During the analysis phase of the project, I was able to collaborate with a colleague to come up with an affinity diagram. We started by combining both of our findings and ended up with grouped insights based on user habits and stages. The images below show the rough layout of the diagrams, the button below allows for a clearer look.
This next diagram shows the customer journey map that I came up with to fully understand user goals and experience before diving into the design. My goal was to make the lowest mood point, the hotel options page, easy to use in the new product. During user testing, people were turned off if their results didn't match their search or if they couldn't see any promising previews at the top of the page. The room options page was also a concern because this was where test subjects most often backtracked when they couldn't find something they liked.
Personas weren't done for this project because I already had a great understanding of user behaviors and tendencies. When presenting to stakeholders or a client, I would definitely make sure to draw up some personas to bring this story to life.
Design
​
The following slides are sketches and a workflow of the initial design. This was all based on the research and analysis done beforehand. I also interpreted conventions from other websites that use similar features, maps, and tools.
​
Testing
​
During the testing phase, I was able to interview 3 participants who had a history of using travel and hotel booking websites. I wanted to see what their reaction would be to ON-Hotels and if there was anything I could further learn before designing a higher fidelity prototype. The following document lists the rough notes I gathered from the one-on-one interview and testing sessions.
​
Prototype
​
The Last Phase of the project was to make the best fidelity prototype of the website to present to developers and/or stakeholders. I incorporated feedback from users in this version and drew inspiration from their feedback on other hotel booking websites. Other websites included Booking.com, Trivago, Hotels.com, and Fairmont.com. Along with this final prototype, below is a PDF containing more precise screens and annotations for handoff.
​
Review
End-Result
Being my most recent work, I was really proud to see how the Uro-Journal website came together. I was happy with the amount of research I did for the project and it really translated into why I played out the UI as I did. I noticed such a difference when receiving raw qualitative data and found it so much more useful.
Challenges
I found that collecting users to test was really challenging. It made sense to screen users based on their experience beforehand, but this meant a lot more of a search to find subjects. In the end, I only found a couple of users total to test, but they were different for both testing phases which avoided bias. Looking forward to new projects, I'd love to learn new ways to collect research participants and keep improving my research skills.
What I learned
One thing I would go back and do is create an affinity diagram of the second testing data collected. This would help understand further issues and would help smoothen the user flow. I enjoyed working with Adobe XD again, I was able to learn new tricks and plugins when making the final prototype.