"On the Road" Amplified Edition app

"On the Road" Amplified Edition app

Extending the initial design work by colleague Mike Gottschalk, I fleshed out the detailed UX for the  iPad edition of Jack Kerouac's classic.

2011

  The navigation of pages and supplemental content had to be comfortable and easy.

The navigation of pages and supplemental content had to be comfortable and easy.

  I typically use “statecharts” like this to define navigation and UI state.

I typically use “statecharts” like this to define navigation and UI state.

  Since we were building an ebook reader from scratch, even the basic engine features had to be specified: pagination, search and bookmarking.

Since we were building an ebook reader from scratch, even the basic engine features had to be specified: pagination, search and bookmarking.

  The visual design and coding were top notch. Our work garnered a Publishers Innovation Award for Penguin Books.

The visual design and coding were top notch. Our work garnered a Publishers Innovation Award for Penguin Books.

eBook concepts

eBook concepts

I also conceptualized how ebooks could be “illuminated” to answer reader questions like I had on this page of Pride and Prejudice: Who’s talking? Who are they talking about? Who again is Sir Williams? Where is Netherfield Park? Etc.

A simple touch in the left margin then a slide up or down would present the answers.

eBook Concept Walkthrough v2

Watch this screencast to learn how I developed and presented new eBook features.

Bay Photo website

Bay Photo website

Currently, the pro photographer customers of Bay Photo use a Java-based desktop app for ordering a huge variety of products. I designed a web-based solution to replace it.

2013

jeff_southard_portfolio.058.jpg

Bay Photo Wireframes Walkthrough v2

Watch this screencast to see how I use clickable wireframes to approximate user interaction.

Spread App

Spread App

Before Pinterest dominated the product category, I worked with another startup to make it easy and rewarding to share things – and brands – you love with friends.

  How could you quickly specify the brand of something you love?    After you shoot the thing, just shoot it’s label. That was one of many simplifications I suggested.

How could you quickly specify the brand of something you love?

After you shoot the thing, just shoot it’s label. That was one of many simplifications I suggested.

  I created clickable UX wireframes to simulate the entire flow through the native app and website. It covered all the user stories: browsing, capturing, sharing, editing, and ranking things, brands and categories. Finding friends, creating polls – everything.

I created clickable UX wireframes to simulate the entire flow through the native app and website. It covered all the user stories: browsing, capturing, sharing, editing, and ranking things, brands and categories. Finding friends, creating polls – everything.

  To start the technical discussion, I suggested a data model to match the UX.

To start the technical discussion, I suggested a data model to match the UX.

  And I created state diagrams for important aspects of the design.

And I created state diagrams for important aspects of the design.

iTunes Extras & iTunes LP

iTunes Extras & iTunes LP

Our team at 1K Studios produced many of the launch titles for Apple’s answer to DVD special features back. The downloadable packages were essentially mini-websites you navigated with mouse (desktop) or 5-way remote (Apple TV).

2009

  I tested the preliminary UIs with novice users and then developed a usability checklist for visual designers and programmers to avoid pitfalls that confused users. Bit-by-bit, we figured out what worked in this new medium.

I tested the preliminary UIs with novice users and then developed a usability checklist for visual designers and programmers to avoid pitfalls that confused users. Bit-by-bit, we figured out what worked in this new medium.

  I spent about two years re-imagining the movie, TV and music consumption experiences on tablet and set-top platforms. I lead the creative and technical development of three well-received demo apps.    As of 2014, the ideas have not yet shipped in products – but I’m still hopeful. :-)

I spent about two years re-imagining the movie, TV and music consumption experiences on tablet and set-top platforms. I lead the creative and technical development of three well-received demo apps.

As of 2014, the ideas have not yet shipped in products – but I’m still hopeful. :-)

The Making of Collagewall

The Making of Collagewall

In 2008, I invented a clever picture hanging system. Since then, I have refined it and built Collagewall, a small business that I run in my spare time.

  Before Collagewall, there was no easy way to turn your digital photos into a collage of pictures on the wall.    I set out to design a complete solution – from online editing to on-wall installation.

Before Collagewall, there was no easy way to turn your digital photos into a collage of pictures on the wall.

I set out to design a complete solution – from online editing to on-wall installation.

First Prototype

First Prototype

For an empty wall in my house, I wanted something artistic and personal. Inspired by the collage holiday post cards I had been sending out for years, I brought the “snap-to-grid” concept from drawing apps to the wall using parts from a local hardware store.

The Patent

The Patent

After a survey of friends suggested that there was a market for the product, I prepared and filed a provisional patent and later, a regular patent application – including dozens of drawings.

It would be 5 years before the patent issued.

Test Customers

Test Customers

For the first few test customers, I used a paper-based collage design process to work out the user experience of what would become an online editing tool. Simultaneously, I refined the physical product and kit packaging.

Iterating on Installation

Iterating on Installation

Making installation precise and fool-proof was the central challenge of the entire project. It took at least three major iterations before arriving at the simplest solution. The end user gets a custom cut piece of grid paper to hang on the wall. 

Iterating on the parts

Iterating on the parts

Not satisfied with off-the-shelf parts, I designed my own push-in peg. And socket. And grid paper. I designed and refined dozens of parts that make up the system.

Along the way, I have learned how to prototype, specify and source all sorts of parts using all sorts of manufacturing techniques.

Everything included!

Everything included!

After countless hours and custom part design, it was as easy as 1-2-3. Tape up the grid template, insert the pegs, and hang the pictures.

Fool-proof

Fool-proof

I created a printed instruction sheet that directs customers to an installation video I shot and edited. In hundreds of installations, not a single customer has called needing help.

Minimum Viable Product (MVP)

Minimum Viable Product (MVP)

Acting as client, UX designer, front-end and back-end engineer, I put together collagewall.com, a minimal website to complete the customer experience.

  Starting with a NYTimes write-up in 2010, collagewall.com has seen decent traffic every since – all without any marketing.

Starting with a NYTimes write-up in 2010, collagewall.com has seen decent traffic every since – all without any marketing.

  I have never seriously developed collagewall.com as it’s just a proof-of-concept. Yet it has gone on to process almost 1,000 orders – averaging $200 each.

I have never seriously developed collagewall.com as it’s just a proof-of-concept. Yet it has gone on to process almost 1,000 orders – averaging $200 each.

  And the data model has held up well over time.

And the data model has held up well over time.

Partnerships

Partnerships

In 2010, after proving that the product worked, I travelled to photography trade shows and solicited partners to market the Collagewall system more widely.

By 2012, part sales to partners to overtook collagewall.com sales to consumers.

Partner support website

Partner support website

Bringing each new lab online is a time-consuming process I needed to streamline. Now a single, simple website guides labs through the process.

They get 1) a visual overview the system, 2) a sample kit with video instructions, 3) pricing calculators to determine their margins, 4) a catalog of layouts to integrate into their ordering system, and 5) marketing content for their website and ads.

  For labs, I automated everything – even the rendering of Collagewall displays using their own photography.

For labs, I automated everything – even the rendering of Collagewall displays using their own photography.

I design it – they sell it

I design it – they sell it

Now labs use all sorts of marketing materials (which I’ve designed) to sell a system and brand (which I’ve designed) to their customers.

This relationship with partners has been a way for me to focus on my passion: UX and product design.

  Now a distributor sells the Collagewall system to smaller labs for me. They travel year-round to trade shows, promoting and explaining the product – using custom displays I designed.

Now a distributor sells the Collagewall system to smaller labs for me. They travel year-round to trade shows, promoting and explaining the product – using custom displays I designed.

  A Collagewall display travels to a tradeshow in Las Vegas.

A Collagewall display travels to a tradeshow in Las Vegas.

Thousands of happy customers

Thousands of happy customers

At this point, thousands of customers have used Collagewall to exhibit their passion on walls throughout the world. Their love of the product delights me.

jeff_southard_portfolio.034.jpg
jeff_southard_portfolio.035.jpg

The video is getting out-of-date, but it’s the best overview of the complete UX I designed.