Timeline - September 2022 - February 2023
Project Type - Academic, BrainStation Diploma in UX Design
Role - Lead UX & UI Designer
Tools - Figma, InVision, Procreate; Designed for iOS
From July 2022 to February 2023, I completed the part-time online User Experience Design Bootcamp at BrainStation. Over 20 weeks, we were tasked with creating a digital solution to a problem space of our choosing. The project was an end-to-end UX design experience that included research, ideation, usability testing, interface design, and branding.
SRH Collective is a mobile app that aids people who can get pregnant in identifying trustworthy sexual and reproductive health (SRH) providers who can reliably acknowledge and address their specific health needs by providing a robust provider search database, comprehensive provider profile details, and an open community forum for learning from the real, lived experiences of others.
“Design thinking is a human-centered approach to innovation that draws from the designer’s toolkit to integrate the needs of people, the possibilities of technology, and the requirements for business success.”
Tim Brown - IDEO
The Human-Centered Design Thinking framework was used in the development of my design intervention to ensure that everyone’s perspective - both users and designers - were taken into account throughout the design process and to create a better human-centered user experience and product.
Though well-defined, this methodology is often non-linear and acts as an interactive system of many variations with the central goal of ensuring you will arrive at new solutions that address the targeted users' needs.
Over the decades, shifts in the United States (U.S.) federal reproductive health laws and priorities have created a constant flux in access to care. Furthermore, service availability and policies also vary significantly across and within individual states.
To this end, as of June 2022, abortion policies and reproductive rights are in the hands of each state.
As a woman living in the U.S. South, this sparked my interest in how others’ were successfully navigating these rapid changes directly affecting their SRH health...
I started by exploring various peer-reviewed journal articles (PubMed Central), content-specific websites, news articles, and Think Tank and policy databases to understand the historical context, specific challenges, and recent innovations relevant to access to SRH care in the current political climate.
Another outcome is the impact rapid changes in state reproductive care policies have on peoples’ awareness and knowledge of where they can readily access the care and resources they need.
In addition, there have been increases in the number of people who turn to search engines and social media to help inform their decisions on how to manage their SRH. Mobile technology tools have proven to be effective in increasing health knowledge and providing support to users in making decisions about their SRH.4 However, research shows that online platforms also run the risk of spreading inaccurate or misleading information about reproductive care topics.5,6
This research aimed to explore this challenge by gaining a deeper understanding of how people who can get pregnant in the U.S. are currently managing their SRH and navigate through finding and accessing reliable, accurate SRH information, resources, and/or services.
I believe that by providing accessible up-to-date, fact-checked SRH information and resources for people who can get pregnant in the U.S., there will be an increase in topic knowledge and overall community health.
I will know the hypothesis is valid when 2 out of 3 users report receiving knowledge support positively influenced their decisions related to their sexual and reproductive health.
It was important to talk directly to the people I was designing for to hear about their experiences and concerns around the problem space in their own words.
I conducted three 30-minute one-on-one in-depth interview discussions with participants ranging in racial/ethnic diversity, regional location, and occupation.
Eligible user participants were U.S. residents, able to become pregnant, within the reproductive age range, and had sought out SRH information and/or services in the last 6 months.
In my interviews, I asked participants to describe their experiences with managing their SRH and accessing information, resources, and services relative to their unique health needs. Afterward, I completed an affinity mapping exercise to organize the interview findings into key pain points/frustrations, motivations, and behaviors. Three major themes were identified and synthesized.
All participants experience difficulty in finding an OBGYN provider they trust and feel takes their concerns seriously.
While not an immediate medical concern, the result of the recent legislative ruling has caused participants stress and does influence their current motivations and behaviors around their SRH.
Seeking insight from the real, lived experiences of others within the community is an essential motivating factor for participants when making decisions related to their own SRH.
Despite it being acknowledged that the wealth of information available today can make it difficult to decipher what may be a “good” or “bad” source, accessing accurate, reliable information was not found to be a major pain point for participants.
Participants emphasized the importance of feeling heard when discussing vulnerable topics with their providers, as well as receiving the acknowledgment and respect to fully make their own decisions around their SRH.
Therefore, in light of the user interview findings, the new problem space focused on the difficulty in finding a reliable, trustworthy OBGYN provider to address SRH needs.
HOW MIGHT WE help people who can get pregnant identify OBGYN providers they can trust in order to better ensure their SRH needs are reliably acknowledged and addressed?
Referencing my consolidated primary and secondary research findings, I developed a user persona that reflects the core attributes, motivations, behaviors, and pain points of the targeted primary users of my proposed digital intervention.
Mia is proactive about managing her sexual health and makes a point to stay knowledgeable about the latest reproductive science, legislation, and products via Google searchers or popular social media platforms, such as TikTok and Instagram. Despite her consistent efforts, she has struggled to find an OBGYN provider that she trusts to listen to and address her health needs. This, in addition to the sociopolitical changes related to women’s health in the U.S., has left Mia feeling discouraged by the state of the current healthcare system. To mitigate some of this frustration, Mia has also taken to reading about different symptoms on WebMD and reached out to close friends and family for health advice.
The next stage in synthesis was to create an experience map to visualize Mia’s current experience within the problem space and gain deeper insights into what she is thinking, and feeling, and with what platforms she is interacting.
Documenting the various stages and interactions of Mia trying to find an OBGYN provider she trusts to address her health needs helped to identify real opportunities for design intervention to alleviate some of her current frustrations.
Though Mia hits her lowest point in the journey during her appointment visit with a provider, she also experiences feelings of skepticism as she searches for the right provider to see. With that in mind, I felt a key moment for design intervention was during the discovery, research, and reviews phase to help her feel confident in her choices and prevent Mia from feeling further cyclic disappointment in her provider experiences. I identified four areas of opportunity:
Considering the identified opportunities for design intervention, I began ideating about “how” to create a solution that will deliver value to the user and address their needs. Using the formula below, I authored 23 user stories to help conceptualize users as real people with real tasks to complete. Next, I organized my user stories into four functional epics.
I selected Provider Research as the epic focus and expanded on it to further pinpoint specific tasks and define product features that will directly address Mia’s need to confidently identify more trustworthy OBGYN providers to help navigate her health concerns in the research phase.
The above ten user stories were used to develop a task flow diagram that details performing provider research through a mobile app database.
The Task: Mia performs a new OBGYN provider search based on her preferred search criteria, reviews a selected provider profile, and adds the profile to her provider favorites.
With a finalized task flow, it was time to design! First, I assembled a UI inspiration board in InVision to spark creativity and inform the design decisions made on the chosen features, functionality, and page layouts. I pulled my inspiration from a variety of sources, including Dribbble and Behance, as well as known health-specific apps and websites like Modern Fertility (now Ro) and Health in her Hue.
I divided my inspiration board into four key sections:
I began drawing exploratory sketches of the preliminary layout and interface that focused on incorporating features and functionality that best captured the Provider Research epic.
I really wanted to emphasize the search feature of my design to give users a variety of filter options with the goal of producing more reliable, relevant search results specific to their needs.
Thankfully, I was able to draw from some great inspirational sources, such as Health in Her Hue and Black Girl Therapy, to really capture that goal. Both websites serve as databases for users to perform targeted provider searches, which aligned well with my design goals.
After exploring various different design styles and layouts, the most compelling concepts were selected as the final solution sketches to begin wireframing.
I translated my solution sketches to greyscale wireframes in Figma and developed the first iteration of my prototype. Interface components, including buttons, cards, controls, etc. were established for elements that repeat to help create a consistent and cohesive design across all of the screens. Original language and copy were used throughout the app interface.
Two rounds of usability testing across ten users were conducted to obtain practical, real-time feedback that could be incorporated to improve the design functionality and achieve a more optimal user experience. This proved to be extremely beneficial and resulted in three total iterations of the prototype.
Users were greeted and given a thorough introduction to the purpose and format of the testing session and provided with a detailed testing scenario based on the user persona (Ms. Mia!) in order to complete the prototype task.
Overall, users reported a positive experience with the prototype and felt the task flow was intuitive and to the point. They appreciated the robust provider filtering feature and felt the app's tone was clear, positive, and honest. Testing results were compiled into a session output document and a prioritization matrix was used to organize and explore all possible design iterations.
The following key findings show the iterative design process from low fidelity screens V1 to V3.
The hard work (or so I thought!) was over, now for the fun part. It was finally time to bring to life the details of the digital product’s unique brand development and visual identity. Exciting!
I started with creating a list of adjectives and “More A than B” statements that I believed embodied my brand and the feelings I wanted it to evoke for users.
1) The right SRH provider to address their unique health needs
2) A larger community of peers to discuss similar SRH lived experiences and concerns
I was intentional about not solely portraying traditional elements of “femininity” for my mood board. The brand’s purpose is to support all people who can get pregnant, regardless of race/ethnicity, gender expression, or sexual orientation. I also wanted to incorporate visual references and emotional expressions of connection, community, healing, and growth.
Initially wanted a catchy, one-word brand name, similar to other top fertility and SRH app names, such as Clue, Flo, Glow, Ovia, and Eve. But to be candid - nothing was sticking for me. Therefore, I dropped this idea and settled on the Sexual and Reproductive Health (SRH) Collective, officially...
While not the most creative name, the word collective felt fitting in that the application serves as a comprehensive resource for users to browse through a diverse array of SRH providers, who are all *collectively* there to serve their needs.
I chose Lato as my primary typeface. The modern San-Serif is known for its clean, smooth & symmetrical round edges and is easy to read, yet full of character. It gives the perfect ratio of professionalism and approachability to the user, letting them know this is a source they can trust to help them meet their needs.
I chose Lumina font for the wordmark due to its modern stylist use of varied line weights that felt effortlessly classy, and bold enough to stand out on its own as a brand name logo.
I wanted to visually portray "connection" by linking the letters in SRH Collective together, but I struggled to manipulate the Lumina font to do so. Without completely abandoning the idea, I chose to digitally draw the SRH using Procreate to give myself more flexibility and bring that vision to life.
I merged the two together for the final wordmark. I was careful to mimic the font design to ensure they would be complementary enough to each other. The SRH appears taller than the Collective to emphasize the acronym as the more important identifier of the brand.
I chose to use the acronym SRH as the app icon with the intent that users would come to recognize it as the brand name over time.
I selected Hookers Green as the primary brand color. I found it visually soothing and provided a sense of reassurance that one desires when addressing healthcare needs. Green also evokes a feeling of abundance and is associated with peace and security.
I wanted users to open the app and immediately sense that it will successfully provide the information they’re searching for and restore peace of mind. I decided to incorporate secondary colors to capture the warm, friendly aspects of the brand.
Ultimately, I chose to keep the design clean and simple to prevent the user from being distracted from the task at hand, while adding some eye-catching shapes and color gradients and injecting brand colors to highlight certain features and functionality.
A comprehensive UI Library was built containing all of the user interface elements used in my digital product from Foundations to Pages.
Though tedious, creating design guidelines was important for establishing visual consistency in my prototype and establishing trust with the user so that they feel comfortable with operating the digital interface. This is especially true so that future developers are able to easily recreate my design whenever needed.
I designed a responsive product marketing website for desktop and mobile viewpoints to better establish the brand, create an online presence, and communicate its value proposition to users.
Again, a major goal for me was to ensure the product presents as trustworthy and professional to the user. I included catchy text phrasing, statistics, feature demonstrations, testimonials, FAQs, ratings, and provider highlights to help build their confidence in the product’s ability to serve their health needs and increase interest in downloading the app.
As noted earlier, a lot of my original UI inspiration was taken from desktop provider databases. Additionally, during my research users mentioned they typically perform a Google search or surf the web for well-vetted professional health websites. Therefore, I knew that I wanted to translate this mobile app into a desktop format so users could comfortably perform provider research across different devices.
Because most of my design focus had been on detailing functionality related to the provider search feature, I wanted to take this opportunity to highlight another important feature of the application - the community forum.
Referring back to my persona, one of Mia’s key motivations is to prioritize learning about the real, lived experiences of others when making informed decisions about her health, and is left frustrated by the stigmatization around openly discussing SRH concerns.
That said, I built a prototype focused on a user navigating a provider’s profile details and then viewing a community forum thread - in this case, #ILoveMyOB. I drew my design inspiration from popular forums and blog post apps like Reddit and Tumblr.
What's the design impact of SRH Collective?
One thing is clear - people who can get pregnant in the U.S. struggle to find SRH providers that meet their needs and take their concerns seriously. This is a serious public health problem - and as a result, many are left without reliable access to care.
and similar to design, the standards of healthcare are dynamic and never stagnant. This is a complex problem space, and there is much more functionality to brainstorm and build out before this project could go to market. To start, I've pondered two important questions throughout the design process:
...which led me to consider the outcomes and solutions to the Tarot Card of Tech - The Backstabber.
While apps are a great way to help empower people to take control of their health and provide tailored care, like anything else, they are still susceptible to error if not managed or regulated effectively. As most of us know, one’s health can be very personal and certainly nothing to take lightly.
Like any healthcare system, these are all concerns that I would take very seriously moving forward in my product design to ensure the app data is being managed and protected in accordance with ethical standards and regulations. Some preliminary ideas for solutions include:
Thank you so much to BrainStation, and all my fantastic instructors! It's been a journey, but I have truly enjoyed the ride.
Looking forward to many more.
A few lessons that will stick with me...
If you like what you see and want to work together, let's talk!
amweber95@gmail.com