Overview
Based on the clients needs we wanted to create a brand that communicated hope, unity, and a sense of community. We also wanted to create a website that served as a central hub for resources, fundraising efforts, and personal stories, fostering connections among affected families and providing valuable information to researchers and clinicians.
Goals
Create a resource hub
Establish a brand identity
Design a functional website
Figma | Photoshop
Created detailed wire frames in Figma
Designed graphics in Photoshop/Figma
Collaborated with team on mock ups
Created logos in Figma/Illustrator
Research
We conducted interviews with individuals affected by DIPG, their caregivers, and healthcare providers. Gathered insights into their experiences, challenges, and the information they seek.
Concepting
Our goal was to frame the story here in a way that communicates hope, light, simple and togetherness. One thing we liked was a quote they kept using “widening our circles to end DIPG” and we wanted to incorporate that as a theme. We looked at incorporating warm colors, graphics that played off the circle theme and typography that was web friendly and welcoming.
Logo Design
While designing the logo we wanted to incorporate the warm colors and the circle theme. The circle is a universally recognized symbol of unity, wholeness, and inclusivity. Warm colors, such as oranges, and yellows, evoke feelings of warmth, passion, and connection which complemented the circle.
Site Map
The next step was creating a sitemap as a visual representation or diagram of the structure and organization of a website's content, showing the hierarchy of pages and how they were goin to be interconnected. By visualizing the website's structure, we felt that it would better plan the user experience. We wanted to ensure that navigation menus and links make logical sense, facilitating user-friendly browsing.
Imagery
One of the hardest challenges was figuring out the imagery for the website. We had to make sure that the images represented the organization well and were on brand with the theme and mission. After doing more research and holding more interviews we were able to decide on finding images that were relatable to the families we spoke with.
Design Elements
The next step was putting together the design elements such as buttons, typography and graphics for the development team. We collaborated with the development team daily by holding sessions to make sure that we were on the same page and everything would work effortlessly.
Desktop Build
During the website build phase we made sure to hold working sessions with the client and developers to make sure we were executing everything well. We made updates and changes to the typography and graphics to make sure they were accessible to a broader audience and met the WCAG standards.
Mobile Build
Mobile users have different needs and expectations compared to desktop users. We had to make sure that the mobile version offered an optimized user experience by providing content that is responsive and accessible.