top of page

Responsive Web Redesign for a non-profit organization 

User Research- Style Guide- Usability Test- Hi-fi Prototyping reiteration


About this project

Locating CFGI, a non-profit organization that needed help, created clear mission statement and UX writing, to redesigned a responsive website in 2 weeks with a team of 4 designers


Clear Mission Statement


Website complete reiteration and completed responsive website design, support mobile website.

Built an easy-to-understanding website which companies are willing to potentially sponsor talented international students


Adobe Illustrator


Google Form

Google Slides



User Research

What/Who is CFGI?
CFGI, Communication For Global Innovation, was founded by an immigration attorney and an international entrepreneur. Together they teamed up to create a non-profit organization this past June. Their mission is essentially to connect students that need sponsorship and companies that would “pledge” or commit to
sponsoring visas for talented international students.

We conducted 6 Zoom Interviews

1 poll (83 votes)

1 Survey (11 responses)

All of the people we interviewed were current foreigners studying or recent graduates who are or were

recently looking for employment

At this point, we still weren't sure what the main stressors were for international students when transitioning from academia to the workforce. We definitely needed more data

User's problem
After conducting our initial research we discovered two key pain points:

- International students have a high level of anxiety around finding a job, within 90 days, after they graduate.

-They feel a great deal of stress trying to understand which companies are willing to potentially sponsor international students.
Testing the original site
Does the website offer a clear message of who CFGI is and what services / product offering CFGI provides?

1. Find out what it means to take the pledge? Sign up to take a pledge?

2. Find out what you will actually do when you sign up to volunteer? What does "Volunteer" mean at CFGI? Then the user signs up to "volunteer" on the website.

3.. What is the criteria for sharing your story? Does anyone who shares their story get posted on the site? Why would you share your story? How do you share your story?

4. What does a sponsor do? Find out how to sponsor?

5. What does CFGI do and what product or services, if any, do they provide and to whom?

Test Result

Users were unable to uncover what it meant to “Take the Pledge, Volunteer, Share their Story or to Sponsor.” However, 100% of testers were able to find and fill out the form for each category easily.

CFGI_test result.png
User Insight
What are the main blockers for users from understanding CFGI?

Clear mission statement of the non-profit

- Easy to scan
content and layout

- More content explaining:
a. volunteering duties
b. info on what it means to take the pledge and the level of commitment
c. how to donate and where the funds are going
d. clearer explanation who shares community stories

- More information about the movement so users know how to effectively promote it on social media
- The design is very nice, but I got lost because of the lack of content.

- Site needs
language translation integration as it is targeting international students
User Persona
Bao Zang

Bao is a 27-year-old extrovert, pragmatic and detail oriented lady. She loves her family and speaks her parents via WeChat everyday.

She has a group of Chinese friends with similar hobbies like math, chess, and eats out. In her spare time she plays violin.



- Find full time tech job in Silicon Valley

- Find a willing company to sponsor her

- Easy to access information

- Be part of a diverse community for support and networking


Pain Points:

- Unable to find visa sponsorship

- Feel anxious about her immigration and employment status

- Can't find any job boards that exclusively sponsor foreigners

- Miss her friends she makes here if forced to move back to China


Lack of a clear mission statement and sufficient content are major issues of CFGI 's website. We started breaking the ground.
Information Architecture
Contents and flows are reconstructed for showing much clearer paths


IMG_5303 (1).jpg
IMG_20200813_201004 (1).jpg
IMG_0436 (1) (1).JPG
IMG_0531 (1).HEIC
Before moving forward to digital layout we started few sketches and decided to go for one of the best sketches. 


image 7.jpg
Digital Wireframe
Moved forward to digital wireframe. The mission statement is more visible and meaningful. Call to action buttons are also more prominent.
Lo-fi Prototyping
Lo-fi Prototyping is designed with the emphasis of Interaction Design.
Lo-fi Prototype Testing
Users tested some of the tasks for improvements and iterations.
Users still weren't clear about what CFGI is with the Lo-fi prototype. We revised the content to be more clear.
Content in each card is more inspirational and call to action button works more effective.
My team and I looked at pictures that depict the mood of overlapping and connecting seemingly unrelated parts into an unified whole.
Style Guide
I was inspired by the mood board elements and notable foreigners.
While the website's target audience is college students and new grads, I added modern fonts, colors and playful images to match the audience.
Transitioning to Hi-fi Prototype
A visualized prototype is created. The eye-catching hero image and content attracted more attention.

Wait! Did Elon Musk ever endorse our movement?

Wait!! Did I ever?

The process of the transition from Lo to Hi-fi prototype is amazing. However, we realized modern notable individuals shouldn't have been included in our web content due to the lack of endorsements.
This is very important to include sufficient content and avoid any legal issues. Therefore, we iterated our hero image and even attempted to think outside the box.  
Final Prototype
Finally, we get to the final stage of the design. 
The mobile version is also created. Due to the constraints of mobile version, some animations from the web version were not carried over but it still got the job done.
This is a very challenging 2- week case study:  

From identifying the organization,  interviewing stakeholders and potential end-users, to ideating the concept and prototyping the final prototype, I, along with 3 UX designers, experienced lots of up and down. However, we learned how to ideate, iterate, make decisions and collaborate effectively and sufficiently in a very time-constraint period.
The CFGI founders decided to accept our proposal and implement the refined UI design to the website.
The handoff process is completed, and more ongoing user testing and content iteration are expected.

Please visit 
for more live website info.
bottom of page