Author Archives: leehp

Innovative Gaming for Healthcare

NetSafe Challenge

A game for marketing NetSafe which is a business continuity software package for hospitals from Interbit Data. When a hospital network goes down either for IT issues, a planned or unplanned downtime, cyberattack or any other reason, NetSafe can keep the hospital staff running for a time using their PCs, tablets, etc. like they normally would. I created a game to show how chaotic it can be without a product like NetSafe. I wanted it to be…

  • Fun
  • Simple to learn
  • Playable for non-gamers
  • Include hospital lingo that would make nurses laugh
  • Competitive
  • Make the point about NetSafe

We tested the game at a large trade show with roughly 25% of the attendees playing. NetSafe Challenge was a big success and it was great to hear nurses and hospital staff laugh at some of the lines we added to the game.

It was difficult to come up with a game that was easy to learn but included a lot to do at a fast pace. After several misses I ended up basing the game on the popular hit, Diner Dash. Patients enter a hospital and the player must get them checked in stat! After going to the Admin desk, they go to a bed and as diagnosis icons pop up the player must quickly address the patient’s issues. As the game evolves more medical issues are introduced and more patients arrive at a faster pace.
My initial rendering of how the game should look and how it worked. The graphics designer and programmer used this as a visual guide.
My workflow provided what should and would happen during gameplay.
The level guide provided scenarios for each segment, I worked out further details as we went through the development process.
Working with our marketing director at Interbit Data I asked him to take the rough script I had and flesh it out detailing each level. And mostly coming up with the beginning and ending splash screen copy for each level.
Entering the door at the back of screen provide options for the lab, pharmacy etc. As we added more doors, we considered a 3D hallway look but before we even added it, we determined it would get in the way of the rapid gameplay.
…so, we stuck with the original plan where players could easily select a door.
The level intro splash screens told players what to expect!
The level exit splash screens pushed the NetSafe product and functionality.
Some of the graphic elements – I wanted the game to have a cartoonish look, colorful and not too realistic. Some of these went through a few changes so they were easier to see and understand.
We included various races, male and female. The player could also choose their own character with similar options. The beds and bodies mostly stayed the same, just the head and hands changed.
Debut at MUSE Inspire 2018 in Orlando, FL (Meditech User Software Exchange)

Making Technology Relatable

NetRelay

NetRelay is a secure messaging platform for HIPAA compliant communication between healthcare professionals. The sleek and clean UI uses recognizable icons for functionality and unlike competitors allows HTML for colorful tiles and custom graphics. I created a set of the tiles to expand the communication functionality.

A one page info sheet I created – I wanted a minimalistic look so I used a white iPhone and kept copy to the basics with a lot of white space on the page.
Whereas competing products simply displayed text messages NetRelay uses custom built tiles.
Admission alerts indicate when and where patients are going along and include the attending physician name. I chose pastels for a soft clinical look that was easy to read.
Housekeeping alerts orderlies when hospital rooms need cleaning or special attention.
Code alerts can go out to whatever team, floor or stations are needed. It was important to call out the patient name and room number in a larger font.
A large display UI was kept simple & clean. The information could be on a nurse’s desk or tablet. In this case for a radiology waiting room. The data was tied to the same feed as the secure text messages. I stayed with the same pastel colors as the app tiles.
I created this workflow, and all the images, displaying what is a fairly complex process into an easy-to-follow icon driven diagram so that decision makers at a hospital could understand the NetRelay communications integration.

Award Winning Mobile Gaming

Star Rangers

Star Rangers is a fast-paced space fighter game based on the original Atari game Star Raiders. Back when I launched my Atari computer magazine, ANALOG Computing, we were huge fans of Star Raiders. In fact, so were a lot of other people and that game single handily sold more Atari computers than anything else. So, when mobile devices finally had larger screens and fast processors, I brought some of the ol’ team back together to create Star Rangers. I handled the game design, marketing and testing. Tom Hudson, who was the creator of 3D Studio, heading up programming and Jon Bell rendered the graphics. Jon previously did work for James Cameron on the Abyss, Discovery and History Channels. They have been long time friends and both work for Autodesk now. Star Rangers won huge accolades from players and great reviews.

These images are from the tablet version, the smartphone version looked just as good, but the controls were crammed into the smaller space. The forward view above has the displays for fuel, number of enemy ships, timer, throttle, scanners, etc. They had to be far enough apart to prevent accidentally hitting the wrong control. Notice we arced the throttle on the left since that’s how your thumb would move when holding the tablet. We used large buttons for the functions on the top and bottom rows. At the time the game had far more sound FX than the average game…over 120 of them! Each class of every ship had its own explosion sound and there were 3 versions of each of those, so you didn’t hear the same sounds over and over. I made the heavier ships explode with more bass and the crystalline ships sounded similar to shattering glass. While flying the ship there were background sounds like on the bridge of the Enterprise in Star Trek.

The Galactic Map shows enemy ship movements, ally refueling stations and friendly star bases. Tapping on a sector will take you there if you are good enough at steering through hyperspace. The enemy ships move in to surround and destroy the bases – they need to be stopped. “All your base are belong to us
3D Tactical Long-Range Sensors show enemy ships and your bases in a sector. This is handy to see what’s going and navigate. It was fully iterative and live in real time.
Game menu flow – I rendered this so that the team could build the imbedded menu links.

I worked with composer S. Christian Collins to score some cuts for the game. I had him listen to some Japanese turn-based games I liked for the Main Theme and Victory tracks. For “Game Over: I wanted a dirge. The “CGI Cut” was the first take on a theme but it sounded to 80s-ish, so we used it for the video demo and CGI cuts. (Click on any of the links below to hear the soundtrack.)

 

 

 

 

 

 

 

Star Rangers “Main Theme

Star Rangers “Victory!

Star Rangers “Game Over Man!

Star Rangers “CGI / Disco Cut

Wire frame model Jon Bell worked on. I asked him to try and animate the ships under translucent skins and this was his first take. I liked the idea of mechanisms moving around inside the ship, like engine drives.

The following link is for the CGI-opening cut video. Everything looked pretty good except there were to many asteroids and the lighting needed some work. This and the wire frame model were rendered by Jon Bell with 3D Studio Max, which Tom Hudson, the lead programmer for the game, created.

“Star Rangers CGI / Opening Cut” (no audio)

 

https://youtu.be/3TGFP73oaR4
youTube link to the Star Rangers promo.
As a team we always made our job fun. Producing a video game or monthly magazine is really hard so goofing has to be part of the plan. 18 medals could be earned in total, this was what I sent the team for how I wanted that page to look.
The final renderings were beautifully created by Jon Bell from a list I had of achievements. I really like the radar-ish tactical badge, galactic swirls, sun and enemy ship pins.

Transforming Web-based software to a modern interface

Enflight

Enflight was a heavily used but aging preflight online application for pilots. They needed a mobile version, so a friend brought me in to help with the UI/UX. My work in video game design was applied to this project which is exactly what it needs. In addition, my background as a pilot came in handy during the overall design and in-air testing.

The main screen is the aviation map using FAA provided data and updated via frequent downloads. A heads-up display at the top indicated GPS signal, altitude, airspeed, heading, course, destination, estimated time en route and speed. Touching the screen created a “rubber band” route to your location using landmarks, radio beacons, etc. Tapping on any segment allowed for detours and easy changes.
Enflight Mobile was gesture based. Swiping down brought weather maps to full screen, side-to-side swiping brought up high altitude navigation maps, and swiping up from the bottom gave access to a slew of information such as Terminal Maps for destination and so on.
A long hold with your finger anywhere on the map brings up the rosette wheel giving quick functionality to whatever the pilot wants. Each “petal” was customizable. I also came up with the concept of the accelerometer in the phone or tablet detecting turbulence thresholds in the cockpit and based on that the size of the icons could increase 2x-3x to make them easier to hit. I also used a larger invisible “touch area” surrounding the icons for better success.

The TAF spiral was an innovative approach to displaying weather en route over 24 hours. We could display them over one or more airfields in real time.

The sidebar ribbon on the right could be hidden from view when the user desired a full screen map. The ribbon contained guides to every airport, flight logs, servicing logs, flight plan info, additional charts, weather data and whatever documents the user wants to add. I rendered the icons in a 3D style. I choose a “sky blue” palette for many of the backgrounds in the app.

Overlaying real time weather was an option with a weather data radio in the cockpit.

A look at the early icons when I was testing various color themes and backgrounds.
Our wishlist of functions and features. Dream big and see what works.

DIY on a shoestring

Building a Candy Counter

A step-by-step DIY candy counter guide for your home theater that appeared in Home Theater Builder magazine. We pushed this as a project that someone could build in two days and on a budget. I enlisted my neighbor whose hobby is woodworking and he did an aging job, as you can see. I wanted a mini version of a movie theater candy counter so that meant including a small window on top of the counter to look down unto the cabinet. The article included every step of the process – we never had readers contact us because they were confused.

Candy Counter
Candy Counter
My neighbor Rich really knows his stuff when it comes to woodworking. He basically built this in his head before we even started. Rich did 90% of the work on construction, I took the photos and held pieces or wood strips. We ended up holding a contest and selling the finished product to one of our readers in NY state.
No details were left behind. The goal of every DIY article was to provide more than what the reader expected. We used a combination of photos and relied heavily on illustrations to make each step clear.

Publishing the Future of consumer electronics

Home Theater Builder

A monthly magazine for designing and building a home theater. I founded and published HTB, my 9th consumer electronics magazine. I wanted the magazine to save as useful source in every facet of home theater design and contraction to I had it printed in an oversized format, 9′ w x 11″ and on premium matt paper.

I always disliked the incongruous look in magazines where they grabbed images from wherever, frequently for free. So I hired an illustrator to render every image we used in the how to projects, that way the magazine had its own style and flowed better. So you can see from the illustration below they have the same style. As I did with my previous magazines, we were bringing hi-tech to everyone, so we had to apply UI to the magazines. Looking at the images below it’s not difficult to figure out what’s going on.

Many of the articles were written by well-known home professional home theater designers and installers, people who created home theater for celebrities, professional athletes, heads of state. It was a fun magazine to product though a tremendous amount work. We attracted all the big players for advertising in HTB.

“Anatomy of a Home Theater” explained key areas such as sound absorption, projector housings, flooring, seating risers, ceiling look and construction.
“Sight Lines” covered seating placement, distance, platforms, projector height, etc.
“What you hear is what you get” discussed speaker placement using seating locations and reflection points.