DeviceVault

Streamlining the process of borrowing test devices in the tech workplace

DeviceVault is mobile app for checking out, borrowing, and sharing test devices at WillowTree.

In Summer 2017, I interned at WillowTree, a mobile app agency.
As the product design intern, I was responsible for the full design of DeviceVault. I mapped out the product from start to finish, working with developers to make DeviceVault a reality.

I oversaw the entire design process and designed the entire UI from beginning to end. I worked with developers and quality assurance (QA) to ensure that the product would be feasible and achievable.

Role
Product Designer

Focus

Visual & UI Design
Motion Interactions
Mobile Design

Timeline
Aug 2017 (4 weeks)

001

The Problem

At WillowTree, developers often borrow mobile devices to test software.

The devices live in the device library, which is open for anyone to access for testing different builds and designs.

Any time someone checks out a device, they must update the device's status on the online board that tracks device usage across the company offices. It has to be manually updated each and every time a device is checked out or returned.

The Problem

Developers would often forget to update the device’s check-out status on the online board, which led to confusion–it was hard to keep track of a particular device’s location.

People tend to skip over updating the board.
(More than one message like this was sent out to round up all the devices)

002

Pain Points

From surveying several developers in the office, I gathered more info on specific themes encountered while borrowing test devices.

Outdated platform
The internal website used for the device library was slowly being phased out of the company in favor of a new content management system, so people stopped updating it.

Lack of accurate, up-to-date info
Developers often forgot to update a device’s status due to having to manually input info. As a result, there was inconsistency between the device’s supposed status and its actual status.

Interrupted workflow
Developers felt that updating the online board usually interrupted them for a couple minutes, which was enough to distract from the flow of their work.

How might we improve the device borrowing process to better support developer workflow?

003

Design Goals

Integrate
Seamlessly immerse device checkout process into workflow.

Streamline
Increase ease of access and accelerate the process of checking out a test device.

Enforce
Use brand elements to reinforce WillowTree brand image among suite of internal tools.

004

Solution and Flows

I decided to design a mobile app that could act as an in-between point for developers and devices. This mobile app allows developers to check out a device directly on the device they are borrowing, making it much easier to update its status.

Experience Touchpoints


Onboarding

The app will automatically identify the type of device that is being used (a company device vs. personal device), then push the user towards a certain app experience.

Proposed flow for automatic device identification

Status
Two different experiences based on whether the user is using a company device or their personal device. On a company device, the Status tab displays the availability of that very device as you hold it in your hand. On a personal device, the Status tab is a dashboard that displays your device activity.

Proposed views for using a company vs. personal device

Checkout
Checking out a device is now done on a company or personal device, prioritizing convenience for the developer and cuts out the need to go to the online board.

Proposed user flow for checking out a device

005

DeviceVault

Introducing DeviceVault, my proposed solution for the test device checkout process.

I designed DeviceVault on my own, over 3 weeks. I started off with some wireframes to test concepts but due to the quick timeline, I quickly transitioned into mockups to complete the design.

I studied mobile design patterns, utilized my visual/interaction skills to design UI and apply motion, and applied company branding to the product.

High Fidelity Designs

Device Status

Complementary experiences based on device type

Company device

Shows the current device’s information such as
its availability, project allocation, and technical specs

Personal device

View one's own checked-out devices and past activity

Checking out a device

Right in your hands, cutting out the third party
Check out a device with 3 steps

Browse devices

Search and access all test devices
Filter by availability, office location, OS, device type
View devices allocated to specific project teams

Requesting a device

Let someone know you want to use their device later

Personal device

Request to use an in-use device

Requested device

View a request for your company test device

Style Guide

006

Reflection

Working at an agency, work tends to come and go at uneven times. During a lull in my last few weeks, I was approached to design a way to make it easier for people to check out devices. I'm incredibly lucky to have had the opportunity to design DeviceVault!
Here are some things I took away from the experience.

Design ownership
This was the first time I had almost full responsibility and freedom over the design direction of product. I loved indulging myself in the full spectrum of the design.

Design with feasibility
Design not only with end users in mind, but the developers who make the product come to life. Consider mobile patterns and edge cases while designing.

Design across platforms
I only got the chance to fully flesh out the iOS design and didn't have enough time for other OS. If I could continue designing DeviceVault, I would definitely design for multiple platforms to accommodate more types of devices and users' preferences.

Thanks & Acknowledgements

To Julia Swenson, my mentor, manager, and daily source of design advice at WillowTree.
To Joel Garrett, the engineer at WillowTree that approached me to design DeviceVault.
To WillowTree for giving me the fantastic opportunity to grow over Summer 2017.

Next Project

Partico