This is a password protected project 🔐
This is a password protected project 🔐
This is a password protected project 🔐
This is a password protected project 🔐
-
Freelance Project: Keru Education
Redesign Application Experience for Oversea Volunteer Programs
Freelance Project
Keru Education
Duration
2 months
Design Role
User Research
UX Design
UI Design
Prototype
Team
6 designers
Partnered with people from different fields
Our team is formed by designers from different backgrounds and industries, bringning in diverse perspectives to this project. I learned a lot from my teammates! Due to COVID, we delivered the project completely via virtual meetings.
Liz
M.S. in Psychology
Chloe
B.S. in Architecture
Qingyi
M.F.A. in Design & Tech
Yilin
B.S. in
CS
Yihan
PhD in Psychology
Me
M.A. in
Art History
My role beyond designer
1. Tracked project progress
2. Planned meeting contents
3. Carried forward collaboration with the client
Context
Our client is a volunteer organization
Keru, an emerging volunteer organization based in Shanghai, provides diverse volunteer programs across Asia.
Our task is to increase conversion rate on its website
Keru wanted to utilize the existing website and transfer more offline applications to online, aiming to provide a convenient, efficient and smooth online application service.
/ Why Redesign?
Align design strategies with shifted business model.
Current Business Model:
Enroll programs 99% via...
Consultant team
Overwhelmed workload
Wechat platform
Doesn't look professional
Website
A combination of online application & reach-out by consultants after applied.
Shifted Business Model:
Encourage more users to enroll via...
Compare to its offline application & WeChat platform, the performance of the website can't be worse.
Since the launch of the website in late 2019, only 2 people successfully completed applications via the website.
What prevented users from taking actions? We were here to figure out the real problem behind the low conversion rate, and propose a feasible design for it.
😨
Data from the past 6 months.
Performed Research
-
Usability Testing
5 students, 2 parents
We asked 7 users to take a remote usability test as we monitored via Zoom. We gave them a task to “find a program you are interested in and apply.”
How’s the performance of the current website?
users expected the experience to be more accessible and effortless.
6/7
felt the “Apply” CTA was “displayed in a weird place.”
“Hope there could be an inquire/apply button beside each program. Now I have to scroll down to the bottom to take actions.”
4/7
mentioned they were overwhelmed by the text layout.
“ I hope there could be an overview list (on the program page) , instead of the chip box, by which I have to look through everything.”
4/7
wanted to know more before making further decisions.
“How do I know if my child is right for the program? Is there any age requirement? What about language requirements?”
-
Competitor Analysis
4 overseas volunteer platforms
We tried to apply programs on all 4 platforms and recorded our application experience.
What kinds of application form are they using?
Different business models have different kinds of application forms.
PeaceCorps
The application functions to eliminate unqualified applicants. It does age check, citizenship check, asks for your SSN, and in total it took us 55 minutes to finish the application.
International Volunteer HQ
A lengthy application asks you to fill out occupation, language, nationality, medical history, criminal history.
Global Vision International
A quick 5 minute application follows up with a call-appointment email from its consultant team on the same day. The consultant called me to know more about my background and if this program really fits me.
Agape Volunteers
A quick application that offer you the option to link your application to another applicant. It then pairs you with a consultant.
-
Insights
1. The experience of browsing and selecting programs is crucial and decisive to applications.
2. Since different business models have different application process, Keru should clarify with us their future business vision.
-
Conversation with Keru
The current business goal is to alter the heavy workload on the consulting team for the pre-application reach-outs. If we make the online application as the primary platform, the consulting team can focus more on helping students who've submitted applications.
-
Redefine the problem
How might we better help users to figure out appropriate programs and complete the online application successfully?
-
Solution
Discoverable
Discover what programs interest you
Interactive
From informative to interactive
*new design
Inclusive
An application form fits business goal and works for everyone
Save for later
Launch a save function for users who need more time
Design
Visualize current application experience
By analyzing a typical user flow with an online volunteer application, we visualized Keru users’ needs below, and decided to prioritize the redesign in 3 phases for now: browse, select a program, and fill the application form.
Browse
The website does little to help users to narrow down options.
Select
Information insufficiency, poor discoverability, lack of interactions.
Fill the form
The lack of flexibility to come back and finish the form later.
Level of confusion
Interfaces
Problems
Before the application
During the application
After the application
“Don’t really know what fits my interest and background…”
“I need some time to think through..Is Program A better than Program B?”
“Can I come back and finish the application later?”
“Oops… I think I clicked the wrong program.”
Pain Points
Browse
Select
Fill the form
Waiting to hear back
/ Discover what interests you most
Redesign the Browsing Experience
Problem
The website does little to help narrow down options.
Users didn't know how to narrow down options.
Users were impossible to explore programs by their interests or motives.
*As we observed, the initial interactions of new users are either scrolling down on the Homepage, or jumping directly to the Program Page.
Solution
Encourage users to explore intuitively.
Explore on homepage by countries, social issues, and most popular among Keru alumni.
Introduce both search and filter to narrow down interests.
Change the UI set to make the visual match with Keru's imagery.
"I don’t really know what fits my interest and background…”
“I want to know what will my kid learn from this program and how will it help her college application.”
Interests
Motives
-
User Flow
Land on Keru's website
Homepage
Explore programs
- Explore by countries, social issues, and what alumni recommend.
Homepage
Search & filter programs
- Filter programs by location, duration and topics.
-Search keywords.
Homepage/Program Page
Step 1: promote search on homepage
We added a search tool to allow users to search through several scopes (topics, locations or programs). The original goal was simply for searching a known-item query (e.g. a specific program). However, we realized "Search" could do much more:
1. It pulls out a fresh set of data from users. We are curious what will be the most frequently searched keywords.
2. We can use it to promote and recommend the latest/hottest programs.
3. We think it will perform well on Homepage for people who alreayd knew about Keru, and are here for checking out the programs.
-
Prototype
What can users do on the Homepage?
Discover interests in multiple ways.
Recommend the latest programs.
Indicate the 3 academic topics Keru programs cover.
Guide to Program page.
-
UI Details
Zero Input
Topics and locations are the key factors when Keru users choose programs.
Intuitive click to see Keru's recommendation
Active: search a keyword
Hierarchy of information distinguished by different visual weights.
Active: search a topic
Scroll down to see all sub-categories of STEAM.
Step 2: immersive and traditional approach to filtering
Filters are commonly seen next to the content, so the content can be filtered as people wanted. This allows people to narrow down their options. At the same time, we wanted to users feel personal and premium while helping them to figure out what they are looking for. Indeed, we added an immersive approach to filtering on the Homepage.
-
Immersive Filter - Homepage
As we collected data from both the marketing team and our own research, WHERE is the most important factor for choosing a volunteer program. So we designed it as the first thing users would encounter after scrolling down on the Homepage.
-
Filter on Program Page - Iterations
Design A
Pros
Easier to view and compare all options.
Keep checked options at original positions.
Cons
This won't work well if there are more parameters and options in the future.
Design B
Pros
Easy to unselect multiple options.
Quick way to check currently selected options.
Cons
Options are hidden.
Takes more steps to select options.
-
Filter - Prototype
The filtering feature can be designed either ways in consideration of current amount of programs. This design is chosen for the growth of programs in the near future.
Scalability.
Easy to see selected options.
Easy to deselect.
Less occupation of space.
/ From informative to interactive
Redesign the Selecting Experience
Problem
Both information insufficiency and lack of interactions discouraged users from taking actions.
The program details are currently presented in a big chunk of text.
None of our users successfully found the “Apply” CTA right away.
Solution
Display the most needed info upfront; increase discoverability of the Apply entrance.
Program overview in card view.
Categorized program content in clear sections.
Decided what content goes into a program detail page.
More “Apply” CTAs.
Discovera-bility
Efficiency
"I'd like to hear some advice from my parents and school counselor..."
Set the Problem in Real Context
We realized that it is always a decision made between parents and students.
Our target users are high school students, they not only need guardian’s advice but also the permission to attend an on-site, expensive volunteer program. With that being said, the flow of browsing a list of programs, selecting a program and submitting an application is just too ideal in real life.
A New Design
Launch a save function for users who need more time to think thoroughly. Encourage users to create account on Keru and support options to save programs to My List.
More
Time
Multiple
Roles
Comparison
"Hope there could be an inquiry/apply button beside each program. Now I have to scroll all the way to the bottom of the page to take actions."
"I hope there could be an overview list, instead of the chip box, by which I have to look through everything."
-
User Flow
Browse search/filter results
Program page
Save a program
Program page
Open program detail
- Check program details.
- Save, share or apply for the program.
Program Detail Page
Check saved program in My List
My List
-
Overview Card Explorations
1
List View: a line division doesn’t work well for separating programs. Users don’t know where to click in order to access program details.
2
Card View: users can browse more programs on a single screen, but too many “Apply” CTAs are visually disturbing.
3
Selected!
Viewers can browse more programs at once with shorter cards.
Card View: significantly reduces unnecessary space. However, balancing the visual hierarchy between the ‘Save’ CTA and the ‘Apply’ CTA was a challenge.
Make deadline visible for users who intend to apply soon.
-
Prototype
Compared to the old design, the new design made the selecting process functional and responsive:
Grasp information effectively via card view.
Support immediate actions.
Be considerate for return users and users who need to compare programs.
/ Be accessible, responsive and explanatory
Redesign the application experience
Problem
The lack of explanation and flexibility reduce users' willingness to complete the application.
Users cannot return to the unfinished application.
Users had to prepare all information by hand.
Users get confused for providing passport info.
Solution
Design a form that works for everyone.
Enable Save for unfinished applications.
Break down the lengthy form into sections.
Indicate errors immediately.
Provide an explanation for collecting personal information.
Access the application after submission.
Finish later?
Privacy
"Why does it ask for so much detail?”
“What does my passport info do with the enrollment? " 🧐
Privacy Concerns
Step 1: create a short and informative wizard form
As we realized that the application process would be different if the user is traveling oversea, underage, or holds a foreign passport (non-Chinese citizen), we decided to ask a few questions before getting into the form. In this way, it effectively reduces the workload of the consultant team.
User are cautious on collecting personal info such as residency, nationality, and passport number.
-
Prototype
Compared to the old design, the new design breaks down the lengthy form into sections :
Does age check and citizenship check.
Uses inline validation with real time feedback.
Adds an overview page before submission.
Keru Accepted Our Design Proposal
What's Nest...
Late September this year, we presented our design proposal to Wendy, the head of the marketing team in Keru. She was happy and excited about our redesign. As we move forward from this, we are going to discuss with the engineer team with further details on the implementation.
Plan Usability Test
At the same time, we plan to make a round of usability test to validate our design and improve the details to match Keru's needs.