Kinetic
Lead Product Designer & Manager
Prototype on devices in real time.
A case study in learning and adapting while creating a prototyping platform to help product teams design, build, and ship device experiences.
Beta Sign Ups
10,400+
Paying Customers
100
Timeline
2 years
Team Members
3
The year was 2013
Photoshop was the leading design software and dominated the space.
Elon Musk announced the Hyperloop, Facebook & Twitter went public, Edward Snowden's leaked documents came out, iOS 7 was launched as the first iOS update post-Steve Jobs, & who could forget the XBOX One?
Everything changes when
fingers hit glass.
I have spent the majority of my 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, we were frustrated with the considerable time and cost investment that came from creating a believable prototype.
Existing ways to prototype designs on devices in 2013
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 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 allowed a designer to build a believable prototype on their own — quickly and easily.
So we built one.
My roles at Kinetic
Experience 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.
Design 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
& Validation
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 the Photoshop plugin
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 in favor of more modern software
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.
Transitioning from a Photoshop plugin to a Mac app
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.
Critical findings that shaped how we created Kinetic
1
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
2
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 choice.
“Exactly the prototyping tool I’ve been waiting for. When will it work with Sketch?”
Interaction Designer, Google
3
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
4
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.
✅ Meet the demands of our existing customers and their increasing number of Android projects.
Kinetic brand illustration by Becca Charlier-Matthews (hire her!) & creative direction by Kat.
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 launching Kinetic
1
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.
"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)
2
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)
Important takeaways
Talk to your customers every day
Designers, learn to love customer support!
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.
Curiosity is key
Develop resilance & grit from change
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 unexpected lessons or events happened to me today?" and second, "How can tomorrow be improved by what today has taught me?"
Be fearless and ship
Learn to be comfortable with 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 feedback.
Reflection
From Sunset to Sunrise
My journey with Kinetic allowed me to graduate to a new level of product design and management capabilities. Building products for Fortune-teir companies like Samsung, Intel, HTC, T-Mobile, AT&T, Dell, etc., dominated my career until that point.
After we shut Kinetic down, I spent the next five years helping other early-stage founders with end-to-end mobile product design and management services that increased engagement, retention, and product-market fit. I helped teams modernize shipped products with current UX/UI and accessibility practices, allowing them to engage meaningfully with their customers.