Agency | HUGE Role | Art Direction, UI/UX, Visual Design Client | United Technologies
United Technologies is a company that creates items used to assist with keeping the modern world moving forward. From elevators, to escalators, to aerospace, the company works with creating
devices that has helped the world progress to where it is together. Without them, we wouldn't have the modern elevator. Given their innovative nature, United Technologies decided that
it was time to act within the times as a company. That's when they came up with creating an in-house digital accelerator. What United Technologies didn't have
was a brand or basic stepping stones for this digital accelerator and that's where we come in.
Step One: The Design System
We wanted to create something that would be beneficial for both designers and developers. That said, we created a living document that changed as the projects evolved. To keep everything up to date and usable, we decided that having a live Sketch file as well as a PDF was the best deliverable. Designers and developers alike can pull from this live document and create with ease. The document included things like highly nested symbols for forms, icons, typography, and buttons. Both the PDF and Sketch file version can be found on the Employee facing website created for the digital accelerator. When highlighting specs, we made sure to speak the language of both Developers and Designers.
Step Two: The Digital Accelerator Public and Employee Sites
The digital accelerator of UTxD known as Dx needed a public facing site as well as an internal employee facing site.
We worked together to achieve the following:
Content | Wireframes | Visual Design
Content & Site Map
In order to figure out content, we leveraged some components that we were using within the Design System for buttons, forms, etc. However, when it came to figuring out content to assist with building the overall structures of the sites, we did a few exercises to narrow down the content. We drew together some ideas and Frankensteined them together until we came up with a cohesive structure. Next up was creating the Site Maps for each one.
As part of visual exploration, we decided to branch out on our own for a bit to create our own mood boards. One thing that we decided to
keep constant was the use of Helvetica as well as leveraging screens from the Lone Worker app and design system components.
We each tried to create a different story per mood board.
Designer's aesthetic , Engineer's precision | History of Innovation | Moving People Forward
Leveraging the design system components and concepts from the mood boards, our next step was to start exploring various design aesthetics
using the structure that we came up with for the wireframes. For the design exploration we wanted to focus on a few key items.
1. The use of the brand blues
2. The use of large typography as a graphical element
3. Bringing in patterns as a secondary element
4. Playing with introducing a secondary color (ie the yellow and pale green)
5. Showing signs of the 12 column grid
We tried many different types of directions for the site (see above) and concluded that for the Employee (internal) site, we should be a little more utilitarian. That said, we came up with a VERY clean and slick static system that took the principles of what we wanted to portray with the above and gave it a fresh layout that was simple and utilized the design system. We also found that it resembled print and naturally got giddy over that.
PUBLIC FACING MARKETING SITE
We wanted the public site to be more of a story and as a result we considered the wires but realized that they categorized things a little too much. That said, we went with more a fluid story telling approach. We got rid of sections and labels and decided to let the content carry the user through. We stuck with the clean designs and went with duo toned images and an editorial feel.
Otis Lone Worker
The Otis Lone Worker app is an application to assist Elevator technicians and their offices. The app's main goal is to keep track of the Technicians while they're on repair jobs. Using iPhone 6s devices, the technician is to log in and create status updates based on where they are and the type of work that they are doing. If they are on a job for example, they are to state that they are active. This information is sent back to their main office where an individual is able to keep track of them. This comes in handy when there may be an SOS situation. Given the type of work that a Technician does, this component is important in regard to their safety. One feature that this app comes with is one that leverages the acceleration component of the iPhone 6S. If a technician falls, the accelerator picks this ups, and alarms the home office. The home office then sends a message to the technician to check to see if they are okay.
The Otis project was already well underway before I started assisting. An Art Director named Kevin Atiyeh worked with Senior Designer, Saul in getting the app nice and started. My assistance with the project came with helping to define functionality, UX, and implementing the design system and working with both Saul and Kevin to make sure things were consistent and functioned well. In creating the responsive home base web component, we worked together in creating the best case for how this would be used from a desktop level.
Pages of the app showing the use of the design system
Admin side of the Otis App
ACD | Wes Gott UX Lead | Adam Stubbs UX Designer | Robin Newman Designer (app) | Saul Fougnier