Ople

Context

• Ople (Menlo Park, CA)
• UX Architect

Case

Problem: Ople is a Silicon Valley startup in the deep learning, AI space. I was engaged very early to help create a brand and digital presence for the company to promote its product, a tool to help data scientists optimize their model through an automated rather than a manual process to enable them to increase the amount of projects they could accomplish at once.

Venture Capitalist persona used for identifying needs for the website. Follows simple protopersona format: top-left is details, bottom-left is needs and goals, top-right is pain points, bottom-right is site requirements for user and opportunities.

This customer journey follows the flow of the 2 primary personas. It follows Gary (PO) and David (data scientist) from awareness to evaluation to engagement.

Early thumbnail wireframes and product flow. First row is landing page and project organization, second row is data formatting and cleaning, third row is model parameterization, final row is optimization results.

Logo exploration process

Process:

• Create proto-personas of data scientists, product managers, and investors
• Create customer journeys to follow the evaluation process of the tool by data scientists and product managers.
• Conducted competitive analysis of competitor website elements and comparative analysis of leading SaaS applications and arrived at a backlog of needs for the website.
• Sketched/photoshopped brand elements: logos, business card concepts, Linked in banners.
• Created brand colors and fonts exploration document.
• Created a pitch deck design for the company to help promote itself with investors.
• Sketched screen flow options and product flow ideas.
• Prototyped flow of how website content would look.
• Created product task flow based on a demo from CEO around how related (but different) tool worked and what needed to change.
• Using Photoshop, created comps of the product based on task analysis.
• Created content inventory that was collaboratively used by product team, CEO, and myself to create site content.
• Designed UI of the website and created the website in HTML, CSS, jQuery, and PHP.

Business card template

Mockup of products results page

Data cleaning product page after data upload

Website homepage current version (Live website)
More complete site version
Previous prototype

Solution & Outcomes: Website has been launched in phases (introducing new pages over time) as a marketing and investment portal for the company. Product design has not been taken on yet–they are focused on proving out the product technology first.

Details

Timeline:

UX Methods Used: Competitive Analysis, Comparative Analysis, Personas, Sketching, Brand Design, Prototyping, Content Inventory, UI Design and Development

NCR Cinema One

Context

• NCR Corporation (Alpharetta, GA)
• UX Designer

Case

Problem: Cinema One was a reboot for a 20 year old product. The legacy product had a lot of functionality that was not being used as it had been designed in an incremental fashion. They were looking for a representation of the user in the design of this new product. This redesigned affected customer facing mobile app and kiosk design, front of house POS design, and back of house enterprise management software. Below are a few examples of the work done for this group.

 

 

Sample persona of an accountant working in a theater chain.

Created a cross system view on the ticket/film management & sales flow (different color post its represent different user types).

Sketch of creating a new booking for a film at a site.

Sketch and annotations for a mobile app designed for site managers to run operations remotely.

 Paper prototype testing out concepts for advanced concessions (e.g., burgers with modifiers).

Screen flow with designs made by our visual design contractors. This laid out the interaction flow for reserved seating on the POS.

Process:

• Led on-site and remote interviews and observation sessions.

• Created Personas to represent users to developers aligned with their user stories.

• Used card-sorting technique to organize priority for new features in software.

• Sketched and wireframed aspects of back office software.

• Prototyped and user-tested higher fidelity versions of these designs.

• Created certain UI elements implemented in product.

• Contributed to product backlogs and helping work with development team to understand designs.

• Conducted mall intercept studies to learn about movie going patrons and the sorts of experiences they look for in going to the movies.

• Created wireframes for client requested redesign of kiosk.

 

 

Mockup of weekly booking screen for managing what will be playing week to week.

Mockup of film settlement & vendor payment screen to allow accountants to keep track of who they’ve paid film rent to and when.

 

Mockup and prototype for setting and managing ticket prices.

Kiosk design mockup specifically here for ticket selection.

The following are selected various prototypes that were used for testing and specifying designs:

Concession Sales
Labor Management
(NCR logo takes you home, check buttons 1 & 3 for manual login)
Booking
(May take up to 10 seconds to load)
Ticket Pricing
(start by adding condition types–would come preloaded in from elsewhere in the system)

Solution & Outcomes: Product has been released to three clients, but has not yet reached market release. Kiosk solution is being rolled out to AMC and clients around the country.

 

 

Note: These designs were created by visual designers I worked with where I worked with them to maintain the flows and key elements from the prototypes and mockups above.

Final designs for booking screen

 

POS Clock in screen redesign

Redesign kiosk screen for AMC

Kiosk flow video

Our POS solution at a theater.

Details

Timeline: 2+ year full time engagement

UX Methods Used: Contextual Inquiry, Work Flow Analysis, Personas, Sketching, Wireframing, Prototyping, Lean User Testing, Card Sorting

 

Stratus

Context

• NCR Corporation (Alpharetta, GA)
• UX Architect

Case

Problem: Stratus was a reboot for a 20 year old Venues (Stadiums, Arenas, Ampitheaters, Convention Centers, Zoos, Theme Parks) product. The legacy product growing in relation to client requests has grown to the point of needing a new strategy and UX architecture to be used effectively.

Collaborative user flow created by developers, product management, and UX. Validated with product stakeholders

Screen sketching on whiteboard with product management. Focused specifically on inventory management.

Sitemapping exercise for Stratus MVP

Inventory counts interface for staff to do at the end of an event at each location.

Paper prototype for doing a mobile cash pickup (drop) at a loction for an event.

Process:

• Participated in on-site and remote interviews and observation sessions.

• Created Personas to represent users to developers aligned with their user stories.
• Created Post-it note based workflow model serving as a basis for MVP design for product

• Sketched aspects of back office software to work with Product Owner to plan system design.

• Designed wireframes to help guide development efforts.

• Created paper prototypes (with plans to user-test) with site managers and system users.

• Created UI specifications for early aspects of system visual design based on UI guidelines at NCR.

Responsive thumbnail screenflow of login & landing and items pages.

Calendar view for event data

Calendar view for event data in Mobile view with event data.

Flow wireframe/diagram demonstrating how a user can get from screen to screen.

Item list with implementation specifications (specs are 1 page of several–this was specifying the green bar at the top)

Search for inventory items on mobile view

The following are selected various prototypes that were used for testing and specifying designs:

Items
Tills
(May take 5-10 seconds to load, non-sketchy area is not part of the design, but from the multi-device icon next to Pages-till in it you can change the viewport size)

Solution & Outcomes: Product had been shelved midway through my work on the MVP.

Details

Timeline: 1 year

UX Methods Used: Contextual Inquiry, Work Flow Analysis, Personas, Sketching, Wireframing, Prototyping, Card Sorting

Point Spring & Driveshaft Website Redesign

Context

• Point Spring & Driveshaft Co. (Neville Island, PA)
• Consultant

Case

Problem: Website needed a new look & feel, a more complete offering of services, and an overhaul of the product search and checkout process.

Screenshots of current company home page—middle section of website is abridged—and eCommerce system with blurred pricing and availability.

Visit website

Process:

• Conducted survey to learn more about typical users of this website, e.g. their needs, features of the website to focus on, and how best to use technology to promote a healthy customer-supplier relationship.

• Conducted Google Analytics review of current website.

• Conducted secondary research from others on customers in this industry.

• Generated customer work flow from research.

• Sketched 4 alternative versions of home page layout.

• Created wireframes of home page, search, shopping cart, and checkout in Illustrator and imported into interactive Flash prototype (incorporating changes proposed to sketches by client).

Two different alternatives for website designs including home page (and on first sketch) the top of the rest of the pages.

Sample annotated wireframes for the locations overview page, a blog article template, and a help center page.

Click here for a document of all wireframe annotations

Solution: The design included all of the original content, but also includes a new page documenting services provided by the company, expanded (though relocated) section describing the company, expanded section to contact Point Spring and get help, and a revamped, open-access online store. An additional element of a fleet management system was well-received by the customer and is being incorporated into the final design.

As for page layout, I opened the space up more by using horizontal rows of content instead of sneaking everything into boxes as the original website has done. On subsequent pages, I have used a primary content area/modeless dialog box relationship to layout content.

Visual sitemap generated for website.

Page architecture for website

Interactive prototype of website. Functional pages include home page, air brakes category page under products, search, services, cart, and checkout.

Click here to try the prototype

Outcomes: Fully functional front end for website redesign. Completed December 2015, still being applied to website by other back end web developers as of August 2016.

All aspects of this responsive system represented including login and registration, product listing, purchasing, blogging, and corporate description.

* You can click through other aspects of the homepage, but links to page types are provided below.*

• Home Page
• Categories Page
• Product Page
• Checkout Page
• Blog Page
• Locations Page
• Location Page
• About Page
• Timeline Page
  

Details

Dates of Project: July 2014-December 2015

UX Methods Used: Survey, Work Flow Analysis, Sketching, Wireframing, Prototyping

My Roles: Development, Design, Research

Yoyochimp Homepage

Context

• Yoyochimp.com (Fremont, CA)
• Brought on as UI/UX Designer

Case

Problem: Homepage needed to improve its value proposition to users and demonstrate the content of the website at a glance.

This is a screenshot of the yoyochimp homepage. (Some of the middle categories are not shown).

Visit website

Process:

• Conducted heuristic evaluation/competitive review of website according to usability, information architecture, communication design, and visual design standards.

View Report

• Brainstormed and organized priorities for home page features working with CEO.

• Sketched 3 versions of home page modifying features included, layout and spacing, home page state, and organization of features.

• Created wireframe in iterative process between CEO and PM using Inkscape (Illustrator equivalent).

• Transformed wireframe into Flash prototype to answer questions about interaction of site.

These were the final sketches before wireframing a design.

Solution: Final web page includes simplified, benefit-centric, and welcoming text on home page, 960 grid system layout, explanation of locations served, browsing system for activities, promotional video, blog feed, newsletter signup, and additional social media links asked for by the CEO. Branding elements, originally added added to fit with a conversational system of interacting with the website, were removed for a larger branding discussion. More functionality was proposed in prototype including adding number of search results for each term in search autocomplete suggestions and providing notification indicators (how many notifications are there since last checked).

Wireframe of homepage for someone logged into website.

Wireframe of homepage for someone not logged into website (e.g., users first view of the website).

Interactive prototype of homepage based on wireframes includes animations and interactivity built in.

Click here to try it
(Recommended: Try it in full screen mode)

Outcomes: Yoyochimp is in the process of developing the web design.

Details

Dates of Project: May 2014-July 2014

UX Methods Used: Heuristic Evaluation, Competitor Analysis, Prioritization, Personas, Sketching, Wireframing, Prototyping

My Roles: Design, Research

Network Nightmares

Context

• IUPUI (Indianapolis, IN)
• Lead Designer

Case

Problem: We were looking for ways to engage students on topics related to Informatics outside the classroom. We wanted to create a serious game that embedded course topics for networks and security.

Process:

• Led brainstorming session with co-designer.
• Created design brief, documenting project requirements.
• Sketched basic game interface to provide foundation for team’s graphic designer.
• Supervised the work of the team’s programmer to ensure experience was meaningful, pleasurable, and usable.
• Wrote and programmed in-game manual into finished product.

Solution: We inverted the relationship between administrator and play. Here the player’s job was to look for vulnerabilities in the network and infect the entire network to win the game.

A few strategies that tied well into course concepts:

1. Hubs do the most damage to the network as its effects are felt throughout each of their connections.
2. The most vulnerable areas were the areas furthest away from where administrators attention was.
3. The most effective strategy was divide and conquer—a tried-and-true algorithm students need to know.

Network nightmares game based on Angry Birds model with network admins that try to heal viruses.

Click here to play it

Outcomes: Game was developed and shared with students in the course we taught in. The game was also accepted into a game design festival at FDG 2013 in Chania, Greece.

Details

Dates of Project: Jan 2011-Jan 2012

UX Methods Used: Sketching, Task Flow, Requirements, Priorization

My Roles: Design, Research, Writing, Programming

Twitterspace

Context

• Indiana University (Bloomington, IN)
• Ph.D. project (co-creator)

Case

Problem: Our school had students and faculty spread out across campus. We needed a way to share information with everyone and at the same time help them feel connected.

Process:

• Brainstormed/sketched the design of the system
• Observed the environment in which it was placed
• Created a series of wireframes/experiments comparing the experience of various sounds and animations
• Introduced a living prototype to our community
• Evaluated through surveys, interviews, and observation

This was an early sketch of the system.

This was an alternative sketch that was explored.

This was an interactive wireframe we created to get a sense of the density of information, the animation speed, and the sound element of the system.

Click here to see the working wireframe.

Solution: Our design used Twitter data displayed on public monitors in our school’s building with a slow animation of tweets across the screen.

This is an example image of the working system. The real system is no longer pulling data from Twitter due to changes in the API.

Click here to see an example with sample data.

Outcomes: The Twitterspace display was deployed for our school as well as 3 academic conferences and 3 other organizations.

This image shows Twitterspace in use.

Details

Dates of Project: Jan 2007-Dec 2010

UX Methods Used: Contextual Inquiry, Sketching, Wireframing, Prototyping

My Roles: Research, Design, Writing, Programming, Artistry

Device Ecology Mapper

Context

• Indiana University (Bloomington, IN)
• Ph.D. project (I was primary designer)

Case

Problem: We needed a way to capture data about the devices people own that is clear and easy to use. We also needed to find a way to do it in an automated way to collect a massive amount of data related to it.

This is an affinity diagramming session we did to work toward ecology mapping.

Process:

• Using affinity diagramming, participants mapped their device ecologies with post-it notes and a whiteboard
• Concept generation and sketching to explore representations for digital, automated system
• Paper prototype of the agreed upon best idea informally tested with participants
• Flash prototype with improvements from past test with formal usability test

The chosen design idea with two variations: one more normal graph with nodes and edges and a second more relaxed version.

This was an alternative idea where connections were made like puzzle connections. Puzzle pieces would morph to fit parts of the ecology already mapped.

These are all the components of the paper prototype.

Solution: We created a digital, Flash-based prototype based on a metaphor of pinning things to a corkboard. There were plans for a system for displaying the collected data, but it was not completed.

This is a shot of the digital prototype. A version that does not record data still is available.

Click here to make your own device ecology map on the digital prototype.

Outcomes: The data recording portion of the prototype was completed. It never was deployed, but it is ready for that purpose.

Details

Dates of Project: Jan 2008-Mar 2012

UX Methods Used: Affinity Diagramming, Sketching, Paper Prototyping, Flash Prototyping

My Roles: Research, Writing, Artistry, Programming, Design

Hazmat: Control & Contain

Context

• Information in Place (Bloomington, IN)
• Company is now called Wisdom Tools
• Designer

Case

Problem: For this serious game, I was brought into to establish requirements for the project and establish a design to be sent to Virtual Heroes to develop. There already existed a national course for first responders on this topic, but Information in Place wanted to create this serious game to be integrated into that and other similar courses for first responders (e.g., factory/industrial workers who first find the release).

Process:

• Research chemical compounds & containers, placards, and containment and cleanup procedures for hazardous materials.
• Analyze national course for training procedures and learning objectives.
• Create excel documents structuring how the game interacts under certain circumstances.
• Create scenario based, conceptual paper prototype.
• Run participant through the scenario, identifying usability problems and areas for improvement in learning and engagement.

Design document presentation outlining large scale game to be built in partnership with Virtual Heroes.

View Presentation

Read Design Document/Subject Matter Research

Solution: The large scale game was not pursued, but I was asked to help design a Flash based version of the game based on the research and early design work. I created a Paper Prototype version of the game confronting the player with five distinct Hazmat scenarios they need to respond to. I also ran a usability test on this paper prototype. Once we learned what aspects worked well and what needed to be incorporated, the game was designed into a Flash based serious game.

Interactive Flash prototype based on the five scenarios created.

Click here to visit the game’s website

Related Documents:

Scenario Description

Hazmat Response Protocol

Usability Test Results

Feedback from environment based on tools used (excel)

Feedback from environment based on personal protective equipment used (excel)

Outcomes: Flash game is currently for sale through Wisdom Tools’ website.

Details

Dates of Project: October 2006-August 2007

UX Methods Used: Subject matter research, Task analysis, Design specifications, Scenarios, Paper Prototype, Usability Testing

My Roles: Design, Research

Videmote

Context

• Indiana University (Bloomington, IN)
• Ph.D. project (primary designer)

Case

Problem: We wanted to learn about people’s emotion of Internet videos/animation. We wanted an application that could allow users to select a video from a selection of videos and record their emotional experience in 4 different ways.

Process:

• I sketched some initial ideas
• I created a wireframe/storyboard to show the flow of the application
• Download a wide range of videos from YouTube from various categories
• Created a digital prototype to collect data based on the storyboard

These are two steps in a multi-step exercise blending task flows with wireframes. The top image demonstrates the evolution in terms of the overall flow and change in overall screens.

Solution:

The tool worked as follows:

• Users logged in (they could finish at another time).
• Users recorded their initial emotional state.
• They selected and watched a video, recording their emotional state after, rating, and creating a photomontage based on their emotional state.
• After 6 videos, users filled out a survey.

This is a screenshot of the application. You can try it yourself below using the username “test” and password “test.”

Click here to see the working wireframe. (Be aware all videos play Numa Numa video. Please allow 1-2 minutes for the application to load.)

Outcomes: The prototype was completed, and I helped used the tool for initial data collection.

Details

Dates: Dec 2006-Jul 2007

UX Design Methods: Sketching, Storyboarding and wireframing, Task flows, Prototyping, Visual design

My Roles: Design, Writing, Programming, Artistry