Image of Justin Ratcliffe

I am from St. Louis but have lived in Honolulu, Chicago, Atlanta, and Barcelona.

I am currently completing a Masters in Human Computer Interaction at Georgia Tech.

I am passionate about how people interact with technology. I am an evangelist for the perfect experience and have a minimalist aesthetic because I find simplicity to be elegant and optimal.

I also love art & design (especially Type and Grids), outdoor recreation, playing music, motoring, and lifelong learning.

Research, Design, & Development

Front Page: Augmenting news to facilitate skimming and discussing

Augmented News Article

The user has found a story they want to read and have clicked their bookmarklet in their browser.

Less important parts of the article are semi-transparent and contextual comments are shown in the right column.

Leaving a Contextual Comment

The user has selected text in the article and is given the option to leave a comment. The comment will appear directly to the right.

Contextual Comments Displayed In-Line

Here, a user has hovered over a contextual comment which highlights what the person was commenting on.

The user also has the option to reply to that particular comment which will start a thread

Overview

WHAT

  • Personalized bookmarklet
  • User finds a news article on The New York Times, clicks a bookmarklet, and gets an augmented webpage that:

    1. Displays the most salient parts of the article

    2. Allows the user to create contextual comments on words, phrases, paragraphs or the entire article

    3. Shows contextual comments from others in line

HOW

  • Early designs done in Omnigraffle, then moved to Illustrator
  • Bookmarklet is created with Javascript which communicates with a Ruby on Rails app which stores the data


See the poster that won a travel grant at GTRIC 2011

At A Glance: Custom Level Summaries for News Consumers

Home Page

Home page displaying current article titles and hook sentences from The Guardian.

Each article has three links for short, medium, or long summary.

Short Summary Clicked

If the user clicks the button for a short summary, an overlay appears with the 5 most important sentences.

Long Summary Clicked

When the long button is clicked, the user gets the 20 most important sentences in the article.

Overview

WHAT

  • News summarizer
  • Pulls in news articles from The Guardian and creates a short, medium, and long summary

WHY

  • Help people determine their interest in a story before reading it
  • Help people consume the news they want faster

HOW

  • Java back end developed by Greg Garrett
  • HTML/CSS/JS front end designed and developed by myself


View the Site

Read the Final Document

Opencast Matterhorn: Learning Online

Dual Stream Media Player

Left screen is the presenter and the right is the overhead projector.

Lecture is broken into chapters which are displayed under the video scrubber.

Visual Video Navigation

Previews of the video are displayed for video navigation.

Embeddable Version

A simpler version of the player was designed for embedding into sites.

Toggle Between Streams

The user may toggle between the presenter and slides video streams with the button on the right.

Overview

WHAT

  • Website for people to watch lectures and slide progressions
  • Dual screen media player
  • Includes advanced functionality for note taking, discussions, and bookmarking

WHY

  • Matterhorn provides an automated system to universities for recording and uploading lectures and slides while also making them available to students online.

MY ROLE

  • I was lead interaction and graphic designer of the media player


Download PDF to see more

LiquidText: Multitouch Active Reading Experience

Displaying Metadata

Allowing users to draw and highlight on documents is great - but this is a computer and it should make it easier to find those annotations too.

This design lets users "filter" by annotation and highlight color.

Filtering Metadata by Yellow Highlights

Here, the user is filtering by Yellow. So all yellow highlights, yellow writing, and yellow tagged excerpts are displayed.

Filtering Metadata by Yellow & Blue Highlights

Here, the user is filtering by two colors: Yellow and Blue

Overview

WHAT

  • Refining multitouch experience for LiquidText
  • A multitouch active reading application for the iPad
  • Supports highlighting, creating excerpts, connecting parts of the article, commenting, and more

WHY

  • Attempting to advance the medium of tablets to approach replacing paper as the dominant active reading platform

HOW

  • Quick iterative mockups with Balsamiq to introduce new features and refine existing ones


Contributions

The pace was fast and the designs were conceptual so Balsamiq was used to generate new mockups twice per week for discussion.

Reversibility

LiquidText had no option for the user to reverse an action. We added Undo, Redo, and Delete to the feature list.

Gestures

Adding gestures for features was the primary goal. We added the following:

Text Manipulation
  • Select Text
  • Highlight Text
  • Collapse Document
  • Create Comment
Document Navigation
  • Focus+Context Document Views
Workspace Navigation
  • Magnifying Glass
  • Workspace Map
  • Slider to change workspace size
Excerpts
  • Move Elements
  • Select Multiple Elements
  • Enlarge Excerpt
  • Shrink Excerpt
  • Rotate Excerpt
  • Group Excerpts
  • Link Excerpts

Daily Doodle: Fostering Creativity

Community Homescreen

The home page prominently displays the doodle prompts and user-submitted responses.

To submit a response, users may draw in the browser or upload their own image

Jenna's Notebook

A view of a user's doodle submission history

This is intended to help people track their progress through their doodle submissions.

Browsing your community

Members are encouraged to draw their own avatar.

View Member Submitted Doodles by Day

Users may browse user submissions by day.

This encourages users to examine how others are exercising their creativity and drawing skills.

Overview

WHAT

  • An online community that encourages members to draw simple doodles to curb frustration during the drawing learning curve

WHY

  • Investigate creativity, drawing, and motivation for beginner drawers

MY ROLE

  • Concept generation and design of the website


Virginia Highlands: Introducing a Neighborhood

Home Page

The home page provides general information regarding the neighborhood and its history.

Feature: 24 Hours in the Highlands as a...

To demonstrate the neighborhood's versatility, articles were written detailing what different demographics could get out of the neighborhood.

For example, a college student may want to explore coffee shops and bars whereas a young professional may want to check out the shopping and real estate.

Anivers

A traditional yet funky typeface.

Overview

WHAT

  • A website detailing a neighborhood's vibe, history, highlights

WHY

  • Demonstrate knowledge in design grids, typography, and HTML/CSS

MY ROLE

  • Site content, design, and development


View the Site

Visualizing Happiness

1980

In 1980, nations begin to display loose grouping.

2000

Predictably, GDP and Life Expectancy rise along with happiness ratings in most countries.

Our two outliers are South Africa and Hungry with the lowest ratings in all three correlates.

Overview

WHAT

  • An interactive visualization of this dataset which included data on happiness ratings and GDP across nations

WHY

  • A project for an information visualization class where we tried to make sense of a large dataset

MY ROLE



Download

Graphic Design

Photo Manipulation: Creating a Surreal Image

The goal here was to take an image and add to it to make it surrealistic.

Photorealistic Vector Art: Vector from Raster

This project required me to create a photorealistic vector based on an original photograph.

Corporate Identity: Creating a look for a nonprofit

Primary and secondary logo for the organization.

Business card and stationary.

Magazine ad to introduce the organization.

Overview

For personal interest, I took a graphic design course at Savannah College of Art and Design (SCAD). These were my class projects.

Resume

Get in touch