Hi There!
I'm Mike 👋
Passionate and always improving
Welcome to my portfolio. I invite you to explore my site to get a better understanding of my strengths, technique and professional experience. What you’ll find below is the work I created for my professional diploma in UX design, a career where I will continually strive for perfection and I am confident my work will speak for itself.
Bio
I am a motivated and passionate individual who has developed a range of skills over a 11+ year period in various enterprises within the UAE and the United Kingdom. These Include film media, event management, business analysis, investment and military logistics. With every organization I have worked for, I have proven to be a reliable team player with effective communication and customer service skills with a proven track record of excelling in high-pressure business environments and more than meeting all managers' expectations.
During this period certain factors contributed to my attraction to the world of UX. I always had a desire to work in a technological and innovative environment and possessed a strong interest in future trends. These are key elements that I can pursue within UX
The situation with the pandemic created the opportunity for me to now realise my goals. During lockdown, I made every effort to study to for my Professional Diploma in UX design and prepare my portfolio which you will see below.
At this point, I would like to take the opportunity to thank my tutors and instructors for providing outstanding learning material and guidance.
Who taught me UX?
The UX Design Institute
They are led by the Industry Advisory Council, consisting of technology industry employers, design leaders and recruiters. The Council connects us to the wider UX industry. It oversees our courses, making sure they’re current and focused on the skills employers need most.
The Industry Advisory Council and university credit-rating set a globally recognised standard for our educational programmes. Employers and recruiters have confidence that graduates from the UX Design Institute have achieved the highest level of UX education and job-ready skills.
Fly UX
Using the institute's tried and tested UX design path, I have created a new design for a start-up airline website, this being Fly UX. They’re looking to create an online experience that is fast, easy, and intuitive.
One that is based on a deep knowledge of users' needs and is based on an in-depth understanding of the flight booking process. In particular, it provides an easy to navigate the system of finding, selecting and booking flights.
This project was done in my spare time and I finished it in Decebmber 2021 and I was the sole contributor to all the work below.
Research
Establishing user pain-points, goals, industry standards and pinpointing areas of improvement.
Online Survey
Breakdown:
Figuring what the pain points might be for the average user. I put out a survey to 26 people from different age groups. The objective was to understand their experience during the booking process and the flow of the website.
Tools used:
Google Forms
Take-Aways
-
30.7% of customers will use other services from that website.
-
50% choose to use other websites to book holiday accommodation or transportation while.
-
19.2% don't book any of these services.
Competitive Benchmark
Breakdown:
Analyse how industry leaders integrate their range of services including hotels and rental cars while also giving an analysis of each of the websites from the user's perspective.
-
Emirates Airlines
-
Qatar Airways
-
British Airways
-
DFS ferries
Tools used:
Google Slides
Takeaways
-
Having a system for cars and hotel bookings can easily make the page cluttered and seems hard to get it right.
-
Leaving not enough space between cost, timings and flight. details can make it difficult for the user to spot what they are looking for.
-
Avoid having to use multiple websites and forms for one booking.
-
Stability is a major factor!
-
It's good to use relevant and relatable professional images.
-
Leaving enough space is imperative to keeping it simple for the user.
-
Keep the booking process to 5 steps or less.
-
Give users the option to go back and change booking details.
-
Keep the text simple and minimal (no long paragraphs).
Note Taking
Breakdown:
I undertook an exercise to watch two usability tests with two users Involving Aer Lingus and Eurowings to see how problems can manifest through simple design mishaps.
Tools used:
Google Docs
Takeaways:
A lack of affordances can make most inexperienced users struggle with how to move through the process causing frustration, especially within the class selection.
Usability Test
Breakdown:
I undertook an exercise to watch two usability tests with two users Involving Aer Lingus and Eurowings to see how problems can manifest through simple design mishaps.
Tools used:
Zoom
Takeaway:
A lack of affordances can make most inexperienced users struggle with how to move through the process causing frustration, especially within the class selection.
Define
The next step in the process is to consolidate all the research that has taken place and to narrow down the results. Identifying the main problems while figuring out the solutions.
Affinity Diagram
Breakdown:
To review all the research through a collaborative brainstorming session with two other participants to reorganise all the raw data into groups to generate, organise, and consolidate all the collected information.
Tools used:
Miro
Takeaway:
-
Make the website work for the user and autofill information at every opportunity.
-
If a problem arises, prompt the user and be specific.
-
Stick to the user's mental model to avoid confusion.
Customer Journey Map
Breakdown:
I created a persona of a user who is going through a normal scenario of booking a flight for two people with common pain points highlighted from previous research.
I had to include pain points that are covid related like flight cancellations and last-minute changes as this is very much relevant to the times we are in and every travel booking service is affected.
Tools used:
Miro
Takeaways:
Following the same patterns of problems highlighted in the research, I identified areas to note where the user could harbour negative emotions to the site.
-
Dates and flight selection need to be as flexible as possible (although this isn't a UX problem it's a supply and demand issue).
-
Include visual aids and affordances so the user can digest information quickly.
-
A clean and minimal class selection helps the user distinguish each of the class features easier.
Design
Now that the problems have been identified. I came up with a design that could address the issues that some airline websites have yet to solve.
A website that works for the user is smart and automates many of the processes designed to provide maximum help for the user wherever it can.
A clean minimal UI that isn't overburdened by loads of features that rarely gets used by most users.
A short process that will also disclose information progressively instead of providing all the information at once, overwhelming the user.
Flow Diagram
Breakdown:
Laying the foundations of the flow for the booking process from visiting the homepage to the confirmation of payment, outlining all the interactions of each of the five steps
Tools used:
Miro
Takeaways:
-
Insure the system allows for multiple bookings.
-
Have a list of areas where the user has to be. prompted if data is inputted incorrectly.
-
Have everything within each step, no secondary steps within steps.
Interaction Design
Breakdown:
Continue the design process and sketching out the screens for the desktop flight booking process while putting forward solutions to the problems found in all the research.
Tools used:
Google Slides / Pen & Paper
Takeaways:
-
The datepicker must not be too large or too small and should contain two months.
-
The user needs to have easy access to close dropdown menus/boxes with the options of typing aswell as scrolling.
-
The design needs to let users go back and forth between pages easily and without any data loss.
-
The user's progression status, flight information and prices need to be shown at all times and to be able to be expanded on in all pages.
Prototype
Breakdown:
This is a medium-fidelity prototype designed for multiple bookings, with a easy frequent flyer sign-up process and maximum automation in mind.
Tools used:
Figma
Takeaways:
-
While Figma is a great platform it does have limitations especially on interactions, Axure is better for high fidelity designs and would of been a better choice for next time.
-
Make sure the design can amodate multiple bookings as for a single booking it is easy for a design flaws to arise unnoticed.
-
Working with a neutral colour scheme while not very exciting can make affordances pop and next steps easy to identify and avoids colour clashes.
Wireframe
Breakdown:
Putting together a document with everything the developer will need to start the development.
Tools used:
Google Slides
O.B.S (Open Broadcast Software)
Takeaways:
-
Make sure the document while containing all the relevant information, needs to be easy to read and clear for the developer.
-
At this stage it would be wise to spend time with the developer going through the document to help with context and any questions he/she may have.
-
Don't leave any detail out no matter how small including how inputs should be formatted. Like having the payment input formatted to debit card digits as a example.
Reflecting on what I have learnt
Over this past year, I have learnt a great deal but after constant trial and error. There are indeed many ways of working and while looking at examples of work from other students, I can see that there is a huge variety in the way people tackle certain issues with also many different ways of thinking.
I did however learn the important lesson of time management and how working smart can save you a lot of time and agony. Like overlapping sketches over together instead of creating a whole new sketch every time which was a painful process I avoided by the following advice from trainers at google on how to do this effectively and I will be forever grateful for that tip.
I also learned that choosing your tools wisely is important. As I was blissfully unaware that with every tool there is a cost associated with features that you may need later down the line and once your project is on that platform you also have to consider, is it compatible with other platforms you might use later on? As an example, while using Miro in many projects. I found that even sharing the project with users, exporting the project to an HD image and even loading a backup of a project costs a huge sum of money that you need to pay monthly. Without paying the fee my work is stranded on the platform.
What would I do differently?
One thing I would do again is experiment with more design tools before beginning a design. As an example, I understood Figma to be a great, easy to use platform and well suited to medium-fidelity designs but while coming to the end of my prototype I kept hitting limitations to how many interactions I could place on an element which ended up me almost having to completely re-do my design. If I would do it again I would have used Axure as it is a more powerful software better suited to high-fidelity prototypes.
I would also have set the foundations of a prototype better. Admittedly after experimenting with Figma, I jumped straight into the design overexcited to create. After some days of designing, I saw that professionals always start with a design system first with every element labelled with different variations and even an example of every colour used in the design. It's a much more professional way of starting a project. It would have saved me a lot of time in the long run
Reflection on UX
As I expected the world of UX is vast and at times can feel overwhelming but ultimately it's one centred around the user's emotions and feelings using a product. One that spans countless industries and one that also dives into the psychology of people.
Over the course, we had many examples of unusual UX case studies from the very first commercial office chairs with wheels, to the teams at Mercedes using clay model cars to fine-tune every edge and curve. To even a nuclear power station that nearly had a meltdown because of a poorly placed button.
This insight has given me a new perspective on everyday things but I can also imagine that even industry leaders in UX can learn something new every day.
While I understand so much more through this experience I want to fine-tune my skills and get to understand the many avenues that UX has to offer..
