This article intends to walk the reader through the process of inception to deployment for the newly released Airasia web user portal. Though the process wasn't very strict, this article will go through the general iterative framework used for completion of this project. First lets begin with why this revamp was needed.
Reasons
There are many reasons for a company to undergo a UI/UX overhauls. Some of the reasons may include moving to a new framework, providing a refreshed experience to users, enhancing cosmetic appeal and many more. At Airasia the main factors for change were centered around matching the new brand and design framework as well as providing a modernized and minimalist approach to the users. To kill two birds with one stone from an engineering perspective, this seemed like a good opportunity to assess the current stack and framework.
Design
The main idea/objective with respect to design was to provide a clean and stable look with reasonable complimentary colours that provide a visually appealing result yet is soothing and considerably minimalistic with amplified ease of use. Throughout the design, primary colours were used to guide positive action and create emphasis where needed, while accent colours were used both to enhance the colour scheme and present secondary actions. Design for this project was just a spec in the overarching and ongoing redesign of the entire brand, therefore ideas chosen here are in reference to the main company's visual communication goals.
The below image is the old user interface. This interface is a single page only differentiated by sections. The design has ran its course and lacked a bit of modernity.
The image below is the new user interface. Evidently this interface has a cleaner look with better color separation, more minimalism while being very modern. Elevating actionable components in relief is a better user guide to users while introducing a realistic elements
Framework
The previous design portal was built with Angular.js. Though Angular is an awesome framework, we sought to use a lighter framework with a smaller bundle and SSR capabilities. Furthermore we were faced with our fair share of challenges while using and maintaining the project. First of all, the code on angular was a bit convoluted while needing many lines to do small tasks. Keeping a reasonably clear code base with minimal lines of code enhances the developer experience by easing maintenance and amplifies readability. Secondly the, sheer size of an angular project was something to consider especially because components or methods within the framework that may not be useful to the project are still shipped onward to the client. In the case of engineering, it seems more practical to include, packages/components on a need basis. This is heavily tied to the YAGNI principle. Finally, in comparison to the proposed framework, the file structure of angular is a bit on the messy side. This can definitely be curbed by inculcating industry best practices for angular, however, the proposed framework comes with a simple structure out of the box.
The proposed framework for the project was Next.js. Next.js is almost a company-wide framework as many of the engineering teams at Airasia use it. This dramatically increases the available human resource for this project as well ongoing maintenance after completion. Next was generally considered because of its lightweight nature, SSR capabilities and an easy to navigate file structure that eases code handling. Next.js has other popular benefits that can be seen on their homepage.
The preference for this file structure lies mostly in the pages folder that allows a quick page spin up with minimal configuration.
Plan
To achieve a successful transition, consistent communication had to be fostered between teams such as the copyright team, the design team, the translation team the UX team and the engineering team. It is important to note that though the formal process usually begins with copyright and translation through design and UX, and then to engineering, there are several iterative and repeated rounds as ideas may change or improve as time passes. The main goal is to release an experience that increases user comfort & engagement, and reduces user complaints.
Development
The design, UX and copyright teams act as starting point to prepare detailed figma wireframes that clearly depict business requirements and user stories.
These figma files will then be converted to actionable tasks that can be independently grouped as well as decoupled. It was very important to decouple tasks and components at this stage to allow simultaneous development between team members.
The previously created tasks are moved into tickets making them ready for sprint planning and delegation.
Delegation happens in the team based on a variety of factors. One of the topmost factors is self improvement. Though the team may have assigned front end and back end engineers, it is top priority in Airasia that most team members have a working knowledge and experience around most parts of the system. This factor of delegation creates a learning environment by challenging engineers out of their comfort zone to enhance their skills. Engineer comfort and happiness is also a top factor for task delegation because it keeps motivation up and reduces the chances of burnout. Another factor to consider is that of task complexity. The hierarchy within the team, however soft, still maintains that there are more experienced engineers than others. So tasks that may seem to have a higher complexity is moved on to senior engineers who may share derived knowledge during our weekly knowledge sharing session. Though components were properly decoupled in the planning stage, an extra effort was invested in factorising reusable components to prevent repeated development. Non-technical teams such as design and copyright are not left out of the engineering process as periodic demo sessions are scheduled to extract valuable input for the success of the project.
Challenges
The main challenge for this project was getting all teams in alignment for the project. Different teams have a multitude of tasks that had to be done alongside the project. This meant there had to be numerous considerations concerning time constraints and scheduling. A result of this is extension beyond the allocated period of the project.
Another challenge is communication between shareholders and teams. During projects that involve different teams, it is not the easiest to consistently maintain changing information across board. This may result in wasted effort, design and engineering inconsistencies, as well as failed demos. This was however mitigated by having a documentational source of truth that most people can refer to.
Conclusion
This article went through the entire process of the UI/UX and engineering while providing key factors throughout delegation and engineering. It is key to take note that as stated above, most successful projects have challenges and are continuously maintained despite initial rigorous planning. Thankfully all teams were able to achieve the overarching objective of providing a better user experience to the user.
Top comments (0)