Style Guide Design

Online Mobile App Styleguide

Mission

Scotiabank needs an online style guide to be built within a short period of time. UX tool Axure RP 8 is the perfect tool for this task, as it's capability in auto-generating html web pages from UI mockup files has made it a perfect solution for this task.

What I have accomplished

I have re-designed and improved the layout from the original PDF style guide into a clean and easy to read format in Axure RP 8. I have also set up an accordion menu bar on the left side of the UI to store layers of links to different sections within the style guide.

As a result, we have successfully completed the whole interactive online UI guide, in which consist of 93 pages within 2 weeks of time. This website is now hosted in Scotiabank's internal website and the Axure RP template that I have created will be uterilized to help digitizing other UI style guide as well.


ATM UI Visual Specification Guide

Featuring on this page are 8 out of 34 pages of the visual specification guide that we have put together based on our new UI visual design. It serves as a good tool for development team to implement our new design to the actual web based ATM/ABM application that will be running in the Caribbean countries.

I was also reponsible to team up with the Front-end web development team to modify the CSS and html 5 codes to ramp up the implementing process.


Global Header Style Guide

This is the style guide that I created to unify the style of various microsites in the organization. I have also specified some additional CSS properties such as button focus state to help improving the accessibility of the websites.