Merge remote-tracking branch 'origin/master' into misolori/v5.1

.github/workflows/build.yml

@@ -0,0 +1,58 @@
+# Sample workflow for building and deploying a Hugo site to GitHub Pages
+name: Deploy Hugo site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    env:
+      HUGO_VERSION: 0.115.2
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.16
+      - run: npm install
+      - run: npm run export
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

content/icons.md

@@ -7,86 +7,76 @@ project: "large"
 weight: 3
 ---
 
-# Introduction
+As the lead designer, I created a cohesive iconography style that could be seamlessly applied across our various products and platforms.
 
-[Visual Studio Code](https://code.visualstudio.com/) is a lightweight editor that straddles between an [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) and a text editor. It has a rich extension ecosystem, built-in support for web development, and hundreds of additional features & customization options.
+{{< image src="intro.png" >}}
 
-## My role
-I was the lead designer on this project and partnered with engineering and user research. I also led the discussions with the community, soliciting feedback from customers, and created custom builds for testing purposes.
+# Background
 
-# Inventory
-The iconography in the product originated from [Visual Studio](https://visualstudio.microsoft.com/vs/) (the sister product of VS Code) and had evolved to also include icons from [Octicons](https://primer.github.io/octicons/). This introduced a lot of consistencies as there were a lot of overlap between icons and styles.
+VS Code's iconography originated as a fork from [Visual Studio](https://visualstudio.microsoft.com/vs/), the sister product of VS Code, and had evolved over the years to include third-party icons from GitHub ([Octicons](https://primer.github.io/octicons/)).
 
-{{< image src="inventory.png" >}}
+{{< image src="background.png" >}}
 
-To further add to the problem, our customers had taken note of this issue and filed several issues regarding the inconsistencies.
+This introduced a lot of inconsistencies as there were different styles, weights, and colors. Our customers started noticing these inconsistencies, and there wasn't anyone actively maintaining our icons. I led the initiative to begin cleaning up the iconography and creating a cohesive style that fits across our platforms.
 
-> “…the icons are the worst part of the editor, by far…”
-
-{{< image src="issue2.png" >}}
+{{< image src="quote.png" >}}
 
 # Iterations
 
-I partnered with an icon designer to create several variations of styles we wanted to explore that ranged from outlines to solids to rounded corners. We iterated on the styles and placed in the primary product screenshot to get a good feel for each style and narrowed it down to a few styles.
+After getting leadership onboard, I partnered with our visual designer to create several variations of styles we wanted to explore that matched our product branding. We explored a wide range of styles from solid and outline to rounded and playful. Below is a preview of our first rounds of iterations.
 
 {{< image src="iterations.png" >}}
 
-As we narrowed down the styles to a few, we wanted to get feedback from the community to see if there was a preference between the two. This was one of the first times that we started to open the design process to the community on Twitter & Reddit, so we were surprised to see the amount of responses.
+As we narrowed down the styles, we knew we needed to get customer feedback for this to succeed. In embracing the open-source culture, we opened the design process and invited the community to participate and provide feedback. We were surprised at what happened next.
 
 {{< image src="feedback.png" >}}
 
-# Getting better feedback
+# Better feedback
 
-Though the feedback we had received was great for first impressions, we really wanted to get these into our customer’s hands to see how it would impact their daily workflows. I went and created a custom build of VS Code that had these icons added and asked our community to try them out and provide feedback. We were, again, surprised at how many people participated in this process.
+As we went through the feedback, we realized it was great for first impressions, but we wanted to get these into our customers' hands to see how it would impact their workflows. So I created a custom build of VS Code with the new icons and asked our community to try them out. The community continued to surprise us by being active build testers and providing more feedback.
 
 {{< image src="build.png" >}}
 
-Once we gave people a sample build, we started received a flood of feedback, which was amazing. There was feedback around first impressions between the solid and outlines, glitches that we missed, and even other areas that needed updating. We worked around the clock to keep the build updated as we iterated on the feedback.
-
-{{< image src="feedback2.png" >}}
+Once our customers had a sample build, we started receiving a flood of feedback, which felt amazing and terrifying. There was feedback around first impressions between the solid and outlines, glitches we missed, and even other areas needing updating. We worked around the clock to update the build as we iterated on the feedback.
 
 # Shipping it
 
-After several months of iterating on the new icons, we finally [shipped the new icons](https://code.visualstudio.com/updates/v1_37#_new-product-icons) and set them as the default. We did a lot of back and forth trying to determine which icons to use as the feedback was very split. After doing several testing, we landed on the outline version because those were are a more “modern” style used in other applications. We tabled the discussion for allowing other styles of icons to be allowed for scoping purposes.
+After several months of iterating on the new icons, we finally [shipped them](https://code.visualstudio.com/updates/v1_37#_new-product-icons) and set them as the default. We did a lot of back and forth trying to determine which icons to use, as the feedback was very split. After several tests, we landed on the outline version because it resonated with most of our users and looked more “modern.”
 
 {{< image src="shipped.png" >}}
 
-# Packaging it
+# Automating it
 
-Once we updated the icons, we also wanted to update how icons were consumed in the source code. I created a command line interface (cli) tool to auto generate an icon font from our svgs. We named the icon library [Codicons](https://github.com/microsoft/vscode-codicons/), in reference to our previous icon library ([Octicons](https://primer.style/design/foundations/icons/)).
+Once we updated the icons, we also wanted to update how icons are referenced in the source code. I created a command line interface (CLI) tool to auto-generate an icon font from our svgs. We named the icon library [Codicons](https://github.com/microsoft/vscode-codicons/), paying tribute to our previous icon library ([Octicons](https://primer.style/design/foundations/icons/)).
 
 {{< image src="codicons-tool.png" >}}
 
-To round it out, I also created a [Figma plugin](https://www.figma.com/community/plugin/786075219184960694) to make it easier to consume icons in our design toolkit. This allows us to search for any icons and bulk-replace them.
-
-{{< image src="plugin.png" >}}
-
 # Open sourcing it
 
-Once the icons were shipped, the next thing I wanted to do was to give back to the community and open source the icons, which we’ve never done before. So we published [microsoft/vscode-icons](https://github.com/microsoft/vscode-icons) on GitHub. We also published these to the [Figma community](https://www.figma.com/community/file/768673354734944365) for others to duplicate and re-use.
+Once we shipped the icons, I knew it was time to give back to the community and open-source them, which Microsoft hadn't previously done for design. So we published [microsoft/vscode-icons](https://github.com/microsoft/vscode-icons) on GitHub, published them to the [Figma community](https://www.figma.com/c/file/768673354734944365), and created [a plugin](https://www.figma.com/community/plugin/786075219184960694) for Figma.
 
 {{< image src="open-source.png" >}}
 
 # Impact
-Previously, in order to use icons you would need to provide 3 different files for the various themes (Dark, Light, High Contrast) and add them in a separate file in your code. They would then be added as background images and lose any scalability benefits.
 
-With the introduction of our new icon font, [Codicons](https://github.com/microsoft/vscode-codicons/), we are able to define a dictionary of the icons and then have references in the source code so all of our icons point to the same one.
+Previously, to reference icons you'd need to provide 3 different files for the various themes (Dark, Light, High Contrast) and add them in a separate file in your code. They would then be added as background images and lose any scalability benefits. With the new icon font, [Codicons](https://github.com/microsoft/vscode-codicons/), we could define a dictionary of icons and then reference them in the code.
 
 {{< image src="architecture.png" >}}
 
-We also shipped the Codicon library as an npm package for anyone wanting to use them in other projects outside of VS Code or as part of their extensions. It currently has an average of +20k installs.
+We also shipped the icon library as an npm package for anyone wanting to use them in other projects outside of VS Code or as part of their extensions. It currently has an average of +20k installs.
 
 {{< image src="codicons-npm.png" >}}
 
-We also had previously discussed the idea of allowing users to customize their product icon themes as customization is a big part of VS Code. With the introduction of our icon font making it easier to consume icons, allowing product icon themes because a little easier. I partnered with our engineer to help introduce a [new API](https://code.visualstudio.com/api/extension-guides/product-icon-theme) for product icon themes.
+# Scaling for the future
 
-{{< image src="product-icon-theme.png" >}}
+During our research studies, we saw a new theme arise where customers wanted to customize the icons to match their aesthetic preferences, as not everyone liked the outline styles. After we added support for icon fonts in the source code, it was easier to use different versions of icon styles, which is where product icon themes were born. Partnering with our engineer, I helped introduce a new [API for product icon themes](https://code.visualstudio.com/api/extension-guides/product-icon-theme).
 
-Introducing this new functionality meant we needed to increase the visibility. In an effort raise more awareness, I took the Fluent icon system and created a product icon theme named [Fluent Icons](https://marketplace.visualstudio.com/items?itemName=miguelsolorio.fluent-icons) and it currently has +350k installs.
+{{< image src="product-icon-theme.png" >}}
+{{< image src="product-icon-theme2.png" >}}
 
 # Collaborators
 
-- Marco Doelling - Design
-- Cherry Wang - Design
+- Marco Doelling - Visual Design
+- Cherry Wang - Design Ops
 - David Dossett - Design
 - Martin Aeschlimann - Engineering

content/notebooks.md

@@ -6,29 +6,21 @@ draft: false
 project: "large"
 ---
 
-# Introduction
+As the lead designer, I partnered with engineering, product management, and user research to create accessible notebooks for all langauges.
 
-[Visual Studio Code](https://code.visualstudio.com/) is a lightweight editor that straddles between an [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) and a text editor. It has a rich extension ecosystem, built-in support for web development, and hundreds of additional features & customization options.
+{{< image src="intro.png" >}}
 
-For data scientists, notebooks (especially [Jupyter Notebooks](https://jupyter.org/)) are an essential tool for their workflow. It is document that has a mixture of markdown text and code that you can independently run. If you’ve ever seen a blog post or tutorial that talks about how to do something along with sample code, it’s a pretty similar paradigm. Data scientist use notebooks as a tool to clean, analyze, and process their data to gain insights. Sometimes these notebooks are shared amongst colleagues or other developers who can build machine learning models based on the notebook.
+# Background
 
-# My role
-I was the lead designer on this project and partnered with engineering, product management, and user research. I also closely partnered with another designer for an internal notebook component used at Microsoft.
-
-# Origin
-The [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) team at Microsoft began an experiement to add notebook support for their VS Code extension, which is the #1 extension on the mnarketplace with +56 million installs. Python was the preferred language in notebook tooling, but the VS Code API had limitations on what it could support natively, so the team built a custom experience to gauge interest from the community.
+The [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python) team at Microsoft started an experiment to add notebook support for their VS Code extension, the #1 extension on the marketplace with +56 million installs. Python was the preferred language in the notebook space. Still, VS Code could not support it natively (yet), and the team built a custom experience to gauge interest from the community.
 
 {{< image src="notebook-origin.png" >}}
 
-There was a lot of positives from this experience: it allowed data scientist to use one tool for notebooks and regular python code, they could work locally instead of relying on their browser, and it allowed them use the same extensions they loved in VS Code. There were also a host of other problems like performance (because of the custom experience), full extension support, and incurred a lot of engineering debt to maintain.
-
-When our team decided to bring native support for notebooks, we took a step back and looked at the landscape of the product. Historically, VS Code has become a language agnostic platform where you can use it for any language. Notebooks had primarily been for data scientist working with Python, so we asked the question:
-
-> “What if we built notebooks for all languages?"
+After seeing a significant spike in interest from the community, our team started planning to bring native support. VS Code is rooted in the idea that you can use any language to write code and supports a subset of languages out of the box. Extensions allow others to create support for any additional languages. The team took the same approach when it came to adding notebook support.
 
 # Early explorations
 
-These are some of the early explorations where we took the original design and iterated on it, applying a lot of the visual styles found in the product to become more cohesive.
+Below are early explorations where we took the original design and iterated on it, experimenting with different visual patterns in the product, making the experience more cohesive.
 
 ## Code & text cells
 
@@ -50,20 +42,10 @@ After mocking up the various states in Figma, I needed to test out the interacti
 
 # Impact
 
-After we created the v1 design of notebooks, we continued to iterate and gauge feedback through users studies and product surveys. Initially, there was a lot of reservation for enabling the new experience for everyone as it was a big shift from the original design. We leveraged our experimentation framework to opt a certain number of users into the experiement and saw a good amount of positive feedback return from the surveys.
+After creating our first version of the new design, we leveraged our experimentation framework to slowly roll out the changes and gauge the feedback from the community. It took us several months of iterating through the feedback to polish the experience.
 
 {{< image src="notebooks-survey.png" >}}
 
-Here’s a few cherry picked quotes from our customers:
-
-> “this version is leagues better…the integration & visual coherence w/ VS Code is amazing.”
-
-> “Overall a very clean & good looking experience, much better than the old notebooks.”
-
-> “Enjoy the clean design, nice feedback on executing cells”
-
-We now have dozens of notebook extensions that are used in a variety of languages that range from audio generative to query languages to REST API requests (read about [custom notebooks](https://code.visualstudio.com/blogs/2021/11/08/custom-notebooks)). It’s been remarkable to see how a tool made for a specific audience can have greater impacts when made accessible for everyone.
-
 The team ended up shipping native support for notebooks and wrote a [blog post](https://code.visualstudio.com/blogs/2021/08/05/notebooks) about what it means for the editor.
 
 {{< image src="notebooks-blogpost.png" >}}