Air Selangor
Air Selangor has an impressive and comprehensive level of services that it provides to the citizens of Selangor, Kuala Lumpur in Malaysia.
In order to limit the scope and deliver an effective design to revamp its corporate outdated website to something satisfying to interact different personas by following lifestyle web UI design styles.
Methodology & Focus
The methodology adopted by the team to come up with the design, features, and mockups was based on research into Air Selangor’s current services as well as its peers globally. As Air Selangor encompasses a wide range of services across the different platforms of users, the team decided to focus on one user persona.
Research
Survey
I was focused on the user research results from three comprehensive surveys with ideal user participants. The following slides describe how this user research project was conducted, what the results were.
Some of the key pain points
The Hardest task is to find the paperwork information
Difficult to choose oracle system
A direct link to the vendor/supplier oracle system (Wanted New Feature)
Paperwork procedure (Wanted New Feature)
Opportunities
Present the paperwork scope clearly and let them understand the flow and download/view forms likewise.
As each resident might have their own preferred way to communicate, It will be a must to keep all channels available for them to be updated via notifications, and supported by a call.
Sitemap
Right after we knew and understood enough about users, I started to map the sitemap to make sure we are planning well a road trip I was willing to face.
I had difficulties to map all huge amount of pages via stakeholders to finalise and plan for our screen mapping.
Wireframes
I started to wireframes ideas I and stakeholders had to display website architecture visually because the sitemap I created could be a bit abstract to imagine especially because it was not small.
So I started wireframe to have the first real concrete visual process for the project.
Stakeholders and I had wireframes to finalize ideas to know how the website could look, how much content we need as it strategised.
Final Design
After working closely with stakeholders, I finalised all screens (more than 60 web & mobile screens), and right after I saw smiles on stakeholder’s faces I sent all assets and prototypes to the dev team to start their job.
Adobe Xd was the tool that I used to design and prototype mockups and share with the rest of team as image as below.
Interactive Design
Air Selangor board was so wonderful to have some wavey animations to show the concept of flow and fun.
The blue wave was the only element I was allowed to use to create watery animations with a few limits as it should be only a single color wave and not much animation was allowed.
