UX Design - Making Gromit Unleashed 3

As part of my shift into the world of UX, I'm taking the time to look back at some of my previous projects to highlight my influence on the overall design and explain why some projects are "good" UX, some "not so good," and some just presented unique challenges.

Starting at the very beginning would mean going back to 2011-2012, and so much has changed since then that it would be unfair to judge those projects by today's standards. So, let's start at the 'end' and dive into the most recent project I built: the Gromit Unleashed 3 app.

>> Before we get started, a very important note

My primary role on this project was not one of design. Throughout my career I was often hired because of my ability to not only build projects on the technical side but to also contribute, understand and facilitate the design and creative process of the project.

The fantastic UX and UI you see in the app are the result of the hard work of Isabel Lawton and The Grand Appeal team. All the great design that focuses on helping people find sculptures and track their progress is down to them.

My contribution to the UX came in through light touches, suggestions and contributions to the design to improve integration with our tools and platforms (Flutter on iOS/Android). I also contributed to UX through the technical implementation of certain design principles, like using skeleton pages, visual feedback in the form of content shimmering, and even very small things like artificial delays to events that were happening too quickly. All of these could be attributed to a core UX principle 'System Status Visibility'.

With that in mind, let's take a closer look at the app and apply some key UX design principles to it.

>> UX is about solving problems

If UX is about one thing, it's about solving problems for the user in the most efficient way possible. On the surface it's a really simple thing - much of Steve Krug's book 'Don't make me think' focusses on keeping things simple. The thing is though, that 'one' thing that UX could be summed up as is a complicated ball of technology, psychology and the world around us. To solve the problem for the user, or allow them to achieve the goals they need to achieve when using our products we need to take into account large amounts of information, generate insight and convert that to design.

>> Nielsen's 10 usability heuristics

Jakob Nielsen's book 'The design of everyday things' is like design 101 - whoever you speak to in design will have a journey that most probably starts with this book. In it, Nielsen outlines 10 'usability heuristics', essentially guiding principles to good design that should be taken in to account when designing products. We'll be applying some of those heuristics do the Gromit Unleashed 3 app to explain why certain decisions were made and why they are important to the user.

>> Never Leaving the User in the Dark

Heuristic : Visibility of System Status.

This heuristic states that the system should always keep users informed about what is happening. The app excels at this, building trust and reducing frustration.

Here are some examples of this heuristic being applied within the app.

Loading Shimmers and Timers.

The app uses loading shimmers and intentionally adds slight delays to processes that happen too quickly. This isn't about making the app slow; it's about giving the user's brain time to register that an action is being processed. When a user is loading the map or successfully enters a code, a visual animation or a brief pause confirms that the system has received the input, preventing the user from wondering if something went wrong.

Visual Progress Indicators

The app clearly displays the number of sculptures found (e.g. 23/53) and awards claimed (e.g. 7/18). This provides an at-a-glance overview of the user's progress, which is a powerful motivator. The visual shift from grayed-out to full-color sculptures is another example of this, providing clear, visual feedback on what has been accomplished.

Benefit to the User

Users always feel in control and are never left to wonder what the app is doing. This transparency builds confidence and makes the experience feel reliable.

>> An Intuitive Experience

Heuristic : Match Between System and the Real World

This heuristic ensures the app speaks the user's language and follows real-world conventions.

Speaking the user's language is more than just the copy on the screen - it's trying to identify the common ground between how the app presents information and how the user expects to consume it. There are 2 key areas we can do this. First is in how the sculpture trail is presented and the other is in how the user might navigate this information and how they expect to me able to interact with it.

Mini Trails

The app organizes the many sculptures into 'Mini Trails'. This concept aligns with how a user might naturally plan a physical walk or tour, making the digital structure feel logical and easy to follow. It also incorporates the design language of 'chunking' by taking lots of information and presenting it in logical groups. The benefit to the user is that these chunks can become features of the app by categorising each chunk as a 'mini trail'.

Map Interface 

The app uses a standard map with recognizable paw-print icons to represent sculpture locations. This directly connects the digital interface to the user's real-world environment, making navigation effortless. The map is also carefully considered so that it contains just the right amount of interaction and features to feel familiar to users of other maps on their phone but staying simple enough so that the primary goal 'find sculptures' is the primary focus.

Benefit to the User

The app feels less like a tool they have to learn and more like a helpful companion, as it mirrors their real-world mental model of the trail.

>> A Path for Every User

Heuristic : User Control and Freedom

This principle ensures users can easily reverse their actions and feel a sense of control over their experience.

While on the surface this heuristic might not seem to apply; users of our app can't 'undo' an action - but the core principle here is about making sure that the user always feels in control of their actions. If they make a mistake clicking on the wrong sculpture then it should be easy to go back to where they were.

The app provides several interconnected methods for finding and logging sculptures, ensuring that it's useful regardless of the user's current situation or preference. This design philosophy is a core part of its success, as it avoids forcing users down a single, rigid path.

The Quick "Enter Code" Button

This feature is designed for efficiency and immediacy. Imagine a user has just stumbled upon a sculpture and wants to log it without fuss. Instead of having to navigate to the map, find the specific sculpture, and then open its page, they can simply tap this button on the home screen. This reduces the number of steps and the cognitive load for a user who is actively engaged in the trail and knows exactly what they want to do.

The Browsable List with Search and Filters

This is the tool for the planner or the detail-oriented user. It provides a comprehensive, scannable list of all the sculptures. Users can sort the list, or use the search and filter functions to find a specific sculpture by name, artist, or even keywords in its description. This is perfect for someone at home or in a cafe who wants to plot their route for the day, or for a user looking to find a specific sculpture they haven't seen yet.

The Interactive Map

The map is the most direct link between the app and the physical world. It serves as a visual guide for users who want to find sculptures based on their geographical location. Users can see which sculptures are nearby, plan a walking route to a cluster of sculptures, or get a sense of the scale of the entire trail. Tapping on a sculpture's icon on the map provides instant access to its details and the option to enter a code, connecting the digital with the physical in a seamless way.

Benefit to the User

This multi-path approach to sculpture locating and logging is a good example of 'User Control and Freedom', as it empowers users by giving them choices. It recognizes that there is no "one size fits all" solution for navigating a real-world trail and provides the flexibility to accommodate a wide range of needs and behaviors.

These pathways were perhaps the most interesting part of the app. While out and about I've seen many people use the app. While developing the app my assumption was that a lot of users would use the 'Enter Code' button on the home page, it's the easiest, most convient way to mark a sculpture as 'found'. However, if there is one thing you should never do is assume what users will do. I've seen people use every time pathway possible - to them, that's the right way to do it, and who am I to argue with that?

>> Predictability and Trust

Heuristic : Consistency and Standards

This heuristic ensures that the app's interface and actions are predictable and consistent.

This is sort of where the UX design and the aesthetics of an app start converging a bit more. The visual language of the app talks to the user - it conveys information and allows the user to make assumptions about certain features or functionality based on their own mental model and the knowledge that we are putting out into the world, or in this case the app we are making.

Visual Language

The use of grayed-out images for unfound sculptures and full-color images for found ones is a consistent visual standard throughout the app. It's easy to see at a glance which sculptures have been found and which haven't. This also gives a great sense of accomplishment to the user; the more sculptures they find the more 'colourful' the app becomes.

Intuitive Icons

Icons for key features like the map, shop, and awards remain consistent, so users know what to expect when they tap them. Not only that, the icons themselves are consistent to what a typical user's mental model would be for app icons, especially those that are relevent to core functionality and navigation. Sway too far from convention and you end up with confused and frustrated users.

Benefit to the User

Consistency reduces cognitive load. Users can learn the app's patterns quickly and apply that knowledge to the entire interface, making it easy to use.

>> Guiding the User to Success

Heuristic : Error Prevention

This principle is about designing the app to prevent users from making mistakes in the first place.

Where possible we try to limit errors, confusion and frustration. We do this in a number of ways, but one way is to ensure that what we are asking the user to do is in context with what they are experience.

Contextual Code Entry

When a user is on a specific sculpture's page, the "enter code" function is tied exclusively to that sculpture. This prevents them from accidentally entering the wrong code, which could be a source of frustration. If we allowed the user to enter any code at this point, what would be do? Take them to the page for the sculpture they entered the code for? What if they entered the wrong code for a sculpture that they had already found. They might assume they entered the correct code - leading to a sculpture they physically found not being marked as found in the app.

From the home screen we do let the user enter any code they wish - this is because the context isn't specific to a sculpture at this point in the app. When they do enter the correct code we take them to the associated sculpture page.

Benefit to the User

By anticipating potential mistakes, the app creates a reliable and frustration-free experience, ensuring users can accurately track their progress without errors.

>> Less Memory, More Fun

Recognition over Recall

This heuristic minimizes the user's memory load by making objects, actions, and options visible.

The app contains a lot of data. 53 sculptures, 8 mini trails and 18 awards. We can't possibly ask the user to remember all of that - we shouldn't expect them to remember ANY of it. The goal of the user is to find sculptures - they want the app to provide them with the information and reward them when they've done it. All the other stuff is a bonus, an extra or a way to help focus the user on the primary goal.

Below are a few features that help the user with the primary goal but limit the requirement on them to keep hold of un-important data.

Visible Sculpture List

Instead of making users remember sculpture names or locations, the app provides a complete list that they can browse or search.

Awards Gallery

The awards screen shows a grid of awards, with unlocked awards in full view and locked ones hidden. This visual display helps users remember what they are working towards without having to recall the details of each reward.

Benefit to the User

Users don't need to memorize information to use the app effectively. The interface presents all the necessary details, making the experience effortless and intuitive.

>> Facilitating design through development

The video shows the earliest testable version of the app from week 2 of development - this version included all priortiy features, the interactable layers and rough data structure all on-device and distributed to test users through TestFlight and Google Play.

To finish up, I just want to say a brief bit about how in my role as a developer I try to be as engaged in the design process even if it's not my core responsibility. When I worked as a developer my primary focus was to facilitate the creative process - to make sure that the ideas, designs (visual and UX) and functionality all worked coherently.

The main way this was done was by aligning the development with design - through prioritising and focussing on lo-fi development early on to create wireframe prototypes that were embedded in the actual development process - meaning that they were feature led but mindful of the requirements of usability testing and potential changes. This is as equally as difficult and important in short turn around projects. You don't have the time necessarily to prototype and test and iterate before development, you need to do it on the fly. It's not ideal, but often necessary. By putting the focus on early stages of development to be focussed in facilitating the design by matching the stages that design is in is an important part of working coherently under pressure with the entire team regardless of the discipline.