Spring 2023
3 Weeks
Photoshop, Bootstrap, CSS, JQuery
This project is a website created to support and educate teens with PCOS in an inclusive and approachable way. It features a user-friendly design with a teal and purple color palette, symbolizing PCOS awareness and positivity. Through diverse imagery and accessible resources, the site fosters understanding and connection for teens managing this condition.
View live projectTeens with PCOS was a website idea for a Public Service Announcement website that I was tasked to create in my Advanced Website Design class. I had come up with the idea of creating a website for young women and teens who have PCOS as it is a website I wish I had when I first got diagnosed with PCOS.
Educate and Raise Awareness: Provide accessible and accurate information about PCOS, including symptoms, treatments, and management strategies.
Increase Understanding: Empower teens with PCOS by offering relatable, age-appropriate educational resource.
Create a Welcoming Space: Use design elements like colors, typography, and imagery to make the site approachable and comforting.
Support Long-Term Impact: Provide ongoing resources and tools to help users manage PCOS and advocate for their health.
The mood board for this project is a gentle yet empowering space crafted with pastel colors - evoking warmth and approachability. The typeface is playful yet clean, designed to resonate with a teenage audience while maintaining readability and professionalism. Together, these design elements create an inviting aesthetic that feels supportive and relatable, making it easier for young individuals navigating PCOS to feel seen and understood.
The wireframes for my website served as the foundation for its structure and layout, ensuring a user-friendly experience. This blueprint helped streamline the design process and provided a clear vision for how content and visuals would flow across the site. The wireframes were designed with the concept of mobile first followed up with tablet and finally desktop.
I combined the wireframes and mood board with photography and written content to craft a visual design in Adobe XD, bringing the project to life. The website’s color palette features teal and purple, chosen for their harmony and the significance of teal as the PCOS awareness ribbon color.
This project challenged me to think about layout design that is most effective for new users to understand and gather the most information that is necessary. This project also challenged me in learning a new programming language - Bootstrap. It was a project revolved around a topic that I was passionate about, and I'm very grateful that I had the opportunity to create something that can help others.