Hotel Booking Website
Research: Note-taking
For this initial project, we were given access to two usability test recordings that featured two seperate users flowing through two different hotel booking websites. This was a great opportunity to brush up on my note-taking skills from a UX Design perspective.
Research: Usability Test
The next step in my research journey involved conducting my own usability test. I was surprised to find I really enjoyed conducting the test and look forward to the opportunity to conduct more in the future!
Analysis: Affinity Diagram
After taking notes on my own usability test, I had enough data to move onto the analysis stage of the UX Design process. The first analysis technique that I put into practice was an affinity diagram. This involved breaking down my notes from the three usability tests into easy to digest post-it-notes, which was achieved with the help of a friend (thank you!)
Once we were satisfied with our hoard of post-its, we stuck them to the wall before organising them into suitable groups. Finally, we gave these groups a name, and the affinity diagram below was born!
Analysis: Customer Journey Map
With my affinity diagram complete, it was time to delve one level deeper into the world of analysis. The next project involved taking the groups formed in the affinity diagram and translating them into a customer journey map. This was a great way to visualise the emotions of the user throughout their journey, highlighting key pain points and areas to bear in mind when entering the design stage of the process.
Design: Flow Diagram
With a clear idea of the goals and behaviours of our users, it was time to move on to the design stage of the UX Design process. The first project in this phase involved defining the top level user flow through our hotel booking website. This involves the screens and their various states from the homepage to the payment screen.
Design: Interaction Design
Once the top level user flow was mapped out, I was able to sketch some low-fidelity screens of how I envisioned my hotel booking website would look. These screens followed the same top level user flow from the homepage to the payment screen.
Prototype: Prototype (Medium-fidelity)
The next step involved taking my low-fidelity sketches and transforming them into a medium-fidelity prototype. I chose to use Figma for this project and had a lot of fun learning the basics!
Prototype: Annotations
The final project of my diploma involved bridging the gap between the prototyping and building of my hotel booking website. Annotations have been added to each screen of the medium-fidelity prototype to act as a guide to any potential programmer who could work on the next stage of this project.