Smile 003

Providing scholarships to students in China

Two screens of a website showcasing student profiles for a scholarship program, with sections for donations and applicant details.

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.
Illustration of a workspace with a laptop displaying a website, desk lamp, plant, and design elements.

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
Website for Hometown Education Foundation with navigation menu, donation information, and a banner image promoting support for children's education in China.

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
China Tomorrow Education Foundation website project overview page with text about school construction in poverty-stricken areas and options for English or Chinese language.

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.
Flowchart showing website requirements and user stories. Requirements: Main page, About Us, Donation Page, Student Profile List, Student Profile Page. User Stories: View program info, view details about program, donate with PayPal and options, list and filter student profiles, view student profiles with info and pictures.
Two people discussing ideas on a whiteboard with notes and diagrams in an office setting, featuring a plant and filing cabinet.

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.
Website wireframe mockup for Smile 003 featuring navigation menu with options like Home, About Us, Donation Page, Student List, Student Profile, and sections for welcome message and donation amount.

Paper Sketch

User dashboard interface with notification panel, welcome message, total payments, tools section, and a table with filters and dropdown menu.

Lofi Wireframe

Webpage of a charity organization called "Smile 003" with a focus on education. The page displays statistics such as total amount raised, number of donors, and students helped. It features a section titled "A Helping Hand" and an image of a woman assisting children with a drawing activity in a classroom.

High-Fidelity Prototype

Graphic showcasing a design system with identity, color palette, and font details. Colors include rose taupe, lavender blush, blueberry, black, and various grays. Fonts feature Helvetica Neue in various styles and sizes.

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).
Webpage for "Smile 003" organization highlighting education as a right. Displays total amount raised, number of donors, and students helped. Includes a photo of a woman and children in a classroom.
Web page titled 'Smile 003' featuring a sidebar menu, section on 'Students in Need', and a table listing student profiles with details like name, location, school, grade, date joined, and money allocated. Includes a photo of smiling children.
Website interface titled "Smile 003" showcasing student blog posts. Features navigation menu with options like Home, About Us, and How to Donate. Displays student profiles categorized by education level: College, High School, Elementary School, with names, ages, and schools.
Website interface showcasing a student profile for Andrea Hu. It includes a photo, biography, donation stats, and links to donate or view applications. Sidebar navigation includes sections like Home, About Us, and How to Donate.

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.
Illustration of a person raising a hand, sitting at a desk with a globe and flower vase.