UX/UI,The good experience of flying

I love traveling so I am always looking for the best deals. Usually the app I use is “skyscanner” but sometimes the deals are not as cheap as I wish, that’s why I am always on the hunt of new flight websites. Sometimes I have that very unique feeling that travelers have. the one that makes you run to the first device you find to check some flights with hope and expectation. You look for weekend flights or crazy vacations .It doesn’t matter. what it matters is that the idea of this makes you happy.

That’s how one day reading a travelling blog I found Wow air. It was very recommendable and there was only good words for it so I decided to give it a try. I download it on my phone and my first impression was good. the homepage is clear so I thought I had finally found a good App. Unfortunately when I tried to check the flight prices everything went down.

I couldn’t find the flights or offers as quick as I would if I used some other app and this discouraged me,still,I continued  the booking process but everything was quite confusing so eventually I gave up. I believe half of the people who use this app are just checking the flight prices without really planning to buy them just yet. It’s just a first contact with the idea that might success eventually if you find an offer that you can’t resist. But at first you just wanna know how much and when.

That’s why I believe that the most important features on the page should be those ones: how much and when.

THE COMPETITORS

First of all I took a look to some of my competitors to see what kind of lay outs the have, what icons they use and what´s the general feeling of their Apps

Skyscanner

Their design is the more minimalistic of all, using icons instead of words for search and to choose the number of people.This still works because this icons are very well known so there is no confusion (here we see a good example of signifiers!).The travel class is a dropdown menu which saves space on the page.The option for one way or round trip is situated at the top with a tab style.It also places the origin and the destination one on top of each other accompanied by the flight icons.This makes it easy for the user to know what the space is for with only one glance.

CheapFlights

This app places the origin and destination one besides each other followed by a two buttons for the round trip or one way features. There is no confusion on the functionality.

Something I notice is that the app sends a few notifications every day.This could be useful for some users but it could also backfire and make the user uninstall the app.

Kayak

Kayak´s from page is also very minimalistic. They use lines instead of boxes for all the input fields. Even though it works I personally don’t find it as clear as other designs since I believe it’s important to understand the page with one glance and this doesn’t happen so quickly here.

Fly Delta

This app offers two options that aren’t that common. First of all it allows you to choose a multicity trip. Even Though is not an essential feature some users will find it useful and will choose this App only because of it.

The other feature that I also didn’t see very often is the option of showing the price in money or miles. Business travelers will find this feature really useful.

As for the rest it shows the passengers as a drop down menu and the search button is big and has a different color, which is consistent with the other fight apps that I’ve been looking at.

Flights

This app focus its attention in the origin and destination, placing them at the top of the screen, while the number of passengers and the travel class is placed at the bottom.The number of passengers is represented only by an icon. This app also places the options of single way, round trip and multycity as a tab on the top. It also uses the plane icons for the arrival and destination section.

MY CONCLUSIONS

It seems that using certain icons to represent some of the features works well and doesn’t cause any problems due to the general knowledge of them at this point. This is why I think the new Wow air app should also use icons for the number of passenger as well as accompany the arrival and destination areas with the plane symbol.

I also believe that this two sections should be the center of attention.  In the current App there is not enough space designated for it and this causes that you can’t read the full name of the cities. It only shows the short name of the airport and the beginning of the full name. I think this isn’t clear enough so I would like to place this two sections one on top of the other, taking the full width of the page.

Another thing that I’ve notice my competitors do very often is display the travel class (economy, business or first class) as a drop down menu. I believe this would be a good option for wow air as well. the majority of the flights booked will be economy class so it will be shown by default and if the users prefer another option they will be able to chose it easily( this is only based on my assumptions, for more accurate information we would need information from wow air )

I also think you should be able to read everything clearly and this is why the input fields should have a white background and black text. I will keep the brand colors, purple(#90387b) and yellow(#ffed00) everywhere else except here.

THE USERS

To understand the needs of our users I’ve created three personas that represents them. each of them has a specific needs and the Wow air app should be able to satisfy them all.

This slideshow requires JavaScript.

THE NEW DESIGN

I decided to give more space to the origin and destination since it is the first thing the users want. I also decided to add the icons to make it more visual.

To choose the destination I’ve decided to use a drop down menu and to give the option to write the name of the place as well as choosing it scrolling through the list. I also decided to place the current location on the top. On the destination drop down menu the last search will be placed at the top of the list.

The screen to see the calendar has now a white background color which allows you to see the numbers clearly. “Depart” is marked in yellow so the user knows exactly where he/she is.

I decided to show the flights in a different way as well, with a little space between them and keeping the price always at the to throughout the whole process, so the users always know how much they will have to pay.

I also decided to change a bit the look of the passenger details, showing the price and the origin and destination at the top (as I said, this will be here throughout the whole process) I will also keep this lay out for all the other screens in which the user has to introduce some details to make it consistent.

The plane icons are from https://www.iconfinder.com

The round trip icon is from :http://www.flaticon.com/

THE USER TEST

To see if my design was good I conducted a user test and  I recorded the test using the google chrome tool “Screencastify”.I asked some introductory questions as well as closing up questions.

Introductory questions

• Age range
• Gender
• Do you currently use a flight company webpage or app?
• Why did you choose them?

Closing up questions

• Is there something that you found confusing or that didn’t make sense to you?
• How easy was the booking process?
• Is there something else you would like to suggest?

This is the task the user was asked to do:

“Book a flight from Dublin to Milan from the 7th to the 11th of february. Choose the cheapest option and take sits 6A and 10F.”

You can see the Marvel App prototype here

As a result of the test I concluded that the new prototype for the Wow air app is good and clear for the users. I will change the screen “Additional services” make the options look like a button, since it seems that it isn’t clear enough.
This is the screen Ive changed after conducting the user test:

Understanding Signifiers and affordances

Today I want to talk about affordances and signifiers and I believe the best way to understand something is with a good example.

AFFORDANCES

Imagine you have a screwdriver. Originally it is used for tightening and loosening up screws but that isn’t the only thing you can use it for. If you use your imagination you can discover lots of new uses for it.You can use it to open a jar or to reach something that is too high.

You can see other interesting screwdriver uses here :

(yes there is a page for that!)

 

So an affordance is a possibility. Is the relation between an object and its possible actions through an agent

SIGNIFIERS

Suppose you are rushing to catch a train. You know the train was scheduled to depart soon. You run across the city, run up the stairs in the train station and rush on to the platform. There is no train: did you miss it, or perhaps has it simply not arrived yet? How can you tell? The state of the platform serves as an signifier. People milling about the platform? The train has not arrived. An empty platform: oops, you missed it. This is an example of an incidental, accidental signifier. It isn’t completely reliable, working better in small towns with only occasional trains than in crowded cities where many trains use the same platforms, but that is the nature of signifiers: often useful, but of mixed reliability.

A signifier is a sign. Some sort of indicator in the physical or social world that can be meaningfully interpreted.
Think about your shower handle.The affordance is clear, you turn it and something happens (water comes out) but how do you know when the water is warm or cold? there is a signifier, a little mark that is red or blue. this little marks are the signifiers. They help you understand how the shower works.

 

Tower Records

A year ago my sister bought a “Scorpions” vinyl.  It was her favourite group and she was very happy. There was only one problem; she didn’t have a vinyl player, so of course it looked great in her room but it was only decoration.  This was a bit sad so my parents and I got her a vinyl player for Christmas. She was the happiest person in the world again. A few months later I asked her if she was enjoying the present and she said Yes, but I´m getting a bit tired of the Scorpions vinyl. After all this time she still only had that one vinyl. So of course I thought that was really sad and I decided to get her some more for Christmas. Over the next months I went in every vinyl shop I saw and try to get the best deals. I also checked online and found a few more shops.

That’s why I was so surprise when Mary, our Design teacher, asked us to go to Tower Records to do some questionnaires.

How didn’t I know this shop before? It is certainly a good shop. The variety of  the product is impressive and the way the shop is design, with little rooms and different spaces, makes your visit a good experience.

We arrived at the shop around 6pm for our surveys. This shop is located just behind Trinity College so we assume that lots of their customers during the day are students. At 6pm though, the custumers were between 45 and 60 years old so our answers are mostly for this range of ages.

To the question “where do you buy records online?” the people who did buy online answered “Amazon”

We also asked the customers if they knew about the shop´s page and the general answer was ”no”. So this brings us the question : Would they use the shop´s page if they knew about it? Or would this page be their first option over Amazon (since they already know the physical shop and that makes them feel secure) if they knew about it?

THE PROBLEM

One of the biggest problems on the website was the lack of information.  It made it almost impossible to buy the products since the images and descriptions where missing. This makes the page unreliable and the user doesn’t feel secure using it. It also gives a bad image to the company.

The way the information is displayed is also an issue because it isn’t clear. The user will give up before investing time and effort trying to figure it out.

We Brainstorm what issues needed to be fixed:

After a brainstorm we decided to divide the problems in four categories: General problems (the ones affecting the majority of the page)Layout problems, product related problems and features that we consider are missing.

 

The following images show some of the issues on the page:

 

 

The first step to solve all this problems is to ask ourselves who are our users. What are they feelings and worries? What drives them?

For this we created 3 personas taking into account what we learn by doing the surveys plus the information we have about the shop (location, products they sell, opening hours, etc.) and our own assumptions.

This slideshow requires JavaScript.

After understanding what kind of users do we have and being aware who will be our target audience we can state the problem:

“The Tower Records webpage was designed to sell products online and promote the shop. We have observed that the product isn’t meeting the goals since the webpage doesn’t have enough traffic. This is causing low revenue from the online sales and the lost of costumers by other shops .We will make the web page more appealing to the user as well as user friendly . Success will be based on the website traffic and feedback”

 

THE SOLUTION

We came up with ideas that would help promote the page and the shop. we organised them depending on the risk they present and on how innovative they were:

From all this ideas we decided to prioritise the following:

Workshops: even though it is a big risk we believe that introducing them we will attract a new kind of costumer, one that likes crafts.This way we will diversify our users. The page will not only be used by music lovers but also by artist, and people who are looking for something new to do.And who doesn’t like a new vinyl bowl?

Live podcast: This is something none of our competitors have and we believe that it could attract new customers for both the page and the physical shop. Being a live event people that like music might visit the shop for the first time. In the other hand, an user that is looking for new music podcast could find our through a google search or some other channel and decide to visit the shop or buy something online.

Contests: we also decided to create contest so the users get involved. This could be a music posters contest or music contests among others. This will diversify the users of the page.

Concerts: Organizing live concerts or “the battle of the bands” will attract new customers in a fun way.

 

THE FINAL WIREFRAME

We sketched individually and then we shared our ideas with the group. We choose the features that we thought were more adequate for the page.

 

It will be a scroll down page. The first screen will have the logo in the center and a quick podcast player just under it. Up and down there will be 6 links that are the most important features of the page.The user can either click on this links or scroll down to find the sections they are looking for.