Our Cancer Stories is a website designed to provide support and reliable information to those whose lives are impacted by cancer.
This website is launched in September 2024.
My role:
Responsive Website Design
UI/UX Design
Branding
Social Media
Project Timeline:
10 Months
My goal is to create a user-friendly experience by organising the content around the 5 cancer types. With clear categorisation of the stories and articles sections, users can access the content to their needs.
Key Design 1
Navigate 300+ Stories with Ease
The Challenge
To find relevant cancer stories on the website with over 300 stories (and counting) across different cancer types.
The Solution
Filter function on story landing page. Users can easily navigate and filter the story according to cancer type, stage, location and more.
A featured icon on selected stories directs users to more in-depth stories while also allowing the team to highlight different stories periodically.
Key Design 2
Story Cards
Exploration ✍🏼
User Feedback 📝
"I don't really know which cancer they are diagnosed with when I look at the cards."
"I would like to know more about their current status and where they are from."
"I couldn’t find any explanation of what ‘survivor’ or ‘warrior’ means, and I feel that not everyone in the community may be comfortable with these terms."
The Challenge
-
A clear and concise card that contains all the necessary info, for example name, age and cancer type
-
User is able to identify the story they want to explore further given the limited info
The Solution
-
A clear and concise card that contains necessary info with improved visual hierarchy
-
The details on the story card help users filter for the story they’re seeking and encourage them to click and explore further.
My Key Takeaways:
After going through multiples iterations and rounds of user feedback, I have a clearer understanding of the essential info users expect on the story card.
This design process trained me to focus on user-centred design and pay attention to how visual hierarchy shapes their perception of information.
Key Design 3
Categorisation Framework for Articles Sorting
The Challenge: Cancer Landing Page
- Navigation bar doesn't stand out in the sea of information.
- Above the fold content doesn't encourage users to scroll down and explore more
The Challenge: Cancer Category Page
Lack of structure and unorganised articles. Making it difficult for users to find relevant information quickly and navigate through the content efficiently.
The Solution
Together with writer and editor, we designed and developed a framework for articles categorisation. The result is a smoother navigation flow from the landing page to category page, with well-organised article sorting.
Thank you for being here!
This is the first product I officially launched, and it wouldn’t have been possible without the support of an incredible team. This project has been a significant learning experience, helping me grow both as a website and UI/UX designer.
I'm also responsible for leading the social media design and planning. Take a look here!
Instagram: @our.cancer.stories
Disclaimer: Some designs in this case study differ from the live website. I’d love to have a conversation and discuss the details further!
