About the Team

Under MS Garage, this intern-led project aimed to build a no-code app creation platform using Excel as the data and logic engine. Over 12 weeks, we progressed from conception to a working proof-of-concept.

About My Role

As the sole UX Intern, I was responsible for driving design decisions based on market research. I Interviewed users from a diverse array of SMBs. I leveraged MS Fluent design system to create a scalable solution that fits seamlessly into Office.

01

Introduction

This summer, as the COVID-19 locked the world down, and companies laid employees off across the board, I was most fortunate to have an opportunity to intern remotely with Microsoft, as part of their very first batch of Virtual Interns. Amidst the confusion of beginning the upcoming semester and closing the previous one, I started my internship on the 11th of May.

As part of my pre-onboarding, I joined the MS Garage program. After a quick onboarding and a virtual tour of the facilities, it was time to pick my internship project from 3 options. It was a tough decision to choose from the fantastic themes on offer, and in the end, I decided to go with:

“Excel powered platform for creating customized apps for small to medium businesses (SMBs) in Emerging Markets(EMs)”

The same evening, I met my team for the first time. As is customary with Garage internships, my group consisted of 5 Development Interns, and myself, the UX intern. While this was primarily an intern-led project, we were backed by the big guns – our Coaches & Managers. Coaches are Full-Time Employees (FTEs), whose role was to mentor the interns and help grease the wheels when we were stuck. Of course, I’d be remiss if I did not mention our Project Managers, who provided the business knowledge and made sure our team performed at its best. I’d like to thank all the people who made this journey special, and without whom this project would not have been possible. Working with them has been an exceptional experience.

02

Going Virtual

It was a strange experience, at first, to interact with my coworkers as disembodied, talking heads on a screen. As any designer will tell you, it’s hard to imagine doing any kind of UX work without a room, a whiteboard, and a stack of post-its, without all-night brainstorming sessions and coffee breaks together!

As time went on, however, I found myself feeling closer and closer to my virtual team, connecting for our daily “sync ups” and “chai pe charcha” sessions. We celebrated coworker’s birthdays and even a virtual baby shower!

My UX Coaches, Karthik and Kalyani, proved to be excellent sources of inspiration (and banter) throughout the internship. Karthik, who worked on Excel Web, always had time to help me out when I stumbled and was a constant mentor over the three months we spent together. Kalyani, an alumna of IDC, and I spent hours reminiscing fond memories at IIT Bombay. Having worked on Excel Mobile, and specifically Cards View, she brought invaluable insights to the table!

03

Initial Research

Our project leveraged the extensive market research already conducted by Microsoft. Additionally, I decided to do my own primary research by talking to several SMB owners, managers, and frontline workers to find out how they use Excel, the problems with mobile data entry, and about how they manage their day to day business. Across most of the scenarios, some interesting facts emerged.

In most businesses, there were three main kinds of people involved in daily business operations. Our initial goal was to develop a tool for the “Tech support guy” to create customized apps to be used by Admins or frontline workers. These apps would be applied for various tasks like data entry, viewing monthly averages, or managing employee data, which was already stored in Excel workbooks.

We started with the goal of empowering the Tech Support persona to create these apps, but as we progressed, we decided that we need even more ease of use; we wanted to make a solution which could be used by even novice users of Excel.

To take a more specific scenario, consider one of the businesses I visited, a bakery. There existed several secondary personas; the Baker, the Cashier, the Delivery Driver, et al. The primary persona, the App Designer, needs to create different “workflows” for each of these to make their tasks easier.

04

Rationalizing Workflows

After identifying roughly what our platform needed to accomplish, the next step was to determine how these created apps would work – what are the basic set of “building blocks” one needs to create a basic app? Let’s say a local grocery store wanted to set up an app for customers to order groceries during the lockdown, or maybe a way for them to record transactions and maintain a credit book.

What comparisons can we draw between these kinds of apps and larger scale eCommerce apps in the market? How can we understand these actions & app data through the lens of Excel?

I found that on a high level, we can address most day to day scenarios with the model below. Here, List View/Table View refers to some way to visualize table data on mobile. Similarly, the Detail View is a zoomed-in view of a single row of Excel Data. I decided to leverage Excel Cards View for this, to take advantage of the research that was already done, and infra already built.

The next challenge was how to empower a user to put these different components together, with only basic Excel knowledge. Existing no-code app creation platforms in the market are reasonably non-trivial and have a significant learning curve. How can a typical grocery store worker create a customized app? Also, how do I take the existing Cards View, and transform it into something customizable and unique?

Whoops!

Although I'd love to show my solution, my agreement with Microsoft doesn't allow it.

05

Sketches, Wireframes and Redlines

I had to find a balance between customizability and ease of use. Since this project was targeting emerging markets, and specifically SMBs, I decided to prioritize ease of use and to design a platform intuitive to the most basic Excel user. The best way to accomplish this seemed to be through a linear method, guiding the user from beginning to creation of the custom app.

I started sketching on paper and gradually developed my designs on Figma. I settled on a simple, three-step wizard which the user would follow to create their customized app. The user would be able to simply map relevant tables & data to their app, and get started.

I leveraged Microsoft’s Fluent design system to create a prototype that fits right into the Office ecosystem. After providing the redlines to the development interns, I assisted them as they proceeded to build the code.

Once the minimum viable product(MVP) was ready, we set out to enable the maximum level of customization possible within the framework. As part of the Garage Hackathon, we enabled custom navigation, themes, branding, and other features to add a personalized touch to the product.