Zentrips

The Basics

Role
UX/UI design,
Front-End Dev
Time
4 Weeks, Feb 2018
Type
Web design capstone, Individual

Scope

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.

Old website

Approach

Starting with user research to discover a problematic experience, I created wireframes and prototypes and tested them with users to iterate the design. Several changes were made to the initial design to accommodate user needs. The final web design was created using web technologies such as HTML, CSS and JavaScript.

Process

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.

Old website

Persona

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.

Journey Maps

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

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.

Breakdown
Old website

Wireframes

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.

Home wireframe

Design Direction

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.

Old website

Outcome

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:

  • Dashboard (main screen): Consisting of the most vital information for travellers such as boarding gate, directions and time to leave.
  • Boarding Pass: A simplified boarding pass with a scannable bar code for easy, paperless boarding. Also directions to the allocated seat to eliminate confusion.
  • Airport details: Includes a map of the airport to help plan the journey and various restaurants and shop information to ease out decision making.

The final design is created using HTML, CSS and JavaScript. The final iteration includes rethinking colour scheme for better readability, adding more information in a clearer manner, creating links to each page from the dashboard and changing the overall information architecture of the main screen.
Project available to use on github pages here.

Old website

Challenges and Learnings

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).