Extract (then code-named Project Parfait) is a Dreamweaver feature which allows developers to extract CSS from PSD mockups. It was one of the first Cloud-connected features Adobe introduced in one of it's desktop products.
My role during this project was leading user research, leading user experience and interaction design, overall Dreamweaver product ownership, working with a visual designer on execution and ensuring release quality.
The Problem
When designs transition from designers to developers, a lot can get lost in translation. Developers are left to interpret a design file to understand valuable design information like colours, typography, spacing and padding. We wanted to solve how to preserve the design intent of a file while making it easier for developers to grab styling information out of design files without ambiguity.
Research Part 1
To begin this project, we needed to better understand the problem space. We had research to support our direction from Extract validation in Creative Cloud, but we needed to know if this is a concept that would work embedded in Dreamweaver.
I organized and launched a survey to our userbase to gather quant data, asking questions around designer/developer handoff and how developers extract code today. The results validated our hypothesis this was a solid direction to pursue.
Wireframing
As part of the discovery process, I created a series of low-fi wireframes to describe the interaction patterns for this project. There was a lot of ground to cover including file discovery, uploading, file management and how the PSD would interact as an embedded part of the core Dreamweaver interface.
Design
A designer on my team began working on high-fidelity design explorations. We worked closely together making sure we covered every step of the user journey and ensure consistency with the Dreamweaver interface. Dreamweaver has hundreds of features, so we needed to be very deliberate about how we introduced new workflows.
Research Part 2
I organized a two-week international research trip to validate our concepts and gather qualitative feedback on our direction before moving into development. We also wanted to better understand the designer/developer relationship and dive deep into how knowledge transfer was handled.
We met with 58 customer over the course of two weeks for 1:1 interviews with teams and students. The feedback was overwhelmingly positive, though we learned some critical insights about how far to push this feature.
A key insight which helped us prioritize is not to assume too much code. Developers don't want us to write code for them, and won't use generated code in production. However, they do appreciate having values communicated which they can easily grab to integrate in their own development.
Onboarding
Customers should never see a blank empty state. We wanted to do better than showing a basic upload action for first time users. To solve this, we created a series of PSDs which demonstrate the capabilities of Extract. Each PSD demonstrates the capabilities of Extract and starts with an overview, expanding to alternate concepts if they dive deeper into the tutorial.
Announcement
After preparing release activities, I had the honour of announcing this project during Adobe's MAX Keynote. MAX is Adobe's largest creativity conference where they announce significant product releases to their creative customers.