The Environment
My, how times have changed.
The team was growing. As we were plowing forward with iterations on the core 4D Studio project, we were also working to develop custom mobile client applications to display the published projects. Our proprietary smart device wasn't ready for prime time yet, so we set out to focus on creating an iPad app as a stop gap. With much of my hands-on work (and time) going towards 4D Studio, I was asked to direct a team of contractors for this endeavor. As I had set the new design direction for 4D Studio earlier, it was natural that I would expand my role in this manner.An outside app development firm was hired and I kicked off their on-boarding. By initially presenting them with my DSL and our brand guidelines, I was able to set us up for success. I created the design direction and we worked closely over the next month or so, to flesh out the following product.
It's a good thing I play well with others.
NEW DESIGN SYSTEM LIBRARY
I consolidated the strengths of each previous effort into a new and uniformed visual identity. I now had a Design System Library to use to guide our efforts.
MULTI-MODAL APPROACH
Armed with my new creative vision, we could confidently pursue an extended approach across all future display mechanisms.
TIGHT INTEGRATION
With all design aspects dialed in, we were able to integrate consistently across publishing platform and remote smart devices.
The Challenge
Watch where you step!
The challenge was seemingly simple – design and deploy mobile applications that would work in conjunction with 4D Studio. But these couldn't just be any applications. They needed to function in a manner that would support workers in the field. These workers would often be on-the-go and in compromised environments – potentially dangerous ones. Therefore, stellar usability was paramount. Not only would users be focusing on their surroundings, but they would need to interact with the user interface nearly at the same time.Let's break this down. First, support for the complex functions of a set of published work instructions from 4D Studio was necessary. Second, allowing for quick and easy interaction with these instructions via the mobile apps while users are doing their job. Think of it like this. You are rushing between gates at an airport, navigating physical obstacles, listening to environmental cues and interacting with elements in that environment while you are following directions and logging your progress on a mobile device screen – one being hands-free. Demanding, to say the least! K.I.S.S. This would be our guiding motto.
The Goals
Doing it with HEART.
My focus was clear. I needed to carry my style guide forward into our next products. Though this wasn't going to just be as simple as maintaining a consistent look and feel. Remember, usability was going to be the most important aspect of all. Of course, it had to be intuitive. More critical, we had to understand the reality of the user's physical world and almost anticipate their needs. No small task! This would come into play significantly with our future proprietary device – the Smart Helmet. Again I would turn to using specific cues and metrics to determine I reached my goals upon completion. Some of my users earlier identified engagement and task-centric goals would again come into similar play.
Goal: Display work instructions on screen and give a method of documenting progress.
Cue: Users are able to quickly step through a task list and record necessary physical conditions.
Metric: Compare success vs. failure rates between company goals & user's completion (Engagement; Task completion).
How could we make work instructions clearer and more concise?
How could we display documentation in a non-intrusive manner?
How could we make interaction as hands-free as possible?
How could we anticipate the user's physical world intentions and behavior?
The Approach
Leveraging my Design System Library.
My intention with this effort was to have the design direction draw inspiration from my extensive design work on the 4D Studio platform (previous case study). Intentionally utilizing the same types of transparencies, overlays and subtle design color cues in the UI, would serve user's needs and maintain consistency. Equally allowing for the UI to fade into the background, thus exposing the real-world settings, to take center stage. The color palette was carried over – simple, clean and professional.Delightful subtle user experience interactions were meshed throughout to heighten engagement and delight.
A solid & consistent design direction.
Our Users
Having a field day with users.
Our core user for these interfaces were typically field workers. The worker that is out there day in and day out, in the physical environment. With 4D Studio they were mostly office bound – the Subject Matter Experts. However, these users were the "consumers" of the content. We had a number of studies available to draw from to understand what it was like in the field. We had to take into consideration the harsh conditions that would compete for our user's focus and attention.Fortunately as time passed and we progressed, we would have the benefit of a dedicated researcher to help us hone our craft once our proprietary device came online. More on that later in this study.
Fine-tuning the user experience with wireframes:
Assigned Projects on iPad
Project Steps on iPad
Live Scene Overlay on iPad
Projects on Smart Helmet
Steps on Smart Helmet
Overlay on Smart Helmet
Visual Design - Handheld
First up, an iPad application.
As I stated earlier, our smart device wasn't quite ready for prime time. Therefore, this iPad app was designed and developed first. The content structure was mandated by the structure within 4D Studio. However, we focused great attention to minimizing all non-essential elements so as to not hamper the user in completion of their tasks. The UI has been designed to allow quick access to primary functions of the application while also embedding "power user" functionality a tap or two away. The look & feel is readily recognizable from my design work featured in the previous case study on 4D Studio. This is a natural extension as well as progression of my (new) vision.
The New iPad App
Visual Design - Smart Device
The second act. Going hands-free.
Eventually, we would get our hands on our smart device. Amazingly, we still had to progress with UI design work without one to test on. I had to employ numerous creative "work arounds" in the meantime. One such approach was mirroring my design work to a set of dumb lenses – the same displays that we would ultimately use in the smart device. This allowed me to realize and alter transparency, lighting and color issues otherwise unforeseeable. Prior to this approach, I was literally designing blind! Here again, you will readily recognize my consistent look & feel – based on a thoughtful and scalable design vision:
Huge props go out to my fellow designers Sterling & Anthony.
The New Smart Helmet App
Interaction Design
Unity for all. Or maybe just for some.
Interactions were vitally important to support and enhance good user experience on our mobile interfaces. On the iPad, you would naturally expect and find the typical delights often sprinkled throughout a modern application.But on our proprietary hands-free device – The Smart Helmet – they were beyond essential. The user was to navigate with a pointer (reticle) on screen using subtle movements with their head. Therefore, every interaction had to be conceived, designed, mapped and tested time and time again. Imagine if you will, navigating your computer screen with a laser pointer in pace of your mouse and you'll get an idea of what we were solving for within our designs. Unity was a go to choice for building out these three dimensional experiences. I often employed some much faster techniques to quickly test out a theory before allowing Unity to consume so much of one's time.
One of my many test interactions.
