Client
- UX Design Institute
Type
- UX/UI & Web Design
My role in the project
- UX/UI Design
- Research & Define
- Graphic Design
- Web Design
What was it:
This was a showcase project for the UX Design course. It was made to present my ability to go through the whole UX process & ability to provide a data-driven, meaningful & fully working prototype of a made-up airline called the FlyUX.
Who was it for:
UX Design Institute
My role in the project
- UX/UI Design
- Research & Define
- Brand Essence Design
- Graphic Design
- Social Media Consultant
- SEO Consultant
From beginning to end, I was responsible for the whole UX design process from the research stage & defining what the product should be all the way to the design, prototype & validation stage.
Competition Benchmarking
As with all my projects, I started with the research stage. Namely, with competition benchmarking. I checked relevant airline websites & flight aggregator websites like Skyscanner, SAS Airlines, Booking.com, among many others, to find out what works best. What are common designs, solutions & features? By comparing them to each other, I analysed what should be included in my project, how to best approach it, & what to avoid.
Usability Test
The second step in the research stage was User Testing. I did it with a small group of people, one at a time, and I created tasks for them to perform (Usability Test document). When we met online, I first asked them a few basic questions that would help me determine how often they are flying, whether they prefer using a desktop or mobile phone, how they usually book flights & what are their struggles while doing it. After the first set of questions, I asked them to carry out prepared tasks & observed them doing it, sometimes asking questions but never trying to direct them in any way. After that stage, I gathered another set of findings that would help me in defining my project.
Card sorting
The last step in this stage was gathering all relevant research & trying to make sense of it. This is where card sorting is very helpful. I wrote all research findings on post notes & tried to group them based on relevant subjects like pain points, things to avoid, preferences, features, and many more. At this stage, this is still a lot of information & I’m trying to sort it out to have it ready for the defined stage.
Affinity Diagrams
The first step in the defining stage for me is to create Affinity Diagrams. This helps me to sort all my research findings & ideas into logical groups, just like card sorting but with more structure & thought behind it. Affinity diagrams are the best way to organise qualitative data & observations.
Customer Journey
When all data is collected & sorted, it is time to create a customer journey. With all research in mind, I went through each step that the user has to go through when booking a flight. Within each step, I marked how the user feels about it, what opportunities or risks arise, and what they like & what frustrates them. I did that exercise on paper for all users taking part in the research stage. After gathering all user journeys, I created one that reflects all information.
Flow Diagram
After creating the Customer Journey, the next step was to create a User Flow Diagram to visualise & map each action taken by a user from the entry point right through to the final interaction. This was the first step in the Design stage that helped me work out the logical path a user should take when interacting with the website.
Sitemap, Features, Pages
All previous steps were performed to aid me in creating a complete set of features, web elements, modules, CTA’s, interactions, goals, along with a sitemap of the website & separate pages. Based on that document, I created wireframes (low fidelity prototype).
Wireframes, Mockups, Prototypes
With all my research done, features & other elements defined & written in the document, it was time for the first wireframes. I always like to start with pen & paper & this time was no different. This step is truly refreshing & creative after going through previous ones, which can be sometimes overwhelming. Working on wireframes & drawing separate pages, behaviours & interactions, I can already see the project coming together.
After wireframes, I created High Fidelity Mockups, with colours, images, and features clearly visible & it was time to create a Prototype.
A prototype is the simulation of a final product, which is used for testing prior to launch.
That was the last step in this project & the prototype was ready for User Testing & another iteration if needed.
Project Hindsight
Even though it was just a college project, it has been very demanding in terms of all the stages of product UX design.
From the first stage (research) to designing mockups & prototypes, I really focused on every task during that journey.
It showed me how much time, energy & research should go into every project to ensure the final product is at its best.
It was a very humbling experience working on that project as it showed me that I still have a lot to learn & explore in the world of UX & UI.
Simplicity is not the goal. It is the by-product of a good idea and modest expectations.