From Hack to Product Feature - How to leverage R&D at work through hackathons

From Hack to Product Feature How to leverage R&D at work through hackathons

July 16, 2020 #A11yVR meetup.com/a11yvr Roland Dubois @rolanddubois

Hello, I’m Roland Dubois

Product Designer, Leader, Manager Recently, Product UX Lead at a SaaS Startup XR Accessibility at Virtuleap Mozilla Tech Speaker Member of W3C Immersive Web CG & XR Access Initiative Host of WebXR (A-Frame NYC) workshops & events Creating immersive experiments that make the current VR/AR industry accessible for everyone.

Agenda

Design & Maturity Facility Management The Ideas That Don’t Fit Find Your Hackathon Hack & Open-Source Build Your Case At Work

Design & Maturity

Design in Startups

• Startups are scrappy & messy “… growing pains”
• No time or energy to experiment beyond the product roadmap
• Focus on product-market fit
• Sales team is the main driver
• Design keeps up with the agile dev team
• Accessibility is deprioritized “… receiving ADA compliance letters are a cost of doing business …”

What is Design/UX Maturity?

It’s a scale that measures the business relationship with design. Increasing the maturity of design in a company is not something that can be done overnight. It can take years. But it happens every day in small steps.

5 Stages of UX Design Maturity by Jared Spool

Dark Ages (no UX Design) Spot UX Design UX Design as a Service Embedded UX Infused UX Design (Everyone has fluent design skills)

5 Stages of UX Design Maturity by Jared Spool

Dark Ages (no UX Design) Spot UX Design

• Area of opportunity -

UX Design as a Service Embedded UX Infused UX Design (Everyone has fluent design skills)

What is DesignOps?

• Bridge between product/sales, engineering, and design
• Design delivery pipeline (design process)
• Build and strengthen product features
• Keep the design/UX accessible (WCAG guidelines)
• User research
• Active feedback loop with the customer
• Strategic planning with product/sales

Facility Management

Facility management (FM) in a hospital complex

LMU Klinikum Großhadern in Munich Germany, built in 1977 expanded until today. With over 2.000 beds, over 10.000 staff, approx. 1.800 physicians, and 500.000 patients per year. One of the largest clinic complexes in Europe. LMU Klinikum Großhadern

Behind the Scenes

HVAC Units Power plant Generators Construction Outages Circuit Boxes Fire Escape Routes Fires IC Unit Fire Elevators LMU Klinikum Großhadern

User Personas

Airflow Control Security System Lighting & Energy Director bam.com Manager Supervisor Dispatcher Worker/Specialist cselectrical.org

Age 35-65 (aging workforce) Union Workers Veterans Engineering degrees Limited resources LMU Klinikum Großhadern Controllers apleona.com Sensors Control Valves BAS/BMS

FM Tools

• cognitive overload
• no color-a11y
• flat visuals for a spatial environment
• keyboard accessible

Customer Pain Points

FM team is working reactively rather than proactively

Budgets are tight and resources (workers) are limited

Operation and quality of work can’t be measured

Building automation system (BAS) alarm data doesn’t provide meaningful context

Root causes of problems are impossible to discover quickly

Opportunities to explore

Traditional 2D data-visualization (on the product roadmap) Traditional 2D data-visualization (on the product roadmap)

• Displaying Alarms in one concise and contextualized way
• Tracking quality of work
• Presenting clean and accessible interfaces

Opportunity for web-based 3D / XR visualization (outside the product roadmap)

• Where is the problem located? Show alarm data in a spatial context
• What is the context, root cause of the problem? Show other alarms in spatial relationships
• Where is the person to solve the problem? Show the position of the workforce
• How can we measure to improve resource management? Calculate how long it will take to get a worker to check and solve the problem

Ideas That Don’t Fit

What if your ideas don’t fit the product roadmap?

Hypothesis Visualizing alarm data in its spatial context improves the speed and quality of problem assessment and resolution.

Challenge Keeping the app interface …

• keyboard accessible
• screen readable
• progressively enhancing: 2D ⇨ 3D ⇨ AR/VR

What if your ideas don’t fit the product roadmap?

1. Create an ideal user story
2. List the user pain points
3. Abstract and generalize
4. Share your goals and build a minimum viable product (MVP)

1. User Story

The dispatcher receives a call from a nurse about high temperatures in the OR The dispatcher looks at the alarm data coming from sensors in rooms on the floor The dispatcher sees an issue with the chiller The dispatcher adds the chiller issue on a work order The dispatcher looks for a specialist to send to fix the chiller issue The dispatcher sends out the work order and sees time estimate when the work will start Worker receives a work order and fixes the chiller and completes the work order The dispatcher sees that the room temperature returned to a normal range - the work was successful

2. List of pain points

Data quality problem

• Where is the problem located?
• What systems are connected or close to the problem?
• Where is the worker to solve the problem?

Math problem

• How long will it take for the worker to get there?
• When is the problem solved?

Logistical problem

• How can the software create 3D models without needing external resources?
• Need: Scalable device-independent and easily maintainable solution
• Need: Accessible for screen-readers and keyboard navigation, AT

3. [Abstract] and generalize

Data quality problem

• Static objects (locations) and moving objects (people) with property data (metadata)

Math problem

• Calculating the distance between objects and estimating time
• Indoor navigation, travel paths

Logistical problem

• Open-source code stack
• Converting 2D SVG/Canvas drawings into 3D models

3. Abstract and [generalize]

Government-funded institutions (e.g. hospitals, research labs, educational facilities, and universities) aren’t able to showcase their buildings in an interactive 3D way because there is no fallback for assistive technology.

Why?

• Strict ADA compliance guidelines.
• Section 508, 503.
• No standards for accessible 3D and XR experiences.
• Current solutions seem sufficient.

https://web.mit.edu/campus-map/pdf/mit-accessibility-color-current.pdf

4. Share your goals

As a user, I want to …

• be able to navigate digital buildings with any device in any dimension.
• know where to go and how long it will take to get there.

Devices: mobile, tablet, desktop, VR headset and AR glasses.

1D TTS, screen readers

2D/3D Flat screens, touch displays

AR/VR/MR Mobile, HMD, and glasses

Find Your Hackathon

Find Your Hackathon

Choose an event that provides enough time and support for you to realize your MVP

• Look for industry specific events (AEC Hackathon, AT&T Hackathon, T-Mobile Hacktober, XR Edu Challenge)
• Look for university sponsored events (MIT Reality Hack, NYUAD Hackathon, HackXR (UCSD), HackPrinceton)
• Consider length of the event (SXSW Hackathon - 24h)
• Who’s attending? Is it inclusive, are there efforts towards a11y?
• What’s the event mission? Is there an alignment with your project?
• Browse on Devpost

Hack & Open-Source

MIT Reality Hack - January 16-20, 2020

Hackathon Title: ProgressivelyEnhancedIndoorNavigationWebXR

Feature goals:

• Scalable ecosystem
• Low entry barrier
• Open-source code
• Device independency
• Web-based framework
• User-relevant metadata inside a building

screenshots

screenshots

Challenges with Indoor Navigation

• Imprecision in directions
• Navigation of unknown areas
• Lack of visibility and occlusion
• Unknown spatial conditions (construction)
• Unreliable mapping - Definition of indoor boundaries (manual, time-consuming)
• User orientation and position (hard to define)

Our Solution for Indoor Navigation

Creation of a spatial navigation grid. Enabling a safe and effective indoor guidance system for users. Inspired by “grid pathfinding” in game development.

Code Stack

WebXR API

Usertest your project with other hackers!

Build Your Case At Work

Build Your Case At Work

• Share your hackathon project in a lunch & learn
• Showcase what user pain points your project solves including user test results / collected feedback
• Re-adapt your hackathon project to the initial product feature
• Create task flows, wireframes, and a clickable prototype
• Put your idea into the product roadmap

Build Your Case At Work

Build Your Case At Work

Looking Glass Factory - Holographic touch display 3D visualization on a laptop browser

Recap

Design & Maturity Facility Management The Ideas That Don’t Fit Find Your Hackathon Hack & Open-Source Build Your Case At Work

Events and Meetups

Get in Touch

Resources Design Maturity https://articles.uie.com/beyond_ux_tipping_point/ https://uxdesign.cc/a-framework-for-measuring-design-maturity-8f

Hackathons Devpost, AEC Hackathon, AT&T Hackathon, T-Mobile Hacktober, XR Edu Challenge, MIT Reality Hack, NYUAD Hackathon, HackXR (UCSD), HackPrinceton, SXSW Hackathon

Accessibility Resources https://xraccess.org/resources/ https://www.w3.org/TR/WCAG21/

WebXR https://immersiveweb.dev/ https://www.meetup.com/A-Frame-NYC/