Everything changes when fingers hit glass
A case study in learning and adapting while creating a prototyping platform to help product teams design, build, and ship device experiences. We were one of the first companies to bring prototyping on devices in real time to designers and product teams everywhere.
Beta Sign Ups
10,400+
Paying Customers
100
Timeline
2 yrs
Team Members
3
The year was 2013
Photoshop was the leading design software and dominated the space
I had spent the majority of my product design career building products for devices—everything from 2-inch screens to 10-foot UIs. During that time, I learned how valuable and critical testing your designs on actual devices is to the viability of your work. Creating design artifacts happens on a desktop, and when designing a mobile experience, you need to test your work on your target devices. How a button feels in your design tool is very different from how it performs in the real world.
After years of designing and shipping mobile products, I was frustrated with the considerable time and cost investment that came from creating a believable prototype.
Existing ways to prototype designs on devices
Video Playback
Build an aspirational product experience in After Effects and watch a video. (Often, the shipped product couldn't replicate the custom motion captured in AE.)
Beautiful UIs and imaginative motion
Unrealistic motion capabilities
Low-fi & Static
Create a low-fidelity prototype that transitioned from screen to screen with static animations. This option could be anything from a complete UI to hand-drawn sketches.
Fast to create & iterate
Feels unauthentic to testers and negatively impacting the quality of feedback
Engineering Partner
Work with an engineering partner to build a prototype in code.
Feels the closest to a shipped product
High time and financial cost to create
None of those options let designers create realistic prototypes—quickly and effortlessly.
That’s when we decided to build our own.
My roles at Kinetic
Product Strategy
& Vision
Drove our product's short-term feature development and long-term vision by creating our roadmap and evolving feature releases.
Created and developed our brands.
UX Research
& Customer Insights
Interviewed 100+ designers and product teams to understand their needs and, balanced with our vision, transformed their insights into product requirements.
Increased customer engagement and loyalty by building practical documentation and sample files to unblock issues or offer workflow support.
Design Execution
& QA
Designed the entire product, from initial concepts to final UIs.
Built high-fidelity prototypes to test our assumptions with fellow designers.
Worked closely with engineering to constantly refine the craft of our shipped product.
Stand In
Our first attempt to address this challenge was Stand In—a Photoshop plug-in. Photoshop was the most widely used design software for product designers at the time. We built a layer integrated into Adobe’s software and allowed designers to create interactive prototypes straight from their files to their devices in real-time.
What we learned after launching
I want my layers the way they are!
Designers dedicated to Photoshop had specific workflows built around how their files were structured. To use Stand In, they had to change their existing layer structure. We found that most Photoshop superusers would create duplicate files for Stand In instead of adapting their existing files to avoid restructuring their folders.
Photoshop users found Stand In easy to use
Duplicating files was inefficient for designers
Divestment from Photoshop
A new product called Sketch was rapidly taking over Photoshop's product designer user base. In 3-4 months, the majority of teams we spoke to had switched from Photoshop to Sketch. (Oh, and we also heard about tiny startup called Figma that was just begining. 🙌)
Designers were quickly abandoning Photoshop
How can I add motion to my designs?
After interviewing our beta users, most feedback centered on the need to experiment with UI motion. Brand expression in products was starting to become more of a focus, and motion design emerged as a critical experience differentiator.
Feels the closest to a shipped product.
High time and financial cost to create.
Techstars gave us the time and resources to take a deeper look at the challenges facing our customers which led to Kinetic.
Kinetic
A Mac App for building realistic prototypes and experimenting with real-time UI motion design on devices
I love this video of Kinetic and a paired device working together seamlessly in real-time—it feels like magic. As the motion is created in the Mac App, the design is loaded automatically onto the device. The movement is triggered from the Mac App, in this instance, allowing for rapid design refinements based on how the UI moves on the iPhone. Kinetic prototypes could be triggered either from the Mac App or the device prototype.
Lessons that shaped Kinetic
Our original Photoshop plug-in successfully allowed designers to easily and quickly create working prototypes on their devices in real-time. Designers could build and share prototypes with customers, clients, and peers.
Build interactive prototypes easily and quickly on devices
“Stand In brings my designs to life and gives people a chance to emotionally connect with my work.”
Senior UX Design Lead, Adobe
We learned our lesson by committing to one design tool. To be successful, we would have to create a way to seamlessly work with different design tools and enhance productivity instead of creating barriers with additional software layers.
Work regardless of design tool
“Exactly the prototyping tool I’ve been waiting for. When will it work with Sketch?”
Interaction Designer, Google
How could we build a new visual editor for designers to create and prototype custom UI motion on actual devices? Once a designer creates an engaging prototype with beautiful movement, how could we then bridge the gap between the prototype and engineers responsible for shipping the final product?
Help designers create innovative and shippable UI motion
Bridge the gap between design and engineering
“The needs of my job demand that I communicate through interaction and motion. I’m tired of waving my hands.”
Senior Visual Designer, frog
We focused on iOS first, given its dominance in the market and Android's fragmentation. As we worked on Stand In, we found our iOS-first assumption worked for most of our customers, but we had increasing requests for Android support. From the time we launched Stand In to our shift to Kinetic, Android projects became more standard and common.
Support our customer's increasing number of Android projects
Kinetic brand illustration by Becca Charlier-Matthews (hire her!) & creative direction by Kat.
First Kinetic Release
Our initial release had motion customization hidden and standardized. We learned that designers wanted more control over the physics and motion specifics. I also reduced the visual styling for the buttons and UI elements to increase hierarchy while minimizing visual noise.
This version of Kinetic shows how we incorporated the feedback and insights we learned from previous versions. I developed a way to establish a "future state" of an element for designers to move on the screen as a way to design motion without a timeline editor. We also brought the contextual menu concept from Stand In to allow for more granular control over UI elements.
Outcomes: What we learned after launch
More established companies with larger teams and additional layers of design management found our product to be less refined than expected. Startups had greater leniency for our frequent updates and feature releases. Startup designers requested fewer guides and tutorials but wanted more sample files, while larger in-house teams asked for more documentation.
Build interactive prototypes easily and quickly on devices
"I liked it initially, but as I got into more detailed actions, it seemed sluggish. Great syncing product! I would love to see what the next release can do!"
Senior Art Director, in-house team (Exit Interview Quote)
We priced Kinetic at $25/mo and hoped to convert 10% of our 10,400+ beta sign-ups over three months for an MRR of $25,000. That price point proved too high for most of our beta users at startups. The designers at larger organizations with budgets for design tools needed help to validate the benefits of prototyping to their finance teams and managers. When we shut Kinetic down, we had 100 paying users generating $2,500 in revenue per month.
“Give me a one-time fee or other options for monthly pricing.”
Product Designer, startup (Exit Interview Quote)
"Make a different pricing model. I want a cheaper monthly fee or, more preferable; I want a single license fee. I don't want to pay monthly.”
UX & UI Designer, small product agency (Exit Interview Quote)
Lessons Learned
Talk to your customers—
every, single day
Listening to our customers was where I could uncover critical challenges that they were facing with our product. From the very beginning, I prioritized having a conversation with someone using our product every day. During those interviews, I realized that your angriest customers are often your biggest advocates once you validate their feelings and respond to their feedback.
Develop resilience & grit
from unpredictability
I learned how important my natural curiosity was to our product's momentum. To capture lessons from the day I'd write the answers to two questions before I logged off. First, "what was unexpected about today?" and second, "How can tomorrow be improved by what today has taught me?"
Be fearless and ship—
find comfort in ambiguity
Designers find comfort in research. However, there are real-world experiences and inputs that you can't test for during the research phase—even with incredible prototypes. The best customer insights only come after you've shipped a product and listen to the honest (and somtimes brutal) feedback.