OAK Website Redesign
Role
Deliverables
Designer (Team of four)
Mental Health Toolkits
Website Redesign Handoff
Design System
Timeline
Skills
January 2024 - June 2024
Webdesign
User Research
Design System
Visual Design
Tools
Figma
Context
Oncology & Kids (OAK) is a non-profit organization that aims to provide a voice, community, and a sense of normalcy to children with cancer and their families who bear the emotional toll of diagnosis and treatment. I was one of two designers in our overall group of four.
Research
Understanding OAK & General User Sphere
Our team performed a website audit of their original website to get an understanding of what other people think of the current website. We surveyed about 20+ people to give us feedback about the website.
Old Website Homepage
"Really interesting colors, inviting header" - Bernard​
​
Good: Spanish Option and Strong Intro
The "upcoming activities" are not up to date with current programs running on social media/direct to old activities" -Samantha
​
Bad: Not updated events
​​
Bad: Why is Merch in Activites?
​​
Bad: Way too Wordy
We conducted a survey for the OAK community to also get a grasp how current users interact and perceive the website. We would get 15+ surveys and below are results we found from the survey.
80%
Of users said they used the site to find information about current events & volunteering 2
50%
Users had difficulty navigating and finding the website for information.
60%
Dissatisfaction rate with current state of website, due to difficulty navigating
What the Acorn?
After conducting these surveys, we would gain a better sense of OAK and the "acorn" mentality that was missing from the website. The acorn essentially is the growth of greatness that, if nurtured properly, can become "Mighty As An OAK Tree!"—Bernard. We would start developing and designing their website through this understanding and our own investigation of the mood board.
Logo Analysis
Mood Board
Design
Discovering OAK to Lay the Roadmap
Before we start any design work, we create a site map that helps us know what exactly we need to have within the pages we all develop and give feedback about the information architecture presented.
Information Architecture Map
Revamping Design System to Better Represent OAK!
With their old design system, they commissioned a designer who primarily focused on bar designs. Our team and NPO were happy with the logos created for the NPO, but they felt that the typography and colors could be simplified and changed to better fit the organization's energetic and bold nature.
Testing out Different Layouts
Through the different ideas and feedback from our NPO and each other, we created different designs we liked! Due to this drawback, I told the members not to worry about the design system until we start heading into high-fidelity so they can understand website design principles. Here are two Lo-Fi's we made:
Final Redesign
We would do a last survey of 20+ designers and the founders to give feedback about our updated website and design system and these are the comments made below.
83%
Said the website was much more easier to navigate, and faster to find information
All Users
Website represents OAK very well and easily understood who they were
75%
Enjoyed the increase usage of photos and videos and the new design system.
We focused on making the website accessible, digestible, and user friendly by rebranding the color scheme, typography, and reorganized how the content was laid out. In the sections below, I explained why we made some of our design decisions for each page in the website.
Homepage
-
video on landing page to easily summarize the organization's mission
-
mission statement as one of the first things users see so they know what OAK is about
-
Statstics to quantify the impact made by the club on the community
-
Divided the camps and resources to make it easier for users to distinguish the programs apart
-
Directly shows how users can get involved
-
added their different forms of contact on all the pages at the bottom
About Me
-
Clear one statement about their purpose as the title
-
Concisely explains OAK's backgrounds and values with clear visuals
-
creates empathy within the user by explaining why they should help
-
visually explains how the logo came about clearly​
-
Gives chance for user to support the mission after reading more about the cause
Meet the Team
-
clearly highlights the founders and provides pictures unlike before
-
shows users that volunteers are appreciated too to highlight that this is a great place to get involved
-
Clearly shows the partners
-
Consistently gives users a chance to get involved in order to grow their organization
Donate
-
Directly explains where the donation will be going towards
-
provides chance to donate on the website directly
-
Allows for sponsorships to be more accessible rather than people having to email the company
Camps
-
Provides a separate tab for all the programs to be listed out
-
eligibility and FAQ clearly displayed rather than an unorganized block of text
Camp Details
-
clicking on a program pops up a separate page with more information and qualification for the project
-
direct link for registration provided
Contact
-
clear dates provided for volunteer registration
-
logo clearly demonstrate the purpose of the links
Volunteer
-
gives different modes for users to stay in contact
-
logo clearly demonstrate the purpose of the links
-
makes users feel cared for as OAK strives for inclusivity
Conclusion & Personal Insights
Personal Contribution
I created the homepage, camp details, donate, and contact us. As a group, we collaborated and edited all the pages together to make sure we were all in agreement.
​
Future for OAK & Handing Off Website Redesign
At the end of our project, we hand them these designs and a new design system for them to implement in the future on their squarespace! It was absolutely amazing to work with this communicative and positive NPO. I truly learned a lot as a designer on this team and I am excited to see the website when OAK implements it.
​
​
Reflection
In Adversity, Communication is Key!
Working on a long-term design project as part of a team was a valuable learning experience, especially as we faced challenges like losing two designers along the way. Some team members contributed more than others, making it difficult to meet our expectations. This experience taught me the importance of setting clear expectations and deadlines from the start to ensure accountability and prevent complacency. Additionally, I realized how crucial open communication and transparency are between our team and the NPO to align expectations and establish more realistic deadlines.