Merchant / Customer facing Booking Engine & POS - Interaction Design
Senior Product Designer - three agile teams    MAR. 2014 - PRESENT

Booker provides merchant and customer facing booking engine, point of sale, and end-to-end business management/promotion services. We work within the Scaled Agile Framework (SAFe), tracked in Rally, where small software increments are delivered in two-week sprints, and larger increments every two months.

Merchant / Customer facing Booking Engine & POS - Interaction Design
Senior Product Designer - three agile teams    MAR. 2014 - PRESENT

Booker provides merchant and customer facing booking engine, point of sale, and end-to-end business management/promotion services. We work within the Scaled Agile Framework (SAFe), tracked in Rally, where small software increments are delivered in two-week sprints, and larger increments every two months.

Tap to enlarge

iOS Settings: Point of Sale Hardware Selection and App Idle Time Logout Out Sketch

The business initiative for the mobile team is to get to feature parity with the web version of our platform. Design work is typically done one sprint ahead. User stories are generated by Product Managers after business initiatives, input/ feedback from the Customer Service Team, and direct contact with users. The Designer discusses/sketches options to address acceptance criteria with the team.

Tap to enlarge

iOS Settings: Point of Sale Hardware Selection and Idle Time Illustrator Storyboard

User flows are laid out in Adobe Illustrator with components from a live .ai style library. The user flow is discussed with scrum team, comments are taken from developers, prototype is tested, and design work is iterated on.

Tap to view invision prototype

iOS Phone Settings - Hi-Fi Prototype

A final inVision prototype is used as acceptance criteria for the user story. After development work is completed, the designer reviews to provide comments and tweaks, QA tests functionality and design, and the Product Owner accepts the user story.

Tap to view invision prototype

Android Tablet Point of Sale - Hi-Fi Prototype

Tap to view invision prototype

Android Phone Customer Management - Hi-Fi Prototype

Tap to view invision prototype

iPad New Pet Appointment - Hi-Fi Prototype

Tap to enlarge

Merchant's Customer Facing Booking Sketch - Responsive Design

Merchant's customers book appointments from one to five days in advance in 50% of the cases. The UX/UI had to be re-adapted to accommodate for that option. Designs, without that feature, had not been worked on for more than six months. Now, the requirement had changed for the UX to be responsive; so both mobile and web viewports were accounted for.

Tap to view invision prototype

Merchant's Customer Facing Booking - Mobile Phone Viewport

inVision prototypes were generated for both mobile phone and web viewports, along with a script to conduct user testing. Click-hinting was turned off to test if users could successfully complete the task. The task was easily completed by all testers: one set for mobile, and one set for web. Click-hinting has been turned on again in the prototype for your review; just click anywhere for hint to show.

Tap to view invision prototype

Merchant's Customer Facing Booking - Desktop Viewport

The desktop flow was designed to mimic the mobile phone UX as close as possible, so users would encounter an almost exact UX across platforms. Again, click-hinting has been turned on in the inVision prototype for your review; just click anywhere for the hint to show.

Tap to enlarge

Online Startup Incubator - Interaction Design
Co-Founder / UX Design Lead - team of five   DEC. 2012 - PRESENT

ideaHatcher is an online startup incubator platform in its infancy. Its goal is to bring idea generation to the masses by helping with the curation and crowd-funding of startups.

Tap to view annotated wireframes

Annotated Wireframes

Tap to check out IdeaHatcher.co

High-Fidelity Wireframes & Visual Design

Tap to enlarge

Data Synthesis: Affinity Diagramming

We began the project by conducting 10 contextual inquiries and an online survey. Then we synthesized our data into an affinity diagram.

Tap to enlarge

Design: Ideation and Visioning

After completing our affinity diagram, we picked our key issues and design ideas. We voted on those and then proceeded to do visioning.

Tap to enlarge

Design: Storyboarding Use Cases

After our visioning exercise, we storyboarded several use cases for our platform.

Tap view design report

Decision Support Tool - Interaction Design / Tablet
Design Lead: team of four   JAN. – AUG. 2013

My HCII Capstone project team solution consisted of a decision support tool for pharmaceutical sales representatives who find themselves with an unexpected period of free time.

Tap view annotated wireframes

Annotated Wireframes

Tap view concept video

Concept Video

Tap to enlarge

User Research: Conducting a Contextual Inquiry

We started the project by doing ride-alongs with our users; which entailed spending the whole day with them. We quietly observed while they interacted with doctors and nurses in the field.

Tap to enlarge

Data Synthesis: User 1 Flow Model

After conducting user research we synthesized our data into ten flow models, two affinity diagrams, and ten cultural models.

Tap to enlarge

Data Synthesis: Flow Model Consolidation

In the picture above, we are consolidating our ten flow models into one.

Tap to enlarge

Research Findings: Presentation

We went to South San Francisco to present our research findings to Genentech stakeholders and lead a visioning workshop with them.

Tap to enlarge

Motivating Athletes through Gaming - App Video Pitch
team of three UX Designers   FEB. – MAR. 2013

TrailBlazer is a smart, ubiquitous computing system, that motivates athletes through gaming to achieve greater physical activity and competitiveness.

Tap to view video

Video Pitch

Tap to enlarge

User Research and Concept Sketches

We started the project by conducting interviews with two soccer coaches, a soccer player, the chairman of a sports tech company and the operations manager for fitness and swimming at a major university. We then developed 25 IDEO Innovation Concept Prototype Worksheets.

Design: Story Boards

After concept generation, we developed nine story boards with leading questions intended for need validation.

Tap to enlarge

User Research: Need Validation

We took our nine story boards and conducted need validation with the five interviewees we originally did user research with.

Tap to enlarge

High-Fidelity Storyboarding / Animation Cels

After we gathered all our data, we proceeded to write our script. I prepared illustrations to be used as our cels for our animated video sketch while the rest of the team recorded voiceovers, gathered sound effects and a soundtrack, and went into video production in After Effects.

Tap to enlarge

Engage the Aging in the Digital Domain - Interaction Design / Mobile
team of three UX Designers   APR. 2013

We designed a mobile app prototype for the aging population to actively participate in the digital domain while using their mobile devices.

Tap to view annotated wireframes

Annotated Wireframes

Tap to Launch Flash Prototype

High-Fidelity Interactive Prototype

I developed the visual design language and put together a hi-fidelity Flash prototype.

Tap to enlarge

User Research

We started the project by interviewing people over the age of 65 in China, India, Costa Rica, and the U.S. to better understand their needs and how they currently use mobile devices. We then developed user scenarios.

Tap to enlarge

Design: User Flows

After validating user scenarios with our target group, our solution was to have grandchildren send their grandparents email “CarePackages” that contain images, videos, notes, and social media feeds. Grandparents are encouraged to download the app and respond in kind.

Tap to enlarge

Information Architecture: Site Map

Tap to enlarge

Design Feedback Platform - Interaction Design
Co-Founder / UX Designer: team of four   APR. - DEC. 2012

We created a design critiquing platform that provides honest feedback for designers and non-designers alike.

Tap to enlarge

Information Architecture

The team started by ideating on user workflows.

Tap to view fireworks pdf

Design Language and Hi-Fidelity Prototype

I developed the visual design language and our tech team prepared a high-fidelity prototype to conduct user testing with before moving forward with our Minimum Viable Product (MVP).

Tap to enlarge

Proteus Autonomous Car - Service Design
Team of four UX Designers   JAN. - MAY 2012

With the advent of self-driving car technology, we created a non-ownership car service that provides a compelling experience for drivers and non-drivers alike with differing autonomous vehicles as they need them.

Tap to view final presentation posters pdf

Final Deliverable: Six Presentation Posters

For our final deliverable, we designed posters that explained how the Proteus Dual Mode Car System is used. Our final direction was to create six distinct vehicles:
three that would meet the needs of people who enjoy driving, and three that would meet the needs of those who want to do other things while on the road.

Tap to enlarge

Stakeholder Map

We started the project by preparing a stakeholder map.

Tap to view concept prototype worksheets pdf

Concept Worksheets

We proceeded to do a brainstorming session by developing 3 opportunity statements. We developed our ideas on post its and generated an affinity diagram. We used the idea groupings to populate thirty IDEO Innovation Concept Prototype Worksheets.

Tap to enlarge

Impact Achievability Matrix

We plotted our Concept Prototypes on an Impact Achievability Matrix to figure out which designs had the most impact and were easier to implement.

Tap to view design report pdf

Reimagining the Patient Record - UX Design & Data Visualization
Design Lead: team of fifteen   OCT. 2012

The design competition to redesign the patient health record was set forth by the U.S. Department of Veteran Affairs. Our team took three weeks to complete the challenge. Our entry was selected by the judges to be showcased as one of the entries which “inspired the judges and challenged the status quo”.

Tap to view annotated wireframes

Homework Magic - Interaction Design / Tablet
Design Lead: team of four   MAY - JUN. 2010

I developed the high-fidelity wireframes and visual design for Homework Magic:
an app that employs gaming to help kids complete their homework.

Tap to enlarge

Preschool Prep Kits E-commerce Site
Design Lead: team of four   JAN. 2009 - MAY 2010

Our team developed packaging, activity books, e-commerce website, and how-to videos for four Grasshopper Preschool Prep Kits.

Tap to enlarge

Preschool Prep Kits Packaging
Design Lead: team of four   JAN. 2009 - MAY 2010

Our team developed packaging, activity books, website, and how-to videos for four Grasshopper Preschool Prep Kits.

Lowboz: The Chair Silencer E-commerce Site
Co-Founder / Design Lead: team of four   JAN. 2009 - PRESENT

Our team designed the physical product, branding, packaging, and e-commerce website for Lowboz – The Chair Silencer.

Tap to check out how-to video

Lowboz: The Chair Silencer How-to Video
Co-Founder / Design Lead: team of four   JAN. 2009 - PRESENT

I designed & created the storyboards and illustrations for Lowboz — The Chair Silencer How-to Video. The dev team put together the video animation.

Tap to enlarge

Rebranding Initiative - Branding
Senior Designer: team of six    AUG. - NOV. 1995

Our team lead a rebranding initiative for the MTA MetroCard after all NYC metro station turnstiles were replaced to accept MetroCards. My design was the final chosen version.

Tap to enlarge

Rebranding Initiative - Branding
Senior Designer: team of six   AUG. - NOV. 1995

Our team lead a rebranding initiative for the MTA MetroCard after all metro station turnstiles in NYC were replaced to accept MetroCards. Above you can see other semi-finalist designs.

Tap to enlarge

Pair of R. M. Schindler Designed Sofas

My partner and I built a pair of R. M. Schindler sofas out of reclaimed Hemlock wood pews. The Hemlock was carefully stripped of centuries-old varnish layers and cut into mitered sections. The shelves and 1 x 4 caps were cut from new pine.

Tap to enlarge

R. M. Schindler Designed Sofa Detail

The mitered corners were cut, pinned and glued together. The shelf is pinned and glued to the back and held level by a vertical support seen on the left.

Tap to enlarge

Carlos Motta Designed Lounge Chair

I built a Carlos Motta designed lounge chair out of reclaimed wood floorboards from a neighbor's bridge. All the pieces were hand-cut with a japanese Ryoba saw for better control and finish.

Tap to enlarge

Carlos Motta Designed Lounge Chair Frame

The pieces are held together with wooden dowels.

Tap to enlarge

Adaptation of a Frank Lloyd Wright Designed Sideboard

I built an adapted version of a Frank Lloyd Wright designed sideboard out of reclaimed wood floorboards from a neighbor's bridge and reclaimed Hemlock wood pews. All the pieces were hand-cut with a japanese Ryoba saw and screwed together with metal brackets.

me at lgonza com