Abroaders UI and Front-End

Abroaders website is an online recruitment and career consulting platform which provides information and career opportunities for Japanese professionals who want to live and work in CBD cities in Asia, such as Thailand, Singapore, Indonesia, Vietnam and etc. The company required a new design of all pages focusing on Mobile First method.

Empathize

Understand pain points from the current website which contains old-fashioned UI design, poor image quality and not responsive. Additionally, the key problem of the existing website is that style coding (CSS) for desktop and mobile version is managed separately, that makes a huge problem and time for developers to maintain and customise.

The redesign of this website is highlighted on ensuring that the quality of blog/article images are optimized and responsive across all devices’ screens and enhancing the readability of website’s content (focusing on Japanese users).

Mockup & Prototyping

Working closely with the project manager, I translated a given rough (lo-fi) flow into a hi-fi wireframe and prototype to ensure that our ideas and concept are on the right track. After the wireframe was approved, high-fidelity mockup would start here. Color theme of Abroader’s branding, soul red color, was utilized across the new website design, modern English and Japanese font family, size and weight, optimised high quality photography were thoroughly considered on this process.

Delivery

Deliverables of this project were: a low-fidelity wireframe, high quality mockup and a complete front-end development of responsive mobile/web website, using HTML5, CSS3 and JavaScript.