Week 4: Sketching and wireframing

UXD720

---

This week’s content explores gamification in mobile apps. I also produced sketches and wireframes for my concept.

Gamification

Gamification uses game mechanics and has become increasingly popular in mobile applications to enhance user experience. A case study with 276 users using a mobile gamified app showed that gamification increased user engagement as more users had higher intentions to use the app (Bitrián et al. 2021:1).

Gamification techniques commonly used in health apps involve monitoring feedback, setting goals and receiving feedback are highly effective for behaviour change (Edwards et al. 2016:5). Gamification motivates users in various ways:

• It creates curiosity by persuading them to continue using the app to unlock new elements, information and rewards.

• It makes users competitive by encouraging them to beat others or get on top of the leaderboard.

• It allows self-control and management in what they want to do and what goals they want to accomplish (Khomych 2021).

This week’s activity involves applying the gamified process to drive engagement with my core product.

Step 1: Know your audience

• My persona is motivated to improve their well-being and self-care, saving money and preventing illnesses that may arise in the future.

Step 2: Determine what you’re gamifying

• The value to the business is encouraging users to engage with the app and have a fun and positive experience.

• Interactions and behaviours will include a personalised goal set-up feature that enables users to create goals to support their health self-management.

• For example, drink one litre a day and eat at least five different vegetables.

Step 3: Map the journey

• The journey of the users' goals will include progress indicators. For example, if they set up five goals in one day and complete two out of the five goals, the app will notify them and encourage them to continue to achieve all their goals.

Step 4: Pick the right rewards

• Once the user achieves their goals, the app will reward them with motivational appraisals, which gives them a sense of achievement.

Sketching

I started sketching ideas to find solutions on how I could implement the heart rate (HR) tool into the existing app. Reflecting on these solutions:

• I wanted to design the HR tool as part of the journal menu in the main navigation rather than creating a new option in the navigation. Currently, there are five options in the navigation, so adding an extra feature would make the app cluttered and confusing.

• The user could add their heart rate when they visit the app for the first time on a new day, so they can start to look into their personalised nutrition plan based on their heart rate readings.

• The tooltip will explain the feature’s functionality to understand the measurements. However, other education tools may be needed to be included.

Figure 1: My sketches showing the heart rate feature

Sketching has helped me to jot down quick ideas on paper. This process is a good starting point to explore possible solutions to the persona. Sketching ‘forestalls perfectionism’ because it enables the exploration of multiple ideas and merges and evolves them into one solution (Buley 2013: 162).

User flow

It is challenging to see the whole user journey using basic sketches, so I have created a user flow to show the start and end journey of the product. The diagram usually shows multiple pathways the user can take depending on what they intend to do.

I have created a user flow focusing on an existing user opening the app for the first time. I have only included the new features I planned to add to the prototype, including measuring HR, reflective mood and setting up goals. User flows are valuable because it helps stakeholders visualise the tasks from the user’s perspective. Moreover, it allows designers to identify the number of screens needed to design and reveals decision points and any potential issues in the journey (Patrick-Brown 2021).

Figure 2: User flow

Wireframes

Although I have some experience in Figma, I decided to practice Adobe XD for this week’s wireframe activity. Knowing how to use various design software is likely required in a UX Designer job. I have focused on wireframing the HR feature journey. Wireframing is a valuable tool for communicating the product interface design to stakeholders and understanding the connection between frames and elements (Ramón et al. 2013:2).

Reflection

This week I have experimented with using Adobe XD for the first time, which has broadened my learnings in design software. The design skills will prepare me for future career roles in UX and support my portfolio work. I have also understood the concept of gamification and have applied it to my product concept to increase user engagement and motivation. Over time, I have gotten used to avoiding perfection in my sketches and being confident by drawing in bold markers instead of a pencil.

I will continue to sketch the rest of my designs and use the techniques I have learned to develop them further.

References

BITRIÁN, Paula, Isabel BUIL and Sara CATALÁN. 2021. ‘Enhancing User Engagement: The Role of Gamification in Mobile Apps’. Journal of business research 132, 170–85.

BULEY, Leah. 2013. The User Experience Team of One: A Research and Design Survival Guide. Rosenfeld Media.

EDWARDS, E. A. et al. 2016. ‘Gamification for Health Promotion: Systematic Review of Behaviour Change Techniques in Smartphone Apps’. BMJ open 6(10), e012447.

KHOMYCH, Anastasia. 2021. ‘Is Gamification the Only Way for Apps to Survive?’ Get Social [online]. Available at: https://blog.getsocial.im/is-gamification-the-only-way-for-apps-to-survive/ [accessed 18 Feb 2022].

PATRICK-BROWN, Clementine. 2021. ‘Week 3: User Flows’. Learn Falmouth [online]. Available at: https://learn.falmouth.ac.uk/courses/282/pages/week-3-user-flows?module_item_id=12754 [accessed 7 Feb 2022].

RAMÓN, Oscar Sánchez et al. 2013. ‘GUI Generation from Wireframes’. In 14th Int. Conference on Human-Computer Interaction Interaccion’2013. Available at: https://www.academia.edu/download/43274555/GUI_Generation_from_Wireframes20160302-7132-htinj7.pdf.