My Role
Redesigned and launched the end-to-end responsive website with significant impact: 30% faster check events, 15% higher satisfaction, and 7% higher donation CTR.
Design methods include sketching 50+ high-fidelity prototypes, personas, cognitive exercises, heuristic evaluation, confidence architecture, and competitive product analysis.
Contributed to design guidelines; Handled one of the core UI components, including research, Ideation, and three rounds of iteration.
Clients
Childhood Leukemia Warriors Foundation
Duration
3 months
Tags
#UX/UI
#user research
#non-profit design
#end-to-end design
#responsive website
Context
Childhood Leukemia Warriors Foundation is a non-profit organization that provides financial support to families during their child's treatment for leukemia.
We eventually launched the website! 👏
Collaboration Methods
Work with clients:
During the 3-month design period, we held zoom meetings with the client every week to inform the design progress and send follow-up emails in time.
Collaborate with team members:
Slack and Zoom for remote communication
Google Shared Docs for Document Organization
Process
The design process was not linear: we moved back and forth between stages.
Click on the image to enlargeDesign Goals
During the first kickoff meeting, our team ensured the business goals and created the project agenda with clients, ensuring everyone was on the same page.
Click on the image to enlargePersona
Based on these three business goals, we built three types of personas that allow us to empathize and make design decisions accordingly.
Click on the image to enlargeResearch
Based on business goals and personas, we conducted research to understand user needs to generate solutions. The research method is as follows:
Competitor Analysis
Cognitive Walkthrough
Heuristic Evaluation
Information Architecture
Brainstorming
UX Strategy Blueprint
Competitor Analysis
A better understanding of how similar organizations present online.
Assess strengths/weaknesses for learning purposes.
Click on the image to enlargeCognitive walkthrough
To evaluate learnability, which refers to how easily the website can be learned.
Click on the image to enlargeHeuristic Evaluation
Examine the interface and judge its compliance with recognized usability principles.
Click on the image to enlargeInformation Architecture
Content Inventory documents the current site structure and visualizes the existing content hierarchy to propose changes.
Card Sort is a qualitative method primarily focusing on how users organize information.
Tree Testing is a quantitative method primarily focusing on finding tasks or information within the information structure.
Click on the image to enlargeBrainstorming
Synthesizing the above research, we listed 6 “How might we”. Then we combined the 6 HWMs with the new information architecture to brainstorm solutions.
Click on the image to enlargeUX Strategy Blueprint
It provided a framework for stakeholders to collaborate on transforming abstract solutions into concrete prototypes; We also included metrics to measure impact.
Click on the image to enlargeDesign
Take a mobile-first approach
This is a responsive website. We designed starting from a mobile site, followed by a desktop site. Because it's easier to design small and go large than the other way around based on the theory of progressive enhancement.
Collaborate with other roles
During prototyping, testers run two rounds of testing, providing feedback to our design team for improvements. Also, we stayed in close contact with developers to ensure the design can be implemented.
Lo-Fi Prototypes
Click on the image to enlargeMi-Fi Prototypes
Click on the image to enlargeHi-Fi Prototypes
Implementation
Impact
Find specific pages faster
Find events easier
satisfaction improved
donation click-through rates increased
Next step
Mailchimp API set up and testing.
Make users create personal login accounts.
Make users register events online.
Collect feedback from users to refine.
Retrospective
It's important to consider the constraints of programming and website maintenance, although we can be imaginative during the design thinking process.
Developing a project timeline in advance is crucial. Three months of researching, designing, and testing before launching our responsive website, which was very intense for us. We realized we should allocate more time to the design and testing phases.
Prioritizing solutions is important because it helps us focus our design efforts on the solutions that are most likely to have the biggest impact on our users and business goals.