Meta: Augmented Reality

Joining Meta in their second year as a startup, as their Sr. Director of UX, I founded and led the UX design group, creating the UX architecture, design and strategy for a multifaceted ecosystem comprised of a custom framework SDK, native and third-party apps running on a custom head-mounted display (HMD) powering a 3D holographic spatial experience.

My core focus was creating a cohesive user experience for a multifaceted ecosystem comprised of custom SDK framework, native and third-party apps for custom HMD powering a holographic spatial experience. I authored a custom AR HIG and drove formation of experience design best practices tailored for augmented and mixed reality usability. This included authoring detailed specs on holograph-application design, usability, features and functionality. I scoped and managed UX prototyping sprints, created touchless interaction models while leveraging HCI principles based on device inputs: hand/body gestures, gaze/eye-tracking, voice-based and NUI interfaces. I managed designers and worked closely with computer vision and SLAM engineers. Collaborated with C-suite on road-mapping, go-to-market strategy, business development, hiring and process implementation.

"Wireflows" were the most applicable schematic solution for these very first prototypical apps. These first two apps launching along with the publication of the SKD were very much a "hello world," demonstrating this new technology but not yet pushing the limits.

SDK Wireframing and Usability

'Paper Prototyping' for Augmented Reality.

Testing hardware.

HMD: Sketching

Frog Design created the base HMD unit. I was asked to consider the usability, size and placement of several additional buttons along both sides of the unit.

Duarte: Onsite Strategy Workshop

Case Study: Duarte is a thought-leader and subject matter expert in story-crafting and communications, located in the heart of Silicon Valley. Nancy Duarte reached out with a challenge to create a forward-looking re-imagination of methodologies by which she could create improved and more impactful engagements with her customers, to grow with deeper reach, and leverage their existing content while creating additional value via custom IP. In addition, she sought to create and foster a community among her users, leveraging cutting edge technologies along with improved monetization.

I led an initial two-day onsite workshop with Nancy and my solutions architect. Our goal was to, working with her high-level vision and several previous weeks of immersion and research, dive into each component of her ecosystem with assessments, proposals and dialog about viability and options. We were then able to sketch out a technical roadmap to achieve her goal of launching an enriched user experience and product offerings by Q4 2017.

During the workshop, we provided scope and grounding for each component of this new ecosystem, including growth and ROI potential along with implications/challenges and caveats of each component, noting where economies could be found (by leveraging open source/off-the-shelf systems) and partnerships vs custom solutions.

Research was a key component of pre-workshop prep as well as post-workshop follow-up and documentation. Activities included consultation with leading edge AI subject matter experts and open source framework platform providers, combining all gathered intel with business requirements. Applying these insights allowed us to project how Nancy could meet her Q4 goal. This engagement was a great success and through continued check-ins, I'm finding Mary firmly (and aggressively) on the path to a great launch later this year.

"Feature X" Planning/Architecture

Onsite at Duarte

My Solutions Architect, Jim Duong, with me at Duarte.I find having a solutions architect as a partner during strategy workshops keeps our session work grounded in reality and feasibility, while we create, ideate and strategize. At a high-level, my method is that we 'tag team' between concept-solution-risk/cost-alternatives-implementation, and by the end of the workshop's second day, the new ecosystem has been roughed out, along with next steps/TBD's, action items assigned. In this case, we identified several open source frameworks to investigate further, several technologies to research and weigh (machine learning/AI platforms), scoped phases, added clarity around feature sets and functionality.

Toyota Futuristic Tech Concepts

Toyota has an app used by it's salesforce and dealers called 'Pocket Source.' At the time, the app hadn't been updated for two years, and they were now looking for a re-imagining of how they might improve the app by leverage emerging tech. They requested concepts categorized in three tiers: good/better/best, ranked by criteria of cost, viability of the tech, overall vision and usage applicable to serving the needs of the intended users.

The deck you see at left represents the presentation of the concepts I proposed, along with supporting references and scenarios. Interesting to note that many of Toyota's competitors have implemented my mid- and top-tier concepts since the time of this project in late 2015.

Three instances of a high-level roadmap for all core features, as seen through the lens of each tier of the tech solutions proposal.

Codename: TED

My agency client decided to undertake building a custom software package to address a problem they were having in the video project/production space: lack of a solid project management software, tailored to meet their requirements. Salesforce, Basecamp, MS Project none met their specific industry needs.

They came to me with a set of primitive, generally referential wireframes, and a challenge to re-create the user experience using a more professional approach while simultaneously creating the visual design. In their words, "make this garage full of tools feel more like a swiss army knife. We don't want to 'Apple-ize' it and remove or bury useful features just for the sake of simplicity, but we want the experience to be more pleasant than working in Excel."

They added, "Ultimately, you're the UX expert, with freedom to use your own respected judgment. Our primary goals are simply that it's easy to use and train others to use, and that it's as friendly and approachable as reasonably possible. We want 'TED' to be an assistant, and never an obstacle."

With my client's complete trust, I led them through my creative process of market research, color palette exploration, mood boarding, and the unconventional (and not recommended) "UX-during-design" approach, delivering the system of screens at left. I designed the entire system in Illustrator, with all assets generated as .SVG also easily rendered via code. This also makes for an efficiently-rendered GUI on the backend. Flat before flat was cool. :-)

The client was thrilled with the end product, expressing that it exceeded all of their needs and desires.

1 of 2 Mood Boards: "Dark Digi-Tech"

Selected Mood Board: "Fresh n' Juicy"

Client felt this was much more engaging and would create a more inviting approach to the interface, considering the end users would be spending many hours a day in this tool. (I agreed!)

SocialCare for Health Symmetric

Health Symmetric was created to address the needs of the 2012 healthcare ecosystem environment and to meet the Federal EHR/CRM 2015 mandate in creating a cloud- and web-based EHR/CRM platform. SocialCare is a platform featuring centralized medical records within an open API and social media interactions. The system streamlined workflow from patient check-in to billing and would allow private practices to integrate third-party software where desired.

As the Director of User Experience & Creative for this startup, my mission was to create a bi-platform experience: an iPad app allowing physicians to manage records through an intuitive and non-intimidating interface; and the care staff would utilize a web interface for managing patients and admin tasks.

To this end, I translated complex healthcare industry-specific guidelines and business rules (along with evolving federal mandate requirements) into intuitive, approachable user experiences which are HIPAA-standards-compliant, easy to use and aesthetically engaging.

I completely re-conceived their early-stage rough POC/prototype UX architecture while simultaneously creating the new visual design language for the platform; working closely with SME's, PM and founders to define scenarios and MU requirements-based specs; collaborated with engineering to deliver pixel-perfect production assets and visual toolkits.

Branding for both the startup and it's flagship product, I created a treatment based on the client's requirements: must be red/white/blue color scheme and not contain any medical/healthcare iconography.

This final mark can be seen as an abstract top-down view of a care-giver and his patients, or reversed – a patient and his care team. It can also represent the SocialCare core platform and the future product family.

Concept Model

Concept for a SocialCare Marketplace, much more than an app store. Primary users are Admins, Pharmacies, Technicians, Nurses, Physicians and Specialists. Content includes not only a wide variety of apps but also subscriptions, events and conferences, reference libraries, video and more.

Social Care Business System

Creative: Mood Board 1

First of three mood boards, presenting options for look and feel direction.

Creative: Mood Board 2

Second of three mood boards. Stakeholders liked this one, with modifications...

Creative: Mood Board 3

Selected mood board direction. Stakeholders gravitated towards this color scheme and requested metallic accents. The final product look-and-feel morphed a bit during production, but still retained some of the qualities they liked here.

Creative: Visual Toolkit

Many months in the making, this visual toolkit contains all assets and stylized graphics used in the SocialCare iOS tablet platform.

Multi-platform

SocialCare's primary use cases are targeted at two main platforms: iOS tablets in use during 1:1 patient care during exams and visits. Secondary use case is browser-based, used by the office staff, back-of-house and admins.

I created the branding, GUI design and UX architecture for the startup and the product.

We migrated to the new "Flat" design aesthetic, circa fall/winter 2013.

Custom Web Font

I created a font comprised of 80+ icons. This technique is used to ensure that icons (and custom fonts) stay crisp and pin-sharp when viewed in browsers across platforms, especially on retina displays.

User Flow Sketches

Brainstorming/sketching of SOAP Note user flows.

User Flow Diagram

Scenario: Scheduled Patient, Note Customization Options.

Wireframe: 'Cards' Interaction Method

Scenario: Care team working through a Note.Each of the two main panels scrolls vertically/independently, providing efficient and contextual interaction between local navigation on left and associated card content on right.

This was my suggested solution to the common use case of physicians needing easy and intuitive access to all parts of a 'Note' during a patient exam. [Common complaints of current EMR's: they force the user to focus more on the tool rather than the patient.] The card interaction methodology heretofore unseen in EMR's, and was met with great enthusiasm by our SME's.

Color-coding the top-most categories of the SOAP allows for a bit more differentiation (and mental segmentation) between sections.

Sony Electronics

I was asked to create both the UX and visual design for a new Unified Platform News & Blog project for Sony.

Stakeholders provided formal business requirements, documentation and brand guidelines. What follows are the highlight of my process:

I created the site architecture based on use case scenarios, content types and hierarchies, tech touch points, page types and functional requirements.

After the sitemap was finalized, I began iterative wireframing, based on the structure, naming conventions, navigation, user decision-points, tech stack, features and, from a high-level, front-end functionality outlined in the sitemap. Wires are used to flesh out the content hierarchy, interaction metaphors and detailed page/screen interface architecture. Annotations serve to articulate F&F (features & functionality), content points, tech notes and other specs, including open issues, providing discussion points and actionable items, next steps and ultimately will become a set of blueprints used by both designers and developers.

UX phase was followed by visual design, based on the approved architecture and client's brand guidelines. Lastly, I created a development style guide/spec for build using WordPress.

This guide presents detailed specs for developers with regards to building the final design.

Styleguide

Styleguide

Chef Mark Peel

Chef Mark Peel, founder and previous owner of Campanille and La Brea Bread in Los Angeles, CA has asked me to create branding for his new culinary pursuits, soon to be announced. Look for his re-emergence into the LA food scene fall of 2014!

Chef cares deeply about the simplicity of unfussy, unadulterated, sustainably-sourced food. The imagery that will be used throughout the coming design development will reflect this approach to food with it's integrity intact.

Final Selected Logo

...for further refinement.

RelayTV: Live Relay

RelayTVis an interactive social TV service connecting families and friends. It allows for real-time two-way fun interaction while watching a variety of sports, entertainment and lifestyle shows together, even across the globe. Share the moment, watching and interacting together, engaging as if you were in the same living room.

My role: requirements-gathering, product research, user experience architecture for the set top box guide streaming-media experience as well as the UX and creative for the product launch website.

Relay.TV Player

Functionality of the player includes real-time chat, animated stickers, channel surfing, and media controls.

Sitemap

New architecture for Live Relay's marketing website. Information architecture included incorporating new messaging content, identifying key interactions throughout the site, creating a method by which potential customers could test-drive the Relay.TV streamed programming and social experiences.

Working through user flows.

Website Mood Board (1 of 2)

Client selected this direction – bright, vibrant, warm, not too "techie." They especially loved the color swatch strip above "Virtual Living Room" and requested that be the new primary color palette.

This design and treatment represents a more subdued color palette than the chosen mood board suggests. Throughout the design process, the client gravitated away from the chosen mood board towards a more neutral palette with bright colors used solely for CTA's and controls.

Visual Language

Example of hover-states and selections.

Shop Relay.TV devices

Demonstrating the final look and feel implemented on Product page.

Functional Overview with Annotations

Much like a functional spec, this document provided a detailed overview of content types and hierarchy, information architecture, interaction design and creative solutions.

Relay.TV "Box Experience"

Screen captures and mapping of existing user flow through the Relay.TV box experience illustrating the user's path through launching the app and navigating via Relay.TV remote.

Relay.TV Web Player Streaming UX

Annotated wireframe illustrating two states of the web player experience: initial default state and full screen, with associated content/controls for each mode. (Refer to close-ups below).

Relay.TV Web Player Streaming UX

Detail view of default state (windowed, not full screen).

Detail view of Full-Screen Web Player

Controls UX

Annotated wireframe illustrating entire set of UI controls and states.

Channel List & What Friends Are Watching

Channel Guide UX

My approach to wireframing is such that both designers and developers are each informed by these deeply-considered blueprints to such a degree as they have everything they need to do their jobs effectively; stakeholders find these informative UX articles as building upon and extending preceding product documentation.

Starbucks Love Project

In one amazing moment, the world came together to sing about the one thing we all have in common: love. People from around the world sang the legendary hit "All You Need is Love" in a single voice on December 7, 2009 at 8:30amEST. The global sing-along was part of Starbucks' continuing efforts to help fight AIDS in Africa. In just one year in partnership with (RED)™, Starbucks has generated money equivalent to more than 7 million days of medicine to help those living with HIV in Africa.

I was very fortunate to be involved in this incredible and global effort, asked to provide the UX across a very complex and multi-phased release with many moving parts. The many talented people and agencies involved include: Aaron Koblin, Chris Palmer, Justin Bain, Michaela Johnson, Jesse Brihn, Brian DiLorenzo, Dustin Callif, BBDO NY, Hello Enjoy, and of course Starbucks & (RED) client.

"We used Starbucks' global reach to raise donations for the Global Fund to Fight AIDS in Africa. On December 7, 2009 we united musicians from over 156 countries to sing 'All You Need Is Love' at exactly the same time. It was broadcast online so the whole world could join in."– Tool of North America/Gorgeous Enterprises

The three videos included give an idea of how amazing this project was, including the 'Making of.' Don't miss 'em!

Note: All creative displayed here is courtesy of Hello Enjoy and Tool of North America and is the result of many hands, presented with the purpose of showing how the UX informed the creative.

"We used Starbucks' global reach to raise donations for the Global Fund to Fight AIDS in Africa. On December 7, 2009 we united musicians from over 156 countries to sing 'All You Need Is Love' at exactly the same time. It was broadcast online so the whole world could join in." – Tool of North America/Gorgeous Enterprises

UGC User Flow

Love Drawing (user-generated content) Facebook flow and integration.

Sitemap: Phase 1 – 2

Sitemap: Phase 3 – 4

Love Gallery Wireframe

[Infinity] Love Drawing Gallery

Love Drawing Wireframe

Love Drawing

UGC Video + Sharing

Playing for Change

The Making Of and Final Video

Watch this Making Of video for a glimpse of how it all came together.

All You Need Is Love

Fun video showing all the remote sing-a-longs, edited together to create the experience.

Disney International Marketing Group

This special group within Disney had an enterprise-scale, critically important problem to address. I was able to help them solve the problem of replacing their out-of-date and inefficient process of launching and marketing film campaigns by creating a customized intuitive, collaborative and cross-group enterprise product used for efficiently managing the launch of Disney's theatrical releases outside of the US (initially, then to be implemented stateside).

After an initial consultation, where I was able to gather the key pain points, needs and requirements, develop primary user types and use-case scenarios, I determined what they needed was a custom portal, a unique 'Sharepoint' approach, but completely customized to their needs and environment. After immediate buy-in by the key stakeholder, I won the UX contract and was flown to LA the next day to lead a 3-day intensive onsite with the agency and Disney stakeholders.My role was the Principal UX and Product Architect.

Disney IMG Ecosystem Diagram & Approach

One of my early UX Discovery Phase techniques is to create an ecosystem diagram, reflecting all entry points, landing screens, core tasks, ingestion and export items, and user flows for these items comprising the system. Often times I'll create two ecosystem diagrams reflecting both the current system and the proposed system for compare/contrast.

Disney IMG: System Sitemap

After our 3-day immersion where we whiteboard-ed the new features and functionality, I was able to articulate the new system beginning with this sitemap, which represents the scope of the front end experience, including landing screens, user decision points, features and functionality, and technologies used within this new system.

Disney IMG Wireframe: Calendar Timeline, Annual View

It was a known factor this system would have a complex user experience under the hood, but my highest imperative was that it be absolutely intuitive to use.

This wireframe of the 'Annual-view of campaigns timeline' features color coding of each campaign for quick identification, with shapes representing starting/ending states. Once the user learns this simple key, browsing/searching/finding throughout the system becomes effortless.

Campaigns features two views: timeline and calendar grid, with filtering/soloing by campaigns and/or film-related events.

The wireframe also illustrates various interaction mechanisms by which additional controls, content and options are accessed.

There are two tools which consistently follow the user throughout the system: Alerts Menu and Hot List (which contains My Tasks and Watch List). This is just one example of how I was able to interpret the user's needs into an intuitive and problem-solving system.

Disney IMG Wireframe: Selected Campaign

In this wire, I'm illustrating a 2.5 month view of a selected campaign, showing all key milestones in the timeline. Users can zoom in/out of the graphical timeline for more granular or high-level data representation.

The spreadsheet-like panel below allows for much detailed information to be presented in a compact yet easy to understand way, while also indicating context, hierarchy and offering additional controls. Users view, sort, select, email, and receive alerts within this panel. Users can also navigate other active, past and future campaigns via the ever-present Campaigns panel on the left.

Disney IMG Wireframe: Calendar Grid

By comparison, this calendar view depicts both campaigns and events, with interaction mechanisms for each. Users can also create new calendar items from this state, and 'deep dive' into all or selected individual campaigns via the data panel below. My goal was to provide as much required information about a campaign to the user, keeping it all at their fingertips, while also offering opportunities for navigating deeper levels of data and controls as needed via self-direction.

The feedback from stakeholders, and the agency's design and dev were very happy with this level of wireframe fidelity and accompanying annotations. I approach wireframing as creating blueprints for software – each discipline should find what they need to execute their jobs successfully.

Disney IMG Wireframe: Calendar Grid – Week View

The calendar grid view has three view states within the grid: day, week and month views.