flo

How might we improve and test the onboarding flow?

depict

When depict came to us, they had a prototype but it wasn’t a full functioning one. You were lucky if you could display your first art piece on the Frame under 30 minutes. The team called it time-to-art” and it was the metric we agreed to reduce as much as possible.

2016 Aug - 2016 Dec Role: Lead Designer UX Branding UI definition

iOS Swift startup

Depict is a startup offering a “Digital Frame and Musuem Curated Art”Depict is a startup offering a “Digital Frame and Musuem Curated Art”


How did we speed it up?

First, the developers replaced their custom built casting code with a library: Connect-SDK.

Next, the team re-examined the on-boarding flow. Casting technology was a little unusual. Your phone acted as a bridge to connect the Frame to your WiFi. This meant going back and forth between the app and your phone’s WiFi settings. So the instructions had to be clear and responsive as you followed each step. I had to design for worst-case scenarios. Interrupted connections and wrong passwords needed thoughtful error flows and copy.

I worked with the lead developer, James Lee, to gain a thorough understanding of each state and expected response time.I worked with the lead developer, James Lee, to gain a thorough understanding of each state and expected response time.

The app also needed to introduce the whole concept of displaying digital art at home. It was a very different way to experience media. It could display photography, painting, animation, and drawings, all in one Frame. It had to show what it could be, whether app holders had the Frame or not. The on-boarding needed to show-off the crown jewel: the art.

Walkthrough screen in 2019 iOS release by DepictWalkthrough screen in 2019 iOS release by Depict

Selected pairing screens - UI implementation by Brit Zerbo (casting is significantly easier today)Selected pairing screens - UI implementation by Brit Zerbo (casting is significantly easier today)


Time to Art: 5.8 min

I wrote a qualifying survey to screen testing candidates. Th team shared it on our personal networks and we offered a small gift card in exchange.

I drafted the testing candidate persona based on a few abilities and interests:

Snapshot of qualifying surveySnapshot of qualifying survey

Guerilla usability testGuerilla usability test

Recording the test was tricky. We had to set up a camera on the room for the team to watch, a camera on the frame, and a screen recording on the iPhone.


Browsing Flow

High level app ecosystemHigh level app ecosystem

Selected browsing wiresSelected browsing wires


Subscription Models

I was asked to explore the implication of a tiered subscription model.

Delienating job stories per tierDelienating job stories per tier Subscription Model A - Outlines components added to existing flowSubscription Model A - Outlines components added to existing flow Subscription Model BSubscription Model B How payment processing might workHow payment processing might work


Branding

A quarter way into the project, Jessica Knopp asked me to rethink their branding. Startups don’t often have the luxury to spend months on branding with a brand agency. So I focused my energy on less: a visual idea they can extend from and build a story with. This often means articulating the wordmark or logo.

For depict it was the idea of the Open Frame”. The Frame was open to any art form, any orientation, any timeframe. It could fit any season or any mood. It uses the elegant Dala Floda by Commercial Type and Soleil by Wolfgang Homola.

A few visual explorationsA few visual explorations

Before and AfterBefore and After

UI definitionUI definition

Selection of key screen designsSelection of key screen designs


Where are they now?

As of January 2019
With our prototype in hand, the Depict team completed the app. They are selling and shipping out Frames and have an iOS app in the Apple store.

The Frame from depict.comThe Frame from depict.com

Shipment boxShipment box

Instagram post by a Depict Frame ownerInstagram post by a Depict Frame owner

depict.com as designed and built by the Depict team

#Projects