ralph@rgunderson.com

404.518.3010

in: linkedin.com/in/rgunderson

tw: @jrgunderson

I’m passionate about creating useful interfaces that delight – and supporting the underlying teams, business, and user goals.

  • A brand or company that's willing to do interesting, purposeful things
  • A group of creative and talented people to respect & trust
  • Opportunity to contribute my design ability & process learnings

WHAT I DO BEST

WHAT I’M LOOKING FOR

Build and grow teams to solve interesting problems

  • Collaborative design - lead, grow, & mentor product teams
  • Listen & hear the design challenge - synthesis into requirements
  • User and scenario-based interface design
  • Create and improve design processes & systems
  • Product strategy / business development support

CURRENT CHAPTER

  • Leading UX efforts for one of our key customer partners
  • Promote growth of Design System & Interface workgroup
  • Create primary source of record for product artwork
  • Deep-dive discovery for complex workflows & scenarios
  • Promoting agile methods and R&D mindset
  • Direct collaboration with Product, BAs, Engineers & QA
  • Support continued growth of our distributed HX team

Sr UX Design Consultant

2020 - present

PRIOR EXPERIENCES

Director of Research

2018 - 2020

  • Lead Design Studio projects & support our Labs
  • Manage design pipeline across all active clients
  • Drive product research efforts and user studies
  • Launched 5 products within our Innovation Labs
  • Released over 20 new projects & key investments
  • Growth from 7 to 14 designers
  • Across 2 offices - Seattle, WA and Bangalore, India

PRIOR EXPERIENCES

Over 10+ year tenure:

  • 180+ projects across 100+ clients
  • Launched over 50+ apps
  • Grew from 0 to 2 offices + remote team
  • Grew from 4 to 23 team members
  • Grew from 1 to 7 designers
  • Average project engagement: 4 to 12 weeks

UX / Director Design

2007 - 2018

Scan to Unlock - Partnerships with postal carriers allows for secured delivery at a lockbox for residential customers, by scanning the parcel barcode with a connected padlock.

Secured Package Delivery at Point of Acceptance

“Peace of mind for home delivery”
IoT padlock that fights porch pirates

+ Launched on Kickstarter (270% goal)

+ Presented at CES Jan 2018

+ Support for all major US postal carriers

+ Consumer & commercial options

+ Platform improvements underway

Overview

Market Conditions

Market Research - Trends in market show continued growth in packages delivered and a large spike in stolen package searches (via Google Trends data)

Google Trends

BoxLock Porch Access - Various secured porch delivery
boxes may be used. Variability allows for improved
security and personalization for each home.

BoxLock in Context

Lock Mechanism Breadboard - Early hardware assemblies
Allowed the team to test prototypes before final BOM

Production parts were selected.

Testing code with prototype models

BoxLock Unboxing - Each BoxLock comes with a weatherproof, smart padlock; charging cable; instructions and weather-resistant instructional hangtag.

BoxLock in Context

Access Locks from Anywhere

Unlock via App/Barcode - Users with whom you’ve shared your BoxLock access may open with a personalized barcode generated for them, via the app or message.

Package barcode access via these popular carriers

Unlock Access via Secure Barcodes

Lock Overview

Navigation pattern for lock detail allows glanceable access to:

  • Status: Wi-Fi
  • Status: Battery
  • Status: Lock
  • Lock Settings

Additional navigation allows quick access to:

  • List of Packages / status
  • List of Users
  • List of Locks / status

Application Views

Packages List

Delivery status given for each package.

  • Delivered Today
  • Out for Delivery
  • In Transit
  • Information Received
  • Delivered

Need to add UI to Add Package manually, sort list.

Application Views

Packages List - History

Delivery status given for each package.

  • Delivered Today
  • Out for Delivery
  • In Transit
  • Information Received
  • Delivered

Need to add UI to Add Package manually, sort list.

Application Views

Packages Detail

Delivery transit history for each package.

  • Shipping label created
  • Origin scan
  • In transit
  • Transit exception
  • Arrival at sortation facility
  • Arrived at local post office
  • Out for delivery
  • Delivered in BoxLock
  • Delivered - outside box

Additional states are available from various delivery carriers.

Application Views

Edit Package Detail

Update details for your package:

  • Tracking number
  • Postal Carrier
    (auto-applied from tracking #)
  • Item Description

Optional: Automated package tracking collection can be enabled for all package carriers.

Application Views

Adjust User Access

Add or adjust access to others with whom you’ve shared BoxLock access:

  • Master account access
  • Administrator access
  • Guest user access
  • Inactive / archived user access

See activity history, or update access:

  • Access indefinitely
  • Access valid-until date
  • Access valid-until # of unlocks
  • Can moderate users
  • Can moderate locks, locations

Application Views

Navigation Drawer

  • User Account / Profile
  • Lock Overview
  • List of Packages
  • List of Users
  • List of Locks
  • Settings
  • Support
  • Logout

Application Views

Lock Status States - On the primary app screen lock status cards give lock status at a glance, indicating: Lock added, unlocked/locked state, wifi and battery statuses.

Product Styleguide

Product Styleguide

Complete UI Styleguide - All app elements are collected in an app styleguide for ongoing product development: Colors, type, form elements, iconography, components, content cards, etc.

Competitive and Comparative Research - Review of existing hardware solutions and processes for adjacent opportunities.

Locking Mailboxes

USPS approved drop mailboxes and locking porch boxes.

Smart Mailboxes

Sensors activate notifications when activity is detected.

Delivery Solutions

Integrations with the delivery channel allows secure access.

Competitive / Comparative Research

Competitive and Comparative Research - Review of in-category apps and unrelated categories for UI precedents and useful workflows.

Arlo

Custom geofences, times of recording, alerts, etc.

August

Smart lock & doorbell camera system Tell if door is open / closed, not just locked.

Lockitron

Clear door lock controls; Proximity lock & unlock. Wifi and Bluetooth adapter.

USPS

Check status of mail. Notifications & preview of incoming mail arriving soon.

Amazon Alexa

Seamless onboarding process for connecting to home Wi-Fi network.

UPS

Authorize your driver to leave packages at your home without signature.

Noke

Bluetooth lock with smart sensing, instantly unlocks on approach or with key fob.

MasterLock

Three modes of entry:
Proximity, via app, or via code entered on-device.

Nest

Whole home peace of mind. Smooth flow for onboarding, multiple device management.

ParcelTrack

One app to track all of your packages and shipments, across 50 delivery carriers.

Eero

Whole home wi-fi via mesh router. Seamless setup and automatic firmware updates.

Ring

Video doorbell with motion settings; multiple device support and activity log.

Competitive / Comparative Research

App supported by +$8.5M in billboard value by LAMAR Outdoor Signage

LAMAR Billboard Rollout - RoadNinja was rated as one of the top travel apps in the iTunes App Store, helped in part by supporting campaign of over 1k+ print and 85m digital signage placements.

Executive summary

Overview

“The ultimate road trip app”
Over 1+ million downloads

on iOS and Android

Supported by static & digital displays

+84,588,486 spots

+1,089 locations

+143 US markets

~$8.5 million value

“5 must-have apps that Apple should have made itself”

- TheNextWeb

App built natively for for iOS, Android, and responsive web

Upcoming Locations, by Exit

Settings

Exit Detail

Search

App built natively for for iOS, Android, and responsive web

GM MyLink platform - planned rollout for Chevy and Cadillac vehicles.

Coordinating controls include center console panel, on-wheel toggles, center volume wheel.

In-car dashboard screens based on HMI spec from General Motors

Settings:

Adjust preferences, including favorite locations, gas type, location categories.

App Launch

Simple animation shows product branding and license detail for packaged services.

Upcoming (var1):

See what POI locations are upcoming along the interstate.

Upcoming (var2):

Larger icons used for improved legibility on the road.

Location Detail

POI details are shown, including promotions, reviews, ratings, gas prices, and more.

Gas Preference:

Example of nested navigation menu. Allow selection of single item, cancel (or apply).

Wireframes modeled after the app spec and navigational patterns

Prototype screens - Built functional prototype to demonstrate hands-free, speaking controls to LAMAR, GM, and AT&T Drive Studio.

Visual design treatments applied to app prototype

Data Visualization Platform

Build better visual stories
with real-time data and make better informed decisions.

Observe

Abstract

Construct

Understand and interpret volumes of data in context

Craft data stories from a vast library of visualizations and flexible grids

Dynamic presentation layer that’s designed to impress

Data stories that drive decisions.

Long:

Med:

Dashboard Builder
Widget library makes it easy to make show your data in a compelling way

Component Library

Adaptive Grids and UI System

Tell the story behind your data – Expansive component library and adaptive grids enable your team to collect, understand, and present the underlying story to your team and leadership

Established a prototyping approach
for voice ui within our design lab

+ Hosted workshops for ideas & requirements

+ Established stakeholders and use-cases

+ Identified latest prototyping tools

+ Built out interface workflows

+ Tested prototypes for clarity and continuity

Voice UI concepts - Various Clients

Tools and Technologies

Investigated various technologies and approaches for
fast and flexible VUI prototype generation

Technologies are always changing - A number of these voice-specific technologies have pivoted or been co-opted into new systems.

Use Case Definition

  • Enhance the user experience
  • Go beyond mere novelty – with a clearly defined purpose
  • Reduce need for screens & manual inputs
  • Better serve high-utility, narrow use-cases, without doing too much
  • Bring new levels of service to digital products
  • A more natural way to communicate

When voice is a good choice:

Storyline Workflows

Construct narrative and UI workflows:

+ Identify use cases

+ Draft narrative flow

+ Connect

+ Consider unexpected
user responses

+ Add response blocks

+ Define endpoints

+ Coordinate data

Construct narrative workflows - Defined, built, and linked responses across the UI workflow, then tested narrative flows on-screen and with Alexa devices

USE CASE: INVENTORY MANAGEMENT

A Fortune 500 company needed to stay competitive with online giants like Amazon, and determined it must transition from solely a distributor / supplier to an integrated service provider capturing customer’s needs and identifying opportunities for growth.

Helped design and prototype a platform for personnel & asset manager for property managers.

  • Multi-context dashboard interface for maintenance activities & status
  • Predictive ordering approaches
  • Create and collect inventory data for existing property installations
  • Supporting voice UI appliance

Voice Application

USE CASE: CUSTOMER ACCOUNT ACCESS

This Fortune 500 company partnered with our team to investigate ways to improve access to statement and bill content they deliver for their customers.

A 150 year old titan of the printed document category: With our Design team, and over the course of 6 years, we collaborated to reconsider their document delivery solutions for the digital era.

Hosted workshops with a long-time client to prototype & test voice skills for customers that receive print and digital statements.

Example, for the bank or gas utility customer:

  • “What is my statement balance?”
  • “Pay my bill.”
  • “Schedule my payment.”

Voice Application

USE CASE: HANDS-FREE WAYFINDING

Over a 3 year engagement, we built, tested, and architected the ultimate road trip app, for finding points of interest at upcoming exits. This included web, iOS, Android apps – and a connected car interface built with AT&T Drive Studio in Atlanta.

Together with Lamar Outdoor Advertising,
we built a hands-free connected car interface
for wayfinding interstate exits.

  • “RoadNinja, where can we eat in the next
    5 exits?”
  • “RoadNinja, I’m looking for coffee!”
  • “RoadNinja, how far is it to Starbucks?”

Voice Application

“A smarter shopping platform”
Workbench for shopping innovation

4 product arcs:

+ Social shopping tools

+ Comparison tools

+ Shopping browser

+ Contextual messaging / rewards

~$1+ million in internal investment

Overview

* Social ratings widget

* Social shopping: Which one should I get?

* Shopping browser

* Contextual Platform

Rately shopping browser

Rately shopping browser

Rately shopping browser

Rately shopping browser

Keep track of items and your favorite stores automatically


App automatically keeps track of your shopping so that you don’t have to.

As you shop, Rately creates an up-to-date visual history of your viewed stores and products, including price, image, and descriptions, so that you can quickly go back to previous items and unique finds.

Shop faster with a browser
that’s built for shopping

Move from store to store by tapping on retailer logos – making navigation faster and easier. No typing required.

Tag items for people or projects

Organizing your shopping just got easier. Instead of having to open different tabs to create bookmarks for people, places, and projects, now you can quickly and easily tag items to make visual lists of products you like.

Get ideas and inspiration
with related items

App automatically generates recommendations for you,
based on your tagged products and shopping history. You never know what you’ll find.

Shop anonymously

For your eyes only: Your data is your data. We don’t share any information with anyone.

Only you can see your shopping.

Share on social media as you like, but some great finds need to stay a secret.

No login required.

iBeacon-enabled merchant loyalty & incentive system

WHAT IS CONTEXTUAL MARKETING?

Three Main Concepts at Work

Contextualization

Deliver a message based on the shopping context

(what, where, when, how)

Optimization

Test and learn what messages work best

Personalization

Deliver a message based on the buyer

(who, why)

Rately / Contextual Engine

5 P’s of Marketing: Product, Price, Place, People and Promotion
(+ Packaging, Positioning)

Person: Behavior, profile & purchase history

Behavior, profile & purchase history

Shopping behaviors

Bring together recently viewed items across channels (digital, mobile, in-store), as well as search activity, and shopping lists

Purchases

All purchase history, including brands, locations, and product level details (price, color, size)

Segment and Individual traits

Consider any range of segment or individual information – gender, age, PRIZM, ZIP code – as a basis for messaging.

Rately / Contextual Engine

Place: Location, Local Specifics and Time

Location, local specifics and time

GPS and Geo-Fencing

Accurate within 50 feet. Create GPS-based map bounds for a location – for use with various app triggers.

Retail Inventory / Pricing

Provide location-specific products, inventory, pricing, or availability

iBeacons

via bluetooth LE – enables location-based triggers for supported apps, including notifications & product information on demand.

Daypart or Day of the Week

Timed to coordinate with mealtimes, in-store events, opening/closing times, holidays

NFC / AR / Barcode / QR

Leverage scanning tools or NFC to geo-locate precisely, contingent on available signage

Rately / Contextual Engine

Product: Targeted messages, ads & promotions

Hyper-targeted delivery

Deliver messages to one shopper or all shoppers – based on specific behaviors.

Optimize notifications over time

Develop multiple ads to attach to a specific rule to learn which execution drives results

Product / Brand messaging

Deliver notifications to advertise or promote based on specific shopper behavior

Targeted messages, ads & promotions

Rately / Contextual Engine

Extending the visual interface language at Electrolux

Appliance Interface Suite - At Electrolux, I helped design, a line of touch-sensitive appliance controls, with engineering specifications in mind.

WaveTouch activation flow for refrigerator Options

Water Pocket Controls - As part of a larger interface schema for hot food prep and refrigeration appliances, we interfaced with engineering and product teams on a new line of touch-sensitive controls.

Visual Interface - Options menu, as observed by user

Lighted Display - Options menu selected:
All control options available.

Interface layered with PCB and bezel footprint

Layered Artwork - Display control diagram, shows distance between lighted keys and indicators, bezel onsert, and key placement

Interface application for Baseline B implementation

Baseline B - Additionally, a simplified, more affordable version of the fully-lighted control panel
was built to fill industry-standard price points. Differentiated by statically lighted interface elements.

Additional Design Constraints:

  • Screened display tolerance [max/min]
  • Icon edge to key switch edge
  • Distance to adjacent key switch
  • Max allowable switch size
  • LED spacing to reduce ‘halo’ effect
  • LED costing by color, size, lifespan, & quality bin
  • Software controlled, cycle-time “ramp” in display brightness
  • PC Board allows maximum 128 independently operated LEDs
  • Physical constraint of PC board dimension and bezel onsert

Visual design treatments applied to app prototype

A suite of digital tools for improving
the educational environment – built in partnership with the world’s largest school accrediting agency

+ Survey tools & processes for stakeholders

+ Accreditation docs & evidence collection

+ Reporting of accreditation completion

Overview

Platform and Application Hierarchy

Cognia is a global network of enthusiastic educators, and accreditation agency, dedicated to helping strengthen our schools, so that every student can access all the opportunities that knowledge brings.

Accreditation
& Certification

School Assessment

Professional Learning

Improvement Services

Proven approaches to educational excellence - Together with the Cognia team, we embedded into the product suite the rigorous processes that create vibrant educational environments.

Accreditation & Certification – Give your school the recognition and reputation you’ve earned for your commitment to high standards

School AssessmentGet meaningful data to inform decision making throughout your balanced assessment system

Professional LearningElevate your practice and expand your team’s capacity through targeted learning opportunities

Improvement ServicesWork directly with Cognia experts to pinpoint your needs and create initiatives with impact

Platform and Application Hierarchy

eProve – a state-of-the-art productivity platform

for continuous improvement

diagnostics

observations

surveys

analytics

strategies

workspace

Product Suite - Design, pilot, and launch of 3 new products in the platform suite, over the course of 18 months with the newly-forged product team.

Product landing pages within the platform

Dashboard - recent observations shown

Given I open the app or login

Then I am shown a message and a list of observations accessible by me for the selected school (observer/admin)

And the list of possible messages are:

* Loggedin users: Create observation

* Loggedin users, synced, but unsubmitted items: Submit observations.

* Loggedin users with unsynced items: Open the app when online to sync.

* Loggedin users with submitted items: Open the app when online to sync.

And the messages are shown along with their icon states, ordered by observation date

And the possible icon states are:

* Draft - Synced

* Submitted - Synced

* Draft - Unsynced (Grey icon)

* Pending - Submitted, but not synced (Grey icon)

And I see observations with out an observation date at the top

And as I scroll, a spinner is shown and the observations are autoloaded

Notes:

If the app is offline, pending drafts and submissions are automatically posted when the app goes online.

If the app cannot access the Elastic Search service, the data is saved in local storage until the Elastic Search service is available and are re-posted again in a minute.

If the app cannot access the Observation API, submission status on Elastic Search are reverted and are re-posted again in a minute.

If a submitted observation is edited, then the submitted observation will move it to draft status in Elastic Search, but the will continue to reflect the submitted state in the reports.

If the user is not authorized to submit an observation, the observation is rejected when submitted to the API and the user is logged out.

If the user belongs to multiple schools, the observations from the selected school (in the nav) will be shown on the Observations page.

The admin can edit any observation for that school and submit it.

The Instructor column should be able to wrap multiple instructor names, if present.

Animation effect:

When the user is back online, then the unsynced items will be synced, and status icons for in-progress icons will animate to their completion state

Example: http://tympanus.net/Tutorials/CircularProgressButton/

Dashboard - Recent Observations shown

Dashboard - recent observations shown

Given I open the app or login

Then I am shown a message and a list of observations accessible by me for the selected school (observer/admin)

And the list of possible messages are:

* Loggedin users: Create observation

* Loggedin users, synced, but unsubmitted items: Submit observations.

* Loggedin users with unsynced items: Open the app when online to sync.

* Loggedin users with submitted items: Open the app when online to sync.

And the messages are shown along with their icon states, ordered by observation date

And the possible icon states are:

* Draft - Synced

* Submitted - Synced

* Draft - Unsynced (Grey icon)

* Pending - Submitted, but not synced (Grey icon)

And I see observations with out an observation date at the top

And as I scroll, a spinner is shown and the observations are autoloaded

Notes:

If the app is offline, pending drafts and submissions are automatically posted when the app goes online.

If the app cannot access the Elastic Search service, the data is saved in local storage until the Elastic Search service is available and are re-posted again in a minute.

If the app cannot access the Observation API, submission status on Elastic Search are reverted and are re-posted again in a minute.

If a submitted observation is edited, then the submitted observation will move it to draft status in Elastic Search, but the will continue to reflect the submitted state in the reports.

If the user is not authorized to submit an observation, the observation is rejected when submitted to the API and the user is logged out.

If the user belongs to multiple schools, the observations from the selected school (in the nav) will be shown on the Observations page.

The admin can edit any observation for that school and submit it.

The Instructor column should be able to wrap multiple instructor names, if present.

Animation effect:

When the user is back online, then the unsynced items will be synced, and status icons for in-progress icons will animate to their completion state

Example: http://tympanus.net/Tutorials/CircularProgressButton/

Main navigation - drawer open, logged user

Main navigation - drawer open, logged user

Given I click on the links in the nav

Then the nav closes and opens the corresponding page

The nav shows the selected item when reopened

Given I select an area outside of the open nav drawer

Then the drawer is closed and I return to the previous view (as denoted in the nav).

Given I am certified

Then I see the certified icon beside my name

Given a user has access to multiple schools

Then the currently-selected school name is shown under the name in the nav

Dashboard - user offline, some items not yet synced

Dashboard - user offline, some items not yet synced

Given I am on any page in the app and the device goes offline

Then the header fades to grey and an offline prompt is shown.

Given the device is offline

Then I can create new drafts and submit observations

And the appropriate icon in shown on the observation

And I am prompted to sync the observations by opening the app when they are back online.

Search observations - Additional options

Dashboard - search selected, field shown

Given I click on the search icon or the “Filter by” field

Then I the search field / dropdown is opened

And the search field is in focus

And when I select the facets in the browse menu or they can be selected via the auto fill

Then the pane slides to the left and the corresponding facets available for my observation data is shown

And when I select a facet

Then the “Filter by” dropdown is updated

And I see the observations filtered and sorted by observation date

Note: Facets that are not in the observation data for that user are not displayed.

Create new classroom observation

Create new observation

Given I click on “New”

Then I see the Create observation screen

I can select a subset of:

* Instructor name (Freeform field, auto filled from roster and previous submissions, multi select)

* Course Title/Topic, (Freeform field, autofilled with previous submissions for that school)

* Subject (drop down with the below list),

* Grade level, (multi select)

* Lesson segment, (multi select)

And the logged in details along with the users certification status are shown for confirmation

Subject area list and order:

§ Art

§ Business

§ Career and Technical Education

§ Computers and Technology

§ Foreign Language

§ Language Arts

§ Mathematics

§ Music

§ Physical Education

§ Science

§ Social Studies

§ Religious Studies

§ Multi-Subject

§ Other

Given there are multiple Instructor names in the Instructor field

Then the I can scroll the instructors horizontally to see all names

Given I type in a few fields and click on the back/another observation

Then an Alert with confirmation warns me that the observation won’t be saved.

Animations:

Mobile:

Given I click on Start Observation,

Then the screen animates from the bottom.

When I click back on the observation

Then I am taken to the dashboard.

When I click on on “Edit description”

Then the description pane slides in from the top.

Tablet:

Given I click on Start Observation,

Then the description screen closes and the observation screen is shown

When I click back on the observation

Then I am taken to the dashboard.

When I click on on “Edit description”

Then the description pane slides in from the left.

Example: http://tympanus.net/Development/PageTransitions/

Observation - navigation drawer open on tablet

Observation - navigation open on tablet

Given I open the observation page

The expanded environments are shown and then collapsed when a rating is clicked

When I swipe the page to the right

Then the environments are shown

Given I am on desktop

Then the expanded environments and the ratings section are shown

Observation - Add rating to observation criterion

Observation complete - review and submit

Digital catalog for architects & designers

Product Portfolio - Created a new way for customers, commercial designers, and architects to review, save and buy products.

Desktop app
For local use or use in retail showrooms.

Built to reduce overall reliance on physical sample books.

Collections
Modular carpet tile is showcased in collections, with high-quality, contextual photos.

Collections are organized based on style and context of use – for commercial, healthcare, and education.

Sample Gallery
Each pattern comes in a variety of colors.

Complete details are listed for each, along with the ability to save the collection or share a sample with your clients.

Detail Preview
High resolution detailed photos show the intricate detail of each pattern, color, and tufting.

“Digital ticketing for K-12 schools”
A complete ticketing solution for schools.
Platform connects schools, fans, and brands.

Secured $15M in funding in 2017

  • Available via iOS, Android and web
  • Supports a variety of options for ticket type, and pricing configurations.
  • Average sales of 12k tickets per week
  • 1k schools in-network, plans to double in next year

Executive summary

Bob -

I hope you're having a great fall.

Taking a little trip down memory lane today that I thought you'd enjoy ... it was 3 years ago today Milton, South Forsyth and North Gwinnett hosted football games on GoFan. Here are some high level stats:

900,000+ ..... Tickets Sold

300,000 .... Fans have purchased tickets

7,511 ..... Schools have ad an event on GoFan

$12 million ... Processed through GoFan

1.6 million ... Users have visited GoFan.co

Thanks again for Digital Scientists' role in our journey ...

-BJ

BJ Pilling

SVP - Business Development

Background

Launched initial MVP app quickly through rapid prototypes and ready-made mobile frameworks.

After a successful consumer market test, the business model was proven – To support ongoing user growth, new feature epics were added to the roadmap, and released seasonally.

Background

Continued product development and innovation,
season-over-season:

  • 2015 Jun Application Strategy, Design Blueprint
  • 2015 Oct Application MVP - Alpha
  • 2015 Dec Radius Reporting
  • 2016 Jan Ticketing Admin Panel
  • 2016 Jun Season Tickets
  • 2016 Aug Payment Platform
  • 2016 Dec Reserved Seating
  • 2017 Mar Platform Funded! 🎉
  • 2017 May App Styleguide Refactor
  • 2017 Sep Ticket validator UI / Fanbase ideation
  • 2018 Feb Admin 2.0 Design Blueprint
  • 2018 May Financial Reporting (upcoming)

Create real time dashboard for schools, events for purchases. Update metrics in real time.

Marketplace KPIs: (total, average; over time, by region)

# schools with digital tickets / # schools with printed tickets

total # fans overall / # fans per school

total # events overall / # events per school;

total $ tickets sold / $ tickets per school / avg. per fan

total # tickets sold / per school / avg. per fan

total # events attended / per school / avg. per fan

total # advertisers / # ads per advertiser / # impressions

total # messages sent (email, messages, sms) / # opens / # actions

user retention (average lifetime user app install)

https://bizjournals.com/atlanta/news/2017/02/09/ticketing-startup-huddle-scores-11-million.html

“Ticketing Startup Huddle Scores $11 Million”

February 9, 2017

Digital ticketing platform for schools across the US:
The
complete digital & print ticketing solution for K-12

Launched as an MVP in late 2015, successfully funded in 2017:
Customer-requested features and a series of acquisitions has made GoFan a market leader in the K-12 digital ticket space.

Background

Supported platforms include mobile-web, iOS, and Android

Available now in the iTunes
& Google Play app stores

View and purchase tickets for a wide range of school events.

Be notified about upcoming games, and promotions.

Digital tickets can be redeemed:

  • Within the app
  • Scanned at the gate
  • Printed or emailed

Separate mobile scanner app + hardware solution supports ticket validation

Printed digital tickets are also supported

QR barcodes improve low-light legibility and lend extra data capacity.

Support for existing ad placements was retained in the print layout.

Reserved Seats Flow - Mobile

Select an Event

Select an event from the School page to view event details

Reserved Seats Flow - Mobile

Select Seats

From the event detail, the fan will be directed to choose their seats

There could be instances where general admission & reserved are sold concurrently.

Reserved Seats Flow - Mobile

Select Seats

From the event detail, the fan will be directed to choose their seats

There could be instances where general admission & reserved are sold concurrently.

Reserved Seats Flow - Mobile

Select a section to begin

Venue / game details shown at top of layout for context

Reserved Seats Flow - Mobile

Section seating shown

Pinch-zoom seatplan for a closer view.

Available seats shown in blue.

Reserved Seats Flow - Mobile

Section seating shown

Pinch-zoom seatplan for a closer view.

Available seats shown in blue.

Reserved Seats Flow - Mobile

Selected seat details: Tooltip

Choose seat type, and add to cart

Reserved Seats Flow - Mobile

Seat added to cart

Add additional seats, or view seats in cart

Reserved Seats Flow - Mobile

Checkout

Blocking matches the ticket selection lockup on the current event detail view

Assuming that this review state might include all details for seat selections:

* Seat section, row, number

* Seat type

* Seat price

* Remove seat

Process & Artifacts

Idea to Delivery

Stakeholder Assessment / Mapping

Example: GoFan Ticket Purchase Flow

Stakeholder Mapping

List your product stakeholders

Core, primary users

  • Interact directly with your product
    • Role
    • Needs
    • Pain points


Direct Connection

  • Influence the workflow, steward the experience


Indirect Connection to primary users

What other businesses exist in your space?

Competitors

  • Direct & indirect competitors
  • Others integrated to the consumer journey

Out of category UI precedents:

  • Features or interactions that are useful

Comparative Research

Example: GoFan Ticket Purchase Flow

Competitive / Comparative Frame

Create a hierarchy of features:

Top level:

  • Feature themes and groups
  • Navigable UI spaces

Secondary:

  • Features and specific views

Tertiary:

  • Micro-interactions and UI states
  • Imperative UI elements (if any)

Feature Mapping Larger Efforts

Card Sorting Exercises

Background: Process

Wireframe Variations

  • Test features against your brief:
    • For which user / persona?
    • What is the context of use?
    • What are they trying to do?
  • It likely won’t be right the first try:
    • Keep iterating on the layout
    • Use the styleguide components
    • Relate to existing product patterns
    • Put wires into a prototype, and
      test in context

Wireframing

Wireframing

Visual Variations

  • Test features against your brief:
    • For which user / persona?
    • What is the context of use?
    • What are they trying to do?
  • It likely won’t be right the first try:
    • Keep iterating on the layout
    • Use the styleguide components
    • Relate to existing product patterns
    • Put wires into a prototype, and
      test in context

Markup, Iteration & Documentation

https://docs.google.com/presentation/d/1X3_68h2qxjeuN4MioI2zl0ZlFMdbplUkwF_UY9ND-i0/edit#slide=id.g1732a031a0_7_205

Markup, Iteration & Documentation

https://docs.google.com/presentation/d/1X3_68h2qxjeuN4MioI2zl0ZlFMdbplUkwF_UY9ND-i0/edit#slide=id.g102babbd6f_0_185

Visual treatments customized by school

School Customization of Visual Styles

Reserved seating workflow - Fan Interface

Reserved Seating - Seat Selection

Admin 2.0 Prototype

Admin 2.0 Interface

Where does the product live?

  • On your phone of our fans
  • In the web browser at GoFan schools
  • In the App Stores
  • In the product codebase
  • In the visual styleguide
  • In the accounting records
  • In the product documentation
  • In GoFan and Huddle brand guidelines
  • In the marketing, social, and word of mouth
  • In the stands, auditoriums and games
  • In the mind of the customer
  • In the GoFan team

Product Inventory

Product Inventory

Product Inventory

Access to:

  • Search and view schools
  • View and filter upcoming events
  • Buy tickets
  • View my tickets
  • Follow schools

GoFan Website

Product Inventory

Available for:

  • Apple iOS devices
  • Android devices

App Store

App Stores: iTunes / Google Play

Product Inventory

Sketch Art

Layered artwork for:

  • Fan application layouts
    • Mobile app
    • Desktop interface
  • Validator app
  • Admin app
  • Styleguide elements

Product Inventory

Subversioned artwork:

  • GoFan Fan app repository
  • GoFan Admin app repository
    • Branched versions
      of artwork in-progress
    • Supports the collaboration
      of multiple concurrent designers
    • Conflicts resolved on merge,
      like Github
  • Transparency & daily commits are key
    • Likely, you will not be the only designer on your feature for long

Abstract

Product Inventory

Prototypes

Clickable workflows:

  • Marvel and InVision:
    Linkified prototypes allow you to test features and workflows quickly, before building the product.
  • Test early and often:
    A clickable wireframe is usually better than a well-polished flow.

Product Inventory

Style Guide

Inventory of:

  • Color
  • Type Definitions
  • UI elements:
    • Buttons
    • Input fields, dropdowns
    • Checkboxes, radios
  • UI components
    • Navigation
    • Header / Footer
    • Content cards
    • Lists
    • Custom components

Product Inventory

Product Log

Inventory of:

  • Upcoming features
  • Backlog of features
  • Completed features

Other interesting projects

Various contexts

EPIK2020

+ Supported event materials & messaging

+ Assisted with narrative-shaping for event

+ Collection of product content

Company-wide product launch event

First-annual launch event - 5 new product concepts

First-annual company-wide product launch event

Bringing our team together to share the product-launch mindset

Stop porch pirates and say goodbye to package theft:
App interfaces and R+D for a new type of IoT lock that works with leading US delivery providers. As seen on Shark Tank.

Connected car concept in partnership with Lamar Outdoor Advertising and AT&T Drive studio. Mobile app has over 1M downloads, supported by a $8.5m advertising campaign.

Development of a new ‘flanker-brand’ concept to allow this leading office goods brand to gain market share and test new concepts in ecommerce.

NOTABLE PROJECTS

Market research, design concepts, and proof-of-concepting for the next gen of Mailchimp features for small business:
Pop-up shops, landing pages, direct-mail postcards.

Collaborative design and development of digital platforms & tools to support infra teams across the company – including Developer CI/CD, Cloud services, APIs and Digital Commerce.

Strategic workshop with to facilitate idea generation. Includes idea compilation, synthesis, and visual diagramming presented to leadership team.

NOTABLE PROJECTS

Touch-screen controls for a range of home appliances, for refrigeration, washing, and cooking. Final products shown at major appliance retailers, like Lowes and Home Depot.

NOTABLE PROJECTS

Market landscape, product reqs & shaping, design support for various concepts within the Labs – like data visualization platforms, new tools for retail commerce, and HR systems.

Mobile app interface for a portable, secure pill delivery device to promote medication adherence: Right dose, right person, right time.

Build and grow teams that solve interesting problems
& create digital solutions that make a difference

  • Business-integrated outcomes
    Craft solutions that address strategic business needs.
    We contribute to the bottom-line of the business.
  • A toothy technological challenge
    Improve the information systems for applications we build – extend the digital reach, connect datasets, measure new data.
  • Design purpose and user-focused intent
    Create great experiences and context-optimized interactions for user-stakeholders. Build systems that people like to use.

THE MISSION

  • Products that make people's lives easier
  • Product design consulting
  • Product r&d lab
  • Product design research
  • Product from launch to funding

IDEAL CONTEXT

  • Head of UX / product design
  • Director or product design manager
  • Design lead / senior product designer

IDEAL ROLE FIT

Crafting digital solutions to make a difference

Thank You

Questions, or interesting problems?

Just reach out

ralph@rgunderson.com

404.518.3010