Making doing groceries easier with a shopping list on your wrist
During my internship at Albert Heijn, I worked on impactful and challenging projects. One of those projects was AH Wear. To make grocery shopping easier for our customers, I was asked to create a smartwatch app with a shopping list that fits on your wrist.
Customers reported that they have their hands full while doing groceries, and thus no hand left for their shopping list, on paper or digital. When using the self-scan service, customers don’t mind laying the scanner somewhere for a second, but when using their smartphone, customers want to keep it in their hands.
A lot of people use a smartwatch for almost everything, from tracking sleep to doing workouts and answering calls. Reason enough for us to find out what the Albert Heijn app should look like on a smartwatch, how it could work, and how it could make shopping easier.
The global smartwatch market is growing rapidly and is projected to grow from $22.02 billion in 2021 to $58.21 billion by 2028.
We created a small version of the Albert Heijn app, which fits on your wrist but still has many of the same functionalities. In this smartwatch app, you can swipe off products on your list, show your Bonus card, and cash out Shopping Stamps. The smartwatch app is connected to your account. This way, it could fetch the grocery list you created in the mobile app.
The people I designed for during this project, had a smartwatch and used it daily. They were also people who made physical or digital shopping lists before doing their groceries.
I worked as a UX designer in a team of developers and a product owner. My responsibilities were: doing (user) research, usability testing, and designing the app.
The duration of the project was 6 weeks. And in these weeks the scope was not to create the slickest and most good-looking smartwatch app but to evaluate what it should look like and how it could work. So not a pixel-perfect design, but the focus was more on how it could be usable. I had to design for the Android Wear operating system because an app with WatchOS (Apple) was not possible to develop within the scope of the project.
After getting briefed on the project by the stakeholders, I started making critical assumptions with my team in a brainstorming session. During this session, we used the MoSCoW framework to prioritize the assumptions (assumed desires of the user) we had about the project. These assumptions did not just appear out of nowhere, they were based on previous research and insights gathered by the stakeholders. An example of an assumption I made is the fact that users want to sort their shopping list logically according to their supermarket.
The process was as follows: Briefing → Making assumptions of user goals → Prioritizing them → Creating sprints in the Scrum board for these goals
We came up with the main functions: a shopping list, a bonus card, and shopping stamps.
Designing for such a small screen was new for me. I never designed anything for a smartwatch before. Because of that, I started by doing research into (designing for) smartwatch apps.
I have a smartwatch myself, but that’s an Apple Watch. And since I was designing for Google Wear, I started by looking into their design guidelines. What I found were a lot of examples of how you can design certain components for a smartwatch.
For example a list, that’s the base of a shopping list. This I used as inspiration for my design. I also found out that there were a lot of constraints I had to keep an eye on. An important constraint I found out about was that colors need to be dark. Especially when it takes up a lot of screen space, for example, the background of the app.
It’s necessary to design information for very brief moments of interaction, also known as glanceability. The user needs to be able to see what he needs to see at a glance.
Context is crucial. The user should be able to quickly see the most important information in the appropriate context. Smartwatches are packed with sensors.
I started designing the primary functionality after conducting some research. Figma was my tool for this. The text and images below demonstrate various design decisions and specifics.
This was the screen users saw when they opened the app, after having connected it with their Albert Heijn account. On this screen, users could select the functionality they wanted to use. An essential choice for this screen was to place the most important function, Mijn lijst, on the top.
The most important function of the app was the shopping list, which the user could create with the Albert Heijn app on their phone. In the image below, you can see the first version I made for this screen. It was very simple and straightforward. Also, visually not very appealing, but it was a good starting point.
An important choice I made on this screen was to design a good visual hierarchy. The products that the user already found can be seen quickly because of the blue color. And they also move down the screen so the products that the user needs to find are on top and seen at a glance.
On this screen, the user can see the barcode of his or her Bonus card, also called Bonuskaart. The screen itself is not that special, because it just needs to show a barcode that’s readable enough for a scanner.
An important choice I made in the design of this first iteration is the fact that it looks like there is a real Bonus card on the screen. This might make it relatable for the user.
The shopping stamps are also known as ‘Koopzegels’, in Dutch. Customers can pay for these stamps and save them while doing groceries. At a certain amount, they can pay them out. To be able to pay them out, the employee of the store needs a code. The app can generate that, while also giving insight into how many stamps the customer has saved up yet.
An important choice I made in the design of this screen, was the fact that the user could see the money saved up within an eye blink. And also having a clear call-to-action for paying out.
The first designs were made and developed by my team. They became tangible. That was cool. To be sure to create the best possible app within the scope of the project, it was important to involve users early on in the design process.
During the Dutch Design Week in Eindhoven, I got the chance to involve the users in this process. In Café Bepp recruiters were finding interesting people to speak with all day long. That way I could specify the fact that I loved to speak with smartwatch users.
And that’s exactly what I did! I spoke with a lot of users, tested the app with them, and most importantly heard what they had to say. Would they even use the app if it became reality? And why? Below I’ll share some of the key insights I gathered.
Most of the users I spoke with and tested with told me that the shopping list was too simple. Of course, simplicity is good, but in this case, it was too simple. They told me they needed more details about a product to be able to find it quickly. With details, I mean things like quantity, price, discount, weight, and more. And also, they need to be able to see the full product name. This will also help them find it easier. Feedback on the start screen was that it was not very readable. All options had the same color, whereas color could ensure that different options could be distinguished more quickly.
After talking with users and testing the app, I adjusted the designs. I incorporated many insights and made a lot of improvements. Let me show them below.
I made small changes to the start screen, which have a big impact. The corresponding colors help users find the option they need a lot more quickly. Now when they have opened the app before, they only need to find the right color and don't need the full text again and again. For small moments of interaction, such as on a smartwatch, this is perfect.
Addressing the user personally is something I added to this screen. A small detail, but it still makes the user experience a little more personal.
As you can see, big changes happened to the shopping list screen. First of all, now product details can also be seen in the list. Even though the screen might be small, I still managed to show product details such as price, quantity, and discount. These details help users find the product in the store.
An important design choice I made on this screen is to visually show what products have been swiped off. The users’ main focus is on the products he or she still needs to find. And that's where I want their focus to be. Also in color usage and visual hierarchy, I made lots of design choices. The most important things need to be seen first, and on this screen that is the product name. And after that the amount and price etc.
The shopping list on the smartwatch app and mobile app are now similar. This recognition and consistency can help users know how to use the smartwatch app.
This screen has not changed that much, it’s just been simplified. Also, the barcode is now a bit bigger on the screen, that is because, during testing in the store, I found out that a bigger barcode is easier to read by a scanner. Sometimes the small barcode was hard to scan or didn't work.
The Bonus card barcode can open the gates after self-scanning in the store. That’s why this screen showed up after the user paid for his or her groceries.
These screens hold a lot of information: the amount of money saved, full books and shopping stamps. In my design, I've tried to show this information as simply as possible. Readability was a problem I tackled with this design. Testing showed that all was readable and not too small.
When cashing out saved shopping stamps, users see the screen on the right. On this screen the focus is on the code, this needed to be quickly readable and easy to see.
Below I share my takeaways from this project, both on content and on my process.
The goal of this project was to find out how and in what way a smartwatch app could contribute to a better user experience while shopping. To find out if there is support for this, and how it could take its place in the current customer journey.
We concluded after the pilot that at this moment there is not enough support for a smartwatch app for Albert Heijn. Users did indicate that they find it nice and useful, but currently have other simpler ways to make their shopping list, for example.
Albert Heijn is taking these insights on board for a possible new project that could tie in with this.
As a designer, I have found that the rule of "less is more" applies in many cases. When designing something for brief moments of interaction, such as on a smartwatch, less really is more. The shorter the user has to look at a screen, the better. I took this into account in my designs, which I found very interesting. It was challenging, but I learned a lot from it.
In the six weeks this project took, I made something out of nothing. After all, an Albert Heijn smartwatch app did not yet exist. I found inspiration in other smartwatch apps and Albert Heijn's other digital products.
I started designing the product digitally quite early, in Figma. Because of this, I feel I may have skipped some steps such as sketching and wireframing. I think starting to design digitally this early can be steering in the result. Next time, I want to try to unleash my creativity and start designing on paper.
All in all, I think that in such a short time I and my team managed to put together a great product, research, and advice.
