The capstone project for the Web design course at Victoria required students to discover a problematic interaction experienced by people and present a web based solution.
During the discovery phase, I found out many people faced issues while travelling, especially the time until boarding was stressful to most. Hence, the proposed solution was a web based tool that provides travellers all necessary information regarding their flights along with a mobile boarding pass as well as information about the airports to help them plan ahead of time and thus enjoy a stress free travel experience.
The aim of the project was to discover a problematic experience and build a viable web based solution.
User research and interviews allowed me to discover the problematic experience that was mainly due to the lack of information for travellers.
After clearly understanding the problem, working with various user research frameworks (personas etc.) I conceptualised a solution.
I created simple design assets (colours, typography etc.) and focused on creating a rich & pleasing user experience through a well designed prototype that could feed into a website. I used Framer for prototyping, which allowed me to add micro-interactions that were well received and added to the final web design.
The assets, frameworks and templates created are given below.
I created a user persona to represent infrequent travellers, who are the ones who are usually stressed during travels, to better understand the needs, goals, behaviour and frustrations of the users and empathise with them. This also allowed us to keep my biases in check while designing for the user.
These diagrams mapped out the steps the user would go through each phase of airport departures, from travelling to the airport till boarding. The map evolved over the course of the project, always focussing on building empathy and helping the user to complete their goal as efficiently as possible.
Testing was conducted for each stage of the design including wireframes and prototypes. The wireframe tests allowed me to build upon the structure and navigation to meet user needs. The prototype testing allowed users to criticise factors such as readability, information hierarchy and recommend additional information such as reviews and ratings for amenities.
The breakdown of the prototype testing is below.
Through the sketches I tried to create all kinds of possible solutions regardless of viability. This helped bring new ideas to the table. These wireframes included various ideas that were found to be excess information in the later stages of design but were important to bring forward in the initial sketches to look at all possibilities.
To empathise with travellers it was important to create a calming atmosphere within the tool. To achieve this I looked at soft yet deep colours taking inspiration from natural phenomenon. I chose to draw from the beautiful twilight colours that evoked calmness through the ambience of night time flights with dim lights and starry skies. This is reflected through the choice of colours, typography and photographs utilised.
The initial concepts were sketched and tested with users that included both frequent and infrequent fliers. The final designs were created using Framer app for prototyping. Framer allowed me to create animations that helped provide an improved user experience that when tested was well received and incorporated in the final web design. View project source code here.
The significant parts of the project include:
Project available to use on github pages here.
The challenges for this project were mainly around discovering the problem. As an open assignment, a lot of research and several interviews were conducted to find a problematic experience and the areas of friction for the people. An intimidating amount of people were questioned with some friendly support and deadline scares. As a web based project there were some challenges executing the idea through front end development. A key learning during this project was documenting on the go. It turned out to be extremely helpful during the final iterations to go back and discover certain small frustrations that I was able to resolve (such as a directional route to the seat in the aircraft).