Internship Timeline
May 6 - Aug 23, 2019 (16 wks)
My Role
Product Design Intern
Team (4 Devs and 2 PMs)
Christella Cidolit(SWE), Fatou Mounzeo(SWE), Jonathan Wang (SWE), Luke Slevinsky(SWE), Lea Akkari(PM), Rachel Phinnemore (PM)
Device Simulator Simulator
Released Aug 27, 2019
DSX, FROM MICROSOFT GARAGE TO YOU
Make Without Limit - Microsoft DSX
Microsoft Device Simulator Express (DSX) is an Visual Studio Code Extension designed, developed from Vancouver Garage Interns in Summer 2019.
It allows Electronic Makers & Hobbyists and Students to code an Adafruit Circuit Playground Express device using CircuitPython even without the device is presented.
💻12 one-week Sprints
At the Garage internship, we follow the build - measure - iterate cycle throughout the agile development process. One-week sprint made it very intense yet efficient.
📃4 Surveys with 300+ Responses
Throughout the internship, we collaborate with Adafruit Industries to conduct user research among the IoT developer and Electronic Maker's community! I also touched base with Adafruit for review in-product copy & provide resources, like the Github master branch for CPX examples!
✏️30+ Usability Testing Sessions
I led the bi-weekly testing session to validate product design solutions based on customer's feedback with the team. We also make product design decisions through some prompt user testing in the office if we argue for so long :)!
📈"Growth Mindset"
As the one & only designer, my duty includes all UER, UX Flows, Visual Design, Copywriting and also develop team's visual identity (and multimedia production for our weekly demo & hackathon video!).
Outside the features we shipped in aka.ms/getDSX, I also completed the designs for future iterations to extend the project.
PROJECT BACKGROUND - PHYSICAL COMPUTING & MAKER CULTURE
Start With Adafruit Circuit Playground Express!
Have you ever thought about making your own robot, DIY a new watch with cool neopixels, or try some awesome sound remixing experiments? Adafruit Circuit Playground Express (CPX) can bring your imagination into reality!
Collaborated with Adafruit Industries, Python & AI Tools team at Microsoft pitched the project idea to us as creating a "Visual Studio Code extension allowing people to code their CPX using Python".
As an electronic art student and hardware lover, I voted for this project as my #1 choice without any hesitation :) (I was the one and only designer chose this project in our 3 votes!)
PRODUCT OPPORTUNITY
"How Do We Learn Hardware Without a Hardware?"
We see an opportunity in education - as more and more secondary schools are implementing relevant curriculum worldwide.
However, what if some schools can't provide hardware for everyone? How high school students learn hardware even without having one?
PRODUCT DESIGN PRINCIPLE
Provide Choices for the Diverse Use Cases
👨🏫
"I really don’t like PlatformIO, I just need some quick & easy way to test my python code”
An expert maker just wants to have a simulator to quickly test out their python code without plugging in and out the device and waste a lot of time ( a special configuration process when using CircuitPython for Adafruit CPX).
👨🎓
“Ah… so you ask me how do I start, where can I found some official documentation for this device?”
While a student never touched hardware before needs much more hand-holding during the onboarding experience, such as CTAs to find example code or even simply point them to the correct place to find documentation
CUrrent tools & painpoints of the experience
PRODUCT SCOPE & GOALS
Light-Weighted & All-in-One
Considering the project timeline limitation for content creation and the market needs, we set the target audience towards Electronic Makers & Hobbyists Community first, as they have a bit more context with Physical Computing. Then the product design goal is to accommodate the needs for Secondary School students in the future when we have more structured content. We are seeking a product solution that integrates VSCode, Python and Adafruit CPX, as they can:
💻
Envision the Future
Python is one of the fastest-growing languages in the world now, but using Python for an embedded system is still very new, we aim to provide people a better tool integrate all the essentials they need for physical computing project (Serial Monitor, Debugger, etc.) while using Python as the language.
🕔
Optimize The Workflow
Having a device simulator can save people’s time for switching from hardware to software constantly, thus optimize their workflow.
💼
Leverage Microsoft Business Value
Visual Studio Code can provide a smooth coding experience such as auto-completion, error-flagging, syntax highlight and can also integrate with other tools at Microsoft (Github). This spreads the business value and also a good way to introduce this professional tool for students who’s interested in an SWE career.
THE PRODUCT SOLUTION
Microsoft DSX - Make Without Limit!
So, Device Simulator Express is designed for your awesome CPX project even you don’t have the device. How it actually works?
--- START WITH MICROCONTROLLERS! ---
** = Future Feature
“New File”, Start your project
Don’t even know where to start after downloading DSX from the marketplace? Choose the “New File” Command and see what’s out there!
(1) Python Code Template: We provide you a basic code template so you’ll know there must be a “While True” loop when you code CircuitPython for CPX
(2) Start Somewhere: Totally new to hardware? Can’t even find the correct tutorial for 10 mins on the Internet? We got your back! In the code comment and VSCode notification section, you’ll find the official Adafruit Tutorial and Github Master Branch for all CPX CircuitPython Examples!
(3) See what Electronic can offer: We have the Simulator web view open for you by default, poke around and discover the 10+ integrated sensors on CPX!
** Getting Started : More hand-holding for beginners
Want more structured content & a hand-holding onboarding experience? Beyond the features we shipped, this “Getting Started” product design allows you to discover different example files in a visual way, and you can also quickly locate the links and documentations, all in one place
(1) Code Python & Test it Out: Has 5 .py file open in the text editor? Have too many versions and your project is about to mess up? No worries! You’ll know which one you’re running on the simulator in the dropdown section! Simply choose the .py file you want to run here and you’ll see the result.
(2) **Find Code Snippets & Examples: How to find example code snippets? In the future version of DSX, click the dropdown section in this tiny little toolbar, you’ll see the relevant code examples to this sensor. Copy & paste it directly to your text editor and give it a try!
(3) **Learn it in a Visual Way: Poke around the CPX, you’ll see the according to electronic component highlighted as you hover on them, double click to trigger the dropdown section in the toolbar to learn a bit about them!
Simulate Different I/O Interactions
Inspired by Android Studio, Device Simulator Express has a unique way to let you control and simulate the input/output interactions as much as you need for your project - The Tool Bar.
(1) Simple Yet Accurate: Control the input with sliders & Input the number directly for more accurate data.
(2) Learn as You Go: Don’t know what is “accelerometer”? Don’t have time for the 10-page documentation? In the dropdown section in this tiny toolbar, you can learn a bit from them!
(3) ** Switch to Different Simulators: Working on different boards? You can also switch to different simulators that can test your code on it!
BEHIND THE SCENE
"How do you...design this?"
It all starts with Hand Sketch! Every feature, from invisible UX flows to Iconography, I like to sketch it out on my sketchbook really quick and show it to the team. Our team also sketch together!
WHEN UER COME THROUGH
"How do you make design decisions?"
There are a lot of times we discover problems through user testing sessions. Like the “New File” feature was one of the solutions after usability testing session #2! And there are also times we can’t decide between different choices since they all have their pros & cons.
For example, for the I/O simulation design, we decided on the toolbar option after testing the 2 options out with 5 participants in one of the testing sessions!
Based on customer feedback, we made a design decision!
WHAT I'VE LEARNED & WHAT I CAN DO BETTER?
What Happened in the Garage, won’t just Stay in the Garage.
KEY TAKE-AWAYS
Customer Obsessed
Microsoft Garage Internship boosted straight up my UER skills. I’m always a visual & interaction designer rather than a researcher. But the bi-weekly usability testing sessions, in-depth interviews, surveys, and guerilla testing sessions really made me not afraid of UER at all!
At the end of the internship, our team spent 3 hours configured 10 surface books and I ran a workshop for the Beta version of DSX! We also conducted UER outside Microsoft such as Vancouver HackSpace, Maker’s Space, and even lurking and listening to the weekly Adafruit community chat on discord!
KEY TAKE-AWAYS
Own the ProductWe showcased and demoed the product to the leadership team of Microsoft Education, Microsoft Research and Visual Studio Code meetup. But we are the one takes full responsibility for the product. As the designer in the team, I helped setting up and spreading out surveys when we hesitate about which feature is more important. (survey Pics)
WHAT I CAN DO BETTER?
Front-End Audit During the internship, there were a few times I found the product is not the same as the design, and sometimes I would miss it if there’s no developer telling me there seems to be wrong when they were reviewing the PR. I hope to improve the designer - dev workflow in future works and make the work easier for devs.
There were 2 times because of the miscommunication between me and the dev, my developer spent 3 hours working on the wrong feature. Sometimes daily stand-up isn’t enough, over-communication is the key, also my painful learning from past PM experience.
MY JOURNEY AT MSFT
"Growth Mindset"Microsoft Garage is the most special work experience of mine so far. It was intense, busy and sometimes stressful, but also rewarding.
During the last day I saw my manager always write "Growth Mindset" in my evaluation. As the beginning I wasn't sure what it means. But just when I was updating the portfolio, the notes from my first day New Employee Orientation:
Growth Mindset = Learn from Others 👩🎓 + Try New Things 🔋 + Embrace the Journey 🖌️
It's been a once-in-a-lifetime experience working at Microsoft, and I'm more than excited to embrace what lies ahead.
MEET MSFT VANCOUVER GARAGE Summer' 19!
my awesome teammates 🍓!!
