CLIENT

Intel®

project

LTE IoT Quick Deployment
(Intel® LIQD)

categories

UX Research & Design, Information Architecture (IA), Rapid Prototyping, Art Direction, Interaction Design, Visual Design

 
Intel-1@2x.png
 
 

Problem

Intel® was looking to help provide a way for enterprise customers across various industries to maximize efficiency and ensure the safety of their products using intelligent Bluetooth connected sensors.

 

Solution

An Internet of Things (IoT) product health monitoring application to integrate with internal and third-party services that manages and reports product data coming from their network of connected devices. The application would provide enterprise customers a way to visualize the GPS tracking and condition monitoring data of their products. The app would also utilize iOS and Android design standards and guidelines, focus on user experience, and provide the end user with an application that would be customizable to their business needs.


Role

I led multiple phases of design/UX working closely with our team’s Principal Designer as well as the project’s product owner from Intel®.

challenges

  • Designing a tool that receives and effectively communicates data to and from multiple sources.

  • Operating in an independent roll for a large-scale, corporate, and time sensitive project with unidentified technical unknowns.

 
 

tools

 
Omnigraffle

Omnigraffle

Sketch

Sketch

Photoshop

Photoshop

InVision

InVision

 

 
 

01. Intel® Brand Identity Guidelines

Our team wanted to ensure we were incorporating a fresh direction on the application without losing sight of their brand voice. After meeting with and receiving support from their internal marketing teams, we were able to incorporate a little flexibility with the look and feel of the application. We still relied heavily on the Intel® Brand Identity Guidelines for color and typography.

 

↳ color

↳ typography

Intel Clear - Regular

Intel Clear - Regular

Intel Clear - Bold

Intel Clear - Bold

Intel Clear Pro

Intel Clear Pro

Intel-4@2x.png
 
 

 

02. Art Direction - Stylescapes

The Principal Designer and I knew the design would most likely rely primarily on the look and feel established by the Intel® Brand Identity Guidelines. However, we wanted to encourage our stakeholders to consider the possibilities a new design could offer the product beyond what the internal brand would bring to it. Working together, we provided a few options to initiate the art direction for the project.

 
 
 
 


↳ glow

We wanted to push the envelope with this option. It combined a sleek and sophisticated feel that would enable the data visualization to shine. We knew it was a big leap from the established brand, but we wanted to really challenge their idea of what the app could look, feel, and maybe function like.

 
 
 
 


↳ flat

This option was a little closer the established brand. We wanted to push it to be a little more modern, clean, and fresh feeling. It would let us emphasize the data in a way that was simple and easy to understand.

 
 
 
 


↳ round

This final option was more conservative. It followed the brand much more closely, while still allowing us to play with the data in similar ways to the other two styles. This version provided a look and feel that was clean and minimal, but the data remained the emphasis.

 
 

 

we chose a combination of Flat & Round for the final art direction. 🎨

 

 
 

03. Information Architecture

Using Omnigraffle, I worked together with Intel’s product owner to iterate on the flow of the application. This would serve as the building block used for iterations on wireframing, prototyping, and user testing. Here, we were able to identify patterns to be shared by the iOS and Android version of the application.

 

Created with Omnigraffle


 
 

04. prototype / wireframes

Utilizing the path laid out by our initial IA phase (pictured above), we were able to construct high fidelity wireframes that would be used during our user testing sessions. We tested a few key user groups using the wireframes for android.

 
 
 
Device List

Device List

Device Detail

Device Detail

 

 
 

05. visual design

After several rounds of user testing on the interactive prototype, we identified many elements could use improvement. Users found it more difficult to find the information they were looking for. We determined the data was better formatted in a list view instead of tile cards. We also found that utilizing Intel®’s brand colors from their Brand Identity Guidelines to communicate the health or status of a product made other brand elements confusing. Following these sessions, we made adjustments to key concepts affected by the feedback we received.

 
 
IntelUIPerspective.jpg
 
 

Key Takeaways

Get feedback early & often. 👂

During the abbreviated timeline, our team found success in leaning heavily on collaboration and simplicity. We often integrated with the client and other available resources during whiteboard sessions. Because of this open style on iteration, we were able to make strides to improve upon the overall experience of not only the project, but the product as well.


You don’t know what you don’t know, ya know? 😅

Access to our technical resources for the project were limited, which made aspects of the project more challenging, especially in dealing with limitations and expectations of our teams and the project stakeholders. Often, the team was striving for the best experience, but without a strong sense of technical feasibility. We offset this by establishing a rigid schedule of meetings with technical resources and stakeholders.