Design

PelicanCorp - Design System, PelicanPortal, & PositiveResponse 
UX, UI, Visual Design, Copywriting, Agile Project Management & Team Leadership, SCRUM Mastery, Business Analysis

As the only UX (as well as UI) person at PelicanCorp, I provided leadership and guidance to a team of offshore, fresh graduate front-end devs in Manila, through which they were able to build an enterprise design system for PelicanCorp*. (I designed the system - so UI, UX, visual design, etc.)

We (Manila team, our awesome back-end developer, and myself) then used this design system to create a client-facing services management portal - PelicanPortal - a client-facing services management system, designed for international use across all regions serviced by PelicanCorp.

PelicanPortal was built to unite PelicanCorp's many disparate service management tools, to give customers a one-stop-shop for service management. Architecturally, PelicanPortal is built on the concept of "micro-frontends" because it involves integrating a number of different products under its "roof". By using our design system, as well as lots of collaboration and hard work to achieve consistency in workflows as well as look-and-feel, we were able to make the micro-frontend structure invisible to our end-users. To end-users, PelicanPortal looks like what it "obviously" is - one application where they can manage all their services. In reality, it's many applications housed under one roof, reading and writing to/from very different services.

The first deployment of PelicanPortal was to the Western Canadian territories of Alberta, British Columbia, and Manitoba. PelicanPortal itself was completed ahead of the required deadline, met with great stakeholder approval (including board members) and launch, and has seen steady daily use since then.

Please note that the animated GIF demo of PelicanPortal shown directly below may take a while to load, as the file size is rather large. The other images are samples of the hundreds of views I created and exported to Zeplin as part of the handover and specifications process.

The PelicanCorp design system was also used to create 2 other products (which I also designed) - PositiveResponse, and PlanAccess. PositiveResponse is a "light" version of PlanAccess deployed in Western Canada. The recording below is of a PlanAccess prototype, and the other images are samples of the hundreds of views I created and exported to Zeplin as part of the handover and specifications process.

I set up the PelicanCorp design system so that the design files (Adobe XD) mirror, as far as possible, the dependencies in the code.

Here's a small sample of the many design files I created as part of the PelicanCorp Design System. The design files initially function as one part of the specs I write for devs, and thereafter as design assets for constructing views and workflows. Each design file has a short "intro" that provides guidance on what the component is for, as well as best practices and rules-of-the-thumb for usage.


In both the code, and the design files, dependencies are clearly and explicitly mapped. First off, there is a "Common" core, which consists of spacing, typography, colours, etc. "Elements" such as buttons, are then dependent on "Common". "Components" such as site navigation, are then dependent on "Common" and "Elements". "Templates" are the next level up, an example of which is a standard modal overlay panel that slides out, and has configurable headers, tabs, standard loading and other views, and more. The last level is "Feature sets" (or workflows), a good example of which is the entire log-in process, fully responsive, and complete with user account creation and password retrieval, which can be re-used and customised across multiple products.

The idea is to make it easy for developers and designers to fall into the pit of success together.

*Note that, having gained a wealth of experience from building PelicanPortal, my Manila dev team immediately set about re-factoring the PelicanCorp design system once the PelicanPortal was delivered to happy customers. So this link contains only the components that have been freshly refactored (as of time of writing).


Minfos UI Philosophy

UX, UI, Market Research, Business Analysis, Visual Design, Copywriting

As the sole UX person at Minfos, I worked on a fresh new redesign of key modules that we offered pharmacies, as well as business-as-usual (BAU) projects for our legacy software suite. The new modules included our centralised ordering, packing, as well master database modules. 

For all of these modules, I was involved in the visual design, UX, and UI design, as well as the greater market research. In the process, I became the resident Subject Matter Expert (SME) for Australian pharmacy in general. 

The content you see in this UI philosophy is a condensed reflection of that, meant to give context to both the UX choices made, as well as the very real challenges and joys faced by our customers.

You can download the HTML version of the Minfos UI philosophy (which I made with Designmodo's wonderful Slides UI framework) here.



Pharmhack - Little Pink Book (Site for App proposal)

UX, UI, Market Research, Business Analysis, Visual Design, Copywriting

Pharmhack - the world's first pharmacy hackathon - was an event I attended (on my own dime) as part of my pharmacy industry market research. I paired up with the amazingly smart and cool pharmacist Sahar Khalili. 

Over 2ish days, Sahar and I came up with the idea for an app that would help give absolutely private sex advice to pre-teen, teenage, and young women - in a way that they're truly comfortable with - texting. Only in this case, instead of texting their peers for potentially bad advice, with serious social repercussions, they'd be texting a chatbot, whose answers are backed by data from verified healthcare professionals. 

Our idea was to provide this vulnerable group with trustworthy advice that they knew would stay absolutely private, and wouldn't 'out' them without their consent, ever. At the same time, should they need to reach out to health professionals, they could do so from the privacy of their own phones, and in their own time.

While we didn't win the prize, we did make it to the runner-ups! And it was absolutely awesome to get feedback from our peers in the industry, and to hear both our target audience, AND their parents, saying that this was something they wished existed now.

You can download the HTML version of the Little Pink Book app site here.


Comwerks Interactive

IA, Design & Conceptualisation, UX, Illustration, Copywriting
This website was featured in Smashing Magazine, Creattica, and DesignFridgeUK.

 

Spartan: Noble Division, XBox LIVE

IA, Design & Conceptualisation, UX, Copywriting

I'm a 'core' gamer, as people like to classify things, so this project was a lot of fun. XBox was aiming to piggy-back on the launch of Halo: Reach to drive Xbox LIVE multiplayer attaches, and it did so - with this wildly successful campaign.

 

Call of Duty: Operation Summit, XBox LIVE

IA, Design & Conceptualisation, UX, Copywriting

Timelines were really tight in this project, so while we really really wanted to build a full-fledge game engine, we had a whelk's chance in a supernova of actually being able to do so. So we cheated. ;) Let's just say that 8 years of MUDding made writing combat messages a breeze. Plus it was fun getting to turn out some of the silliest, most exaggeratedly macho copy I've written in my professional life.

 

Microsoft TechDays

IA, UX, Art Direction, Conceptualisation, Copywriting

This was an eventful project. Eventful meaning, the design shown below was fully approved, coded and put up on the staging site for testing, when the client had to do a total turnaround in terms of look and feel, due to internal reasons.

We still managed to deliver on time with this new version of the design - keeping both client, AND our (understandably) distraught coders happy by ensuring that most of the changes were via image-replacement, rather than code updates.

 

Cloud Power, Microsoft

IA, UX, Design & Conceptualisation, Copywriting

This project was interesting for the new approaches and technologies we got to explore, both in front-end coding, and also in all the concepts I had to wrap my head around to write about Cloud. While not all my copy made it through, I am particularly proud of what did - especially my layman's explanation of the Cloud.


Cloud Summit Event Site, Microsoft

Design & Conceptualisation, Copywriting

I designed this simple, straightforward single-page microsite template to help users easily get straight to the Cloud Summit event information. 

 

SuccessMeter, Nokia

IA, UX, Art Direction, Conceptualisation, Copywriting

A social media platform targeted at young entrepreneurs, the SuccessMeter drew over 25,000 visitors in under 3 months, with top-scorers gaining bragging rights to almost 4 million social points.


Ponds Clear Balance iPad App, Unilever

IA, UX, Art Direction, Conceptualisation, Copywriting

The first iOS app we ever did at Comwerks! And it was all done in 5 days - much to our client's surprise - and delight!

 

eCitizen Alpha, Government of Singapore 

IA, Design & Conceptualisation, Copywriting

A redesign of eCitizen.gov.sg from the ground up. Rather than having users click-through a pile of menu items, they search for what they're looking for, and get to the right content in a click or two.

Update: eCitizen featured as a Straits Times success story


SMRT, Singapore 

IA, UX, Design & Conceptualisation

70% of SMRT's visitors come to their site to get information on their trains, buses, and taxis - info that was pretty hard to find on the old site - so naturally, I put that right upfront. Another noteable design enhancement is the interactive HTML5/CSS3 network map. Thanks to my great coderfolk, all people have to do now to find the fastest route is click their starting points and end destinations. Images shown are from the final comps and may differ from the actual site.

Update: The new SMRT website saw a marked increase in visitorship. Pageviews averaged at 1 million views a month, while the website registered 250,000 unique users monthly in the following 12 months since its launch. Users were particularly pleased with the regular updates on service stoppages as well as the interactive network map - two standout features that drew many repeat visitors to the website. (Source: Comwerks: SMRT)


Spooktacular 2010, Sentosa, Singapore (Proposal)

Design & Conceptualisation

We didn't win the tender, but considering it was done in 4 hours tops (it was a very rushed job), I'm pretty happy with the result.

 

Building & Construction Authority (BCA), Singapore (Proposal)

Design & Conceptualisation

 

GoCare - Global Volunteer Day, DHL (Proposal)

IA, Design & Conceptualisation, Copywriting

Volunteers as heroes - ordinary folks can save the world!

 

Home Team, Ministry of Home Affairs, Singapore (Proposal)

Design & Conceptualisation, Copywriting

 

Monetary Authority of Singapore (MAS) (Proposal)

IA, Design & Conceptualisation, Copywriting

Main & sister site redesign to inject more user friendliness while updating the look.