BAYS Website
Situation
Given the increased need to engage online during COVID-19. BAYS, or Bay Area Young Survivors, asked ZS to help them improve engagement with their audience via their website.
Impact and Outcome
The new responsive website has been well received by the organization and its community.
Collaborators
Emily Miller and Andrew Korf
My Role
UX Design Lead, Art Direction
Client
Bay Area Young Survivors
Problem
Client
BAYS is an organization based in the San Francisco Bay Area dedicated to help young cancer survivors (under the age of 30) gather resources and provide emotional support during their cancer recovery journey.
Situation
Given the increased need to engage online during COVID-19. BAYS, or Bay Area Young Survivors, asked us to help them improve engagement with their audience via their website. Their current website lacked a cohesive story that would prevent engagement from donors, and there were many accessibility issues that prevented people from going and staying on the website.
Original website design
Problem
Through talking to the users and the stakeholders of BAYS, we found that the current website was a valuable resource; however, due to the outdated visuals, disorganized content, and accessibility issues, they weren’t able to present themselves in the best way. Not only that, as an organization where their members face a lot of health challenges, designing an accessible website that makes their lives easier, was of paramount importance. The biggest challenge for us was to figure out how to navigate the small budget while providing the most value to our client.
Challenges and Approach
As a lead designer, I was in charge of working with the content writer, re-designing the website, and helping shape the brand design. However, due to budget constraints, we had to move quickly, make lean decisions, and design & develop the website even faster.
Illustration by Emily Miller
Designing with a small budget
Knowing that we had a tight budget, we knew that the website design couldn’t be too custom, as that would cost too much money for development. We also had to move quickly, so we decided to start the design in conjunction with understanding the users. With the input of our stakeholders, we bought a website template that was simple, yet accessible, and planned to rely heavily on our beautiful UI illustrations as the driving point of building the brand. The template also provided an easy way for the members of BAYS to update the information after we were gone. Having usability and accessibility in mind, I designed the navigation, and customized the layout just a bit with UX best practices while plugging in the UI design at the same time.
Illustration by Emily Miller; Homepage Illustration by Me
Transforming the content and design together
I conducted a site audit and partnered with the content writer to strategize how and where to put their resources, service, and mission statement in the web design. We talked to the users during the content transformation to ensure that our designs fit their needs, and developed a clickable prototype along the way to get feedback.
Telling a Story with a New Art Direction
At the same time as the wire-framing, I strategized with an illustrator on the creative direction of the brand. We applied different ideas on the landing page design, before settling on a watercolor style that celebrated life. We wanted to craft a personal brand about cancer survivors so painting sketchbook illustrations about San Francisco and the bonds in the community was the way to go. As a San Francisco artist myself, I was able to contribute to the landing page illustrations as well. After finalizing the content, the UI illustrations, and the UX, I closely partnered with the web developer to make the website and the mobile site come alive.
Explorations for the Art Direction by Me
Design
The original website had many issues regarding the accessibility and visual design. With the new website, we were able to better represent the organization, and provide immense value with the usability of the site.
Illustrations by Emily Miller
Outcomes
The new responsive website has been well received by the organization and its community while also helping BAYS raise awareness of their unique services.
Homepage illustration by Me