The GDLS Touch Interactive is a full touch-enabled, visual catalog for General Dynamic Land Systems. The application was for use in their various trade shows they attend across the world.
This project took place between April 2015 and August 2015. I worked on this project for Real Integrated, a marketing and advertising agency located in Bloomfield Hills, MI.
On this project I served as art director, UX designer and UI designer. As art director I had to come up with the initial look and feel of the interactive. As UX designer, I had to make a high-tech interface as user friendly as a smart phone. And as UI designer, I had to visualize and integrate the art direction and UX feedback into an elegant solution.
Customer Insights & Ideation
The clients primary concern was being best at show with what they hoped to be a visually stunning interface with which to display their catalog of military defense vehicles. Coming from a rather antiquated Flash-enabled portfolio, they wanted versatility in the look and feel while still being able to make it accessible to a wide audience.
Experience Strategy & Vision
Our strategy was to first define the scope of the project. Without knowing what we’re building for, the end result would be lost to us. Next was what technology would be utilized in order to bring this to life. With a number of different frameworks to use, we had to focus on key uses without the additives. After many successful meetings with GDLS, I was pulled into the direction of the legendary Tony Stark aka Iron Man.
The highly creative team at Industrial Light & Magic (ILM) created a revolutionary Heads-Up Display (HUD) for the internal viewing of system and biometric readings for Iron Man. Being that Tony Stark was also a military contractor of sorts, I wanted to bring ILM’s creation to a touch surface.
Oversight & Coordination
This is the ongoing making-it-real of the experience strategy and vision. The UX Designer engages throughout the entire process, and makes sure that the user experience is never being compromised. If circumstances arise that force changes, the UX Designer leads the discussion to make sure that the new solution still adheres to the overall strategy. The UX Designer must sweat every detail, and, yes, occasionally be a jerk about it.
Coordination between the stakeholder, developer and myself (as UX and Art lead) were crucial in making sure all needs were served, and compromising where we could due to time constraints.
Time is Not on Our Side
Time was the biggest challenge in this project. We originally quoted design and development for a 6 month process. However that timeline was reduced to 3 months as they wanted ample time for testing and bug squashing before it went live for patrons at their first trade show. The reduction in our timetable forced us to rethink our approach, and cut corners where no one would notice. But still all while keeping the integrity of the project intact.
An Angular Frame of Mind
After much testing, we decided to use AngularJS as the base framework for the project. It performed a lot of the heavy lifting for us, while allowing us the flexibility to mold the app as we saw fit.
Elements of a HUD
The design language had to read futuristic, while still harkening back to GDLS branding. Vector/SVG programs such as Sketch were used to created the various moving parts of the HUD, while and interaction library known as Green Sock as used for the integration of the visuals.
Bringing it All Together
When making a design as cutting edge as this, there were certain things we had to be aware of. As we were utilizing AngularJS, Green Sock, and not-then-specced CSS3 components, we had to lock the viewing of the application to an advanced browser that could handle the massive about of information being displayed without hiccups. Google’s Chrome browser won the race for being both lightweight, and able to handled the experimental technology components.
Testing Our HUD
Development was completed in mid-August, and immediately went into a 3-week testing phase. We had 3 different touch displays for use, and had to be sure every angle of the displays were checked for responsiveness. We also put the application through it’s paces, simulating heavy user usage and irregular usage scenarios.
Last Minute Pivots
With a launch in mid-September, we had one week after testing to correct any bugs we found in the interface. The bugs were heavily cataloged and assessed from severe to least concern.
Pulling the Trigger
The launch was smooth, which was unexpected for an application that served as our first time creating something so complex. But I can honestly say that my team was top notch in communicating any and all concerns, which were addressed during our exhaustive bug testing.
What I Learned
Fight for time. The very short window for design and development was a very big constraint. more could have been done to push the technology. However this being our first complex interactive, we weren’t aware of some of the sacrifices we’d be making.
The more complex the idea and design, the more time that will have to be accepted for in the building phase.
Upgrading the Tech
After my parting of Real Integrated, the interactive has been used successfully at over 20 international military trade shows. Keeping tabs on it’s progress every now and again, I even see that some of the planned functionality originality intended has slowly but surely made it’s way into the application.