2019 (4 months)

Microsoft Web Template Studio

Writing code connecting the front-end, the back-end and cloud services together is very difficult and time consuming. I was hired as the first designer on this project to design an experience that would enable anyone with any level of development expertise the ability to quickly scaffold web projects. I played a key role in building the experience from 0-1 leading end-to-end design and research efforts. I also helped define the product strategy, onboard new team members, and bug test.

Key contributions — Design Strategy, Execution, Research

Impact
— 120,000+ downloads and 2000+ stars on GitHub within the first year of launch.
— Open source launch at Microsoft’s Build Developer Conference.
— VueJS, Molecular, Flask, React Native added by the community.
— Deployment workloads to Azure directly contributes to Microsoft’s bottom line.

”Takes away so much pain I was not even aware of” - VSCode Marketplace review

 
 
1.0 Cover Copy 11.png
 
 
 

Microsoft Web Template Studio is a Visual Studio Code extension provides web developers with boilerplate code, easy to use templates, along with the automation of the Azure deployment process, all within an interactive wizard.

 
 
 
 

Approach

The team laid out many assumptions that we wanted to validate about our users. The main things we wanted to know were experience pain points, types of web applications they build, preferred IDEs and frameworks, as well as popular web app components.

We then started by interviewing prominent members of the development community. Doing this allowed us to then formulate a survey to get data on students, novice web developers, experienced developers and everyone in between.

What we learned was that novice web developers currently find it difficult to quickly get started when creating web applications and deploying them. While intermediate and advanced developers need a better way of prototyping and developing proof of concepts.

 
 
““Was actually hoping there was an easier way to do it for React. However, it looks like I’ll just have to sacrifice a long weekend and go the DIY way to learn it all.””
— Student Developer
 
 
““My time is better spent writing whatever other idea I had in the first place.””
— Experienced Developer
 
 
 
 
 

Validate concepts early

This was an early mockup that I created to get feedback on the flow of the wizard and the technologies that we would be supporting. It was important for me and the team to resolve questions like “flow”, “tech-stack” quickly so that we could build what we needed without fearing drastic changes in the design.

 
 

In order to maintain velocity, we looked at any events, hackathons, meetups in the vicinity and do user research and testing there. Along with my PM and the lead developer, we removed all of the branding on our prototype and framed the entire project as a personal project.

 
 
 
 

A few iterations down, we had separated the selections between front-end and back-end into two steps. During our user-testing sessions, we had conflicting feedback regarding this flow in our wizard. Some developers wanted to select a back-end before a front-end, and others wanted to select a front-end before a back-end.

 
 

And so how we ultimately solved for this problem was to combine the two sections. This was a great solution for a few reasons.

  1. We were able to cut down the number of steps in our wizard.

  2. Framework combinations are very well documented and having both front-end and back-end options on the same screen made making these choices much easier.

  3. It saved us a quite bit of crucial development time as well.

 
 
 
 
 

Future Vision

Throughout the project, I kept a list of features that were mentioned in discussion with our sponsor team and user research sessions. However, due to time and resource constraints our team had to prioritize the feature set and focus on delivering the best ‘minimum lovable product’. This product is set to go open source, but here are some of my ideas for the future.

  • Scale services to support Amazon Web Service, and Google Cloud Platform.

  • Set up a profile experience where developers can save their favorite tech stack selections.

 
 
 
 

Learnings

I spent a lot of time getting to know my team early on. I did this to resolve ambiguities about how we’ll work together upfront. This way both parties can be direct about how we’ll help each other do our best work.

 
 
 
 

“You already do this well, but watch out for technical limitations that affect a users’ experience” - Kelly, Software Engineer.

Out of the 6 developers I worked with on this project, Kelly was the only one that wanted to do the front-end with me and so we got really close over the course of this project. If I were to do it all over again, I wish I would have kept asking questions like "where is this application going to get really slow?" An example of this during my project was when I found out a Cosmos Database took Azure 6 minutes to spin up. At the time I was not prepared to design an experience that involved this 6-minute loading state. 



From this experience I learned that developers are trained to spot chokepoints in a codebase and so I should have done a better job at leveraging their knowledge earlier. Asking earlier could have afforded us more time to think through and test solutions to make the UX better.