Smile 003

Providing scholarships to students in China

Project overview 

Program: Smile 003, a non-profit organization, aims to provide scholarships annually to approximately 100 students with financial needs in China.

My Role: 

UX/UI Designer

Timeline:

3 weeks

Design Team Members: 

Amy Zhang, Sammy Bharadwaj

Tools Used: 

Figma, Tailwind CSS

Project Status

The current system needs a website

  • Smile 003 is a scholarship started by Zhen Wei (Software Engineer Manager @ TikTok) where he has raised 300k RMB to students in need from his highschool in China.
  • 3 years old, but has no website
  • Mission Statement: Our mission is to leverage technology for social good by providing reliable and affordable tech support to non-profit organizations focused on education, emergency response, and other social causes. Through our services, we aim to empower these organizations with the tools and resources they need to maximize their impact, reach more people in need, and create positive change in their communities.

Our goal is to…

Enhance the Smile 003 Scholarship Program through a User-Centric Web Application.

Research

We drew inspiration from two charities associated with Zhen

China Tommorow Education Foundation

  • Status: long-history 501(c)3, with a basic+ dynamic website.
  • Programs: multiple programs including 1+1 sponsorship for students with financial needs in China.
  • Donors: Mainly local high-tech employees in Seattle and Company Match.
  • Relationship to “Put A Dent”: Zhen Wei worked with them as their volunteer and project lead for building one village school campus. They agree to have “Put A Dent” to provide tech support. But nothing has been done yet.

Hometown Education Foundation

  • Status: 19-year-old 501(c)3, with a basic static website. Started and run by Prof. Yang in WI.
  • Programs: provide scholarships for K-college students with financial needs in China.
  • Donors: Mainly high-tech employees and Company Match in WA and CA.
  • Relationship to “Put A Dent”: They agree to have “Put A Dent” to provide tech support. And Zhen has updated some static pages.

Pain Points

Evaluating the current websites

We were assigned the task of redesigning dynamic pages to incorporate all features on the HEF website. Before commencing the redesign, we conducted user testing on the existing websites of the two non-profits to identify pain points and features that could be enhanced.

Hometown Education Foundation (HEF)

  • Hard for donors to see student profile.
  • No easy way to upload their latest content like student letters.
  • Accessibility Gap for Non-Chinese Readers as lots of content is in Chinese and majority of donors are based in the United States
  • Too much clutter

China Tomorrow Education Foundation(CTEF)

  • Need better donor management and engagement.
  • Poor context layout makes it hard to navigate through some pages
  • Non-Clickable Pages Pose Navigation Challenges:
  • Low contrast hindering readability

Design Requirements

Defining the product needs

Informed by our user research and a thorough analysis of the two websites, we curated a list of essential features that guided our design process. This strategic approach allowed us to visualize and articulate our design decisions effectively.

Prototype Evolution

After defining the essential features, we embarked on the ideation phase, initially generating conceptual sketches. As our confidence in the design grew, we transitioned to developing wireframes to further refine our vision.
As we were working with the front-end team we realized that we had to completely change the colors and icons used in our lofi wireframe to match the tailwind css that the developers were using.

Paper Sketch

Lofi Wireframe

High-Fidelity Prototype

Final Design

Creating an organized space for donors 

After working with the front-end team and fixing our design system, we then began our high-fidelity prototypes, focusing on addressing the major pain points we found from the Hometown Education Foundation(HEF) and China Tomorrow Education Foundation(CTEF).

Dynamic Home Page

When users enter the website they are greeted with a quick intro about the program and can see quantitative data showing Smile 003’s impact

List of Students

Users can filter through different student profiles based on their location, school and date they joined the program.

Letters From Students

View heartfelt letters written by students sharing their dreams and aspirations

Induvidual Profiles 

If you want to learn more about a student you can find their picture, description and the amount of money they have raised, with a link to donate to them at the bottom

Reflection

Key Takeaway from this Experience

I learned a lot from this project as it was my first time collaborating with multiple teams on a product

Communication is Key: 

  • Efficient communication with all team/project members is crucial in the design process. Improper communication can result in errors and misunderstandings. During the creation of our website prototype, a failure to communicate effectively with the front-end team led to the need for a redesign, ultimately wasting our time and efforts.