Empathise
Introduction
To establish a clear scope for this project, I needed to understand the problem space more by researching its related topics and existing solutions/competitors. Research is essential in order to define what type of solution needs to be built.
The goals of the research were:
- Discover who/what the target audience is.
- Understand common needs & pain points with existing solutions with similar problem spaces.
- Understand how human behaviours and feelings related to the problem space.
- Identify opportunities for ideas and/or improvement.
Surveys
This survey was completed by participants that were selected to reflect the potential audience using a recruitment advert. The recruitment message & participant information sheet can be seen here.
I opted for a mix of multiple-choice and open-end style questions to provide a variation in responses. The aim of the questions was to gain an insight into the type of audience that could be targeted, therefore information about their backgrounds, i.e., age and race, was issued. Questions were also tailored to discover behavioural patterns and potential features, functionalities or topics.
18 questions were included in the survey, and out of them, key survey insights are shared below:
Demographic Insights
Behavioural Insights
Some of these results imply that although participants do enjoy participating in self-care routines, i.e., reciting positive affirmations, they struggle to stick with these practices. In addition, as shown below, only 29% of participants actually found digital platforms that were helpful in this area. Of those platforms, the most commonly mentioned include Headspace, I Am, Motivation, Instagram and TikTok.
Participants were also asked what type of affirmations preferred and common responses were “encouragement”, “self-worth” and “motivation”. This further validates that these topics are relevant to this specific audience. In addition to this, they were asked to select the self-care practices they perform, as shown below.
Summary & Next Steps
To move forward, research into this newly established target audience and the interests gathered will commence. Since interest in certain topics has now been discovered, these topics have to be examined and a specific set of goals needs to be identified.
Also, as some mobile apps were given as examples from participants, those apps & others similar to it will be analysed during competitor research & analysis. This will help with determining what features may be useful and what things to avoid.
Define
Mind Maps
To establish a solid foundational understanding of key issues related to the project objective, keywords and their related topics and/or synonyms were discovered. Words & phrases included in the mind map could now be used to find new resources to provide more understanding of the problem.
Online Research
Research papers, internet blogs and articles were selected for research because they can provide a focused, high level of insight into the topics being used for the foundational context of this project. As the problem space aims to combat the pressures from the media with activities and educational resources, topics surrounding body positivity, self-image, wellness, and self-care were evaluated.
Competitors & Comparative Analysis
Over 60 different mobile applications were discovered & tested. Testing & downloading apps is a great research method because you can evaluate the features and functionalities of existing solutions. Testing was done by following the instructions provided on the first launch/onboarding and then visiting the pages of each menu item.
After an app was downloaded & tested, reviews were looked over once more to compare my recent experience to other people’s experiences. This provided an insight into what features could be improved or added, consequentially providing potential functional requirements for the solution being built, based on real user opinions.
Those 60 apps were evaluated and then shortlisted to 6 based on the uniqueness, relevance, and importance of their features. The shortlisted apps were Sayana, Alan Mind, Inner Hour, My Possible Self, CBT Self Care Journal and Clementine.
The table below provides a comparison of the different features and functionalities of the applications that were assessed. This helped present and condense the notes & conclusions in a way that was easy to share and communicate with others. Specific styles, layouts, functionalities & features that were perceived as useful were identified and some have contributed to the final design.
Idea Selection
The research helped inform what ideas should be implemented in the project, which has been listed below:
- Narrow the niche to self-care and body positivity.
- Have a journal as a core feature, and enhance the UX by implementing journalling hints, prompts and accessibility features.
- Include a directory that provides educational and encouraging content.
- Implement a positive self-talk or affirmation section.
Requirements
When programming for this mobile app, before tackling its UI design, let alone the programming, functional and non-functional requirements are essential to map out at this stage.
Functional requirements are the functions that the system will perform and the properties that need to be implemented to ensure that users can fulfil tasks. They’re also made to guide contributing development stakeholders. Non-functional requirements on the other hand are the metrics & constraints of how a system is developed. It’s used to assess & measure aspects of the system to prove its effectiveness, usability, and quality. You can view the non-functional & functional requirements of this project here.
Ideate
Sketchstorming
Sketching out ideas let me visually “think out” ideas I had for UI components. This happens quite frequently in the ideation stage, and it allows me to determine feasibility before making any digital prototypes, this saves a lot of time and effort.
Information Architecture
Below is a breakdown of the application from a top-down approach. It provides a basic idea of how the project development will unfold.
Prototype
Wireframes
As the only person on this project (adhering to a very tight deadline), I went through dozens of design iterations and therefore needed to construct very low-fidelity wireframes. Low-fidelity wireframes were the best way to rapidly visualise how screens would connect together and how the user’s journey would go. As these wireframes are simple and easy to adjust, they work best when going through multiple potential design layout ideas.
Mid-Fidelity Prototypes
Mid-fidelity prototypes are similar to wireframes but have elements that match the system’s visual identity, as well as component designs, icons and preview text. I needed to make mid-fidelity prototypes to better visualise the ideas I mapped out with low-fidelity wireframes. This allowed me to recognise what may or may not be possible for me to code, resulting in some designs being simplified or removed completely.
At this stage, there is still a large focus on how the user would navigate the system, and now how components would interact with each other. Mid-fidelity prototypes also help with zeroing in on features that have to be implemented according to requirements, ensuring nothing is left out.
Design Considerations
Since the nature of this project focused on coding development and didn't require any communication or collaboration between stakeholders, high-fidelity prototypes were not developed. Mid-fidelity prototypes were a good enough guide for programming the system.
I also had to leave enough room for flexibility just in case highly detailed designs couldn’t be developed (which would have been a misuse of time & resources). Therefore I had to avoid making “pixel-perfect” designs due to the tight deadline and limitations of my full-stack programming proficiency.
Test
Unit Tests
Testing was conducted frequently during and after programming by utilising unit tests. Unit testing is a form of White Box testing, a method used to examine the functionality of the system using test data against the program’s code. All the functionalities outlined during the requirements stage were broken down and used for test cases to measure the success of the program.
Non Functional Testing
Assessing how well non-functional requirements were met required a round of testing that examined performance, compatibility, security and usability. As the majority of these tests pertain mostly to front & backend development, only the process of usability testing will be discussed.
Usability Testing
Usability testing allowed me to observe how well participants were able to complete main tasks within the app. This provided insight into how clear/understandable features were, the participant’s comprehension of the experience and ultimately if they could complete tasks. In essence, the tasks were to:
- Make an account & sign in
- Make, view, edit and delete journal entries.
- Navigate the library section and interact with the resources.
- Complete a guided activity.
- Look at affirmations and make their own.
I acted as a facilitator in 14 user interviews, 9 were done remotely over Zoom and 5 were done face-to-face. During the sessions, any issues that were vocalised were noted, but I also noted any observations with participant behaviour, such as frowning or tapping on things in a “frustrating” manner.
A usability rating system was also used to understand how positively, or negatively, the user felt about a particular feature and/or issue.
Reflection & Learning
Summary
This was an incredibly interesting but challenging project for me to complete. This case study only focuses on the UX/UI practises within this project, but there were many other attributes to this project.
This was a university-level, rigorous 7-month-long capstone project. It included front-end development, backend development, database integration, security implementations, version control (Git), intense testing and project management. It also required professional, ethical research to be conducted and documented as a scholarly publication.
Although challenging, I enjoyed the process of developing a project that had a lot of personal value to me and being able to showcase the skills I’ve picked up over the last 10 years as a designer and programmer.
Currently, I am still pursuing the development of this project as a hobby because I believe there’s a possible good impact that this app could have on women (plus I just really enjoyed it and wish I had more time!)
Although an app can’t fix self-esteem issues overnight, I believe it could open a dialogue into what digital solutions we can create to help those struggling with self-confidence issues that have snowballed as a result of our world being more online than ever.
I'd like to return to the empathise stage and ask more targeted questions for more better quality results, so going forward I would conduct my own independent research with that target audience to complete surveys, interviews & focus groups.
From a programming perspective, I thoroughly enjoyed using React Native with Expo & coding in JavaScript. Despite having prior experience with React, I’d never come across React Native, and this was my first project using it. I would love to continue this project to improve my programming proficiency.
As a pixel pusher, I’d also like to expand on my designs and develop high-fidelity ones now that I’m not bound to a deadline. Also, an idea explored early on was the use of artificial intelligence. If I could collaborate with other developers experienced in AI, it would be a great concept to have “Plusbabygirl” as a wellness assistant/chatbot.
I learnt a lot more about project management & organising my time and priorities effectively, especially because I had to juggle this project whilst working full-time as a UX UI designer and studying for other university modules. This also solidified my appreciation of the importance of documenting everything during a project, no matter how insignificant it may seem.
Alike other projects I’ve been on, I’ve become better at understanding tradeoffs in decision-making as well as in designing whilst being able to justify them.
As this was an academically rigorous project, with the assistance of my supervisor & professors, I was able to fine-tune my critical thinking skills, and work smarter, not harder.