Tools Used:
Adobe XD
Framer 
Whimsical
Invision
Deliverables and Responsibilities:
Business Goals
Competitor Analysis
User Research
Wireframes 
Prototype
Testing
About
SkyFly have been around for over 10 years and have developed a large and loyal customer base and are looking on expanding over the years to come. The website has remained virtually the same since launch with exceptions to minor changes. They are looking to modernise the website and workflow to appeal to new clients whilst improving the process for existing customers. ​​​​​​​
Understand
Before starting the project, me and the product manager had a meeting to discuss the issues we are currently facing and from that we form a hypothesis on what we think the users are thinking and where we could potentially improve.
Current Flow 
As a company we value luxury and great prices. Our aim is combine both as best possible, and to provide the greatest experience from the moment a user enters our site, to the moment they return from their destination, we are with them the whole way. To understand the user issues we currently face and want to rectify, I went through the process of the '5 Whys'.
5 Whys..?
For the 5 whys we set up a workshop with a few design members and the sales agents who work closely with customers on a daily basis. This was to help understand the issues further and assist in defining the scope. (above is the 5 whys I came up with).
Kick-Off Meeting
During our kickoff meeting (which consisted of me, two people from the marketing team, managing director, two developers and the graphic designer) we discussed the scope of the project, deliverables, timeframe, goals and so on.. This was the time where I asked all the questions I needed answers to at the time, putting our thoughts together and most importantly outline who we want to be moving forward?
Also as a personal preference, I like to write my notes and sketch on paper all of my ideas and those of my team, during the meeting, to help guide the process along. In preparation I also have pre-designed forms which I give to a few of the people present in the meeting. I believe it helps guide your thoughts to what is important and can act as a mental nudge to stay on track as the meetings can get long.
Target customer
As well as improving our current process we want to appeal to a younger demographic and we believe modernising our business will help us to achieve this.
Assumptions and goals
Research
Competitor Analysis
Guerilla Testing
Guerrilla testing is a means I used to gather user feedback by taking the current design into the public domain and asking passersby for 5-10 minutes of their time in exchange for a cup of coffee at our local cafe. Due to its simplicity and low cost it allowed me and my team to gather information and thoughts without a bias, thus further helping us understand the problem at hand. 
“I would rather see what im booking if i'm honest, I don't like giving out my details over the phone, especially if it involves my card and passport details”


“Do you not offer the feature to view the actual tickets online? I can't see what i'm buying”


“I would like to know more about the location I am going to, I feel a lot of companies fail to act on this.”


“It seems outdated and fails to show me ‘trust’. I wouldn't be certain in using this service as I would be unsure of the legitimacy”
User Interviews
A few of the sheets from the preparation and brainstorming for the user interviews to make sure I was asking the correct questions, not having a bias and staying on topic.
Lookback Interviews
I ran 4 online user interviews with a few of our customers, these interviews lasted between 20-35 minutes. I looked at how they used our current website and where they struggled. During the interviews they would speak their thoughts and I would ask them non-leading questions to help drive the interview to where I wanted to find out more information.

All participants had previously agree they were happy to be recorded and had signed a form to prove they were happy to be part of our research. All participants received an amazon voucher.


User/Focus Groups
For the focus groups me and another team member arranged a group video session where we spoke about their experiences and expectations for our product. They had access to our website and we recorded their experience. These meetings lasted just under two hours and we gained valuable information about what our users expect. This fell in line with our hypothesis as all of the users would have preferred to see the tickets rather than the need to have a call to purchase.
Analyse
User Personas
User Journey Map
By thinking through the user and their journey In their pains and frustrations. As a result, by reducing the complexity and improving the UI, I can create features the users need.
Card sorts
This shows just 3 of the 10 user sessions we conducted to help create the IA and further gather knowledge of what users thought when using our site but mainly focusing on the booking process.
Current user flow
Studying how the current flow worked allowed me to discover several ways to approach the challenge and where to start incorporating changes. I first removed the amount of data that needed to be entered per screen to make it less overwhelming. This was done before prototyping to help me understand the user needs completely.
New user flow
I reduced the dependency on the callback feature but left it in for the foreseeable future as some users depend on it. I also reduced the amount of data entry pages and fields that were originally required to make the process user friendly.
New IA
I created the new information architecture to define how the site would be organised in the most logical format. 
I used the card sorting method to help design and evaluate the IA. During the card sorting session, participants organised the predetermined categories into the most logical format and also helped me label these groups.
Design & Sketch
Wireframing
The wireframing process is where I decide the skeletal framework of the website. The purpose is informed by our business objective user research. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.
Wireframes focus on:
Functions available
Priorities of the information and function
Displaying certain kinds of information
Different scenarios on the display
Ticket page wireframes
Blog Wireframes
Testing
A/B Testing
I created a few designs and handed them over to the developers. They then diverted traffic to between the designs to gauge user engagement and conversion rates. The key differences between the designs were:
1. 9 data fields vs 6 data fields
2. Different photography and engaging shots to help promote certain emotions
3. Search results option prior to clicking search
This design we ran for just over 3 weeks but the option where it says "43 matches found" had the lowest performance rating and also caused the site to perform slower, and so this would was not an option I believed would work and thus discontinued.
There was a clear winner between the data fields. After 7 weeks, the option with 6 data fields came out on top comfortably. We then carried on the test to find out how useful an early search results indicator would be and that received mixed reviews as some users found it quite distracting and confusing so for future designs I would avoid this.
Further A/B testing was conducted and small minor tweaks were made based on results. Changing too much too often wouldn't yield accurate or reliable results and a clear margin to judge results is always best.
Final designs
Landing page
Tickets page
Blog
Booking and payment
Improved booking service

You may also like

Back to Top