The style guide documentation is a work-in-progress. For example, version 1 of the guide has basic specifications.

Example of how components are documented

Later on, more usage patterns are added to the style guide. Version 2 also has a working prototype of how each component behave and is expected to work in the software.

The feedback from the developers and testers allow me to make improvements to the style guide. I find that having a working prototype allow them to understand a component better and this helps developers to code more efficiently.

“What is it that the user wants to achieve?”

With that in mind, I will then start to apply applicable UX processes to solve this problem.

Typically, I would reach out to the product management team for a brief on the feature or enhancement. Usually this information is provided in the form of a User Story. There will be question and answers during this phase and if the need arises we will also reach out to potential users to further understand the requirement.

Sometimes, I perform competitor analysis. However, I would prefer to have some sketches first before looking as what the competitor has. I do not want to be influenced by that.

Once I have sufficient information, I will then map out the flow diagram.

Example of flow diagrams that I mapped

Old school pencil sketches are the best and fastest way to develop ideas. It also cuts down turnaround time. Once the first few sketches are ready, I will reach out to my teammates with my paper prototype. From the feedback gathered, then I would improve on the sketches. Once the concept reaches firmer ground, I then start on my lo-fi wireframe.

Example of a low fidelity wireframe

Once the lo-fi wireframe is presented and is favourable, then I start on the hi-fidelity wireframes. This will be what the developers will build based on. I will also include style and interaction guides, and prepare the specification document.

Example of high fidelity wireframe

Once the build is complete and pass the unit tests, then the feature is ready to be released.

However, UX work does not just end there. I will document and add common widgets to the style library so that they can be re-used in the future. I will also work with the product and customer success teams to get feedback from users.

I was the lead designer for The Star Online revamp in 2013. Working alongside a team of 6 developers, I take the lead in design direction, site architecture, consumer journey. I built a prototype of the site, initiated the responsive model and guided other designers on the standardization of CSS codes.

Skills Applied
UX Process: Competitor Analysis, Wireframing, User Flow
UI: Photoshop, Illustrator
Web: HTML5, CSS3, Bootstrap Rapid Prototyping Framework

Version 1 of my personal portfolio site was not powered by WordPress. It was designed, and hand-coded in it’s entirety by myself. Later on, I decided it was more efficient to use the WordPress CMS and made the switch to WordPress.

Kuali.com is Star Media Group’s food portal, and this is version 2 of one of Malaysia’s popular food sites. The food portal features the latest news on Malaysia’s dining scene, restaurant reviews, and the most popular section – the recipes.

For this revamp, I applied taxonomy in my UX process when working on the site map and information architecture. I also did stakeholder interviews, competitor analysis before proceeding to wireframing and then prototype. I also delivered the front-end development files (HTML and CSS) to the developers.

This version went live in 2010 and lasted till 2013.

The mStar Ramadan microsite is a special site created to celebrate the Holy month of the Muslim calendar. As such, the site contains religious prose, recipes for breaking of fast and greetings from local celebrities.

As the designer assigned to this microsite, I applied ux process such as stakeholder interviews, competitor analysis, user flow before wireframing and prototyping.
I also work on the front-end development, delivering HTML and CSS ready files to the development team.