top of page

KCancer

Website Redesign

OVERVIEW

K Cancer, is a non-profit organization dedicated to assisting children with cancer and their families. The organization also trains teenagers in softball, business, and leadership, enabling them to raise funds for the support of children and families affected by cancer.

WHY

The current KCancer website's outdated design and complex layout impede user accessibility and obscure the organization's triple mission: showcasing impact, driving donations, and establishing a cancer resource repository. This hampers effective stakeholder engagement and fails to meet donor expectations for transparent donation utilization.

CHALLENGE

How might we provide streamlined redesign of KCancer's official website to improve navigation, enhance transparency, and enable content organization.

MY ROLE

UX Lead

Interviews

Sitemaps

Wireframing

Prototyping

COLLABORATION

1 Founder

4 UX Designers

1 Mentor

TOOLS USED

Figma

Miro

OptimalSort

Wix

TIMELINE

10 Weeks

DIGITAL SOLUTION

Our solution aims to depict the organization's three main objectives on the website by enhancing user-friendliness for visitors to access necessary information easily, developing a resource repository catering to families with children affected by cancer, and creating a user-friendly donation page that facilitates seamless payments and offers transparency regarding the purpose of the payment.

IMPACT

I asked for the moon and you guys gave me more!

A podcast I heard recently made me think about what the team is doing right now. I’m not sure to what level I agree with the statement but the person on the podcast said, ‘The measure of a person’s soul is the amount of suffering in the world they alleviate’. When I heard that, I thought of what the team is doing. When you hear that you wouldn't go to ‘UX design’. That’s not the first thing you think of. But I can tell you that this work will absolutely alleviate suffering. Getting people to the place on the website to easily make a donation, like a gas card for a family, will truly help… that will alleviate suffering."

DESIGN PROCESS
1. Discover

1.2 User Interviews

 

​

 
2. Define

2.1 User Persona

2.2 User Journey Mapping

​

 
3. Ideate

3.1 User Flows

3.2 Sitemap

3.2 Paper Wireframe

 
4. Prototype

Low Fidelity Wireframe

Mid Fidelity Prototype

High Fidelity Prototype

 
5. Test

5.1 Usability Tests

​

​

1.2 INTERVIEW FINDINGS

  • How can the website attract more involvement/engagement?

  • What obstacles do visitors encounter when performing tasks on the website?

  • Is there an adequate connection between the K Cancer softball team and K Cancer's mission on the website?

  1. Clear Mission Communication: Feature a concise mission statement on the homepage, visually connecting K-Cancer's three facets.

  2. Testimonial Section: Create a dedicated space for impactful stories from families and donors to highlight K-Cancer's impact.

  3. Event Visibility and Newsletter: Ensure easy access to upcoming events through a dedicated page and simplify newsletter sign-ups for regular updates.

  4. Intuitive Resource Repository: Design an easy-to-navigate resource library, allowing user contributions and frequent updates.

I help K-Cancer with grants, but I still don’t know what kind of events are happening cuz, the website is not clear about that!"

2.1 PERSONAS

My teammate created two distinct personas were developed to focus on the distinct audience segments-

Sarah Nowak, a parent of a child with cancer, and Liz Walker, a potential donor,

2.2 HEURISTIC EVALUATION

In our evaluation using Jakob Nielsen's heuristics and considering accessibility, we found several issues with the existing website:

  1. Consistency and Standards:

    • Bulky navigation bar with excessive text and items.

    • Unclear distinction between sections like 'homepage' and 'about us'.

  2. Error Prevention:

    • Forms can be submitted without content.

    • Lack of clear calls to action, such as a 'donate' button.

    • Unclear instructions for engaging with the organization.

    • Inadequate information on event registration.

  3. Accessibility:

    • Text overlay on images causes accessibility issues.

    • Dense, center-aligned paragraphs impede readability.

    • Gender-specific and assumed parental roles may exclude diverse family structures.

Open Card Sort

To resolve the bulky navigation bar issue, we conducted an open Card Sort 1 to understand how users envision the website's structure.

If you're curious - Open Card Sort is a technique where participants are allowed to create their own categories or move items into categories they have created, providing insights into how users naturally organize and structure information.

Theopen card sort did not yield the best results. ​due to insufficient participants, potential biases, difficulty in deriving formal data
Number of Participants

5

Number of Cards

22

Tool

Optimal Sort

Closed Card Sort

To address the issues encountered, we conducted a close card sort, involving participants recruited from K-Cancer’s community Facebook page. In this method, participants were instructed to categorize cards into predefined categories created by us.

Positive Close Card Sort findings with over 70% alignment in most categories, although a few exceptions required attention. Insights from interviews informed the resolution of these anomalies.
Number of Participants
17
Number of Cards
5
Number Of Categories
8
Tool
Optimal Sort​
2.2 CARD SORT

  • The homepage aims to create a welcoming atmosphere, emphasizing humility and inclusivity.

  • It showcases the organization's compassionate mission through understated design elements.

  • Navigation is simplified to ensure visitors can easily access information about the organization's work.

  • Inclusive design principles are employed to ensure everyone feels welcome and represented.

  • User identification section is designed to humbly assist visitors in finding relevant information without overwhelming them.

  • To boost event engagement, we prioritized the 'upcoming events' section on the homepage, utilizing Wix's events calendar feature for seamless updates and sign-ups. This addressed a prior usability issue, enhancing visibility and user engagement with memorial services.

  • Resource Repository Structure:

  • Established a user-friendly structure for the resource repository, enabling easy editing and management. In response to interview insights, the repository was positioned under the 'How We Help' section for enhanced accessibility.

RETROSPECTIVE

Key Takeaways

As a Designer

  1. Adapting the product to align with the client's vision.

  2. Reflecting the organization's mission, beliefs, and impact through the website.

Future Plans

  1. Conduct usability testing, a step delayed due to time constraints.

  2. Establish the 'Toy Drive' feature for the annual event.

  3. Create a dedicated section for the 'Angels' who have passed away.

As a Team Lead

  1. Effective client communication and collaboration.

  2. Ensuring inclusivity and acknowledgment of team members' perspectives.

Thank you

4.1 MAKING IT USABLE TO TEST WITH CUSTOMERS

This is where our ideas came together. We brainstormed different ideas and my contribution to this was the homepage which is what I worked on significantly. Since the client said he wanted it to be like an elevator pitch. So I found this to be a good opportunity.

4.2 VISUAL DESIGN

Collaboration with two other UX designers, I translated the wireframes into detailed visual designs on the Wix platform. Employing the design system and Gestalt's design principles, the process was guided by a structured approach.

bottom of page