4-5 weeks UX design, user testing and writing, 2-3 weeks of development and testing
Microsoft Visual Studio Team
Aaron Yim (PM)
Rohan Malpani (Design Lead)
Malika Bhadriraju (Visual Design)
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:
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:
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.
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.
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.
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.
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.
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/