 |
 |
 |
|
|
|
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.
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.
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.
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.
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
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.
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).
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.
