UX Case Study

IEMHP Membership Landing Page Redisgn

Project Background


Infant and Early Mental Health Promotion (IEMHP) is a national organization which improves outcomes across the lifespan through translating and promoting the science of early mental health into practice with families during pregnancy, infancy, and early childhood. 

IEMHP had been using Kentico as their website building platform. They had decided to transition to WireApricot, a membership management-focused website, to enhance the management and privacy of their membership resources.

Within a three-week timeframe, my team was given the responsibility of designing the membership landing page, aiming to create an appealing and user-friendly page that effectively communicates the benefits of membership and provides an optimized experience for potential and existing members.

Project Background

Infant and Early Mental Health Promotion (IEMHP) is a national organization which improves outcomes across the lifespan through translating and promoting the science of early mental health into practice with families during pregnancy, infancy, and early childhood. 

IEMHP had been using Kentico as their website building platform. They had decided to transition to WireApricot, a membership management-focused website, to enhance the management and privacy of their membership resources.

Within a three-week timeframe, my team was given the responsibility of designing the membership landing page, aiming to create an appealing and user-friendly page that effectively communicates the benefits of membership and provides an optimized experience for potential and existing members.

Project Background

Infant and Early Mental Health Promotion (IEMHP) is a national organization which improves outcomes across the lifespan through translating and promoting the science of early mental health into practice with families during pregnancy, infancy, and early childhood. 

IEMHP had been using Kentico as their website building platform. They had decided to transition to WireApricot, a membership management-focused website, to enhance the management and privacy of their membership resources.

Within a three-week timeframe, my team was given the responsibility of designing the membership landing page, aiming to create an appealing and user-friendly page that effectively communicates the benefits of membership and provides an optimized experience for potential and existing members.

My Role

UX Designer

Team Size

2 People

Timeline

3 Weeks - Nov 2022 to Dec 2022

My Role

User Research, Comparitive Analysis, User Experience, User Interface Design

The Problem

The organization encounters significant challenges in effectively reaching and engaging a broader audience, promoting their programs to society, and attracting new members.

The organization struggles to effectively communicate their mission and demonstrate their unique value, resulting in limited visibility and awareness of their impactful programs and initiatives.

The Problem

The organization encounters significant challenges in effectively reaching and engaging a broader audience, promoting their programs to society, and attracting new members.

The organization struggles to effectively communicate their mission and demonstrate their unique value, resulting in limited visibility and awareness of their impactful programs and initiatives.

The Problem

The organization encounters significant challenges in effectively reaching and engaging a broader audience, promoting their programs to society, and attracting new members.

The organization struggles to effectively communicate their mission and demonstrate their unique value, resulting in limited visibility and awareness of their impactful programs and initiatives.

The Goal

The goal of the project is to redesign the membership page of Infant and Early Mental Health Promotion (IEMHP) to increase user engagement and encourage more people to sign up for the membership program.

The redesigned page should effectively communicate the value and benefits of the membership, provide clear information about upcoming programs and activities, and create a user-friendly experience that motivates users to take action.

The Goal

The goal of the project is to redesign the membership page of Infant and Early Mental Health Promotion (IEMHP) to increase user engagement and encourage more people to sign up for the membership program.

The redesigned page should effectively communicate the value and benefits of the membership, provide clear information about upcoming programs and activities, and create a user-friendly experience that motivates users to take action.

The Goal

The goal of the project is to redesign the membership page of Infant and Early Mental Health Promotion (IEMHP) to increase user engagement and encourage more people to sign up for the membership program.

The redesigned page should effectively communicate the value and benefits of the membership, provide clear information about upcoming programs and activities, and create a user-friendly experience that motivates users to take action.

My Contribution

As the UX designer in a small 2-person team working on the IEMHP membership redesign project, my role encompassed conducting user research, designing, and creating interactive prototypes with a strong focus on user-centered design principles.

Employing the Agile approach, I divided the project timeline into three sprints to ensure efficient progress. This Agile approach allowed for iterative improvements and collaboration within the 3-week timeframe.

Overall, my contribution focused on delivering a user-centered design solution through research, design, and prototyping in a timely manner.

My Contribution

As the UX designer in a small 2-person team working on the IEMHP membership redesign project, my role encompassed conducting user research, designing, and creating interactive prototypes with a strong focus on user-centered design principles.

Employing the Agile approach, I divided the project timeline into three sprints to ensure efficient progress. This Agile approach allowed for iterative improvements and collaboration within the 3-week timeframe.

Overall, my contribution focused on delivering a user-centered design solution through research, design, and prototyping in a timely manner.

My Contribution

As the UX designer in a small 2-person team working on the IEMHP membership redesign project, my role encompassed conducting user research, designing, and creating interactive prototypes with a strong focus on user-centered design principles.

Employing the Agile approach, I divided the project timeline into three sprints to ensure efficient progress. This Agile approach allowed for iterative improvements and collaboration within the 3-week timeframe.

Overall, my contribution focused on delivering a user-centered design solution through research, design, and prototyping in a timely manner.

Sprint 01 - Week 01

Sprint 1 involved conducting thorough user research, gathering valuable insights to inform the subsequent design process.

To initiate the redesign of the membership page, our team engaged in a comprehensive discussion to gain a thorough understanding of the organization's requirements, gather existing stakeholder knowledge, align expectations, and establish consensus on the project's plans, priorities, direction, and key milestones.

User Research: Interviews and Surveys

To gain insights into user needs and expectations, user research was conducted.

As part of the research process, I engaged a total of 10 participants, which involved conducting 3 user interviews with both current and potential members of the IEMHP organization.

The objective was to gain insights into their preferences, needs, and pain points regarding the IEMHP membership page and its associated features.

User Research: Interviews and Surveys

To gain insights into user needs and expectations, user research was conducted.

As part of the research process, I engaged a total of 10 participants, which involved conducting 3 user interviews with both current and potential members of the IEMHP organization.

The objective was to gain insights into their preferences, needs, and pain points regarding the IEMHP membership page and its associated features.

User Research: Interviews and Surveys

To gain insights into user needs and expectations, user research was conducted.

As part of the research process, I engaged a total of 10 participants, which involved conducting 3 user interviews with both current and potential members of the IEMHP organization.

The objective was to gain insights into their preferences, needs, and pain points regarding the IEMHP membership page and its associated features.

Questions We Ask Include:

  1. How familiar are you with Infant and Early Mental Health Promotion (IEMHP)?

  1. What factors would motivate you to become a member of IEMHP?

  1. What challenges or barriers, if any, have prevented you from becoming a member of IEMHP?

  1. How would you rate the current IEMHP website in terms of its design and user-friendliness?

  1. What improvements would you like to see in the design and functionality of the IEMHP website's membership page?

User Research: User Pain Points

After engaging 10 participants and conducting 3 user interviews, I used the Afifinity Diagram to identify common themes within the collected data.

Based on the result, here are some common user pain points that could have been identified.

User Research: User Pain Points

After engaging 10 participants and conducting 3 user interviews, I used the Afifinity Diagram to identify common themes within the collected data.

Based on the result, here are some common user pain points that could have been identified.

User Research: User Pain Points

After engaging 10 participants and conducting 3 user interviews, I used the Afifinity Diagram to identify common themes within the collected data.

Based on the result, here are some common user pain points that could have been identified.

1. Lack of Awareness

7 out of 10 users were not familiar with IEMHP and its membership program, leading to a lower conversion rate.

2. Unclear Value Proposition

8 out of 10 users did not fully understand the benefits and value of becoming a member, which reduced their motivation to sign up.

3. Inadequate Visual Hierarchy

10 out of 10 users find it difficult to locate essential information and navigate through the page.

4. Inadequate Mobile Experience

10 out of 10 users have reported that the current design does not effectively adjust to different screen sizes, including mobile and tablet devices. As a consequence, they encounter challenges such as encountering small text, overlapping elements, and distorted visuals.

User Personas

Based on the collected research data, I've created two user personas representing different levels of tech-friendliness.

The first persona - Michael depicts a less tech-savvy user who struggles with technology-related tasks due to limited experience and familiarity with the internet and devices.

The second persona - Emily represents a highly tech-savvy user proficient in using various digital tools and actively engaged in internet and technology-related activities.

User Personas

Based on the collected research data, I've created two user personas representing different levels of tech-friendliness.

The first persona - Michael depicts a less tech-savvy user who struggles with technology-related tasks due to limited experience and familiarity with the internet and devices.

The second persona - Emily represents a highly tech-savvy user proficient in using various digital tools and actively engaged in internet and technology-related activities.

User Personas

Based on the collected research data, I've created two user personas representing different levels of tech-friendliness.

The first persona - Michael depicts a less tech-savvy user who struggles with technology-related tasks due to limited experience and familiarity with the internet and devices.

The second persona - Emily represents a highly tech-savvy user proficient in using various digital tools and actively engaged in internet and technology-related activities.

Research: Current Site Analysis

Our team conducted a thorough review of the current landing page of the Infrant and Early Mental Health membership website.

The objective was to identify the existing areas of focus and propose improvements that address the needs of both the organization and its users.

We found that the current website is burdened with excessive, text-heavy content that lacks clear guidance for user sign-ups and fails to effectively showcase the benefits of membership.

Additionally, the preview of member-exclusive content is disorganized and overwhelming, discouraging users instead of captivating them with concise and appealing informatio

Research: Current Site Analysis

Our team conducted a thorough review of the current landing page of the Infrant and Early Mental Health membership website.

The objective was to identify the existing areas of focus and propose improvements that address the needs of both the organization and its users.

We found that the current website is burdened with excessive, text-heavy content that lacks clear guidance for user sign-ups and fails to effectively showcase the benefits of membership.

Additionally, the preview of member-exclusive content is disorganized and overwhelming, discouraging users instead of captivating them with concise and appealing informatio

Research: Current Site Analysis

Our team conducted a thorough review of the current landing page of the Infrant and Early Mental Health membership website.

The objective was to identify the existing areas of focus and propose improvements that address the needs of both the organization and its users.

We found that the current website is burdened with excessive, text-heavy content that lacks clear guidance for user sign-ups and fails to effectively showcase the benefits of membership.

Additionally, the preview of member-exclusive content is disorganized and overwhelming, discouraging users instead of captivating them with concise and appealing informatio

Research: Competitor Analysis

During the research phase, a competitive analysis was conducted to understand how other membership programs in the field of early childhood development approach their online presence. 

This analysis involved examining the websites and membership pages of similar organizations to gain insights into their design, content, and user experience. 

I began the research by analyzing the membership page of several non-profit organizations, including Connecticut Association For Infant Mental Health, The Association for Infant Mental Health, and Oklahoma Association for Infant Mental Health.

Here are a few examples of key findings from the competitive analysis:

Research: Competitor Analysis

During the research phase, a competitive analysis was conducted to understand how other membership programs in the field of early childhood development approach their online presence. 

This analysis involved examining the websites and membership pages of similar organizations to gain insights into their design, content, and user experience. 

I began the research by analyzing the membership page of several non-profit organizations, including Connecticut Association For Infant Mental Health, The Association for Infant Mental Health, and Oklahoma Association for Infant Mental Health.

Here are a few examples of key findings from the competitive analysis:

Research: Competitor Analysis

During the research phase, a competitive analysis was conducted to understand how other membership programs in the field of early childhood development approach their online presence. 

This analysis involved examining the websites and membership pages of similar organizations to gain insights into their design, content, and user experience. 

I began the research by analyzing the membership page of several non-profit organizations, including Connecticut Association For Infant Mental Health, The Association for Infant Mental Health, and Oklahoma Association for Infant Mental Health.

Here are a few examples of key findings from the competitive analysis:

  1. A prominent design pattern we observed across these websites was the placement of the "Join" or "Become a Member" button as the primary call to action.

  • This design choice effectively emphasizes the importance of membership and facilitates user engagement. 

  • By strategically placing the membership button in a prominent location, such as the header, sidebar, or a dedicated membership section, non-profit organizations prioritize user involvement and streamline the process of joining. 

  • This design pattern aims to make it easier and more efficient for users to become members, ensuring a seamless and user-friendly experience that encourages active participation in the organization's initiatives.

  1. During our analysis of non-profit websites, we observed a recurring design pattern where each organization prominently displayed a list of benefits for becoming a member. 

  • This approach played a crucial role in effectively communicating the mission of each non-profit to users and helping them gain a better understanding of the organization's purpose and activities. 

  • By highlighting the specific advantages and privileges that come with membership, these non-profits were able to engage users and convey the value of supporting their cause. 

  • This practice proved instrumental in informing users about the benefits they would receive by joining and contributed to a better overall user experience.

Sprint 02 - Week 02

During Sprint 2, I smoothly progressed from analyzing research findings to creating wireframe designs, ensuring they aligned with user-centered design principles.

Design Phase - From Paper to Digital Wireframe

Once I completed the consolidation of the research findings and solidified the solution, I embarked on the journey of exploring diverse design possibilities for the website.

My process commenced with sketching the initial ideas before transitioning to the creation of a digital wireframe.

Following the simplification and refinement of the designs on paper wireframes, I proceeded to develop low-fidelity wireframes.

Throughout the ongoing initial design phase, I ensured that the screen designs were rooted in the feedback and insights gathered from the user research.

Design Phase - From Paper to Digital Wireframe

Once I completed the consolidation of the research findings and solidified the solution, I embarked on the journey of exploring diverse design possibilities for the website.

My process commenced with sketching the initial ideas before transitioning to the creation of a digital wireframe.

Following the simplification and refinement of the designs on paper wireframes, I proceeded to develop low-fidelity wireframes.

Throughout the ongoing initial design phase, I ensured that the screen designs were rooted in the feedback and insights gathered from the user research.

Design Phase - From Paper to Digital Wireframe

Once I completed the consolidation of the research findings and solidified the solution, I embarked on the journey of exploring diverse design possibilities for the website.

My process commenced with sketching the initial ideas before transitioning to the creation of a digital wireframe.

Following the simplification and refinement of the designs on paper wireframes, I proceeded to develop low-fidelity wireframes.

Throughout the ongoing initial design phase, I ensured that the screen designs were rooted in the feedback and insights gathered from the user research.

Usability Study Findings: Low-fidelity Prototype

Based on the above wireframes, I conducted usability testing with a group of 5 participants, consisting of primary stakeholders, existing members, and potential members.

This valuable feedback guided me in determining the elements to incorporate in the final user experience, as I prepare for the next phase of design iteration.

The user testing revealed that users found the website to be user-friendly overall.

Usability Study Findings: Low-fidelity Prototype

Based on the above wireframes, I conducted usability testing with a group of 5 participants, consisting of primary stakeholders, existing members, and potential members.

This valuable feedback guided me in determining the elements to incorporate in the final user experience, as I prepare for the next phase of design iteration.

The user testing revealed that users found the website to be user-friendly overall.

Usability Study Findings: Low-fidelity Prototype

Based on the above wireframes, I conducted usability testing with a group of 5 participants, consisting of primary stakeholders, existing members, and potential members.

This valuable feedback guided me in determining the elements to incorporate in the final user experience, as I prepare for the next phase of design iteration.

The user testing revealed that users found the website to be user-friendly overall.

However, 4 out of 5 expressed concern about not being able to view the complete list of excessive membership-exclusive content in one section. They find it inconvenient to have to click "View All" to access more membership-exclusive content, considering it an extra step that lacks efficiency.

Taking this valuable feedback into consideration, I made the following changes:

Rather than displaying just some of membership-exclusive contents with a "View All" button, I have opted to list all the membership-exclusive contents directly on the membership landing page. This allows users to see and access all the contents without the need to navigate to another page.

Before Usability Study

After Usability Study

Once the functionality of our design was solidified, we proceeded to the next stage: designing the user interface (UI).

Sprint 03 - Week 03

In Sprint 3, I transformed the wireframes into high-fidelity mockups, delivering a polished and user-centric visual experience.

From Wireframe to Mockup

After incorporating feedback from testing the low-fidelity prototype, I proceeded to create mockups that align with the branding of Infrant and Early Mental Health Promotion.

Throughout this phase, I explored multiple design concepts, emphasizing the creation of visually appealing and intuitive layouts that effectively convey the value of the membership program.

From Wireframe to Mockup

After incorporating feedback from testing the low-fidelity prototype, I proceeded to create mockups that align with the branding of Infrant and Early Mental Health Promotion.

Throughout this phase, I explored multiple design concepts, emphasizing the creation of visually appealing and intuitive layouts that effectively convey the value of the membership program.

From Wireframe to Mockup

After incorporating feedback from testing the low-fidelity prototype, I proceeded to create mockups that align with the branding of Infrant and Early Mental Health Promotion.

Throughout this phase, I explored multiple design concepts, emphasizing the creation of visually appealing and intuitive layouts that effectively convey the value of the membership program.

  1. Simplify the layout: To enhance the user experience, I have implemented a redesigned membership page with a clean and organized layout. The information is now presented in a more user-friendly manner, utilizing headings, subheadings, and bullet points to break down the content into easily scannable sections. By avoiding excessive text and dense content, we aim to prevent overwhelming users and ensure that the information is easily digestible and accessible.

  1. Call-to-action buttons: To encourage users to sign up for membership, I have incorporated prominent and visually appealing call-to-action buttons throughout the design. These buttons are strategically placed to guide users and draw their attention. Using clear and concise phrases such as "Become a Member," I aim to motivate users to take action and join the membership program. By making the call-to-action buttons visually appealing and using persuasive language, the design encourages users to engage and become members.

  1. Highlight the benefits: In order to effectively communicate the benefits of becoming a member, I have created a dedicated section called "Why IEMHP Membership." This section aims to highlight the prominent advantages and value of joining the organization. It includes key points such as discounts on events, access to member-exclusive content, networking opportunities, and the ability to contribute to the organization's mission. By prominently showcasing these benefits, potential members can easily understand the advantages they would gain from becoming a member.

  1. Concise preview of exclusive conten: Showcase a brief preview of the member-exclusive content to users. In each member-exclusive card, you will find an captivating image that showcases the content, along with a clear display of the resource format. Additionally, a concise summary is provided, highlighting the exclusive and valuable resources and information available only to members.

  1. Optimize for tablet and mobile devices: Acknowledging the increasing use of smartphones and tablets for website access, I have prioritized the comprehensive responsiveness and optimization of the membership page to cater to these devices. By implementing responsive design principles, I have ensured that the page seamlessly adapts to various screen sizes, providing a user-friendly experience for smartphone and tablet users. This optimization ensures that users can easily navigate the membership page, access its content, and engage with its features, regardless of the device they choose to use.

Mockup For Tablet

Mockup For Mobile

Next Step

Streamline the sign-up process: Make the sign-up process clear and straightforward. Avoid lengthy forms and only ask for essential information initially.

Regularly review the performance of the membership page, gather feedback from users, and make iterative improvements based on their suggestions. This will help us to create a user-centric experience that encourages more individuals to become members of Infrant and Early Mental Health Promotion.

Next Step

Streamline the sign-up process: Make the sign-up process clear and straightforward. Avoid lengthy forms and only ask for essential information initially.

Regularly review the performance of the membership page, gather feedback from users, and make iterative improvements based on their suggestions. This will help us to create a user-centric experience that encourages more individuals to become members of Infrant and Early Mental Health Promotion.

Next Step

Streamline the sign-up process: Make the sign-up process clear and straightforward. Avoid lengthy forms and only ask for essential information initially.

Regularly review the performance of the membership page, gather feedback from users, and make iterative improvements based on their suggestions. This will help us to create a user-centric experience that encourages more individuals to become members of Infrant and Early Mental Health Promotion.

Takeaways:

Engaging in this project has truly been an extraordinary learning journey for me.

Given the constraints of our relatively short timeline of 3 weeks, I am truly amazed by the remarkable amount of work our team was able to accomplish.

Personally, I have gained invaluable insights into the intricacies of the design process, the dynamics of effective collaboration, and the art of working harmoniously within a team.

Furthermore, this experience provided me with significant self-discovery and growth opportunities.

Takeaways:

Engaging in this project has truly been an extraordinary learning journey for me.

Given the constraints of our relatively short timeline of 3 weeks, I am truly amazed by the remarkable amount of work our team was able to accomplish.

Personally, I have gained invaluable insights into the intricacies of the design process, the dynamics of effective collaboration, and the art of working harmoniously within a team.

Furthermore, this experience provided me with significant self-discovery and growth opportunities.

Takeaways:

Engaging in this project has truly been an extraordinary learning journey for me.

Given the constraints of our relatively short timeline of 3 weeks, I am truly amazed by the remarkable amount of work our team was able to accomplish.

Personally, I have gained invaluable insights into the intricacies of the design process, the dynamics of effective collaboration, and the art of working harmoniously within a team.

Furthermore, this experience provided me with significant self-discovery and growth opportunities.

Thank you for taking the time to review my case study on the redesign of the membership page for Infrant and Early Mental Health Promotion. I genuinely appreciate your valuable input and feedback.