Duration

4-5 weeks UX design, user testing and writing, 2-3 weeks of development and testing

Client

Microsoft Visual Studio Team

My Role

UX Design
UX Writing
Development

Tools used

Figma
Docker
Git

Team

Joshua Sera
Aaron Yim (PM)
Rohan Malpani (Design Lead)
Malika Bhadriraju (Visual Design)

Design Brief

The Visual Studio team needed new animations for the new AI-enhanced features they added to Intellicode, Visual Studio's assistant for their IDE. The animated gifs and videos they had been using took up a lot of space, and they wanted to illustrate Intellicode's new features without incurring bandwidth costs. I'd be designing four animations for four of Intellicode's new features:

• Whole line autocompletions
• Intellicode completes constructor assignments, including pulling the most relevant variable from the scope of the constructor.
• Prioritized Autocomplete
• Intellicode puts the most used autocomplete items at the top of the list of suggestions
• Repeated Edits
• If you're refactoring, Intellicode can replace function calls for you automatically
• Quick Actions
• Intellicode can generate constructors or add parameters to constructors for you.

Approach

I gave the team three options for what I could do, ranging from tried and true, to a completely new, sky's the limit experiment:

1. The easy option, just make more videos, and try to optimize them. We already had an idea of how this would work, and the worst case scenario would be using the same amount of bandwidth that they had been using before.
2. Create JavaScript animations analogous to the videos they'd made before. This would cut down on bandwidth costs, and be similar to the animations from the Github CoPilot page.
3. Create an interactive, clickable demo for the new features. This would entail wireframes, prototypes, and user testing, meaning more time and energy spent, and more risk, since this approach wasn't as well tested.

The PM decided to go with option #2 for three out of four of the animations, and try option three for the Repeated Edits feature, which was the most conceptually difficult.

Assumptions

Target audience: Experienced developers. The Intellicode features we were demonstrating were intended to solve problems that experienced developers would have faced many times. They wouldn't make as much sense to a non-technical audience. This meant that I wouldn't need to explain concepts like refactoring or method signatures, which helped to keep the text light.

Style: A style guide was provided. I'd be using the styles described in the style guide.

Animation: The animation would be similar to the previous animations for Intellicode.

Wireframing

I started out by creating wireframes in Figma for the three animations and the interactive demo. We went through a few rounds of design review to get sign-off on the animations, and in order for me to proceed to a prototype in Figma for the interactive demo. Design reviews were typically held every week, subject to the availability of the other team members.

Once I created the clickable prototype in Figma, we went through a few more rounds of design review. The design reviews helped to tighten up the experience, and Rohan Malpani suggested the breadcrumb-style steps to illustrate how Intellicode needed a few examples to understand how the refactor worked. Aaron Yim performed a quick hallway user test with a developer to make sure they understood what was presented, and could explain what the demo was trying to convey.

Development

Part of the design brief was to keep filesize low. I used vanilla JavaScript and jQuery to make sure the code took up very little space. The only images used were three .svg file, weighing in at 3kb total. Total JavaScript filesize, excluding jQuery was 46kb.

All graphics, save the one .svg were done in CSS3. The code is just expressed as an ordered list, within a div. The containing div has it's overflow set to auto, to get scroll bars. Zooming in and out, which can be seen in the interactive demo, just changes class names, which triggers CSS animations. Scrolling just uses Element.scrollTo(), with the behavior set to "smooth".

The interactive demo adds captions and buttons that can be clicked in order to advance through the demo. There are two sections where the user can type, and the demo will check what the user types against a predetermined string to see if it can advance from there. In those sections, the user has the option of just clicking a button to advance as well, so they don't get stuck.

If the entire component needs to be resized, it can be scaled with transform: scale() in CSS, and everything will still work properly.

All told, development took a bit over a week. Testing and waiting for review took the remaining time.

Final User Testing

Aaron Yim handled the final user test. He walked through the final version with several people, all developers. Afterwards he quizzed them on the new capabilities of Intellicode to see if the demos showed what we wanted them to show. The testers were able to tell Aaron what the new capabilities were, and we called it good.

Final Delivery

I delivered the final product via a git repository. The delivered project can be seen here:

http://www.joshsera.com/demos/

Lee Murray incorporated the final product into Microsoft's Visual Studio website. It can be seen here:

https://visualstudio.microsoft.com/services/intellicode/