Week 4 - Gamification & Wireframing

Photo by Amélie Mourichon on Unsplash

Gamification

I’m really excited to explore gamification as I have felt with previous challenge activities that I have somewhat overlooked this feature. When I think about the apps I enjoy using the most, usually they have some element of gamification. It increases user engagement by exploiting game mechanics to a non-gaming context, and “it’s a way to repurpose content that exploits the motivations inherent to games” (Cronstedt, 2017). This technique is particularly useful for any app that involves an aspect of learning, such as Duolingo, the language-learning app. The task of learning a language is split up into bite-sized games and activities. You get a sense of achievement from completing daily tasks, and the learning becomes fun. As a result of this, user engagement is high.

Obscured heuristics are commonly found in physical and online puzzle games. Interactions are obscured or incorrect, and the aim of the user is to correct these to move forwards. I often play Candy Crush on my iPhone and I think this is a great example of an app that utilities obscured heuristics.

Skill Checks are used to require some form of learning to move forwards. The experience is purposefully difficult to promote a feeling of learning a new skill. In terms of games this might be referred to as ‘beating the game’ or in the case of an app like Duolingo, it might be taking a skills test at the end of a topic before you can move onto the next one.

Unpredictable Input/Output refers to the unpredictable outcome of a user’s input. There is a level of uncertainty when a task is carried out, and this becomes a game of chance – most obviously used in casino games, but also any role-playing game where you don’t know what outcome to expect because of your choices.

Unpredictive Discoverability encourages trial and error gameplaying, rewarding users for tasking risks. I think back to playing games when I was a young boy, and my favourite type of game always involved an aspect of discoverability.

Rewards are commonly used to provoke a sense of achievement or kudos for completing an action or task.

Gamification in Dog Walking app

It is important to firstly point out that I don’t want to flood this app with gamification features for the sake of it, but enough to engage users and improve the functionality and scope of the content.

Research indicates dog walkers like an element of adventure and spontaneity when choosing places to walk. The exercise and needs of the dog are the primary function, but secondary to that is personal enjoyment and sensory stimulation, as well as enhancing social and family interactions. It might therefore be exciting include an unpredictable input/output feature such as being able to let the app choose a route for you. Some days users might just want to be adventurous. Given that the app already knows the users’ specific requirements from the profile/filtering, this feature could spark curiosity and drive.

I also intend to add gamification by means of Rewards. I plan to look at how other apps use rewards to engage user interaction and increase satisfaction and motivation. I think this app works best with user interaction, through submitted walks, writing reviews, or giving ratings for different aspects of the walk, e.g., enjoyment, scenery, safety, amenities, busy/quiet etc. Competitor analysis revealed that the most similar app did not allow user submissions which led to a lack of potentially great walks being available. I consider this aspect will drive some intrinsic motivations such as a sense of belonging to a community as well as mastery and status.

To promote user engagement this way, I would consider giving rewards for users who submit reviews, and particularly if their reviews get liked by other users. Reward could be by means of a user status such as Novice, Expert, Master, that indicate the users progress as they use the app.

Other apps, such as Map My Walk, allow users to upload images whilst on the walk, and I would like to incorporate this also. I think it would be great to be able to store your walks and images within the app also, so you can refer to them and track your progress. This aspect will increase the engagement with the app as well as the walks, and over time the app will develop into a community.

Sketching

Sketching is an essential stage of the design stage, allowing us to quickly communicate basic layouts and ideas in a tangible way. They are disposable and do not need to necessarily be high fidelity. It is far more important to get ideas out of your head and onto the page. We can layer up sketches to show more detail and highlight areas we want the user to focus on, and most importantly, we can use this exercise to try out many different layouts.

See below some of my sketches for my problem area app development.

Design Studio Methodology

The purpose of a Design Studio is to enrich a design through the exchanging of viewpoints by peers to understand the strengths and weaknesses of their work. The workshop environment allows participants to present their ideas and to be open to evaluation, critique, with the goal to make decisions and consolidate ideas into one design. (Ungar, 2008).

Problem

Based on my research so far, the problem I would like to address in the design studio is how I can incorporate the ability for the user to select the concerns and needs that are most important to themselves and their dog. Similar apps do not have this feature, and research suggests this type of option would be desirable. I want the app to have a clean aesthetic and be simple to use, like all apps examined in my competitor research. But how do I incorporate additional filtering options in a non-intrusive manner.

Six Solutions

Fig 1. Six rapid solutions for Design Studio Challenge

Reflection

I wanted to come up with solutions to allow users to filter results by the needs of themselves and their dogs without making the design too fussy or complicated to use. This app needs to strike the right balance between aesthetically pleasing and simple to use, whilst also offering a comprehensive selection of preferences for users to filter their results.

1 – This sketch represents a stage in the initial profile set up, where users can pre-determine their preferences by means of hitting bubbles to make them larger or smaller. I have recently used this type of selection when subscribing to Apple Music and selecting the artists I like the most. I think this is an engaging and fun way of highlighting likes and dislikes, and certainly with Apple Music, can really provide bespoke, appropriate search results. My concern is that sometimes users’ desires may differ from walk to walk and this would produce an inflexible set of search results. A user may like both busy and quiet, or coastal and wood walks.

2 and 3 – These sketches are like 1, in that they allow the user to define their preferences at the start, thought these could be reworked to be functions on a new walk search page. I think they look a little more text heavy, though maybe that is not a bad thing for this stage.

4 – This sketch represents how the landing/new walk/search page could be constructed like a guided step by step process. It asks you what kind of walk you would like to go on today e.g., quiet/busy, quick/long, nearby/further afield, flat/hilly etc. I really like this sketch, by having minimal text on the page, it makes it seem lighter and more enjoyable to use. I think it might be good to include a progress bar so the user can see how far they are through selecting options, and even though I have included a next button, this may not be necessary as selecting an option could automatically take you to the next set of options.

5 – This sketch shows the different nearby walks at the bottom of the page, fanned out like a deck of cards. There is a filter box at the top where you can select your preferences, with the deck below automatically updating depending on your options. They would be ordered by closest distance first. I think this is also a really nice way of showing walk destinations. This considers that users might just want to browse through different places rather than filtering too much first. Or it could even be a next page from option 4, whereby the results are presented but there is still a drop-down box for further minor preferences (cafes nearby, parking).

6 – This view is like the app I looked at in my competitor analysis. It shows results on a map. My solution would be to colour code or have a letter that symbolises difference preferences. I really don’t like this idea as it is limited by giving each destination a specific category, ignoring the fact that users may have multiple preferences for one destination. 

Iterations

Fig 2. Iterations of six solutions for Design Studio challenge.

Way Forward

I’ve found this exercise very useful. When we are in the early stages of developing a new artefact, it is quite common to have an idea in your mind how it might translate in your design. Thinking about a specific problem, or in this case how the function is integrated on a design level and creating rapid sketches that allow both good and bad ideas room to breathe has allowed me to define at least two basic page views.

The simplest and most effective method of filtering searches is a two-pronged approach, shown in sketches 4 and 5. Sketch 4 allows the user to make some top-level choices, and can be quickly carried out each time. Sketch 5 shows a nice view of how the main results based on the initial requirements could be displayed, with drop down tick boxes to further filter the search with further granulated requirements.

I think it would also be nice to have a landing page that allows the user to create a new search, go to past searches, favourites, or upload a walk of their own. Later down the line I intend to repeat this Design Studio methodology for how a user might submit their own walk.

Wireframing

Wireframes allow us to make a medium to high fidelity representations at the middle point of our design stage, they show the blueprint of what the user sees, with the focus being on the structure of the site or app rather than the aesthetic. They allow us to communicate our solutions to a design problem, show intent, page layout, hierarchy and proportion of elements, functionality, and interaction points.

There are different qualities of wire-framing and whichever level you decide to create should be appropriate for the intended audience and to capture the design solution most efficiently.

For the second part of the challenge activity this week I intend to create a mid-level detailed wireframe using Whimsical, which seems to also work well for this level of wireframing. I had used this software previously for my user flows, and the results of these activities you can see below.

Fig 3. User flow for logging in and selecting a dog walk (made in Whimsical).

Fig 4. Detailed Wireframe showing logging in and choosing a dog walk (made in Whimsical).

References

Cronstedt, Jonathan (2017) What Is Gamification, How it Works & How It Can Help Your Business. Available at https://medium.com/@jcron_89878/what-is-gamification-how-it-works-how-it-can-help-your-business-19f98f1a9d4e (Accessed 22 February 2022).

Ungar, J. and White, J., 2008. Agile user centered design: enter the design studio-a case study. In CHI'08 Extended Abstracts on Human Factors in Computing Systems (pp. 2167-2178).