Microsoft Flow is designed to save time and effort by creating automated workflows between your favorite services. There’s an overwhelming amount of digital information and experiences available to us, but finding and getting to the information we really need can be exhausting. Flow provides a powerful, easy-to-use way to take control of your digital experiences.
The Flow mobile app helps you in monitor and manage your flows, get notifications when a flow fails, review the issue and see its run history — from wherever you are. And in the months ahead, even more mobile-friendly services will be incorporated into Flow, including location, photos, text, and more.
For us, Flow mobile wasn’t an afterthought. The mobile and web design tracks ran parallel to ensure consistent experiences across platforms. In this blog post, I want to highlight the process of designing flow mobile app and our learnings along the way.
Designing with a remote team
The engineering team in Israel owns the development side of flow mobile app, while the design work is being done here in Redmond. Working closely with a team that’s 6750 miles away with a 10-hour time difference underscores the importance of clear and open communication.
Working with a remote team is not quite as convenient as a local team who sits in a space near you. You miss some of the spontaneous whiteboard problem-solving sessions, but get really good at crafting clear and useful emails. During this project I learned a few things:
- Make trust your top priority
- Simplify your communication
- Keep everyone involved in the process
I learned a great deal of trust working with Adi, who manages the Flow mobile experience from Israel. A major lesson was to clearly communicate the reasoning behind every design decision, so she can explain the design intent to the engineering team. I’m her voice here, she is mine there.
English is not my first language, and that really helps force me to design a user experience that is as simple and universal as possible. It also probably helps when simplifying communication with a remote team.
Letting people from the engineering side early into the creative process sounds intimidating to a lot of designers. But that’s where the real decision making happens, and we must keep everyone involved to make the process frictionless and more honest. And in building any product, we must honor the value each other brings.
This process also encouraged me to understand the deeper meaning of many decisions and provided more clarity to my design thinking.
(:
Use it with one-hand
From the earliest design phase, making the app usable for one-handed use was a top priority. We wanted to ensure our users could successfully complete all important tasks the same way they complete most tasks on their phones — one-handed.
By keeping all of the primary interactions in the bottom half of the screen, we made it easier for users to access and use Flow with a single hand. It also opened up the top half of the screen for large, clean graphic elements showing the visual definition of a flow. This sets up a clear visual hierarchy.
We also kept the font size big so that it’s easier to read at arm’s length, while walking, or in dimly-lit conditions. We added other visual cues and clear a text description to all icons, so when user chooses the accessibility mode, they’ll hear clear, simple descriptions. It’s small things like this makes the app more accessible, more universal, and more likely to be used.
As designers, it’s our responsibility to understand the power of the interactions we design for people. We design to embrace the things that make us human. It’s what drives us to create a world that makes lives better. The result is technology that’s inclusive. — Microsoft Design
Freedom of process and tools
As designers, it’s our job to push for an extraordinary user experience and keep pushing — we want our users to be delighted. For me, that drive comes with a certain level of freedom in the creative process. It may involve working from cafés during a weekday or simply making designs using a tool of our choice.
Seattle has really become a place of creative impulse for me. For most of the part, the design of the Flow app was done in local cafés. The tea was great, and if I had trouble working through design choices, I could just ask the person sitting next to me how he/she felt about this. It helped keep the process more interesting and real, getting feedback in early stage is always good.
In one café conversation, I asked a girl sitting next to me to explore the app. She quickly browsed through a few screens and then asked me how to see a flow — just as she saw the “See flow” button. It was right where she needed it, right when she wanted it. That’s the level of invisibility we aimed to have to in Flow mobile app.
For tools, flow mobile app was completely designed using Sketch. This was my first time using Sketch and I still can’t believe how much speed it provided me throughout the process. Best experience was seeing my designs on Mirror in real-time and making changes. For redlines, Zeplin wins all the way. Such an easy to use product, and more than me, engineering team loved it. We did user testing via InVision, again a great tool to create quick prototype and see it on any phone, I’m eagerly waiting for Invision prototyping capabilities in Sketch.
In the end, I want to highlight my most important learning, that is we must stop thinking in terms of our roles (What’s expected of a designer or a program manager or an engineer). We must learn to grow ourselves to have bigger impact to make the product more delightful.
Everyone in the company is responsible for a delightful user experience.