Conducting user research and designing the user experience of Kin LGBTQI+ Fertility app
How I designed a mobile app from concept to prototype to offer reproductive health and wellness support to the LGBTQI+ community.
Role
UX Researcher, UX Designer
UX Researcher, UX Designer
UX Researcher, UX Designer
Industry
Health & Wellness
Health & Wellness
Health & Wellness
Duration
7 months with Career Foundry
7 months with Career Foundry
7 months with Career Foundry
Stack
Adobe Xd, Adobe Illustrator, Miro, Optimal Sort
Adobe Xd, Adobe Illustrator, Miro, Optimal Sort
Adobe Xd, Adobe Illustrator, Miro, Optimal Sort
Tasks
Competitive Analysis, User Research, User Personas, Tasks Flows, Journey Maps, Information Architecture, Wireframes, Prototypes, Usability Testing, Feedback Implementation, Accessibility Evaluation, Mockups, Design Documentation
Competitive Analysis, User Research, User Personas, Tasks Flows, Journey Maps, Information Architecture, Wireframes, Prototypes, Usability Testing, Feedback Implementation, Accessibility Evaluation, Mockups, Design Documentation
Competitive Analysis, User Research, User Personas, Tasks Flows, Journey Maps, Information Architecture, Wireframes, Prototypes, Usability Testing, Feedback Implementation, Accessibility Evaluation, Mockups, Design Documentation
There are multiple complex problems to be solved within LGBTQI+ fertility healthcare
Parents-to-be often face discrimination and difficulty navigating the health sector when trying to start a family.
Currently a lack of inclusive family-health services, resources, guidance and information.
Difficult to find LGBTQI+ friendly family-health and fertility specialists.
Complicated fertility journey for prospective parents with lots of important appointments, procedures, and test results to keep track of.
Lack of mental health support available specifically for trans, gender-diverse and same-sex parents.
An inclusive fertility health and wellness mobile app as a proposed solution
A healthcare app designed specifically for same-sex, trans and gender diverse parents-to-be that offers LGBTQI+ inclusive educational resources about fertility and family health services as well as mental and physical wellness.
A portal to locate, book, and keep track of doctor and fertility specialist appointments.
A feature to track and update personal information including mental and physical symptoms, medical records, procedure outcomes, test results.
A community forum feature to get support from and build community with other LGBTI+ parents-to-be.
There are multiple complex problems to be solved within LGBTQI+ fertility healthcare
Parents-to-be often face discrimination and difficulty navigating the health sector when trying to start a family.
Currently a lack of inclusive family-health services, resources, guidance and information.
Difficult to find LGBTQI+ friendly family-health and fertility specialists.
Complicated fertility journey for prospective parents with lots of important appointments, procedures, and test results to keep track of.
Lack of mental health support available specifically for trans, gender-diverse and same-sex parents.
An inclusive fertility health and wellness mobile app as a proposed solution
A healthcare app designed specifically for same-sex, trans and gender diverse parents-to-be that offers LGBTQI+ inclusive educational resources about fertility and family health services as well as mental and physical wellness.
A portal to locate, book, and keep track of doctor and fertility specialist appointments.
A feature to track and update personal information including mental and physical symptoms, medical records, procedure outcomes, test results.
A community forum feature to get support from and build community with other LGBTI+ parents-to-be.
Empathising with potential users to really understand the problem
During this initial phase I conducted preliminary research to gain an in-depth understanding of the potential users and the problems to be solved.
First I carried out a comprehensive analysis of significant competitor apps taking note of where they excelled and what opportunities for improvement existed. This allowed me to understand not only what I was creating but the landscape in which I was creating it.
I found that although there are a number of fertility tracking and mental wellness apps on the market, there is currently nothing specifically designed to service the LGBTQI+ community. This is where Kin could have real market value.
Next I conducted three in-person interviews with potential users which allowed me to better understand user opinions, feelings, experiences and behaviours, ensuring I designed a user-centric product.
What I intended to learn during user interviews
Identifying users' general attitudes and knowledge about navigating the family health sector when trying to conceive. Do they know what their options are? What have been some of their experiences?
Documenting user opinions on current fertility services and any pain points. Do they feel comfortable accessing these services? Do they feel there is adequate support? Are there any services/websites/apps they enjoy using/or leave them feeling frustrated?
Discerning the types of support, functions and features users would find useful. What kind of content would they be interested in learning more about? What fertility data would they find helpful to track? Would they use the features that are currently planned?
Key user insights identified from Affinity Mapping
Information and resources
Very limited LGBTQI+ fertility resources available.
Users don’t know what sources of information to trust.
Users feel confused, unprepared, and unsupported by the medical community.
Users waste a lot of time and energy researching, often getting conflicting messages.
Users were shocked at how complicated fertility treatments are and had difficulty keeping track of everything.
Healthcare interactions
Interactions with healthcare providers often vague, pessimistic and impersonal.
Users felt disempowered and hesitant to seek further support.
Accessing gender inclusive care is very challenging.
Frequent transphobia, homophobia, miscommunications and misunderstandings.
Users felt exhausted and marginalised having to reiterate their healthcare needs and explaining their family, sexuality or gender identity multiple times.
Outdated and disorganised processes in the healthcare system. Inconsistent verbal and random paper documents where key information is often missed.
Users feel overwhelmed keeping track of schedules or following specialist instructions.
Community support
Users want more first hand accounts from people like themselves who’ve gone through the fertility process.
Sharing stories and experiences with those who understand the unique challenges help combat feelings of isolation.
Community buffers them psychologically against the ignorance that still exists in our society.
Daily reminders that other queer families exist and that children thrive with loving parents regardless of their sexuality or gender identity.
Creates positive visibility about the type of future young prospective LGBTQI parents could have.
Key user insights identified from Affinity Mapping
Information and resources
Very limited LGBTQI+ fertility resources available.
Users don’t know what sources of information to trust.
Users feel confused, unprepared, and unsupported by the medical community.
Users waste a lot of time and energy researching, often getting conflicting messages.
Users were shocked at how complicated fertility treatments are and had difficulty keeping track of everything.
Healthcare interactions
Interactions with healthcare providers often vague, pessimistic and impersonal.
Users felt disempowered and hesitant to seek further support.
Accessing gender inclusive care is very challenging.
Frequent transphobia, homophobia, miscommunications and misunderstandings.
Users felt exhausted and marginalised having to reiterate their healthcare needs and explaining their family, sexuality or gender identity multiple times.
Outdated and disorganised processes in the healthcare system. Inconsistent verbal and random paper documents where key information is often missed.
Users feel overwhelmed keeping track of schedules or following specialist instructions.
Community support
Users want more first hand accounts from people like themselves who’ve gone through the fertility process.
Sharing stories and experiences with those who understand the unique challenges help combat feelings of isolation.
Community buffers them psychologically against the ignorance that still exists in our society.
Daily reminders that other queer families exist and that children thrive with loving parents regardless of their sexuality or gender identity.
Creates positive visibility about the type of future young prospective LGBTQI parents could have.
Defining user needs with personas and journeys
After analysing the user insights I was able to develop target user attributes that would inspire the creation of user personas.
I developed these user personas based on common user needs, frustrations and desires and referred to these personas whenever I wanted to see things from my target users perspective.
I then mapped out user journeys in order to define the direction of the design from the user's point-of-view.
User personas
Once I understood the behaviours, pain points and goals of real people, I began to see two distinct target users take shape.
I created two design personas in order to better understand what each user found most important as well as a way to empathise with my potential users throughout the entire design process.
Aubrey
Aubrey is a 38 year old lesbian who's researching her fertility options and wants information sources she can trust. She is overwhelmed and frustrated by the amount of conflicting, heterosexually-focused resources currently available and wants to connect with trusted queer-friendly specialists and other parents in the LGBTQI+ community for support and guidance.
Defining user needs with personas and journeys
After analysing the user insights I was able to develop target user attributes that would inspire the creation of user personas.
I developed these user personas based on common user needs, frustrations and desires and referred to these personas whenever I wanted to see things from my target users perspective.
I then mapped out user journeys in order to define the direction of the design from the user's point-of-view.
User personas
Once I understood the behaviours, pain points and goals of real people, I began to see two distinct target users take shape.
I created two design personas in order to better understand what each user found most important as well as a way to empathise with my potential users throughout the entire design process.
Aubrey
Aubrey is a 38 year old lesbian who's researching her fertility options and wants information sources she can trust. She is overwhelmed and frustrated by the amount of conflicting, heterosexually-focused resources currently available and wants to connect with trusted queer-friendly specialists and other parents in the LGBTQI+ community for support and guidance.
Elliot
Elliot is 34 years old, transgender and non-binary. He's recently stopped hormone replacement therapy so that he can begin IVF and IUI. He needs to track his menstrual cycle, physical and mental symptoms and eventually his IVF treatment plan and test results. This huge adjustment is impacting his gender dysphoria and overall mental health. He's battling transphobia and homophobia when dealing with healthcare workers, and needs support advocating for his healthcare needs during this process. He's exhausted by the constant miscommunication of complex medical information between different specialists and wishes he had a way to keep track of it all.
Elliot
Elliot is 34 years old, transgender and non-binary. He's recently stopped hormone replacement therapy so that he can begin IVF and IUI. He needs to track his menstrual cycle, physical and mental symptoms and eventually his IVF treatment plan and test results. This huge adjustment is impacting his gender dysphoria and overall mental health. He's battling transphobia and homophobia when dealing with healthcare workers, and needs support advocating for his healthcare needs during this process. He's exhausted by the constant miscommunication of complex medical information between different specialists and wishes he had a way to keep track of it all.
User journeys
Next I created journey maps for each persona to help me understand how they might feel while trying to complete some of their goals within the app. This allowed me to identify potential issues before they become pain points for real users as well as begin thinking about the feature opportunities for Kin.
User journeys
Next I created journey maps for each persona to help me understand how they might feel while trying to complete some of their goals within the app. This allowed me to identify potential issues before they become pain points for real users as well as begin thinking about the feature opportunities for Kin.
Ideating on possible design solutions
Now that I understood the unique problems faced by my target users, and had explored gaps in existing solutions on other available apps, I was able to start ideating on the minimum viable product features necessary for Kin.
In this ideation phase I set up the building blocks of the app using site mapping. I could now begin visualising logical paths that would accomodate my users goals while also revealing essential pages, features and functions needed in order to complete user tasks.
I created user stories and task flows for my two personas to help visualise the steps/screens needed to complete specific tasks within the app. I also conducted a card sort exercise to help ensure that the information architecture was set up in a way that made sense to users.
User stories and task flows
Aubrey's user story
As a lesbian trying to get pregnant, I want to be able to read and share educational, medically-verified LGBTQI-inclusive fertility and mental wellness resources, so that I can understand what fertility treatments are available to me, learn what other lesbians have had success with, and find support that is adapted to my unique needs being in a same-sex relationship.
Aubrey's task flow
Load mobile app
Create an account/sign in
Navigate to Insights (resource library)
Input key terms in search bar / or / Browse existing categories
Select article, video, audio resource
Share resource
Bookmark favourite resources
Ideating on possible design solutions
Now that I understood the unique problems faced by my target users, and had explored gaps in existing solutions on other available apps, I was able to start ideating on the minimum viable product features necessary for Kin.
In this ideation phase I set up the building blocks of the app using site mapping. I could now begin visualising logical paths that would accomodate my users goals while also revealing essential pages, features and functions needed in order to complete user tasks.
I created user stories and task flows for my two personas to help visualise the steps/screens needed to complete specific tasks within the app. I also conducted a card sort exercise to help ensure that the information architecture was set up in a way that made sense to users.
User stories and task flows
Aubrey's user story
As a lesbian trying to get pregnant, I want to be able to read and share educational, medically-verified LGBTQI-inclusive fertility and mental wellness resources, so that I can understand what fertility treatments are available to me, learn what other lesbians have had success with, and find support that is adapted to my unique needs being in a same-sex relationship.
Aubrey's task flow
Load mobile app
Create an account/sign in
Navigate to Insights (resource library)
Input key terms in search bar / or / Browse existing categories
Select article, video, audio resource
Share resource
Bookmark favourite resources
Elliot's user story
As a trans-man trying to get pregnant, I want a way to track my menstrual and treatment cycles so that I can feel empowered and in-control of this physically and emotionally complex fertility journey and have a faster successful conception.
Elliot's task flow
Load mobile app
Create an account/sign in
Navigate to cycle calendar
Log period, symptoms, treatment details
Review cycle history, trends, symptoms patterns
Find Daily Insights
Download important data to share with doctor
Elliot's user story
As a trans-man trying to get pregnant, I want a way to track my menstrual and treatment cycles so that I can feel empowered and in-control of this physically and emotionally complex fertility journey and have a faster successful conception.
Elliot's task flow
Load mobile app
Create an account/sign in
Navigate to cycle calendar
Log period, symptoms, treatment details
Review cycle history, trends, symptoms patterns
Find Daily Insights
Download important data to share with doctor
Elliot's other user story
As a trans-man trying to get pregnant, I want transgender specific mental health support adapted for the unique challenge of transgender fertility so that I can better manage my mental health and combat gender dysphoria during my fertility treatments and pregnancy.
Elliot's other task flow
Load mobile app
Navigate to Community forum
Browse mental health discussion threads / Input key terms in search bar
Follow favourite threads
Like or Comment on threads
Navigate to Chats
Start Mental Health Chat with chatbot
Access insights, exercise, tools that chatbot sends
Elliot's other user story
As a trans-man trying to get pregnant, I want transgender specific mental health support adapted for the unique challenge of transgender fertility so that I can better manage my mental health and combat gender dysphoria during my fertility treatments and pregnancy.
Elliot's other task flow
Load mobile app
Navigate to Community forum
Browse mental health discussion threads / Input key terms in search bar
Follow favourite threads
Like or Comment on threads
Navigate to Chats
Start Mental Health Chat with chatbot
Access insights, exercise, tools that chatbot sends
Site-mapping and card-sorting to establish information architecture
I built a preliminary sitemap and organised the screens using a hybrid of flat and hierarchical structures to preserve simplicity within the app's navigation.
I refined the sitemap by analysing data from a digital card sorting exercise using OptimalSort. This exercise uncovered insights about the best method with which to organise the information architecture including what page grouping and word choices made sense to participants.
I wanted Kin to closely follow existing mental models and this exercise helped me understand what features users grouped together. I wanted to see what pages they naturally gravitated towards in order to complete tasks.
Site-mapping and card-sorting to establish information architecture
I built a preliminary sitemap and organised the screens using a hybrid of flat and hierarchical structures to preserve simplicity within the app's navigation.
I refined the sitemap by analysing data from a digital card sorting exercise using OptimalSort. This exercise uncovered insights about the best method with which to organise the information architecture including what page grouping and word choices made sense to participants.
I wanted Kin to closely follow existing mental models and this exercise helped me understand what features users grouped together. I wanted to see what pages they naturally gravitated towards in order to complete tasks.
Based on insights from the card sorting I made some slight revisions to my sitemap. I added some additional pages that further illustrated the function of the calendar feature to track multiple categories of data. Otherwise I kept the design the same thanks to confirmation from a portion of my participants that the current organisation was logical and appropriate. The sitemap was then iterated on multiple times due to insights and feedback that arose as the project progressed.
I later found it necessary to trim down the scope of the project and eliminate the AI Health Assistant Chat feature due to limited time as well as less interest or understanding from users during pre-testing discussions.
Based on insights from the card sorting I made some slight revisions to my sitemap. I added some additional pages that further illustrated the function of the calendar feature to track multiple categories of data. Otherwise I kept the design the same thanks to confirmation from a portion of my participants that the current organisation was logical and appropriate. The sitemap was then iterated on multiple times due to insights and feedback that arose as the project progressed.
I later found it necessary to trim down the scope of the project and eliminate the AI Health Assistant Chat feature due to limited time as well as less interest or understanding from users during pre-testing discussions.
Prototyping a design solution based on user research
Using my user flows and sitemap as a guide I created low and mid-fidelity wireframes and prototypes to visualise the functional layout of the app. Once I had a grasp of the functionality I then built a clickable interactive prototype that users could navigate for usability testing.
Low fidelity wireframes keep designs simple and iterative
I sketched rapid low-fidelity wireframes and turned them into paper prototypes to showcase some of the user journeys that I'd created. By keeping things simple and easily editable to start with, I was able to quickly work through multiple iterations for the main features: onboarding & sign up, dashboard, fertility profile, symptoms tracker, resource library and notifications/reminders.
Prototyping a design solution based on user research
Using my user flows and sitemap as a guide I created low and mid-fidelity wireframes and prototypes to visualise the functional layout of the app. Once I had a grasp of the functionality I then built a clickable interactive prototype that users could navigate for usability testing.
Low fidelity wireframes keep designs simple and iterative
I sketched rapid low-fidelity wireframes and turned them into paper prototypes to showcase some of the user journeys that I'd created. By keeping things simple and easily editable to start with, I was able to quickly work through multiple iterations for the main features: onboarding & sign up, dashboard, fertility profile, symptoms tracker, resource library and notifications/reminders.
Mid fidelity wireframes for early user testing
Using AdobeXD, I translated my wireframe sketches into mid-fidelity wireframes. I added real example text and some mid fidelity user interface components so that users could better understand how to use and navigate the app.
At this stage, the wireframes were defined enough for some user testing. I created an interactive prototype using AdobeXD with a number of clickable elements that illustrated my user flows. I tested the app's interactivity myself before I invited participants to take part in testing its usability.
Mid fidelity wireframes for early user testing
Using AdobeXD, I translated my wireframe sketches into mid-fidelity wireframes. I added real example text and some mid fidelity user interface components so that users could better understand how to use and navigate the app.
At this stage, the wireframes were defined enough for some user testing. I created an interactive prototype using AdobeXD with a number of clickable elements that illustrated my user flows. I tested the app's interactivity myself before I invited participants to take part in testing its usability.
Testing the design's usability with target users
This next phase involved recruiting participants who could test the usability, usefulness and learnability of the app when interacting with it for the first time. I conducted remote-moderated user testing with 4 participants via Zoom.
The aim was to observe and quantify user’s comprehension of the app, it’s benefits, and their ability to perform fundamental basic tasks. These tasks were presented with scenarios to help participants contextualise using the app in a real life setting.
These tasks included completing onboarding and signing in, logging their symptoms on the calendar, searching for a resource and understanding the dashboard navigation.
Usability testing process
Usability test methods
Examined various usability test methods and evaluated which method would be most suitable to conduct for this project based on time and location restraints.
Usability test plan
Created a usability test plan to evaluate the ease-of-use and learnability of the prototype.
View test planUsability test script
Developed a test script to keep my tests consistent. This ensured each participant was given the same information.
View test scriptUsability testing
Conducted usability tests with 4 participants over 3 days who matched the attributes of my target users.
Analyse test results
Collected and organised the data into an affinity map in order to interpret the finding. I sorted out user errors and arranged them by severity so I could prioritise what needed revising first.
View test findingsSolve user issues
Developed solutions and redesigned mid-fidelity wireframe for the top 5 most critical issues that the testing revealed.
Initial preference tests
Created the first high fidelity wireframes and organised a number of preference tests to determine the best approach for various user interfaces.
Organising findings with affinity mapping helps sort complex data
During the moderated-remote user tests I took notes as well as recorded the sessions to review later. This allowed me to collect a significant amount of specific and important data related to users completing the essential tasks. After reviewing the recordings I categorised my observations, positive and negative notes and user errors into an affinity map and rainbow spreadsheet to get a better picture of the results and easily identify priorities that needed immediate iterations.
Testing the design's usability with target users
This next phase involved recruiting participants who could test the usability, usefulness and learnability of the app when interacting with it for the first time. I conducted remote-moderated user testing with 4 participants via Zoom.
The aim was to observe and quantify user’s comprehension of the app, it’s benefits, and their ability to perform fundamental basic tasks. These tasks were presented with scenarios to help participants contextualise using the app in a real life setting.
These tasks included completing onboarding and signing in, logging their symptoms on the calendar, searching for a resource and understanding the dashboard navigation.
Usability testing process
Usability test methods
Examined various usability test methods and evaluated which method would be most suitable to conduct for this project based on time and location restraints.
Usability test plan
Created a usability test plan to evaluate the ease-of-use and learnability of the prototype.
View test planUsability test script
Developed a test script to keep my tests consistent. This ensured each participant was given the same information.
View test scriptUsability testing
Conducted usability tests with 4 participants over 3 days who matched the attributes of my target users.
Analyse test results
Collected and organised the data into an affinity map in order to interpret the finding. I sorted out user errors and arranged them by severity so I could prioritise what needed revising first.
View test findingsSolve user issues
Developed solutions and redesigned mid-fidelity wireframe for the top 5 most critical issues that the testing revealed.
Initial preference tests
Created the first high fidelity wireframes and organised a number of preference tests to determine the best approach for various user interfaces.
Organising findings with affinity mapping helps sort complex data
During the moderated-remote user tests I took notes as well as recorded the sessions to review later. This allowed me to collect a significant amount of specific and important data related to users completing the essential tasks. After reviewing the recordings I categorised my observations, positive and negative notes and user errors into an affinity map and rainbow spreadsheet to get a better picture of the results and easily identify priorities that needed immediate iterations.
Identifying key insights and initial solutions
Taking the collected data I created a rainbow spreadsheet to help visualise the most common issues experienced by participants. This allowed me to start brainstorming solutions. Errors were given a level of severity to clearly see which ones had a greater impact compared to other potential issues. From here I was able to select the 5 most impactful changes I could make to improve the overall user experience.
Identifying key insights and initial solutions
Taking the collected data I created a rainbow spreadsheet to help visualise the most common issues experienced by participants. This allowed me to start brainstorming solutions. Errors were given a level of severity to clearly see which ones had a greater impact compared to other potential issues. From here I was able to select the 5 most impactful changes I could make to improve the overall user experience.
Top five insights with design solutions
Users have trouble correctly identifying the ‘Insights’ category as the resource library
Solution: Revise language/labelling to ‘Resources’ or ‘Library’. Have a link on Homepage that is obviously directing them to "Articles, Courses etc" as alternative avenue to content.
Users were confused about how to see or add upcoming appointments
Solution: Create Homepage link to All Upcoming Appointments; create function to add an appointment from Homepage. Revise Calendar layout so that user can more easily see upcoming appointments.
Users had trouble navigating back to Homepage
Solution: Change order of bottom navigation menu to have ‘Today’ [Homepage] first and ‘Profile’ last. Change Homepage menu icon to something more universally recognisable.
Users had issues with saving and adding symptoms
Solution: Add a Save/Submit button to the symptoms log. Differentiate the Add New symptom button. Delete universal search bar and add a type field search to each category.
Users were confused by the picture icons for top 3 categories in resources
Solution: Label what these category icons actually are: 'Your top categories'. Redesign as a list or filter chips to illustrate user action required.
Preference testing high fidelity designs
Insights from the usability testing informed higher-fidelity design iterations that were then used to gather further feedback through preference testing.
A number of preference tests were undertaken for the high-fidelity wireframes to see which user interface design choices were most effective.
The quantitative data as well as the qualitative data in the form of test participant comments was taken into account when updating the designs. Although the tests showed a clear indication of preferred choice, the participant comments explained reasons for the choice as well as identifying elements that were preferable from each variation.
Top five insights with design solutions
Users have trouble correctly identifying the ‘Insights’ category as the resource library
Solution: Revise language/labelling to ‘Resources’ or ‘Library’. Have a link on Homepage that is obviously directing them to "Articles, Courses etc" as alternative avenue to content.
Users were confused about how to see or add upcoming appointments
Solution: Create Homepage link to All Upcoming Appointments; create function to add an appointment from Homepage. Revise Calendar layout so that user can more easily see upcoming appointments.
Users had trouble navigating back to Homepage
Solution: Change order of bottom navigation menu to have ‘Today’ [Homepage] first and ‘Profile’ last. Change Homepage menu icon to something more universally recognisable.
Users had issues with saving and adding symptoms
Solution: Add a Save/Submit button to the symptoms log. Differentiate the Add New symptom button. Delete universal search bar and add a type field search to each category.
Users were confused by the picture icons for top 3 categories in resources
Solution: Label what these category icons actually are: 'Your top categories'. Redesign as a list or filter chips to illustrate user action required.
Preference testing high fidelity designs
Insights from the usability testing informed higher-fidelity design iterations that were then used to gather further feedback through preference testing.
A number of preference tests were undertaken for the high-fidelity wireframes to see which user interface design choices were most effective.
The quantitative data as well as the qualitative data in the form of test participant comments was taken into account when updating the designs. Although the tests showed a clear indication of preferred choice, the participant comments explained reasons for the choice as well as identifying elements that were preferable from each variation.
Implementing changes based on user feedback
With all my usability test data analysed, I developed the rest of the high-fidelity wireframes in AdobeXD implementing iterative changes based on user feedback.
For this next prototype iteration I explored emotional design strategies and solutions using fundamental UI principles: Gestalt Principles of Design and framework conventions from Google's Material Design System 3.
I then had a number of design peers review my work in order to further refine and help catch any final UX or UI issues that I might have missed. Finally I verified my design's accessibility against the Web Content Accessibility Guidelines.
Iteratively solving user errors to reduce confusion and improve usability
With my list of prioritised errors from my usability results I was able to create high-fidelity wireframes that solved these issues. I also incorporated new design ideas that evolved from observing user interactions with the previous prototype. The end goal was to reduce user confusion and improve usability.
Implementing changes based on user feedback
With all my usability test data analysed, I developed the rest of the high-fidelity wireframes in AdobeXD implementing iterative changes based on user feedback.
For this next prototype iteration I explored emotional design strategies and solutions using fundamental UI principles: Gestalt Principles of Design and framework conventions from Google's Material Design System 3.
I then had a number of design peers review my work in order to further refine and help catch any final UX or UI issues that I might have missed. Finally I verified my design's accessibility against the Web Content Accessibility Guidelines.
Iteratively solving user errors to reduce confusion and improve usability
With my list of prioritised errors from my usability results I was able to create high-fidelity wireframes that solved these issues. I also incorporated new design ideas that evolved from observing user interactions with the previous prototype. The end goal was to reduce user confusion and improve usability.
Incorporating collaborative feedback from design peer review
I reached out to my Career Foundry Slack community and collected feedback from my design student peers to further refine my design choices. I analysed all of their comments and implemented appropriate changes that I agreed would enhance Kin's user experience and interface.
Incorporating collaborative feedback from design peer review
I reached out to my Career Foundry Slack community and collected feedback from my design student peers to further refine my design choices. I analysed all of their comments and implemented appropriate changes that I agreed would enhance Kin's user experience and interface.
Next design iteration based on peer feedback
Next design iteration based on peer feedback
Improving design's accessibility based on Web Content Accessibility Guidelines
I analysed my designs for potential accessibility issues based on the principles of the Web Content Accessibility Guidelines and A-AAA compliance. The following user interface iterations were revised with solutions and general improvements to Kin's overall accessibility. If I was to continue this project, further usability testing would be needed from participants with varying accessibility requirements. I am particularly interested in the area of Accessible Design and hope to work on projects focused on user accessibility in the future.
Placeholders and symbol recognition
The text field height was increased to assist in touch target size, allowing users to more easily hit their mark when inputting data.
Label text size was increased and bolded to assist legibility.
Placeholder text was added to prompt user with expected information, helping new or infrequent users that might be unsure of the format.
Error messaging was designed with both colour and universal symbol. This ensures comprehension for those with language impairments as well as colour blindness.
Alternative sign in icon buttons were changed to descriptive action buttons with symbols, assisting infrequent users who might not recognise the meaning of icons on their own.
Improving design's accessibility based on Web Content Accessibility Guidelines
I analysed my designs for potential accessibility issues based on the principles of the Web Content Accessibility Guidelines and A-AAA compliance. The following user interface iterations were revised with solutions and general improvements to Kin's overall accessibility. If I was to continue this project, further usability testing would be needed from participants with varying accessibility requirements. I am particularly interested in the area of Accessible Design and hope to work on projects focused on user accessibility in the future.
Placeholders and symbol recognition
The text field height was increased to assist in touch target size, allowing users to more easily hit their mark when inputting data.
Label text size was increased and bolded to assist legibility.
Placeholder text was added to prompt user with expected information, helping new or infrequent users that might be unsure of the format.
Error messaging was designed with both colour and universal symbol. This ensures comprehension for those with language impairments as well as colour blindness.
Alternative sign in icon buttons were changed to descriptive action buttons with symbols, assisting infrequent users who might not recognise the meaning of icons on their own.
Contrast and touch targets
Contrast between the text, buttons and background was increased to assist with readability and help users identify their touch target.
Icon button changed to an action button, simultaneously increasing the touch target size and making the expected next step clear for infrequent users.
Contrast and touch targets
Contrast between the text, buttons and background was increased to assist with readability and help users identify their touch target.
Icon button changed to an action button, simultaneously increasing the touch target size and making the expected next step clear for infrequent users.
Line spacing, navigation and legends
Appointment cards reformatted with improved line spacing to assist in readability.
Image and universal symbol were added to assist with both language and visual impairments, making the card function and type of information more recognisable.
A tab bar was added to assist with navigation and cognitive load, showing user what appointments they are currently looking at plus the capacity to filter to avoid overwhelm.
Contrast of calendar background was increased to help with recognition. Date text size was increased as well as the touch target size of the circles.
Legend was added to help with recognition and avoid cognitive overload for new or infrequent users.
Line spacing, navigation and legends
Appointment cards reformatted with improved line spacing to assist in readability.
Image and universal symbol were added to assist with both language and visual impairments, making the card function and type of information more recognisable.
A tab bar was added to assist with navigation and cognitive load, showing user what appointments they are currently looking at plus the capacity to filter to avoid overwhelm.
Contrast of calendar background was increased to help with recognition. Date text size was increased as well as the touch target size of the circles.
Legend was added to help with recognition and avoid cognitive overload for new or infrequent users.
Text size and colour contrast
The background contrast was increased on the dashboard in order to improve readability of the calendar days.
Text size of the weekdays and dates was increased and made bold to help with legibility and touch target.
Colour of the destination marker on the navigation bar was also updated to improve recognition for those with visual impairments.
Text size and colour contrast
The background contrast was increased on the dashboard in order to improve readability of the calendar days.
Text size of the weekdays and dates was increased and made bold to help with legibility and touch target.
Colour of the destination marker on the navigation bar was also updated to improve recognition for those with visual impairments.
Readability and universal patterns
Shape of the tracking log chips was updated to differentiate them from action buttons to improve user recognition and comprehension.
Deselected and selected states of the chips was also reversed. The coloured state is a starker contrast and so more recognisable that it's been selected. The outlined deselected chips are also easier to read en-masse.
‘Add’ symbol was increased in size and made to better adhere to the previous design system, to improve learnability and avoid cognitive overload.
Universal edit symbol was used to help with language impairments and learnability.
Colour contrast of the Save action button was increased and made to match other primary action buttons used throughout product.
Readability and universal patterns
Shape of the tracking log chips was updated to differentiate them from action buttons to improve user recognition and comprehension.
Deselected and selected states of the chips was also reversed. The coloured state is a starker contrast and so more recognisable that it's been selected. The outlined deselected chips are also easier to read en-masse.
‘Add’ symbol was increased in size and made to better adhere to the previous design system, to improve learnability and avoid cognitive overload.
Universal edit symbol was used to help with language impairments and learnability.
Colour contrast of the Save action button was increased and made to match other primary action buttons used throughout product.
Text to speech and image saturation
Added a Text To Speech function on text heavy content making this article more accessible to those with visual or language impairments.
Other types video or audio based content would require subtitles or written scripts to make them more accessible to those with hearing impairments.
Saturation of all imagery was increased to improve visibility. If this screen appeared on a desktop version the article heading would be the first element users would encounter to ensure those using screen readers could immediately understand the display.
Text to speech and image saturation
Added a Text To Speech function on text heavy content making this article more accessible to those with visual or language impairments.
Other types video or audio based content would require subtitles or written scripts to make them more accessible to those with hearing impairments.
Saturation of all imagery was increased to improve visibility. If this screen appeared on a desktop version the article heading would be the first element users would encounter to ensure those using screen readers could immediately understand the display.
Design language system docs for development
Preparing my designs to be handed off is the last step in my design process. This involves documenting all the visual elements so that developers can easily recreate them, and to ensure consistency for any other designer that builds on my work in the future. Documentation is kept short and sweet with just enough to inform developers without being overwhelmingly dense. It's also essential that all final assets and deliverables are handed over in intuitively labelled, well organised folders. I think it's so important to make the lives of the team members that continue my work as stress free as possible.
Design language system docs for development
Preparing my designs to be handed off is the last step in my design process. This involves documenting all the visual elements so that developers can easily recreate them, and to ensure consistency for any other designer that builds on my work in the future. Documentation is kept short and sweet with just enough to inform developers without being overwhelmingly dense. It's also essential that all final assets and deliverables are handed over in intuitively labelled, well organised folders. I think it's so important to make the lives of the team members that continue my work as stress free as possible.
Watch a 3 minute application walkthrough:
Watch a 3 minute application walkthrough:
Learnings and challenges about scope complexity, the importance of user testing and staying curious about feedback
Project scope
It was my initial goal to design a product that incorporated multiple features servicing the needs of the entire LGBTQI+ community. However after analysis of the feasible scope of other similar apps, conducting user research hearing the needs first hand from my target users, and learning more about the reality of the Australian fertility healthcare industry, I came to the realisation that the initial scope was too complex. The user group was too broad and in order to create a successful product at that stage I needed to simplify it’s features and further hone my focus by designing for a particular type of user within the LGBTQI community.
This need for a design rethink was at first disappointing however I quickly understood that it’s so important as a designer to not get too attached to your initial ideas about a project. Staying open and agile to an iterative design process is key to a successful end product. Balancing what is both valuable to the user and also feasible as a designer and product developer is paramount. That, in fact, having a more focused end-goal and less product features would be a benefit in the long run. This was a good lesson to learn as I’m sure many designers come across projects where they want to design all the features for all the users and then learn that it’s quite impossible to create a product that is all things for all people. I don’t see this as a failure, but instead see it as important feedback, and it allowed me to progress on the project from a more informed and focused position.
Prototyping and user testing
Prototyping and user testing is essential to the iterative design process. As designers it's easy to get stuck trying to create something that is perfect in the early stages of a project. Which in reality is impossible without in-depth research and testing from your target users. The more you can learn early on with an affordable, early stage prototype, the better. So it’s important to just get something done and out there to be tested, rather than perfect. The iterative process ensures that you’re constantly learning new things and improving the product with new knowledge and insights gathered from your users along the way.
If I could start over I would spend more time exploring and questioning my users. I would have liked to involve fertility healthcare professionals as well as many more LGBTQI+ community members to get a greater understanding of the complex challenges of LGBTQI+ fertility healthcare. I am interested to delve deeper into what medical and fertility metrics they'd want to track and how best to do this, as well as explore other features for the app. However given the time restraints for this project and lack of resources working solo end-to-end this couldn't happen this time.
Curiosity and feedback
It’s so important to stay curious as a designer, and never assume you know what’s right for your users without their direct confirmation. Even though my designs never entirely missed the mark, many necessary adjustments were discovered after involving potential users. Everyone’s brains process information differently and what might make sense to me might not make sense to someone else. This is something I find fascinating about UX design and endeavour to always stay curious.
In terms of feedback, I was glad to learn that taking critical feedback is something I manage very well. It’s important to not get overly attached to designs as a designer and this process showed me that I have respect for the opinions of other designers, and take great satisfaction in learning and improving my designs with the help of others. Of course not all feedback is always good feedback so it’s my job to remain critical in my own right whilst staying open to new ideas and new ways of designing solutions.
Future iterations of the project with new hypotheses and specific improvements
New hypotheses
Users need to be able to complete the application’s core tasks from start to finish. Currently there are still some steps missing from the main user flows because of time restraints. Future iterations of the app will see these flows fully realised and prototypes built to completion.
Users need a way to not only keep track of their fertility appointments, but a way to locate and book these appointments as well. Future iterations of the app will include an appointment booking feature that connects users directly to fertility health specialists and their contact details/ booking systems.
Users need a way to connect with other LGBTQI+ parents-to-be to discuss fertility challenges and gain support from each other. Future iterations of the app will see the design of the community forum feature allowing users to leave comments and like and save other user comments.
Validating new hypotheses
After the original user flows have been finished in the entirety, the flows of additional features will be added to the applications design as well. All of these new elements will then be validated through more rounds of user testing using updated interactive prototypes to ensure usability. A/B testing will also be utilised as more nuanced changes based on user preferences will need to be validated at this later stage.
Specific improvements
While the core features of the product are currently available for further user testing, as mentioned previously, there are still some gaps in the entire user flow. The current prototypes are also not entirely interactive. It would be desirable to have the application’s flows completely interactive and the additional features added to ensure the greatest amount of useful user feedback is gathered in the next rounds of testing.
Further user testing will evolve to include longer and more refined testing scenarios with a greater number of potential users from different backgrounds and with different accessibility requirements.
Learnings and challenges about scope complexity, the importance of user testing and staying curious about feedback
Project scope
It was my initial goal to design a product that incorporated multiple features servicing the needs of the entire LGBTQI+ community. However after analysis of the feasible scope of other similar apps, conducting user research hearing the needs first hand from my target users, and learning more about the reality of the Australian fertility healthcare industry, I came to the realisation that the initial scope was too complex. The user group was too broad and in order to create a successful product at that stage I needed to simplify it’s features and further hone my focus by designing for a particular type of user within the LGBTQI community.
This need for a design rethink was at first disappointing however I quickly understood that it’s so important as a designer to not get too attached to your initial ideas about a project. Staying open and agile to an iterative design process is key to a successful end product. Balancing what is both valuable to the user and also feasible as a designer and product developer is paramount. That, in fact, having a more focused end-goal and less product features would be a benefit in the long run. This was a good lesson to learn as I’m sure many designers come across projects where they want to design all the features for all the users and then learn that it’s quite impossible to create a product that is all things for all people. I don’t see this as a failure, but instead see it as important feedback, and it allowed me to progress on the project from a more informed and focused position.
Prototyping and user testing
Prototyping and user testing is essential to the iterative design process. As designers it's easy to get stuck trying to create something that is perfect in the early stages of a project. Which in reality is impossible without in-depth research and testing from your target users. The more you can learn early on with an affordable, early stage prototype, the better. So it’s important to just get something done and out there to be tested, rather than perfect. The iterative process ensures that you’re constantly learning new things and improving the product with new knowledge and insights gathered from your users along the way.
If I could start over I would spend more time exploring and questioning my users. I would have liked to involve fertility healthcare professionals as well as many more LGBTQI+ community members to get a greater understanding of the complex challenges of LGBTQI+ fertility healthcare. I am interested to delve deeper into what medical and fertility metrics they'd want to track and how best to do this, as well as explore other features for the app. However given the time restraints for this project and lack of resources working solo end-to-end this couldn't happen this time.
Curiosity and feedback
It’s so important to stay curious as a designer, and never assume you know what’s right for your users without their direct confirmation. Even though my designs never entirely missed the mark, many necessary adjustments were discovered after involving potential users. Everyone’s brains process information differently and what might make sense to me might not make sense to someone else. This is something I find fascinating about UX design and endeavour to always stay curious.
In terms of feedback, I was glad to learn that taking critical feedback is something I manage very well. It’s important to not get overly attached to designs as a designer and this process showed me that I have respect for the opinions of other designers, and take great satisfaction in learning and improving my designs with the help of others. Of course not all feedback is always good feedback so it’s my job to remain critical in my own right whilst staying open to new ideas and new ways of designing solutions.
Future iterations of the project with new hypotheses and specific improvements
New hypotheses
Users need to be able to complete the application’s core tasks from start to finish. Currently there are still some steps missing from the main user flows because of time restraints. Future iterations of the app will see these flows fully realised and prototypes built to completion.
Users need a way to not only keep track of their fertility appointments, but a way to locate and book these appointments as well. Future iterations of the app will include an appointment booking feature that connects users directly to fertility health specialists and their contact details/ booking systems.
Users need a way to connect with other LGBTQI+ parents-to-be to discuss fertility challenges and gain support from each other. Future iterations of the app will see the design of the community forum feature allowing users to leave comments and like and save other user comments.
Validating new hypotheses
After the original user flows have been finished in the entirety, the flows of additional features will be added to the applications design as well. All of these new elements will then be validated through more rounds of user testing using updated interactive prototypes to ensure usability. A/B testing will also be utilised as more nuanced changes based on user preferences will need to be validated at this later stage.
Specific improvements
While the core features of the product are currently available for further user testing, as mentioned previously, there are still some gaps in the entire user flow. The current prototypes are also not entirely interactive. It would be desirable to have the application’s flows completely interactive and the additional features added to ensure the greatest amount of useful user feedback is gathered in the next rounds of testing.
Further user testing will evolve to include longer and more refined testing scenarios with a greater number of potential users from different backgrounds and with different accessibility requirements.
