Interactive E-learning prototypes

at Six Red Marbles, I was tasked with the UX/UI design for 2 Interactive E-Learning prototypes, to be created & coded in Axure. Working within a time-compressed 6 week delivery schedule, I worked with SMEs and Learning Experience team to create these axure prototypes utilizing interactive features like drag & drop, programatic animations, and conditional click-thru coding.

View the UX process & challenges.

3rd grade Math Landing page 3g Math - Axure coding Bio Lesson Axure workarea

Exercise: A LMS interface

As a design exercise, I sought to design the interface for a sample Learning Management System. I drew on my previous research for The Boston Consulting Group and Harvard University to come up with likely business requirements and user goals, creating personas, IA, and then wireframes in Axure. The wireframes below show both desktop and mobile views.

LMS Personas LMS IA/Content Map LMS Home PageLMS Dashboard LMS Catalog Browse

BCG Mobility Marketplace Web App

In contract with the Boston Consulting Group, I developed the UX and UI design for their internal web application to be used by their consultants, managers, and HR, to search, register interest, and track global opportunities. The challenge was to portray dense tabular data in an intuitive format that degraded elgantly on a minimum screen size of 768px (ipad in portrait mode). The solution was to first guide the user to one of several search paradigms (general browsing, geographic, filtered search, or within practice areas. The dense tabular data is then contextually rendered, based on a user's role, using a progressive disclosure model to keep visual clutter to a minimum. My involvement was to take user stories and process flows and formulate the IA, create reiterative wirframes (using Axure), create html mockups, then develop the overall visual design using CSS. This was project done in an agile development environment.

System page Dashboard Evolution of the Browse component

BCG Career Development Web App

In contract with the Boston Consulting Group, I developed a visual design for their internal individual Career Development Review application. Based on employee role, they are served contextual content for their (or their staff's) career review process. My goal was to provide a clean IA with quick visualization of content (many will use this on a mobile platform) while observing BCG's style guide that I had also created. These wireframes were used in a business case proposal for future development.

The sample images are high fidelity wireframes from Axure.
View More wireframes from this project.

Advisor's home screen wireframe Advisor Mobile wireframe Event full screen wireframe Mobile design

Collaborative Annotation Tool

The Collaborative Annotation Tool (CATOOL) allows multiple users to tag and annotate text, imagery, and video. Challenge was to display the appropriate data and input fields in an intuitive manner that didn't require a legend or help screen. The app was also spec'd to be responsive for mobile devices.

Responsive HTML prototype of the wireframe layout

CATOOL Annotations wireframe CATOOL New Annotation wireframe CATOOL mobile view Early CATOOL Audio wireframe

Flashcard App

I was tasked with creating the interaction and visual design for a Flashcard application. Here are some preliminary wireframes with notes. The first wireframe depicts the layout for a desktop screen. The second wireframe depicts layout, structure, and process flow for mobile platforms.

Flashcard App wireframe Flashcard App Mobile wireframe

Harmony Lab web application

The Harmony Lab web app started out as a student-built proof-of-concept that we used as abaseline for functionality. I then used this to gather assets & expectations for the updated function & design. After user analysis, I developed the interface & informational layout in Photoshop from which an html mockup was created. Developers then used the html mockup as a template for the final product. After product launch, I mocked up some additional future enhancements (individual note playback & scrolling).

proof of concept Initial organization of assets for the app Photoshop mockup of HarmonyLab layout Future version ehnhancements


Updating an existing E-Commerce website and making it responsive. The medium-fidelity wireframes, created in Axure, show layout for both full-width and narrow mobile screens. Utilizing user & dealer feedback data, I have repositioned the different sections (Image, Description, and Transaction areas) for a more fluid user flow.

Store Full-width wireframe Store Mobile wireframe Store User Personas

Back to Top