Jeffrey Martini

Client design requirements called for clean, uncluttered layout with minimalist approach that evokes a inspirational feeling. Designed as a responsive website, once below 480 pixels wide, the navigation menu becomes a touch-friendly expandable menu.

Ellen Mattingly Law website

I designed and implemented this responsive website to represent the firm's professional yet compassionate persona. Mediation, by nature involves conflict but the clients wanted the website to make a viewer feel comfortable and welcome. The use of whitespace upholds their professionalism while the typefont and image of the owner welcomes them into the site. The website structure, on-point content, and SEO brought them first page ranking on Google Search.

http://www.bostonareamediation.com

The Presidential Instructional Technology Fellows (PITF) site is a drupal CMS-based website utilizing a custom theme that I designed. It's design goal was to showcase the numerous digital projects of Harvard's IT Fellows. I also contributed to creating the information architecture and taxonomy of the site.
My involvement: Interface Design, Custom Drupal Themeing, Information Architecture, HTML, CSS, Graphic Design

http://pitf.harvard.edu

An html prototype of a responsive micro-site within the Harvard Graduate School of Arts & Sciences. Designed to fit within the GSAS ecosystem yet distinguish iteself from the other pages. Coded in a mobile-first structure, the pages are fully responsive, including the fluid Advisor Resource flowchart.

GSAS Help page prototype
GSAS Advisor Resource page prototype

The Harvard Divinity School Library is a drupal CMS driven website utilizing a custom theme I created. The multi-faceted search interface I designed went through rigorous user testing and was so well liked by the school, it was incorporated in many of its sister library sites.
My involvement: Interface Design, Custom Drupal Themeing, HTML, CSS, Graphic Design

http://www.hds.harvard.edu/library

Intranet site using extensive Flash & XML to showcase the departments capabilities.
My involvement: Flash Programming, Interface Design, HTML, XML, CSS, & Javascript Markup

http://etg.hbs.edu

An HBS case study featuring interviews using Flash video.
My involvement: Interface Design, HTML & Javascript Markup

http://courseware.hbs.edu/cases/horizon

One of many Harvard Business School online case study applications I created using branded graphics and video.
My involvement: Graphic & Interface Design, HTML Markup

http://courseware.hbs.edu/cases/mini

The design is such that it evokes elegence and top-shelf quality. This site allows the owner to update their menu to both Facebook and this website without having to dive into HTML code.

http://www.cateringbyavenue.com

In contract with the Boston Consulting Group, I developed the UX and UI design for their internal "Mobility Marketplace" web application which allowed consultants, managers, and HR to search, register interest, and track global opportunities within BCG. This multi-faceted web application was targeted for desktop and tablet platforms. The challenge was to provide for multiple search patterns and dense table data displays in an intuitive, contextual layout. Select wireframes for this application are found under the Wireframes tab above.
My involvement: IA, UX, Visual Design, HTML protoyping

For Harvard University, I teamed with music theory instructors and web application developers to create this Open Source educational software. Harmony Lab is an interactive web-based teaching tool that illustrates and teaches harmony by displaying notation patterns via keyboard (MIDI or QWERTY) input and enhances the understanding of harmony by providing instant feedback, musical notation highlighting, and analysis. I designed and developed the user interface with a multifaceted use experience approach that allowed for beginning music theory students as well as experienced instructor user perspectives.

http://harmony-lab.appspot.com (requires a Jazz-soft browser plugin).

This is an HBS supply chain simulation game using a Flash front-end interface that ingests xml data through an open socket connection to a Java backend. Played online by multiple teams assuming roles as Manufacturer, Distributor, Wholesaler, or Retailer.
My involvement: Interface Design, Flash Programming

http://courseware.hbs.edu/beergame

An HBS teaching tool used to illustrate change over time using GIS mapping data. Uses dynamic ingestion of xml to display arrays of images.
My involvement: Interface Design, XML, Flash & Javascript Programming

http://courseware.hbs.edu/multimedia/gdv/

A Flash-driven presentation, originally created as a Director driven Quicktime movie.
My involvement: Interface Design & Flash Programming

http://courseware.hbs.edu/multimedia/yieldcurve

I've produced numerous podcasts for the Executive Education program distributed via iPod. I was responsible for Graphic Design, Audio Production, XML Encoding. On enhanced podcasts, I also created the embedded supporting exhibits.

These are just a sample of the representative cover art for podcasts I produced.

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.

In contract with the Boston Consulting Group, I developed the UX and UI design for their internal web application for 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 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.

Responsive website design front page wireframes. Client design requirements call for clean, uncluttered layout with minimalist approach. The only artwork aside from a branded logo will be an image-based slide navigation(currently where the placeholder bridge graphic resides. Using media queries to determine screen width, once below 480 pixels wide, the navigation menu becomes a touch-friendly expandable menu.

Ellen Mattingly Law website

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