IoT Privacy Infrastructure
The IoT Privacy Infrastructure is a research funded project that aims to establish a transparent data infrastructure ready for tomorrow's tech-reliant environments.
Skills: UI/UX (Web + App), Branding, and Motion Design
Timeframe: April 2019 - Present
Setting: Undergrad + Post-Doc Team

Intro

The IoT Privacy Infrastructure is a research funded project that aims to establish a transparent data infrastructure ready for tomorrow's tech-reliant environments.

↑ In the first week of the IoT Assistant's release, 17,000 people downloaded the app.

Press and Links:
Apple App Store , RFID Journal , VICE , CNET

System Architecture

IoT Portal (Web)

The IoT Portal allows service providers (those who install or regulate IoT Devices) to upload information like device name, location, and data practices so that it can be accessed on the IoT Assistant App. 

My contributions included: 

  • Bringing the visual identity from the app to the web portal
  • Restructuring user flow so that it’s easier to manage larger catalogs of devices
  • Creating dashboard meant for a holistic view of resources 

IoT Assistant (iOS/Android)

The IoT Assistant allows anyone intrigued to understand what data might be collected about them.

My contributions included: 

  • Icons specifically crafted to allow users to greater understand new data categories 
  • Creating a playful visual language that challenges the norms of traditional data privacy schemas
  • Conducting user research and testing
  • Transitioning app to a map-based interface.

Branding

When I first started working, I was originally hired to create a logo. Overtime, I was brought on board to overhaul the IoT Assistant. 

How the Chameleon came to be:
The team's vision was to make data privacy approachable and friendly; so that anyone can take control of their personal data.  Most data privacy logos are mundane. However, how do you then go about communicating data privacy in a more welcoming way?

A logo all about a juxtaposition:
This infrastructure isn’t a security system. As a result, this logo needed to communicate both transparency and privacy simultaneously—a dichotomy I know! Through this, however, I recalled how a Chameleon can protect themselves by being transparent in their environment. To communicate privacy, the Chameleon's tail has been coiled into the form of a shield. After this ah hah moment, I began streamlining the logo for legibility.

The IoT Assistant

Discover and control data
collected about you

↑ Video about IoT Assistant

Before coming on board

I was originally provided with working prototype to use as a basis for my ideas. However, I was asked to let loose and come up with different ways one could discover IoT Devices.

Initial Sketching

What I was thinking about:

  • How might I incorporate pre-existing UI/UX frameworks so that users feel familiar with navigation?
  • Is there a way to measure the privacy/transparency of an IoT Device?
  • How might conversation modeling be incorporated?
  • How do I make it personable?


First Round of Prototypes

After feedback from the sketches, I then transitioned some of the sketches to digital mockups.

1

Exploration
This set of mockups depicts different ways one can explore devices around them. I experimented with scrolling that primarily presented one device at the time whereas the one to the left of box #1 displays everything in a collage.

Field of Range
The development team was beginning to integrate a feature where the user could see how far away they were from a device. The left image depicts my first attempt to represent space in a non-map manner. More explanation to a non map approach is described later.

2

Chat about the Internet of Things!
Inspired by concepts from a conversation modeling class, this concept allowed users to chat requests about data privacy via a special keyboard. Although it was a unique approach, this interface would require ML and an entirely different system architecture.

3

Mosaic Interface
One goal was to make the interface more dynamic and personable. The tile interface brings up the six closest devices near the user.

Device Pop Ups
To always feel a sense of place, information of the IoT Device would pop up. Privacy Actions were placed in buttons to the side for easy access.

IoT Ratings
How data transparent is a device? A concept for ratings was created to aid in user decision making. Our team decided to not move forward with this as it would require a separate team for moderation.

4

In Range and Data Category Tabs:
The app has two target users: those who are already taking action of their data privacy, and those who are interested in learning more. As a result, the In Range and Data Category tabs created to serve both audiences.

Refined Device Pop Ups:
Iterating from iteration #3, the new pop up pages attempted to depict vicinity to the device and better follow the IoT Privacy Infrastructure Taxonomy.

Moving forward with the Mosaic interface

The initial mockups allowed me to have substantial insight into the existing code framework. Additionally, I began to refine based on the expected enchantments of the code base.

Graphic Depictions
Initial mockups included photos inside the tiles. As providers would be uploading their own photos, however, the team made the decision to go into pictorial depictions of all devices.

Maximizing space in data cards

Out of all pages in the app, device information pages are the most crucial. Not only does the layout need to follow the backend taxonomy, it needs to be digestible to users.

Pop Up Pages and smaller device screens
After testing on different devices, the pop up approach was no longer a viable option as text would be wrapped too often.

↑Attempt to retain side dock
Before moving to a full width card stack as depicted below, methods of sliding out the dock were created. However, the act of sliding sideways conflicted with the verticality of the content.

Filling the space
All content and imagery were extended to almost the full width of the display.

Removing In Range Illustration Seen in the mockups above, we ran a set of user tests to see if they understood the illustrations intent to communicate being in range of data collection. However, it often caused more confusion in differentiating two different measurements.

My Privacy Options
To replace the column of buttons, an additional card was added for users to control the data practices of the IoT Device.

Accordions
Attribution to service providers were hidden so that the description could be seen at first glance.

↑ I can scroll!

Initial Release

↑In Range

↑ Data Category

↑ Selected Data Category

↑ IoT Device Information Page

We want a Map! More informative icons too!

Map:
During our teams largest round of user testing, users wanted to have a clearer sense of where they were at. As a result, the team began a development plan for map integration. As this was a privacy oriented app, we needed to evaluate how location data would be used and how we would communicate what data would be collected to our users.

Icons:
Icons from previous builds were stock icons. However during testing, users were confused as to which data category correlated to each icon. Through this, I also developed an entire family of new icons for the map-based interface.

Key Insight:
Using a map-based interface was initially off the table due to privacy concerns related to data collection. However, through user testing, our team was able to propose that having a map-based interface was a tradeoff users were willing to make for a better experience.

↑ Adapted KWHL chart as review before developing the new map interface

↑ New Icons, color palette, and typographic standard

↑ New Icons with paired colors

Initial Map Mockups

The first set of iterations depict the replacement of the 'in range' section with a map.

↑ Users can still see a total amount of resources around them

↑ By tapping on a ping, users get a basic 'data privacy card' showing uploaded images and data collected by icons.

↑ Data Collection shares the same interface as the previous version.

Deviating from non-map layouts

When approaching a map based interface, I began to research transit apps to understand how to exude a sense of familiarity into the user experience. As a result, I proposed layouts that were more map immersive.

↑ An initial idea where users could tap to filter or swipe up to optimize searching features.

↑ A non-moving variant of a filtering option was created. However, this significantly limited viewing space.

↑ Users could swipe from left to right to view resource categories in a carousel manner.

A Pull-tab based experience

Users found that the method of pulling up and down a tab to access higher level information felt most familiar. Through this observation, I continued to iterate on this style.

↑ All data categories are selected by default

↑Ability to deselect and then specify desired different data categories

↑Always having a view of the map.

An essential design choice was to make sure the map was always in view so that going back home was a quick swipe down.

Enabling greater discoverability

Users can now access devices through the map and the list (ordered by distance) in the same tab. This allowed the app two separate tabs to be combined in a cohesive manner.

Going bold
During the map integration process, the brand color palette changed as well to be more vibrant. The data category icons were also made larger to fill display width.

Exploring a possible design system evolution:
One consideration was taking the app into a more 3D style. However, I decided to further refine the design system I had before.

Search button:
Before taking a more iconographic method of communication. I experimented with a 'Search Here' button. However, it took too much screen space.


Two icon navigation:
Both icons are synonymous with maps. It was a clear choice to carry over this methodology to the app.

Device List
IoT Devices in the list were made individual buttons for better clarity.

Making everything
map-first
All discovery-based interactions take place on the main tab where the Chameleon perched.

Flyover
The tab is able to be hidden allowing users to move around the map with ease.

↑ Data Category:
If the user is interested in a specific type of data collection, they have the option to filter devices around them.

My Privacy Options
In the device information page, the my privacy options was redone to be more comprehensible. An emphasis on the 'Manage' button was created to redirect users to the service provider's privacy settings on an Internet browser.

Notification Integration

To provide users peace of mind, notifications were added so that whenever as they come within range of a device, they can learn more about it before data is collected

First Iteration:
When crafting the experience for notifications, the team and I needed to decide how much control users could have and the frequency at which they received notification. The first iteration depicts a scenario where the user could control the finest of details to their notifications.

Device List
IoT Devices in the list were made individual buttons for better clarity.

Frequency
Users are provided with additional feedback on what each frequency entails

Data Categories
By default, the app selects all categories

Category Customization
If the user only wants visual data for example, they are able to tap on the category below.

Production Notification feature

The first version required interactions on three pages. Whereas the production feature requires just one. Users can modify frequency (Changed to Notify me), have the option to receive notifications for PII, and select certain data categories.

Raised over map
To stay true to the exploratory feeling when using a map, the notifications layout was inspired by a map key.

Category Customization
If the user only wants visual data for example, they are able to tap on the category below.

The IoT Portal

Publicize IoT resources and
the data they collect

↑ Video about IoT Portal

Working with Post-Doc Team

When I was added on the IoT Portal team, I was tasked with implementing the IoT Privacy Infrastructure branding identity. In the very beginning of this process, I worked with the post-doc team to transition their initial balsamic mockups to be ready for web development.

Dashboard Layout before I came on board

Team Survey
Section of team survey deciding key goals in the first round of development.

Sample Mockup
This is a selected mock up provided by the post-doc team for me to evaluate and prototype.

Dashboard Wire-framing

The most-significant goal within the portal's redesign was creating a new dashboard for users to view all the resources, registries, and templates.

Initial list view dashboard

Dashboard Refinement

From the wireframes above, I began implementing the visual language while considering alternative layouts.

Colorized version

↑ Emphasizing resources and registries
In this layout, the resources and registries portion were made significantly larger to house information relating to the approval processes of IoT Devices.

Prioritizing Map and My Resources:
A layout was created to emphasize the two most frequently used interfaces. Numerically speaking, users had more resources than registries.

Selected Design
Although our team liked the varied layout design previously, the timeframe we would need to implement the design was limited. As a result, I landed on a simple grid structure that even divided and notified user contents in the three categories.

Implementation so far

A work in progress:
So far, the home page and dashboard have been fully completed and redesigned. Currently, I'm working on improving user flows related to content curation. More coming soon!

Home Page

Dashboard

Overall Reflections

Thinking of product development in time scales
Instead of viewing app releases as significant overhauls in user experiences and interfaces, I developed a working plan that simultaneously developed designs to be released urgently and those to be released in the future. As a result, this allowed initiatives like the Map-based interface to be released quicker as developers had more time to refactor and test.

More reflections coming soon!
I'm still working as the designer on the team and am constantly learning something new! Check out for updates as new versions of the app and portal are released.