Creating an Apple Watch app concept for a grocery shopping app

An easy way to manged your to-do list on your wrist, while doing groceries

Introduction

This case contains my work on an Apple Watch App concept for a company called Shopgun, that delivers advertisement catalog digitally through their app.

While standing in the store ready to look at my list, I remembered that I bought a mini-computer for my wrist and it properly could show it, and not taking up my hand as a phone would.

To my surprise, there was no integration or app with the watch, so I, therefore, needed to walk around with my phone, and couldn’t take advantage of my amazing new gadget.

I, therefore, started to create the list in ShopGun, moved it over to Apple’s Reminders app, to then check items off on the watch, back into ShopGun to then check things off in there. An awful workflow that kept bothering me, and I therefore started thinking…

How would this app work? Maybe I should try to design it myself.

Research

To kickstart this project I first of all needed to understand how Apple Watch apps work and are created, so I started off by researching Apple’s Human design guidelines for Watch OS.

This quickly gave me an overall understanding of the principles behind creating experiences for the Apple Watch, and most important of all, to create the consistency that users know from other apps, to decrease the learning curve.

Jobs to be done

Since this project came out of a personal problem, it was fairly easy to map out the different jobs to be done.
But I also wanted to keep the feature set small and simple, to just concentrate on the most important things.

List of most important jobs:

• Be able to access your different shopping lists, and see items on there

• Have an option to mark an item as done

• See simple information about the items (Store where you can buy the item, timeslot for offer availability, price, and small text descriptions)

Concept mapping

To get an overview of all the ideas and jobs, I always start sketching out the project before heading over to the computer and creating pixels.
This often helps me focus on the big picture, and the experience we’re trying to create. This often includes wireframes, states for components, user flows, etc.

Design

Now that we had the jobs mapped out, and some concept mapping including wireframes and sketching, it was time to start creating some of the design.

To start the design off, we needed two kinds of lists. One for your shopping lists and one for your items on your list — the main difference being the data points.

• The lists of shopping lists should include the number of items left, that you haven’t picked up.

• The shopping list should contain information about where to collect the item, and an option to expand and see more information.

To create this option to expand an item, and see more information, we needed to create some kind of animation to help the user understand the movement of the content.

The last part was to tie all the different screens together and make the final version for this app.
Since this project where done before sketch introduces their prototyping feature to their product, I took all the screen from Sketch over to Adobe XD and create the final links.

Conclusion

This is a great example of a project where most of the work was around understanding the technical part, the specific device and adapting and understand the common design pattern for the experience.

We ended up with a small and simple concept, that solved the main pain points we discovered in the beginning.

A solution for Apple Watch users of the ShopGun app, that wants to manage their shopping list easily from their Apple Watch.

CHECK OUT SOME OF MY OTHER PROJECTS