A peek into the Microsoft Flow design process

Nitish Meena
Apr 29, 2016 · 5 min read

It’s not about conversational interfaces. It’s not about flat or skeuomorphism. It’s not about building attention-centric experiences. It’s about the opposite — making those elements invisible, reducing their occurrences yet achieving the same outcome or actually achieving more.

The work that we, as individuals, do today involves constant shuffling between services and making connections between data. Microsoft Flow is a step forward in making a system where one can connect different services and simplify the work life.

It’s like having a personal assistant who takes care of things all day long, every day, and you just don’t have to think about it. It works invisibly.

Design as the “personal assistant”

Imagine you’re a social media strategist and for the next quarter your goal is to increase user engagement by 100%. You know the steps to do this, yet you feel intimidated by the goal. You start by writing blogs about the product, crafting tweets, keeping the conversation going with followers, managing data in Excel, determining the user sentiments and making reports to keeping the team informed about the progress.

It’s just too much. How could you possibly manage all of this single-handedly?

In the design process, as user experience designers, we play the role of the personal assistant who does your work tasks for you.

Now let’s go back to the above example, only this time imagine having a personal assistant waiting to take the orders from you or better doing things proactively to get the latest market trends for you in daily emails. Analyzing the user sentiment and keeping the all the files in sync across clouds.

We set the stage, help you connect the services, then get out of the way. And like a good assistant, we’re there for you when you need us.

Our first meeting to conceptualize Microsoft Flow. #InTheWoods
Hallway design review and early concept mocks.
Research sessions to define the product direction.
Early Paper FiftyThree experience storyboard. Codenamed Process Simple.
Quick prototyping using InVision for our weekly usability studies.

Design for delight at each point

One success matrix we use for Microsoft Flow is “5 Minutes to Wow.” If we cannot keep the user engaged in first five minutes, then their chance of dropping off is dramatically higher. In our early brainstorming session, we made experience maps for key scenarios and identified the wow factors. The factors ranged from simply finding the right template quickly, to seamlessly creating a complicated, multi-step flow.

One of the biggest design challenges we faced was to keep the experience simple and minimal regardless of the complexity of the flow. Building your flow isn’t a task; it’s an opportunity. And it’s our job to simplify that opportunity for our end users.

Imagine a flow, which posts your Facebook status to Twitter and ask for your approval — if it’s good for work purpose, and once you approve it posts that on Yammer and Slack.

Now, this flow uses 5 services with conditions and needs to show this representation at five major pages — Browse, Template landing, Creation, Confirmation and My flows page. And it needs to work across multiple screen sizes as well.

Scalable template card for different viewports. Design tools used: Sketch, InVision, Adobe Illustrator, Photoshop and After effects.

Design for no dead ends

Often in a product, there comes a screen which means dead end. And the only choice it offers to user is to go back. With Flow we took a “no dead ends” approach for endless possibilities. Essentially guiding individuals to make the best choices, increasing their confidence and success.

Here’s one example of a 404 error experience:

Example of no search result page:

Looking forward:

Now that the product is out of the door, we’re measuring the product quality using the success matrix we have defined using a tool called Localytics. Also, in coming weeks we’re running a benchmark usability study to get the initial impressions and qualitative data in-depth.

This is just the start of a long journey for us. As we’re still in preview with 35 services, which might be limiting for some of you. But, hold on tight, our team is working hard on bringing new services and experiences every week.

In closing, a huge shoutout to design, content and research team — Jesse, Ona, Keith, Perry, Lydia, Matt, Ben, Rachel and Steve. Everyone here is highly motivated and does their best to create a positive work environment.

Drop me a note about how you feel about the product or have any suggestions. I look forward to seeing what you automate! :)

Microsoft Flow

Work less do more

Thanks to perryholz

Nitish Meena

Written by

A desire to capture, to explore, and to create. UX Designer at Microsoft, Seattle | Reach out to me nitishm@outlook.com

Microsoft Flow

Work less do more

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade