Ian Jennings

UX Designer & Developer

Over the years I’ve put myself in the shoes of e-learning students, consumers, news readers, market traders, physicians and patients. Through varied industries, in design or code there is one constant. Empathy for the user is the origin of everything I create.

Here are some of my doings. Further exploration is available upon request

Chaperone

Demo page

Chaperone is a lightweight, vanilla javascript plugin for creating responsive site tours.

Daily Health Hub

Screen shots

This was the last project I worked on at Datu. The idea was a program delivery system that would allow physicians and program managers to push nudges to patients with specific illnesses.

I was involved from the conceptual design all the way up through development of the production code. The following screen shots are taken from the responsive prototype.

Physician portal

Screen shots

Datu Health was originally hired by one client to put a new, usable face on their physician and patient portals. The physician portal design evolved over 4 versions into what you see in these screen shots. These are taken from the coded prototype that we used for testing/feedback with physicians.

Patient portal

Screen shots

The other side of the one way mirror in the Datu equation is the patient portal. This serves as a patient's daily reflection of their health and provides access to communicate effectively with providers. Again these are taken from the prototype.

Patient & physician conversations

Screen shots

I managed the experience design and prototype development for this feature. We wanted to create a more familiar conversation interface for people who are used to social media messaging. This design draws inspiration from gmail, basecamp and facebook to present a familiar experience.

The physician side of the conversation design was purposefully kept in sync with the patient's view. This allows for more clarity in any verbal communication about the written messages.

Design library

Library

We on the UX Experience team wanted to create a way for developers to access html and javascript code snippets that, when used in conjunction with the imported styles, would create predictable and consistent UI.

This library served as a jumping off point for any developer creating a new layout. Designers could also pull from the library to create their wireframes. This led to a common language across the two teams and cut down on confusion in translation.

Older work

JP Morgan - iPhone

Screen flow

My first task working at Wall Street On Demand was to design an iPhone app to pitch to JP Morgan. This app would allow their investors to access their portfolios and make adjustments if needed.

NAB

Sector Indices

This interactive visualization allows the user to quickly see which sectors gained or lost the most in market cap in a selected day. It can be played back to show where they stood throughout the day.

Markit Hub - iPad

Wireframes (PDF)

I was responsible for gaining a complete understanding of what the current hub.com product provided on the web and translate that to the iPad while taking advantage of the interface to improve upon the experience.

These wireframes were my first step after sketching to start outlining ideas for the product.

Branded UI (PDF)

I worked with a team of other designers to finalize the functionality and apply the UI to the app

Bezier Curve Test

I spent a lot of time working with a developer to create a working example of what we wanted to see on the dashboard of the app. The idea was eventually scrapped for that project but will be used for hub.com

Tap and hold video

In order to get an idea across to a white label client I had to make a quick video with keynote to explain a tap and hold interaction

Markit Hub - Web

Early exploration - Directory | Clustering

We were trying to throw out really wild ideas against hub.com to see what stuck. These were a couple of my early concepts.

Whiteboard Session (PDF)

I drew these up to explain my idea for the interactive "hub bar" that would be the key element of the new hub.com design.

Interactive Hub Bar Demo

People were having a tough time grasping the idea of the hub bar from early wireframes so I decided to put it into code. This helped better explain the interactions and assisted me in finding gaps in the design that the wireframes did not cover.

Click around on the bar at the bottom of the page to discover all of the features. Be sure to try and chat with someone from the directory list. I even wired up how conversations would look.

Hub.com UI - Stream | Briefcase App | Provider App

Some samples of the branded UI created to show the new styles of hub.com and to explain the ideas behind hub "apps"

Protonotes

Create new note

An internal project to improve our communication tools around prototype feedback and revisions. This system would allow users to select areas of a prototype and create a note about that section. They could also create tags and link the area to another prototype to create a simple interactive click through prototype.

MCS Header

Interactive wireframe

Another designer had come up with the concept for an overflow drawer of tools in a dock of sorts. I questioned the functionality of the design so I developed it out so we could play around with it and see how it actually worked. Drag the window so the top menu overflows into the drawer indicated by the flashing of the button on the right. Click the button to see the overflow. Drag items around between the dock and the overflow.

I concluded that there was a better way and coded it as well for comparison and that is seen lower on the page. There is no more overflow and it also allows the user to only have a few tools in the main dock even if they may have access to many

Rular

Interactive Demo (Work in Progress)

I wanted to create a tool for doing a task that we designers have to do all the time, measuring our designs for developers. I have lots of plans for this but it is currently in its infancy.

Mouse over the image and use the magnifier to click first on the end of your measurement. Find the end of the area to be measured and click again.