1. Research
Note Taking
The UX Design Institute provided me with two interviews of which we had to take notes. It is great to know how professionals perform a usability test. These two users had very different backgrounds and knowledge of technology. They both fly regularly and are familiar with flight conditions such as direct flights or connections, prices, fares, etc. What I learned from the interviewer was that we should not stop the user while he or she is speaking or doing something on the website. In those moments when the user did or said something, I got all the information I needed.
Usability Test
For my usability test, I wanted to find out how the person booked a flight , how the user uses and understands the mental model websites. I did the usability test at the beginning of the project because I needed to know exactly what the user says, thinks and knows about booking a flight. Without this knowledge, the UX project will miss the most important part. I chose this user because I thought he might be the perfect candidate because he travels a lot for business and pleasure. I recorded the entire test with the Loom app because it is online and I did not have to install anything else on my computer, but even with online software I conducted the interview face to face. I started the session talking about myself and the websites we are going to test and why I want to test them. Afterwards I asked him questions about his background and how he books a flight, how he communicates with other people when they need to book a flight together, etc. These questions were very important to know how he navigated. After all these questions we moved on to the website tests. On each page I asked him to do a certain task and verbalize everything he thinks. All the insights I have gained have been analysed and compared with my other notes from the previous interview.
2. Analysis
affinity diagram
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Customer Journey Map
For the customer journey map I used the software UXPressia. This software helps me to focus totally in doing my job and not think about design. I divide the customer journey map in pages and every page has the tasks that the user should do to book a flight. The customer journey is the mirror image of the affinity diagram. It has the behaviour, pain point and mental model of each process step. And it has the user goals and the experience that the user is experiencing.
3. Concept
Flow Diagram
The UX Design Institute provided me with two interviews of which we had to take notes. It is great to know how professionals perform a usability test. These two users had very different backgrounds and knowledge of technology. They both fly regularly and are familiar with flight conditions such as direct flights or connections, prices, fares, etc. What I learned from the interviewer was that we should not stop the user while he or she is speaking or doing something on the website. In those moments when the user did or said something, I got all the information I needed.
Wireframes
The wireframing or interaction design is the result of the flow diagram. Through wireframing, I started to design how the website should work, how the user should go from page to page and do the micro-tasks to finally book a flight. These wireframes were done quickly and gave me the right perspective before I used the computer to design the website.
4. Design
Prototype
For the high-fidelity prototype I used Adobe XD. This software is easy to use, if you used it before Adobe Illustrator, for example. With Adobe XD, I could transfer my wireframes in digital format and perform all interactions. These interactions are not perfect, but they can give developers a first understanding of what the site should look like. Wireframing was great to understand how the site should work, but the prototype gave the site life. Users can test it.
Annotated Wireframes
This task was the last step before it was sent to the other departments, and each screen must have all the details. I used the prototype screens and the interactions to write next to them what to do when the user taps on them. I have added all the information next to the screen of the website. This information is divided into colors and numbers.
