See What You’ve Been Missing
Humintell.com
The client's brief required creating a multi-faceted web site with the following features:
The client's original targeted customer base was law enforcement personel and similar types of professionals, i.e. TSA's requiring training in quickly identifying emotions in individuals in potentially dangerous or harmful situations.
The web site design was built to look simple and, in fact, slightly "old-fashioned" for 2008 design standards. The concession to be current was to use videos on the home page and javascript-based animation to avoid the use of Flash.
UX requirements: Develop User Personas, create Page Flows, Interaction Flow, Site Navigation and Wireframing (both of the site and 2 of the online training programs).
Design requirements: included final art (Photoshop converted to Wordpress theming), navigation and additional elements (i.e. Beta web site page, interactive framework for online training programs)
Interaction requirements: Incorporation of e-commerce solutions within the site, development of interactive online training programs (using Flash incorporated with mySQL database)
Technical Direction: Project management to incorporate SEO and marketing strategy team, web development using CMS, e-commerce and proprietary interactive training program.
SKETCHING AND STRATEGY: where visual thinking and process thinking meets.
One of the first design sketches, indicating a collection of images of "liars".
Navigation map design for site: TOP LEVEL, secondary and additional linkage. (Designed in Omnigraffle)
PREPPING FOR LAUNCH: Reaching out to discover where interest already exists, and building the subscription base for email/social media marketing.
Design for the Beta (pre-launch) landing page, with a large signup area to invite subscribers to the email newsletter.
LIVE SITE AT LAUNCH:
Key entry points:
Site at launch, with full interactivity of images of publicly known "liars", each leading to landing pages of static content; videos explaining site content themes, and Training options and newsletter subscription signups above the fold.
WIREFRAMING: creating an online interactive training course
WIREFRAMING: one of the pages used to create the online interactive program to learn micro-expression facial recognition. Page shows tabbed navigation, visual content area and selection buttons indicating emotions.
WIREFRAMING: Notes on "Practice" tabbed area of micro-espressions training, showing text and additional instructions on functionality.
WIREFRAMING: Further development of the "Practice" tabbed area, with notes on functionality of additional buttons.
Next phase of development, showing the same page from the wireframes above, with more developed artwork/images and interactivity in place.
Color palette for the site and training platform
Basic flow diagram to incorporate shopping cart program running independently from blogging site and online training software. Customer must purchase a license key to use the online training; the key (along with user information for training test scoring etc) is stored in an online database.
