User Experience and Product Design Portfolio

 
Ryan Nance

Ryan Nance

iPhone, Android & Windows Apps I've Designed For:

  • Bounce (iOS, Android) forthcoming
  • Atom Tickets (iOS, Android)
  • Flipagram  (iOS, Android)
  • Tradesy  (iOS, Android)
  • Twenty20  (iOS)
  • Wonderwall (iOS & Windows)
  • SKYE Weather + Photos (iOS)
  • PageQuest (iOS)

I've been designing user experiences for digital products and systems for more than 15 years now. Here is a selection of some of my work, both the end products and the steps along the way. 

My core strengths as a User Experience practitioner: creative problem solving with the ability to articulate in a clear and compelling way a vision of a surprising and successful user experience.
 
In-app Camera for Flipagram

In-app Camera for Flipagram

SKYE Weather + Photo (2012)

Design Strategy, Design Direction, Information Architecture, Interaction Design, Prototype Engineering, Content Design, Usability Engineering, Service Design, Optimization, Product Design.

 

Redesigned photographer profile on Twenty20.com and in the app


New closet design for Tradesy.com

New closet design for Tradesy.com

Redesigned closet for sellers on Tradesy.com 

Read the whole story


Presentations & Documents

Design Process for the Digital Closet on Tradesy
This is the trailer for the full lesson (http://5thin.gs/ux-design-tradesy-closet) on UnCubed

Getting to the root of experience design

Getting to the root of experience design

Building for Exceptional Experiences

This was the lead presentation for a panel discussion at General Assembly in Santa Monica, which included a Lead Engineer and Product Manager from Tradesy, along with Experience Designers from AirBnB and Facebook.

Design Strategy and Planning

Design Strategy and Planning

Design Strategy presentation


Presentation (heavily cribbed from Adaptive Path's Subject to Change) given to internal stakeholders and key client stakeholders at the beginning of a process to clarify project goals and align product goals.

User Experience Overview

User Experience Overview

User Experience Overview

As part of my continuing role as change agent, I presented this to C-Levels to help contextualize the opportunities and benefits of working from a UX perspective.

 

Digital Service Design

A digital service plan presentation, given to the collected marketing board for VisitFlorida in late 2010, to set the direction, articulate the vision and gain stakeholder buy-in.

 

Touchpoint Matrix

Touchpoint Matrix

Touchpoint Matrix

When there are multiple channels that need to be choreographed to provide a seamless and productive user flow, I have found great resource in the touchpoint matrix.

 

User Journey Map

User Journey Map

User Journeys

Before locking in any functionalities, the User Journey Map allows for charting the actions, information needs and decisions involved in a user's successful visit to the site. This map becomes the basis for functional specs, wireframes and page type inventories.

Candidate Mood Map

Candidate Mood Map

User Mood Map

An often overlooked aspect of the interactions we are designing for is the emotional needs and the dynamics of mood, and the mood map is an attempt to begin to chart and document that aspect.

User Task Flows

User Task Flows

User Task flows (pdf in new window) 

Flow map (created using VUE) to document the main interaction decisions for a user when building a trip, creating, mananging or publishing their user generated content.

 

Features Book

Features Book

TravelOk.com Feature Book

An evolving co-created document to capture, clarify and communincate the main site features and functionalites from a user's point of view. Used as the basis for subsequent interaction, information architecture, information design and development decisions.

Web Process

Web Process

Our Web Process (PowerPoint 2MB)

A PowerPoint presentation to communicate the web design process I developed to our internal team members, stakeholders, key client stakeholders and other partners. There is animation on most slides, so waiting a moment or two on each slide will help reveal each slide's full meaning.


Schematics, Wireframes & Prototypes 

Clickable Prototype

Clickable Prototype

TravelOk.com Navigation Prototypes

A collection of very lo-fi sketches strung together in a flash file to demonstrate the relationships between navigation elements and site sections. Also a series of narrated screencasts to explain, demonstrate and contextualize the decisions.

Sketch Prototype

Sketch Prototype

SKYE Weather + Photo Sketch Prototype

Exploration of structures, functions, architectures and navigation ideas through lo-fidelity sketches for the SKYE app.

Weddings Microsite Lo-Fi prototype

Weddings Microsite Lo-Fi prototype

Weddings Microsite Lo-Fi prototype

Higher-fidelity wireframes to demonstrate site concepts, navigation paths and business opportunities (sponsored content).

 

Paper Interactive Animation 

Stop-motion paper animation to explore, script out and define the fine nuances of the interactive elements, in this case of VisitFlorida.com.

 


Selection of Sites and Apps

Twenty20.com (2015)

PurpleClover (2013)

Design Strategy, Responsive Design Direction, Information Architecture, Interaction Design, Prototype Engineering, Content Design, Usability Engineering, Service Design, Optimization, Product Design.

Responsive



2013-05-08_23-42-57.png
2013-05-08_23-43-48.png
2013-05-08_23-44-10.png
 

PageQuest (2013)

Information Architecture, Interaction Design, Design Direction, Service Design, Prototype Engineering. 


SKYE Mobile Web (2013)

Interaction Design, Design Direction, Information Architecture, Information Design, Prototype Engineering, Usability Engineering.


Wonderwall iPhone App (2013)

 Interaction Design, Design Direction, Information Architecture, Information Design, Prototype Engineering, Usability Engineering.


ww_w8_wall_panel01.jpg
OUbRMn4mRQTamipqIQkjfcxT4VPwkut7l_WNNKnhcak.jpeg

 Windows 8 App for Wonderwall (2012)

Interaction Design, Design Direction, Information Architecture, Information Design, Prototype Engineering, Usability Engineering.


Large Scale Entertainment, Marketing and Transactional Sites 

 

Skye on AOL Weather (2012) 

Design Strategy, Design Direction, Information Architecture, Interaction Design, Prototype Engineering, Content Design, Usability Engineering.

Visit Florida (2010) 

Design Strategy, Design Direction, Information Architecture, Interaction Design

North Shore LIJ Careers (2011) 

Design Strategy, Design Direction, Information Architecture, Interaction Design, Prototype Engineering, Content Design, Usability Engineering

TravelOK.com (2009) 

Design Strategy, Information Architecture, Prototype Engineering

 

Visit North Carolina (2008)

Design Strategy, Information Architecture, Interaction Design, Information Design, Content Design, Prototype Engineering, Usability Engineering

VisitNJ.org (2009) 

Design Strategy, Design Direction, Information Architecture, Interaction Design, Prototype Engineering, Content Design, Usability Engineering

 Grand Junction Visitor & Convention Bureau (2007)

Design Strategy, Design Direction, Information Architecture, Information Design, Interaction Design, Usability Engineering

 Visit Florida (2007)

Design Strategy, Information Architecture, Interaction Design

The Official Website of St. Augustine, Ponte Vedra & The Beaches (2006)

Design Strategy, Design Direction, Information Architecture, Interaction Design, Usability Engineering



Sites for Individuals and Small Groups

Devereau Chumrau (2011)
Actor

Design Strategy, Visual Design, Information Architecture, Content Design, Visual Development

 

FSU/Asolo Conservatory 
(2012 & 2013) 

Design Strategy, Visual Design, Information Architecture, Content Design, Visual Development

Tony Stopperan (2012) 
Actor/Writer

Design Strategy, Visual Design, Information Architecture, Content Design, Visual Development