FlyUX is a project I designed when I was studying at the UX Design Institute. This project gave me the knowledge how UX design works.

The project consisted of 4 different blocks. The first was the research block, the second the analysis block, the third the concept block and the last the design block. From these blocks I learned that UX design must have very solid research to get a really UX design

Scroll down to see my UX design project.
Thank you! :)

Fly
UX

1.

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.

Media

2.

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.

Media

Software used

Extra content

Watch Full usability test
3.

Affinity Diagram

To execute the affinity diagram, I used the Miro app. The first thing to do was to write the mental model, behaviour and pain points the user had during the interview. Then we did two affinity diagram sessions with my college. In the first affinity diagram session we separate everything into main groups and in the second session we separate this group again into small groups. These helps have a better overview of what users like, what they don't like, what they understand or don't understand.

Media

4.

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.

Media

5.

Flow Diagram

I divided the flow into micro tasks that the user must do. Each task has a main colour, title and description. This description shows what the user needs to do to complete this micro task.
These tasks together show the flow the user must follow to complete the booking.
Also, I added a circle where I wrote if the user must tap or type something.
The flow diagram has been productive before sketching the website.

Media

6.

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.

Media

7.

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.

Media

8.

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.

Media

Software used