This was the first project where we reinvented landing page of a program in Moodle ( Learning Management System). Part of the strategy was to incorporate Personas representing a diverse ethnicity, gender and age to be inclusive of all.  We were limited to four people. And did a photoshoot with those who were available. As part of the interaction design, when hovering over each persona, the character would animate to create pleasure and illustrate creativity.  


Sometimes a designer’s design decisions are overruled and choice of color was one of those decisions.  Although the magenta and blue trend colors (at the time of design) are bright, bold and pop for attention, they do not align with the corporate brand colors. The program designed to welcomes New Manager into the VCH culture now lacks the corporate colors. On the plus side it is enhanced with Corporate typography. Below are the proposed color decisions advocating a fund diverse energetic composition within the VCH brand colors. 

The module is designed in Articulate Storyline.
Here is a quick demo of the interaction of New Manager Orientation Program. Transitions created a very smooth flow in interaction.

interview video

The curriculum structured by the ID and SMEs  is  four modules  with one interview video for each module. In collaboration with colleague designer, ID and SMEs we proposed selection of personas  strategically across  coastal to get racial and geographic, and gender diversity. 

Crew: 2 people on Camera and one person asking interview questions

Camera: 2DSLRs

Post production: Premier, After Effects, Photoshop, Audition

Date: Nov 2016

site architecture

When you get a storyboard for a e-learning module it is important to lay out the flow of information through sequence and hierarchy and map a structure that allows the user to access the information they seek quickly. Understanding the user’s needs and expectations is important. Poor organizing structure and nomenclature can impact the user experience negatively. Of course during the cycle of design the site architecture can change but here is where you get default back and obtain a mental picture of the entire map. Here is where you can create patterns and identify structures that are not logical.


I find that a lot of the site architecture models lack information about the navigation. In the old days navigation was a simple hyperlink to another page. But now there are all sort of display formats and navigation designs for content: carousel, pop up, new page, iframes. And maybe at these stage of information design it is not necessary to identify these navigation interaction but in the recent years I have found it confusing to read simple site architecture models. So to better communicate information, I have started to use icons that symbolize navigation where there is certainty.

Pin It on Pinterest

Share This