top of page

Responsive Web Redesign for a non-profit organization 

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

CFGI_mockup.png
cfgi_phonemock.png

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

Result

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

Tools
 

Adobe Illustrator

Figma

Google Form

Google Slides

Miro

Trello

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.
Interview
CFGI_interview.png

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
Objective
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
currentsite-cfgi-world.jpg
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-userpersona.jpg

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.

 

Goal:

- 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

Ideation

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

Winner!

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

Phototype

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.
Iteration-1-1.jpg
Iteration-1-2.jpg
Iteration
Users still weren't clear about what CFGI is with the Lo-fi prototype. We revised the content to be more clear.
Iteration-3-1.jpg
Iteration-3-2.jpg
Content in each card is more inspirational and call to action button works more effective.
moodboard.jpg
Moodboard
My team and I looked at pictures that depict the mood of overlapping and connecting seemingly unrelated parts into an unified whole.
CFGI_styleguide.png
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.
CFGILanding_lo.png
CFGILanding_hi.jpg
Transitioning to Hi-fi Prototype
A visualized prototype is created. The eye-catching hero image and content attracted more attention.
design-concepts.jpg

Wait! Did Elon Musk ever endorse our movement?

Wait!! Did I ever?

Iteration
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.
hero-imagery.jpg
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.
Conclusion
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.
Takeaways
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 https://www.cfgi.world 
for more live website info.
bottom of page