Kinetic
Lead Product Designer & Manager
A case study in learning and adapting while creating a prototyping platform to help product teams design, build, and ship device experiences.
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
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.
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.
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
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.
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.
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
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.
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
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.
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
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.
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 choice.
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.
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.
✅ 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
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.
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.
Product Designer, startup (Exit Interview Quote)
UX & UI Designer, small product agency (Exit Interview Quote)
Important takeaways
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.
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?"
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.