Air Selangor Responsive Website
Air Selangor provides an impressive and comprehensive level of services to the citizens of Selangor, Kuala Lumpur in Malaysia.
To limit the scope and deliver a practical design to revamp its corporate outdated website to something satisfying to interact with 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, and what the results were.
Some of the key pain points
The Hardest task is to find the paperwork information
Difficult to choose an 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 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 ensure we were planning a road trip I was willing to face.
I had difficulties mapping many pages via stakeholders to finalize and plan for our screen mapping.
Wireframes
I started to wireframe ideas for stakeholders, and I had to display website architecture visually because the sitemap I created could be a bit abstract to imagine, mainly because it was not small.
So I started wireframe to have the project’s first real concrete visual process.
Stakeholders and I had wireframes to finalize ideas to know how the website could look and how much content we needed as it strategized.
Final Design
After working closely with stakeholders, I finalized all screens (more than 60 web & mobile screens), and right after I saw smiles on stakeholders’ 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 them with the rest of the team, as image 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.
