My College Journey

The Decision

After a number of years working in the area of Software Delivery as a QA, I felt I needed a new challenge and I decided to move into the area of UX design. I enrolled with the UX Design Institute here in Dublin and completed various projects such as:

  • Competitive benchmarking
  • Surveys
  • Note taking
  • Affinity Diagrams
  • Customer Journey Maps
  • User Flows
  • Usability Testing
  • Sketching
  • Prototyping
  • Wireframes

I have been extremely fortunate to have worked for some very forward thinking companies in the past such as Paddy Power, AIB and Verizon and to have had the opportunity to work closely with some extremely talented BA's, Developers and UX people from many different cultures and backgrounds.

When I started out as a QA there was no such profession as UX but once I came across this approach I was hooked and could not believe that companies would NOT adopt this discipline as part of their strategy for quality software delivery.

The Project

The project I was undertaking was to design a new Flight Booking site. I would approach this task in 3 ways.

Firstly I would conduct my research. Secondly I would carry out my analysis based on the information I had gleaned from my research.

And then finally I would would design the site with prototypes and wireframes to be able to communicate my ideas to both stakeholders and Developers.

Competitive Benchmarking

With my background as a QA, I found this exercise to be particularly interesting as I have always relished the task of digging into applications and sites looking at ways to break them or at the very least identify problems with them.

I chose the following four sites to conduct my research against and to determine what worked well, what could be improved and what should be dropped or changed altogether.

  • Aer Lingus - because being Irish, it is an airline & site I am very familiar with and have used many times.
  • KLM - One of the most well known and successful airline brands in the world with global recognition, I wanted to see if the experience of booking matched their reputation.
  • Thai Airways - It is a completely different culture so I was curious how designers would approach it compared to European designers. I was working on the basis that the experience would have been designed by a company from that part of the world.
  • The Shelbourne Hotel - Dublin's premier hotel experience required booking dates, room types, entering customer and payment details - so, broadly similar but different enough that it may provide me with some different ideas. However the reality was very surprising as you will see if you read my research below.

View my research and conclusions by examining my Competitive Benchmarking document here

Surveys

The next project I had to tackle was to create and distribute a small survey concerning the online flight booking process and how people used and felt about the choices available to them.

  • I used Survey Monkey as I was familiar with this tool. I was instructed to keep the questions to a minimum as people only have a limited attention span when it comes to filling out surveys.
  • Bearing the above in mind I limited the questions to the 6 most relevant ones I could think of which would provide the most value to me from a research point of view.
  • I sent it out to 20+ people not expecting everyone to respond however I was delighted to get 18 responses back
  • All of the answers were noted down and would be used when creating an affinity diagram later in the UX process

Note Taking

Two volunteers agreed to be recorded using 2 different sites (Aer Lingus & Euro Wings) and I was asked to view the recordings sometime later and engage in a note taking exercise to identify issues of interest and importance which came up during the session.

I found this exercise to be very interesting as it was an opportunity to see real people using real products and therefore see real experiences and emotions, both good & bad. It was also an opportunity to observe how these sessions should be conducted without overly influencing the behaviour of the participants.

  • Both users had booked flights online before
  • Negative comments or dislikes were marked in red text
  • Positive comments were marked in green text
  • Users were left to figure the process out for themselves
  • They were asked to verbalize their feelings throughout
  • The notes taken here would go forward to help build the Affinity diagram

You can see my full Note taking document here.

Usability Testing

Due to Covid restrictions it was not possible to conduct face to face usability testing. So I contacted a few people to see if -

  • They had an hour to spare in their busy days
  • They were prepared to allow me to conduct a usability test session with them
  • They were prepared to allow me to record the session

To my delight a number of people agreed to participate, so I arranged dates and times. I was surprised at how nervous I was when getting into these sessions despite knowing these people for years (and being married to one of them). But this was a valuable lesson and reinforced what we had been told in college about the more you do this exercise the better you will get at it.

  • I used Zoom to conduct the session as this was what the volunteers were familiar with and screen sharing was very straightforward.
  • Users were happy to allow me to record the session when I explained that this would not be made public.
  • The volunteers were people from the general public who had used online flight booking sites and apps in the past.
  • The session lasted approximately 40 minutes.
  • I used the recordings to identify areas of interest both positive and negative which I noted to be used in compiling the next step of the UX process - The Affinity diagram.

So far...so good...

Upon completion of this project we had to submit this and the previous projects for assessment. I was delighted to receive an evaluation of 100% along with some very positive comments:

"Hi Mark,

Well done with the first few projects.

Your note taking project is brilliant! Really easy to read and follow, if this were in a team setting, it would really benefit those who didn't partake in the research. Colour coding your points was a good shout too as this makes it really easy to differentiate and quickly find the info you're looking for.

Really good usability test, your moderating skills are very good. You prompt at the right times, you allow the user to speak without cutting over and you're not afraid of those short pauses which is important as this helps the user to think. Well done.

You're off to a great start Mark, see your grade for the research block attached."

Affinity Diagram

As this was by far the largest project to date and also completely new to me, I felt that it would be beneficial to work on this as you would in a real world team setting. To that end I put the call out on the college Slack channel to seek out like minded individuals to collaborate with.

I was very fortunate to end up working with 2 very diligent and smart people - Alexis who is based in Rotterdam and Vaishali who is based in London.

Once we got over the initial awkwardness of working with complete strangers we found that we gelled very well together and our brainstorming sessions produced some excellent ideas as well as some amazing recipes.

We chose Miro as the tool to work with for this as the free version allowed us to collaborate simultaneously.

We conducted regular Zoom meetings to refine the board and I documented the entire process in Google Docs to show our thinking and the reasons behind our decisions as it has been drummed into us:

"UX is a process & if you are not following the process you are not doing UX".

We agreed on overall group headings and moved our individual tickets into them and we came up with a way of handling duplicates

By the time we had agreed that the project was complete we all agreed that there was no way we could have produced a body of work with that amount of thought and detail had we chosen to work on it alone.

You can see our entire process as well as our completed Affinity Diagram here.

Customer Journey Map

Following on from my Affinity diagram I created a Customer Journey Map to illustrate the steps customers go through when engaging with the online flight booking process..

This type of project was new to me and to be honest I felt kind of stumped and unsure how and where to begin. So I reached out to Alexis who I had collaborated with on the Affinity diagram and we had a couple of brainstorming sessions via zoom.

These conversations really helped me to zero in on what and where to begin and helped focus my mind to work on this task.

Again this was a completely new tool I used as I wanted to gain exposure to as many different tools as when you look at potential job advertisements, you can see that many different companies use many different tools.

  • I used UXpressia.com to create the diagram.
  • I broke it down along the lines of the Affinity diagram but in a "read at a glance" format
  • Columns were titled as per journey through the process
  • Rows were titled along the lines of Users goals and experiences.

Userflow Diagram

Although this User flow diagram is the "happy path", I gained some great insights and experiences into how to create more complex ones for the future.

I googled User flow diagrams and looked at how people had approached this exercise. I am well aware that these diagrams can get extremely complicated and large as there are multiple paths people could take in as complicated a process as booking a flight.

However I feel confident that as someone who has worked in the Software Delivery industry for quite a number of years, that this is something I would be both confident and happy to engage in.

  • I used Miro again here to as I had access to my post its from the Affinity diagram.
  • I colour coordinated each section to make it easy to follow
  • I colour coordinated connecting lines
  • I added some divergent paths showing how the flow would move there and then back into the main flow
  • I took some Post Its from my Affinity diagram and added them to reinforce certain points.

You can view a higher resolution version of the User Flow Diagram here.

Sketches

One thing I have never been good at is drawing, sketching or art in general and I am always in awe of those with a talent for any of these disciplines.

This project involved sketching the various screens based on my User Flow diagram and how each screen state differed according to how the user interacted with it. Click on the image opposite to see all my sketches.

I chose to bring some of my Primary school collage experience into play here. By having different data entry options available to me to so that instead of doing one sketch with no passenger details and then another sketch with passenger 1 details and another sketch with passenger 1 & 2's details and so on. I did one sketch and could then add cut outs with all the different passenger details in to the original sketch and photograph each step.

And most importantly working with others is a great way to learn, and in UX as in all walks of life there is always something new to learn. No one knows it all. This saved a lot of time especially when you consider how much time would be saved by not having to sketch the Seating map for the seat selection screen, 6 times.

A good news day...

Received my assessment results for my projects on User Flow diagram and sketching this morning. So as well as receiving a score of 100%, I also received the following very positive feedback.

"Hey Mark,

Really detailed flow, really comprehensive detail for this use case. You've definitely grasped well what's involved in a flow diagram. I think this level of consideration has really helped develop your screens.

Really good work. Brilliant interaction design! Huge amount of detail and you can really see the thinking behind your decisions. Very well done. Everything is really starting to come together. Nice one Mark!

See your grades attached and enjoy your weekend. "

Interactive Prototyping

I have to say I really enjoyed this project. Maybe it was because I was starting to see my ideas and design come to life in an interactive way.I really saw the benefits in sketching beforehand as I referred to my sketches a lot during the process. I found that I tweaked the prototype screens a bit as I got further and further into it.

I used Figma for this project for a number of reasons. I had had a look and a play around with Sketch, Adobe XD and Axure to familiarise myself with those tools, but as they had only 30 day trial periods, I was worried that if I did not finish the project within the 30 days I would lose all my work and have to start all over again. I also felt that there would be more benefit in getting to know one tool very well rather than a number of tools only a little bit.

I am now very curious to see how prototyping is approached in a real work environment as I ended up with 100's of layers spread across 57 screens and what looks like an unravelled ball of wool when you view how the screens link to one another in the Prototyping view in the Figma UI.

One of the big lessons I learnt here was to try and resist making minor changes to screens after you have completed your prototyping because if you have not created components this can be very time consuming to go back and make the alteration to lots and lots of screens.

My Interactive Medium fidelity prototype can be seen here

Final Project - Wireframes

This was another project I enjoyed very much. As a QA it would have been very beneficial to be involved at this stage of the software delivery process for a few companies I worked for in the past. Detailed explanations of the why's, what's and how's for the various screens, during the user flow through the application, can cut down on the number of issues encountered by QA's when testing an application, thereby saving time and getting the product to market on or even ahead of time.

For this project I identified a number of the screens I had designed during my prototyping project and I then duplicated them.

Rather than try to fit all explanations for all areas on a particular screen, I tried to not clutter my screens and where I felt there would be too many "post-its" I spread them over 2 or more screens.

I also included some of my reasoning as to why I expected something to function or behave in a certain manner or why I had put it there in the first place.

For a more detailed look at my wireframes, click here

Final Project Assessment

So after 5 months of intensive study and work I achieved my target of completing my studies ahead of target. My final projects were submitted ahead of time and achieved the maximum marks of 100%.

This together with some great feedback means that I am now ready to head into the exam.

Hi Mark,

Well done on completing all the project work.

The prototype contains enough detail and interactivity to test the high level flow, the screen layouts and basic interactions. Nice work.

Nice wireframes, lots of detail here! Good clear instruction which is the most important thing here and this document contains all the info a developer would need, well done.

WOO HOO ...

I received an email this morning informing me that I had passed my exams and this taken with the the results from my Project work meant that I was officially qualified as a UX Designer.

Now comes the tricky part.....getting a job

And so one journey ends and another begins

And then I got a request to Volunteer to work with a startup called Revolverlife.