Project Brief
I worked on the redesign of the "Simply Periods" website, a platform dedicated to breaking the stigma around menstruation and promoting menstrual health. The goal was to create a more engaging and user-friendly interface that aligns with the platform’s mission and values while improving accessibility and functionality.
My Role
User Experience Designer
Softwares
Figma, Photoshop, JIRA, Miro, Illustrator
Team
Collaborated with a team of designers, developers, and researchers.
Goal
Improve navigation, visual appeal, and accessibility to enhance user engagement, particularly for athletes, young women, and educators.
Design Problem
The previous design of the "Simply Periods" website lacked intuitive navigation and a clear visual hierarchy. Users, especially young girls and educators, found it difficult to access important information easily. There was also a need to improve the mobile experience, as many users accessed the site on their phones.
Key Issues
Cluttered Navigation
Users had difficulty locating resources, articles, and guidelines due to poor information architecture and a confusing layout
Outdated Visual Design
The interface lacked visual appeal, especially for younger audiences, resulting in low engagement with the site’s content.
Inconsistent Accessibility
The previous site did not adhere to accessibility best practices, creating barriers for users with diverse needs.
Primary Research
The goal of our primary research was to gather insights from real users to better understand their pain points, behaviors, and expectations when it comes to accessing menstrual health resources online. This research helped shape the website redesign and ensured that the new interface was aligned with user needs.
Methodologies Used
Target Group- Athletes, young girls, parents, and educators who actively use online platforms to access menstrual health information.
Findings- Users found it difficult to locate essential resources due to the previous site’s confusing navigation.
There was a strong desire for more visually engaging content that speaks to younger users.
Participants- 100+ respondents, including students, athletes, and educators.
Findings- 78% of respondents preferred structured sections with clear labels for quick access to relevant content (e.g., guidelines, articles, workshops).
Many users expressed interest in contributing personal stories and connecting with a like-minded community.
Secondary Research
Our secondary research focused on analyzing existing menstrual health websites and identifying industry standards in terms of accessibility, design trends, and mobile-first practices.
Key Findings
Competitive Analysis: We analyzed similar platforms, such as Clue and Flo, which provide menstrual health tracking and education. Both platforms had clean, intuitive navigation and emphasized visual appeal, which catered to a younger demographic.
Design Guidelines & Trends: A focus on bold, vibrant color schemes is often used to make sensitive topics feel approachable and less clinical, resonating with young users.
Accessibility Standards: Web Content Accessibility Guidelines (WCAG) recommended ensuring proper color contrast, readable fonts, and intuitive navigation to cater to users with visual impairments or disabilities.
Best practices also suggest incorporating alt-text for images, clear headings, and keyboard navigation for better inclusivity.
User Persona
The Design Process
Research & User Insights: We began with user research, interviewing the platform’s primary audience—athletes, young girls, parents, and coaches. This helped us identify their frustrations and gather key insights on how they navigated the site.
Wireframing & Prototyping: After analyzing user feedback, we developed wireframes that outlined the new structure and layout. These evolved into high-fidelity prototypes, which we tested with a small group of users to gather feedback and refine the design.
Visual Design & Development: Based on the wireframes, we created a vibrant and welcoming visual identity for the site. The development team ensured the design was responsive, fast-loading, and user-friendly.
User Testing & Iteration: We conducted several rounds of user testing to validate our design decisions. Feedback was positive, particularly around ease of navigation and visual appeal, which allowed us to iterate and fine-tune the final version.
Challenges
Increasing User Engagement
Encouraging users to interact more with the educational materials, guidelines, and community stories was crucial.
Designing for Diverse User Groups
Our design had to appeal to a broad demographic, including young girls, educators, athletes, parents, and coaches.
Ensuring Seamless Mobile Experience
With a majority of the audience accessing the site via smartphones, creating a responsive design was essential to cater to various screen sizes and device types.
?
Solutions
Streamlined the site's navigation, organizing resources, articles, and guidelines into color-coded sections for easy access. Quick links to menstruation, training, nutrition, and workshops made it simple for users to find relevant content.
Revamped the visual design with a vibrant color palette, bold typography, and high-quality imagery to engage the target audience. Consistent layouts and interactive sections, like personal stories, fostered community engagement and improved content readability.
We followed WCAG guidelines, optimizing color contrast, font sizes, and layout consistency for easy navigation. Alt-text, clear headings, and video captions were added to ensure inclusivity for all users.
Storyboard
Wireframes
During the wireframing phase, we collaborated closely with all stakeholders, gathering insights from developers, designers, and project leads. This iterative feedback loop ensured that our wireframes aligned with the project's goals and user needs. By fostering open communication and a shared sense of ownership, we were able to craft wireframes that served as a strong foundation for the final design. This collaborative approach ultimately led to a cohesive and user-centered solution.
Visual Design
This introductory screen of the redesigned Simply Periods website highlights key resources and promotes easy access to essential information on menstruation and athletic performance. The vibrant color palette and intuitive layout emphasize guidance for athletes, parents, and coaches, while dedicated icons help users quickly identify topics like nutrition and training. The design aims to foster a supportive learning space, breaking down menstrual health stigmas in an engaging, accessible format.
How does it help?
This section of the Simply Periods website offers categorized video resources for athletes, coaches, and parents.
The aim is to provide tailored guidance on training, nutrition, and menstrual health, helping each group manage period-related challenges and promote awareness. Clear labels and curated video selections make it easy for users to access relevant content quickly.
Users can browse the latest articles and videos to deepen their health knowledge.
Results & Impact
The redesigned "Simply Periods" website successfully met the project’s goals.
Improved Engagement
Users are now more engaged with the educational resources and are spending longer periods on the site. The interactive sections (such as personal stories and workshops) have seen significant increases in participation.
Positive User Feedback
The revamped visual design resonated well with the target audience. Young girls, educators, and athletes praised the fresh look and feel of the site, commenting on its ease of use and overall aesthetic appeal.
Increased Accessibility
Accessibility improvements have expanded the site’s reach, making it more inclusive and usable for individuals with disabilities.
Key Takeaways
1
Collaborative Design Process: The success of this project highlights the power of collaboration. From wireframing and prototyping to final implementation, the iterative design process ensured we were constantly improving based on user feedback and testing.
2
User-Centric Approach: By focusing on the end-user’s needs, we were able to create an interface that not only looks visually appealing but also enhances the user experience, increasing engagement and accessibility. Listening to our users from the start played a key role in building a solution that worked.
Thanks for taking the time to watch!