Emerging Media - RSA

This is page 2 of the RSA project.

3.0 Target User (Define)

The previous sections have considered the rationale and context for app development. In this section the audience is considered, especially in what influences the interaction between the user and the intended application. According to Sandesara et al., (2022), the best UI is the one closest to its context, with the developer understanding audience beliefs, feelings, desires, attitudes, psychology and physiology, which should flow and connect throughout the design process. This may be achieved through forming a user persona (3.1) and an empathy map (3.2). The user persona offers a ‘snapshot’ of the user and their situation, whilst a empathy map builds on the persona by providing deeper insights by consideration of her speech, thought process, feeling and actions.

The user persona and empathy map are based on user stories and accounts from The Pre-eclampsia Foundation (2023).

3.1 User Persona

3.2 Empathy Map

3.3 User Flow Diagram

The aim of the app is to help pregnant women from all cultures to have access, where possible, to pre-eclampsia tracking and information. This may lead to constraints that may be technical or user orientated in nature. The app has to be responsive, to render easily and be available to work on different operating systems. The audience need ease of use and therefore a complicated design is not feasible. The user flow diagram (Fig. 13) illustrates a user process that ensures this capability. It illustrates a series of actions that the user undertakes to record results on the app tracker, eliminating complex pathways and thus ensures that the interface is simple and easy to navigate.

The next section (4.0) looks at the conceptual process in app ideation.

4.0 Ideation

This section forms the conceptual process of app development. Information architecture can be defined by the mapping of research analysis. Investigative study has revealed that pregnant women need timely information and knowledge regarding pre-eclampsia through:

Tracking their blood pressure and weight —— maps to app tracker.
Access to nutritional guidance —— maps to nutritional advice page.
Medically approved information to understand symptomology, safety and when to get help —— maps to information hub.
Attending clinics —— maps to clinic appointment notifications.
Being able to contact health care services —— maps to health care contacts.

There is a focus to fulfil these needs through app functionality, that is useful to the user. In order for the UI and context to be relevant, the design process needs to consider the hierarchy of function and the hierarchy of content (Worthington, 2023). The branding, menu and navigation will be more static than the content, which is hierarchical depending on user functionality. In this scenario, the user would be assigned the app to primarily monitor blood pressure and weight, so it would be logical to have this higher up in the content hierarchy than for example an online store. A sitemap (Fig. 14) was crafted to ensure that the order of user functionality follows context and is hierarchical, even through top level pages. The logo, login and clinic confirmation are security driven to allow access to the app. The next level consists of top level pages for menu/home, medical details/account, test tracker, nutrition, information hub, clinic details, medical appointment schedule and contact details. There is a second level page, which provides graphic readouts of the test tracker, which presents them in an easy to view format.

The next section (5.0) considers the visual design process.

5.0 Visual Design

This section starts crafting the visual design through inspiration boards (5.1), sketching and wireframing (5.2), prototyping (5.3) and a final mock up (5.4). The consideration and mapping of the UI overview and UI elements Fig.15 (Worthington, 2023) are starting to formalise.

5.1 Inspiration

According to Eckert and Stacey (2000) almost all design is proceeded by transforming, combining or adapting previous designs. This saves not only resources but provides knowledge of design concepts that are easier to implement, understand and use. It aids productivity as referenced in the research section (2.0). In this project, inspiration is drawn from existing imagery, app designs, colour palettes, shapes and typography already available. This takes into consideration Sustainable Development Goal 12 (United Nations, 2023) through sustainable production patterns (Section 1.0). There is a criteria for stakeholders to be able to access and build designs that are easy to replicate and mass produce for a variety of platforms.

A mood board was created (Fig.16) to create a look and feel for the project (See journal entry: https://designerdigital.uk/emerging-media-inspiration/).

The language of the app was also considered (Fig.17). This identifies the character – the app provides practical , medical based support to help women have control over their own health. This may be achieved by tracking their blood pressure throughout pregnancy to protect their baby. This helps to ensure that the direction of the app stays in alignment with its outcome.

The next section (5.1) looks at the sketching and wireframing process

5.2 Sketching and Wireframing

A series of rough sketches or low fidelity wireframes were drafted to stylise the app interface. Sketching is utilised in design to:

Rapidly build a concept,
Aid visual exploration
Craft a basic composition or layout
Gain approval from stakeholders before more expensive and timely constructs are forged (Hodge, 2008). The rough hand drawn sketches are available here: https://designerdigital.uk/emerging-media-wireframes/

5.3 Prototyping

The rough sketch was then transferred to Adobe XD, a digital wireframing and prototyping app. The wireframe at this stage becomes mid fidelity. It enables data and information architecture refinement. At this stage colour and images are not added, with the focus being on structure and interaction, which provides a platform for user testing and stakeholder approval allowing for iteration before final design stages (Google Career Certificates, 2021). The mid fidelity wireframe is available here: https://xd.adobe.com/view/e226a739-0b8a-4631-8c70-769d6d4c2cd0-b775/ Notes on wireframes are found at: https://designerdigital.uk/emerging-media-wireframes/

5.4 Mock Up

The mock up stage adds the colour, images and the full addition of data. This provides the best user and visual experience before the app is built out in a code development programme. The mock up is available here: https://xd.adobe.com/view/1f7383b6-83ce-47fe-a332-a90f133f74ca-4a20/

The next section evaluates the usability of the app through user testing.

6.0 Testing

In essence evaluation is an iterative process that runs throughout the project and not an end consideration. Usability testing is formative and summative ( Barnum, 2021). There is the formative – the evaluation of a need, defining a user problem and providing a potential solution. The end user is evaluated through their condition, personas and empathy maps to ensure that the context fits. Testing in the summative sense refers to how the end user interacts with the prototype and finished product.. The International Standards Organisation (ISO) defines usability to the extent a product, system or service can be used by specified users to achieve effectiveness, efficiency and satisfaction in a specified context of use (ISO.org – 9241-11:2018). In the case of this project, specific users are pregnant women vulnerable to pre-eclampsia with the specific goal to monitor blood pressure and provide targeted health and nutritional information. The specific context of use is that the app is designed to provide user satisfaction in this area, which is tested in section 6.1. The panel questions are based on the ISO usability standard (Fig. 18). For further information please view journal entry: https://designerdigital.uk/rsa-testing/

6.1 User Testing Summary

A testing panel of four women, three of whom experienced pregnancy and one who did not was asked to evaluate the Eclamtrac app, via a Likert scale. Full details are in journal entry:

Effectiveness

10 x 5 (Strongly agree) | 5 x 4 (Agree) |1 x 3 (Neither agree or disagree)

Satisfaction

9 x 5 (Strongly agree) | 6 x 4 (Agree) | 1 x 3 (Neither agree or disagree)

Efficiency

13 x 5 (Strongly agree) | 3 x 4 (Agree)

There were some questions raised during the evaluation phase by the panel. One of these was there was no immediate information screen about using the tracker after the log in was completed. Although this would be in the information section , it was realised that this would be beneficial, especially as vulnerable women would understandably be anxious and not have to worry looking for it. Another query was a lack of a community page. However, as this is designed as a medical type app, a community would have to be managed by the owner/developers and could possibly cause issues with healthcare providers and data protection. The responses iterated the need for app training from health care providers when the patients are assigned the app, as there will be protocols in taking blood pressure as mentioned in section one of the project.

7.0 Time Management

The project followed Plattner’s Five Stages of Design Thinking (Dam, 2022), which conceptualises the empathise, define, ideate, prototype and testing stages. Design thinking is iterative in nature and the project management was aligned to this format (Fig.19).

8.0 Conclusion

The project was felt to be a good fit for the RSA brief – All Being Well and provides a potential pilot study for the app to be further developed. Future considerations include the broader research of similar types of medical information apps, which would provide a wider scope of design pathways as well as consultation with medical professionals as mentioned in the research. One addition could be the collection of recorded data, which could be analysed to research patterns in pre-eclampsia. On reflection the simple design nature makes the app easy to build, cheaper and accessible to a larger community, which aids in greater awareness of this serious condition.

RSA Artboards

Figures

Fig.1 Eclamtrac Mock up – Heugh (2023)

Fig.2 Pregnant Woman Checking Her Phone – (Stock Image) Licensed

Fig. 3 Health Examinations in Pregnancy (Heugh, 2023)

Fig.4 Global Perspective on Pre-eclampsia and Mortality (Heugh, 2023)

Fig.5 Benefits of User Experience Research – Image (Heugh, 2023)

Fig. 6 Pregnancy Tracking and Postpartum Care Apps Market Size – Polaris Market Research Analysis (2022)

Fig. 7 Considerations For Mhealth App Development – Heugh (2023)

Fig. 8 Baby Centre App, Google Play Store (2023)

Fig. 9 What to Expect App, Google Play Store (2023)

Fig. 10 Effective Elements in Pregnancy Apps – Heugh (2023)

Fig. 11 User Persona – Heugh (2023)

Fig. 12 Empathy Map – Heugh (2023)

Fig. 13 User Flow Diagram – heugh (2023)

Fig. 14 Sitemap for Pre-eclampsia App (Heugh, 2023)

Fig. 15 UI Overview and Ui Elements Based on Worthington (2023), Image – Heugh (2023)

Fig. 16 Mood Board, Heugh (2023)

Fig. 17 Language Associated With The App – Heugh (2023)

Fig. 18 Questions to Determine Usability in App Testing, ISO 9241-11: 2018, Image – Heugh (2023)

Fig. 19 Project Management Progression – Heugh (2023)

References

Babich, N (2022), User Flow: How to Create and Use It. Available at: User Flow: How to create and use it – YouTube Accessed: 07.08.2023.

Barnum, C. M., (2021), Usability Testing Essentials – Ready, Set, Test! 2^nd Edition, Morgan Kaufmann, Cambridge, MA, 02239, United States.

Bert. F, Passi, S. Scaioli, G et al., (2016), There Comes a Baby! What Should I Do? Smartphones’ Pregnancy Related Applications: A Web Based Overview. Health Informatics, Vol 22 (3), pp. 608-617.

Buchanan, L. Anderson, E. MBiostat, H. X. Phongsavan, P. Rissel, C. Wen, L. M, (2021), Sources of Information and the use of Mobile Applications for health and Parenting Information During Pregnancy: Implications for Health Promotion. Health Informatics Journal, Sagepub.com, pp. 1-10.

Eckert, C & Stacey, M (2000), Sources of Inspiration: A Language of Design. Journal of Design, Vol. 21, (5), pp. 523-538.

Dam, R, F., (2022), The 5 Stages in the Design Thinking Process. Available at: The 5 Stages in the Design Thinking Process | IxDF (interaction-design.org) Accessed: 03.07.2023.

Frid, G. Bogaert, K & Chen, K.T, (2021), Mobile Health Apps for Pregnant Women: Systematic Search, Evaluation, and Analysis of Features. Available at:

Mobile Health Apps for Pregnant Women: Systematic Search, Evaluation, and Analysis of Features – PubMed (nih.gov) Accessed: 10.07.2023.

Google Career Certificates (2021), Building Low Fidelity Wireframes and Prototypes | Google UX Design Certificate. Available at: Designing Responsive Web Apps | Google UX Design Certificate – YouTube Accessed: 03.09.2023.

Hodge, S (2008), The Role of Sketching in the Design Process. Available at: The Role of Sketching in the Design Process | Envato Tuts+ (tutsplus.com) Accessed: 29.08.2023.*/

Hughson J. P, Daly J. O, Woodward-Kron R, Hajek J, & Story D. (2018), The Rise of Pregnancy Apps and the Implications for Culturally and Linguistically Diverse Women: Narrative Review. Available at: The Rise of Pregnancy Apps and the Implications for Culturally and Linguistically Diverse Women: Narrative Review – PubMed (nih.gov) Accessed: 10.07.2023.

International Standards Organisation (2018), Ergonomics of Human-System Interaction – Part 11, Usability: Definitions and Concepts. Available at: ISO – Search Accessed: 07.09.2023.

Kinshella, M. W. (2023), What do we know? Creating an Effective Understanding of Nutrition and Preeclampsia. Available at: What Do We Know? Creating An Effective Understanding Of Nutrition And Preeclampsia Accessed: 02.08.2023.

Kolb, D. A. (1984), Experiential Learning: Experience as the Source of Learning and Development. London, Prentice-Hall.

Magrabi, F. Habli, I. Sujan, M. Wong, D, Thimbleby, H. Baker, M. Coiera, E (2019), Why is it do Difficult to Govern Mobile Apps in Healthcare? BMJ Health and Care Informatics, 2019.

NHS (2023), Health A to Z, Overview – Pre-eclampsia. Available at: Pre-eclampsia – NHS (www.nhs.uk) Accessed: 07.07.2023.

Polaris Market Research (2022), Pregnancy Tracking and Postpartum Care Apps Market Share, Size, Trends, Industry Analysis Report, By Application (Pre-partum and Post-partum); By Device; By Platform; By Region; Segment Forecast, 2022 – 2030. Available at: Global Pregnancy Tracking and Postpartum Care Apps Market Size, Share & Growth Analysis Report, 2022-2030 (polarismarketresearch.com) Accessed: 24.07.2023.

RCOG (2023), Pre-eclampsia Information Leaflet. Available at: Pre-eclampsia patient information leaflet | RCOG Accessed: 07.07.2023.

RSA (2023), All Being Well. Available at: RSA Student Design Awards Design Briefs – RSA (thersa.org) Accessed: 03.07.2023.

Sandesara, M., Bodkhe, U., Tanwar, S., Alshehri, M. D., Sharma, R., Neagu, B – C., Grigoras, G., Raboaca, M. S., (2022), Design and Experience of Mobile Applications: A Pilot Survey. Available at: Mathematics | Free Full-Text | Design and Experience of Mobile Applications: A Pilot Survey (mdpi.com) Accessed: 19.08.2023.

Satori Graphics (2022), How to Make the Perfect Gradient! Available at: How To Make The PERFECT Gradient! (Works Every Time) – YouTube Accessed 01.09.2023>

Saunders, M, Lewis, P, & Thornhill, A (2015), Research Methods for Business Students PDF EBook, Pearson Education, Limited, Harlow. Available from: ProQuest Ebook Central. Accessed: 15.07.2023.

United Nations (2023), Sustainable Development Goals, Goal 12: Ensure Sustainable Consumption and Production Patterns. Available at: Sustainable consumption and production (un.org) Accessed: 03.07.2023.

UXPA (2023), User Experience Professional Association. What is User Experience (UX)? Available at: About UX – UXPA International Accessed: 30.07.2023.

Worthington, M (2023), Visual Elements of User Interface Design. Available at: California Institute of the Arts.

Bibliography

Alechnavicius, V (2021), Get into UX – A Foolproof Way to Getting your First User Experience Job. Experienced Designed 2021.

Trott, D (2016), One Plus One Equals Three: A Masterclass in Creative Thinking. Pan; Main Market Edition (2016)

Videography

Flux Academy (2022), The Missing Guide To Grids. Available at: The missing guide to grids – YouTube Accessed: 19.08.2023.

Pixel and Bracket (2021), Shape Builder Tool Has Hidden Features in Illustrator. Available at: SHAPE BUILDER TOOL Has HIDDEN FEATURES in Illustrator (Tutorial) – YouTube Accessed: 12.08.2023.

Sartori Graphics (2019), 6 Typography Golden Rules (Need to Know). Available at: 6 Typography Golden Rules (NEED TO KNOW) – YouTube Accessed: 12.08.2023.

Sartori Graphics (2023), Complete Course on Layout Design (Master Layout). Available at: Complete Course On Layout Design (MASTER LAYOUT) – YouTube Accessed: 02.08.2023.