Designing the Developer Workspace
Building an engaging web experience is anything but simple. It often requires deep user insights, iterative design and development sprints, and far too regularly late nights of coding. Looking through line after line as a deadline approaches is daunting. In these moments, you have little patience for a cluttered development environment.
When the team launched their one-year total revamp, the first hurdle, according to Suhas Yogin, Dreamweaver program manager, was to translate a feeling into a roadmap: “Our users complained about the feeling of Dreamweaver. They told us that the application seemed heavy, but addressing a feeling is a difficult problem. As we talked to users and observed them, we realized that several users preferred to have a cleaner and a more streamlined user experience, something akin to lightweight text editors such as Brackets.” As one user told the team, “I find it hard to focus on my code with all of the panels and other visual aids available with Dreamweaver. My coding experience has to be distraction-free.”
Getting to the Bare Minimum
Spurred on by this insight, “we observed how people use Dreamweaver, especially people who spend their time in code view,” explained Arun Kaza, Dreamweaver associate product manager. “We talked to customers, and we did customer visits. We also did some observations–we gave small exercises to experienced Dreamweaver developers and new users and watched to find out which things they use, which things are essential.”
These interactions with customers helped the team realize that they could streamline the myriad number of panels into three: files, snippets, and output. The rest could appear contextually as the user needed them. “This is what people who want to code have been telling us. They just want the bare minimum. It makes Dreamweaver comparable to other lightweight editors out there. You just have a project, three panels, your core coding area. This also helps the user see more lines of code in a way that is cleaner, with fewer distractions,” Arun explains.
Even though they’d been hearing that developers wanted a streamlined version, at first the team didn’t imagine such an extreme makeover. “We were really thinking of having at least a panel or two more, and that customers would really want those panels,” recalls Arun. “It was surprising when people were just using the files panel and just coding day in and day out.”
Arun remembers another surprise—the way developers liked to preview their work. “They were concentrated on code view, and they had another screen with a browser launched. They wanted to do the change and actually see what’s happening on the other screen right in the browser. So, with our minds on making Dreamweaver minimalistic, we created a built-in preview feature: you can just launch a browser from within Dreamweaver and as you type into code view, that browser is always in sync. It automatically updates on your secondary monitor.”
Inviting Developers into Their Own Workspace
With these changes, the team needed a good way to help developers get into the new, streamlined workspace. Initially, they considered adding a button visible throughout Dreamweaver that would launch users into a new window. In this version, the developer mode would be a completely separate environment. As they began to validate with customers, they realized that an application within an application would be confusing.
Instead, the team took a different direction; they considered a developer workspace. They then faced a second challenge—how would they get users to discover it? “It’s a workspace inside of Dreamweaver, and workspaces in general are not very highly used, so we worried,” says Suhas. “But then we realized it was an opportunity to build a new onboarding experience. Now, the first time you turn it on, you choose between the developer workspace and the standard workspace. The developers move to the streamlined version, or users can still choose the standard version.” The standard workspace has a familiar feel for existing Dreamweaver CC users.
The New Experience
The new Developer Workspace loads quickly and is streamlined for coding. Dreamweaver CC users’ other favorite features are still there: you can always open more panels when you need them, and then once they’re opened they’re saved. “If you are a person who uses Dreamweaver primarily for coding, then you should really be in the developer workspace rather than in the standard workspace,” says Rajnish Bharti, Dreamweaver senior product manager. “You get all of the benefits of Dreamweaver, things like built-in FTP and the ability to link your code, but in a very simple UI. You don’t see anything that’s not relevant to you.”
Feedback Goes Full Circle
When the team first started the redesign of Dreamweaver CC, they wanted to understand how users work with Dreamweaver every day. One thing they didn’t expect was that customer feedback would change the way the team worked. Arun recalls: “We started to see that customers really valued our project, and the feedback from the first beta was overwhelmingly positive. Suddenly our team was even more motivated. We really wanted to deliver on this, and we all began helping each other.”
The team still has a lot planned for the road ahead. “There were times we had to make calls about what customers were really wanting for all these years, and we had to wait on some things,” says Arun. “But we definitely have all of those lined up. They are next on this continuous journey.”
Read a full rundown of everything that’s new in the revamped Dreamweaver CC. You can also find out more about how the team developed the new Dreamweaver with developers in mind. Download the latest version of Dreamweaver CC.