It's fascinating to see the evolution of mobile phone interfaces over the last few years - from blackberry with keypads to the latest range of big-screen iPhones. With the coming of VR/AR and high-quality surface desktops, our interaction with technology keeps getting more and more immersive. But imagine a new dimension of human-computer interaction where our life-experiences are enhanced by relating more to the real world with a subtle touch of technology… Kudos if you guessed it right! This dimension already exists. With the new wave of smartwatch and voice UX, the interactive screens are simultaneously getting smaller and smaller to even no interface at all, taking us closer to a less distracting world.

During the summers of 2019, I got a chance to work in the new dimension (you know what I mean) during my product design internship at Swiggy - India's largest food ordering and delivery company. This article describes the story of how I designed the smartwatch app for Swiggy starting from scratch to finally see my intern project getting shipped.

It was just two weeks into my internship when my design manager, Saptarshi Prakash told me about the project and asked me if I would be willing to design the smartwatch experience for Swiggy. I agreed, knowing that I had never used a smartwatch before let alone designing for one. But I wanted to learn something new and the best way was to take up the challenge.

Before diving into the design process, I wanted to have an understanding of what the product was about, why are we building this, what problems are we trying to solve and for whom, etc. So, I went around the Swiggy office finding answers to these questions:

1. The data science team discovered that users spend a lot of time on the Swiggy app's order tracking screen as they want to know how far their delivery executive is and how soon they can expect their food. They come back to the order tracking screen multiple times in the time span of 20 to 45 minutes (the expected delivery time) just to keep a tab on their order.

This type of behavior hinders any other real-world activities you may wanna do. For eg. suppose you're on your desk in the office and instead of working you're gazing your mobile screen to know how far is the food you ordered for lunch, or you're working out but checking your phone again and again for the energy shake you've ordered.

2. Talking to the product manager, I came to know the strategy behind solving this problem. For some of our premium users who use a smartwatch, we were planning to enable simple workflows of the Swiggy's food ordering experience on wear OS and apple watch - starting with the tracking experience for now. Apparently, interacting with these wearable computing devices is less distracting (the next thing was to find out how!)

I knew very little about smartwatches or wearables and it was necessary to have a good understanding of how people use smartwatches, what problems they solve, things to consider when designing for them, etc. I began with some online research - yes! internet, the magical world where someone probably had faced the problem you're facing and is available to help you out.

To better understand how the ordering experience really worked and what goes behind the scenes after an order was placed from the Swiggy app, I also spent a day with one of the delivery executives going from restaurants to customers, doing a few food deliveries myself on the roads of Bangalore.

The people at Swiggy not only work here but most of them are avid Swiggy users themselves which means they have their own experiences, aspirations, disappointments, etc. from a user's perspective. Some of them used a smartwatch as well which was great for me as I could get so many insights from the team only.

Some useful insights that I got from the research:

• Smartwatches aren't miniature versions of our mobile and desktop computers. Instead of cramming everything on a small screen, we should aim for lightweight interactions, quick workflows, and simplicity.

• Watches constantly move, are looked and interacted at unusual angles; therefore their attention spans are low, unlike the smartphones which demand complete attention and interrupt real-world activities. Notifications and glanceability rule the world of smartwatch design.

• A typical food ordering workflow on Swiggy is rather complex. There are a lot of restaurants and dishes to choose from, people may change their minds at any point, even the tracking experience is not straightforward when something goes wrong and the customer support or delivery executive intervenes.

• Apple and Google have provided their own visual language and design guidelines for iWatch and wearOS (respectively). One does not have much scope of deviating from the guideline as it's the way that a smartwatch user is supposed to expect.

Solving the Problem

I figured out that the value proposition of a smartwatch was to provide the core experience of tracking the order by providing just the right information at just the right time, without distracting the user from any other real-world activities. For complex tasks like browsing restaurants/dishes or contacting the customer support/delivery executive, the user could always come back to his smartphone in the digital ecosystem of his watch.

With this, I could gather my thoughts and begin with some ideation keeping the HMWs in mind. I sketched a storyboard to visualize the entire journey of a character ordering food and how might he interact with his smartwatch.

• I tried to keep the interface minimal and simple, showing only the most relevant things at a glance keeping in mind the short interaction span that a watch offers.

• I removed the map (which shows the location of the restaurant, delivery boy and the location to be delivered) because a complex task like interacting with a map is a pain on a smartwatch. Imagine zooming or panning on such a small screen!

• The most important information that people will look for is the status of their food order. I tried to keep the focus on what is currently going on and how long will the delivery take, even in the notifications which are the most frequently interacted part of any smartwatch app experience.

Design Feedback

The next thing was to take feedback on the design from everyone. Showing the designs on a Sketch artboard was definitely not worth it and we wanted to get a prototype as close as possible to the real experience. So, Sapta (my design manager- this is we usually call him) suggested putting the screen images on a real smartwatch.

• The most common feedback was - as a user when I tap on the status notification and go to the main app, it essentially shows me the same information for the active step. So, there was no worth of opening the app as no one was actually interested to scroll and see inactive steps.

• The idea of removing the map didn't work. People actually expected to see the map as it works as an assurance that everything is going right. So, even if interacting with a map on a small screen is difficult, just seeing the delivery bike's icon gave an idea of how far is the food and if it's coming the right way.

• There were some visual design problems like the ETA on wearOS looked like a button and many tapped on it; using an icon with the left aligned text on apple watch was making it cluttered; and how to decide the hierarchy of information: ETA, status, description.

Back to the Artboard

Based on the feedback, it was time to go back to the artboard and iterate some more explorations of the concept. UI that we arrived at finally:

Final Prototype