Context
Your client is a start-up airline called Fly UX. They’re looking to create
an online experience that is fast, easy, and intuitive: one that’s based
on a deep understanding of their target users.
Problem statement
Your task is to design a new website or mobile app for Fly UX. You’ll
focus specifically on the flight booking process: how users search
for, find and select flights online. Your end goal is to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes.
Research means: understanding and defining the problems to solve. Knowing the users, their goals and context, their experiences and pain points, mental models, etc. are fundamental to solving user problems.
The first step is to get an overview of how the competition solves the problem. In doing so, one can make strategic decisions about product positioning. Good solutions can inspire you, and bad solutions can show you how not to do it.
I concentrated on German and Polish national airline apps as well as a selection of best in class apps (>4,5 stars on Google Play) from all over the world.
Research methods such as online surveys are also used to obtain a comprehensive picture of the users. Here, the goals of the users and how they were achieved are queried. The motivation of the users and what experience was made is of interest. Subsequently, the results are statistically analyzed and the findings are processed and presented.
A usability test is a moderated process in which sample tasks are performed by the user. Suitable users can be found via screening process. The goal is to investigate the user experience.
I have never evaluated usability tests in such an intensive and structured way. It was not just about finding out problems, but focusing on goals, behaviors, context and experience of the user. It was new to me that even the analysis of competing products could bring so many insights to light. Also new was the concept of mental models and the detailed analysis of users' goals. I was able to incorporate these directly into the design process.
The results from the tests provide valuable and structured information for the design of the software. Fortunately, transcription is nowadays done by software. If several users test the product, a tabular overview helps to present the results in a clear and comparable way. Since everyone had an individual approach, each test uncovered new insights, but it also became apparent that users sometimes had similar problems when testing the apps.
The goal of the analysis: define the problem to be solved.
The information about the problem is already known from research. In this step, they are sorted, structured and prepared according to defined processes and methods in order to have a sound and comprehensive basis for solving the problem.
An affinity diagram represents a larger amount of information in a structured way. The collected notes are sorted into thematic groups and supergroups.
I already knew brainstorming, but a structured evaluation of information like the affinity diagram showed me how complex problems can be structured and processed quickly and effectively. This is a technique I will use in my future projects.
The customer journey map visualizes the user's points of contact with the product or company. In doing so, the user's emotions are given special importance.
I had heard a lot about customer journey maps (CJM) in online marketing and as a consultant, but I had never created one myself. In business life you often see process overviews and blueprints that are touted as CJM. A customer journey map, however, visualizes the user's contact with the product or service with a focus on his subjective impressions. Here, completely different insights come to light. If you apply these insights to the design, you can directly influence the user experience. I find that impressive.
The goal in the concept phase is to design the foundation of the solution that solves the defined problem and provides positive user experiences. At the same time, it should satisfy the stakeholders.
The concept phase begins with the flow diagram. From a high-level perspective, it defines how users will move through the design. Each interaction with the app is visualized and each screen and screen state is defined.
During the design process, I realized that my knowledge of design of database processes around Alteryx and KNIME was very important transfer knowledge to design efficient flow diagrams. This task was very easy for me because I could directly incorporate best practice approaches. I placed great emphasis on minimizing the user's contacts. The goal was a smooth and short flow through the app.
After making first static sketches of screen contents and states, I recreated the standard control elements of material.io out of paper. These elements served me as the basis for the interaction design of the FlyUX app.
Input for the design was mainly provided by the flow diagram and the customer journey map. The paper prototype was finished within two days and was the first version of the FlyUX app. This was really quick in comparison to usual sketches.
The interaction with the paper prototype and the physical limitation of paper (no copy/paste) forced me to focus on the essentials and ensured that only the most necessary elements were used in the design to get the job done efficiently.
Thanks to the previous phases, there is a very high probability that the result will also meet the ambitious goals: To create products or services that generate positive user experiences. We already know what users think, feel and expect. It is only at this "relatively" late stage that UI elements and screens are designed. All based on sound research, analysis and concept.
When creating the prototype, I decided to use Figma. The freemium business model, easy online collaboration, and a simple and clear user interface and large community convinced me. Although the tool is easy to use, I had to learn to implement my interaction design and ideas in Figma. Since you can't program in Figma, some tasks were not easy to implement. Nevertheless, a nice prototype came out.
Tests with different people from different backgrounds were conducted. One test was recorded and evaluated. The usability tests provided helpful and precious information during the iteration and evaluation of concept and design. Several issues were fixed and the flow could be streamlined thanks to insights from the test. An important point of improvement was to make the transitions between the individual screens more comprehensible.
A prototype alone is not enough to explain to programmers how the software is to be programmed. More information about keyboard choices, variable types and length, states, error messages, etc. are communicated via wireframes. Wireframes are also the perfect tool to standardize and revise the prototype. The result is a construction manual for developers of the FlyUX app.
What was good? What have I learned?
The UX Design Institute course allowed me to go through a best practice UX process in a structured and guided way and I have learned a lot. I have benefited greatly from reading the book "The Design of Everyday things" by Don Norman. He opened my eyes when it comes to the discipline of design. A discipline to which I have paid too little attention before, although I identify with it very much. I bought his book "Emotional design" too, which I will read soon.
What to change?
- I would put even more emphasis on finding suitable survey participants for an online survey.
- In my next project, I would follow material.io even more closely to design better mobile applications.
What next?
The next steps will be: Expand knowledge about Agile methods and Design Thinking and apply UX in my job and my next projects.
+49 (1522) 26 794 79
Felix Christian Buss,
Große-Leege-Str. 43A,
13055 Berlin,
Germany
Designed with Mobirise site builder