top of page

NEU Flywire Web Payment Redesign

UX Research, UI Design

Type
Personal project
Tool
Figma
Adobe Illustrator
Adobe InDesign
Google Workspace
Duration
6 weeks
MY ROLE
UX researcher
UI designer

While interacting with the site, I encountered some parts that I found confusing, which left me not knowing how to continue using it for payments. So I decided to redesign and improve it for a better user experience.

Introduction

In my daily life and study, I often interact with NEU digitally and physically. They have played a key role in my study and life.

 

So, I started to collect, analyze, and study the data of me and other students interacting with NEU digitally and physically, to improve and enhance the interactive experience.

Project Inspiration and Sources

Using the method of KJ analysis, I recorded my interaction data with the physical campus and digital campus of Northeastern University through Post-it notes. 

I categorize these records based on quality and importance

I found that most "high quality" records are also "high importance"

Based on KJ analysis and research. I started designing my journey maps and system diagrams.

Data Analysis

Organize activities by quality 

One color for high-red

One color for medium-blue

One color for low-yellow 

I focus on showing my emotional experience by communicating what I do, what I expect, what I experience, and how I feel


They present the data I recorded more accurately. 


The system diagram more succinctly shows my interactions with the physical and digital campuses from a visual perspective


They help designers analyze and understand the context of user experience.

Journey & System map

Based on the above investigation and analysis, I found that there is an obvious problem with the interaction between "I am here" and UEU web payment. 


For example, students can't get a reminder that they need to complete "I am here" and miss the deadline


At the same time, because there are too many options on the payment page, students cannot quickly and accurately find suitable options.

Problem

Based on the above analysis and problems, I plan to improve the design of the NUE web payment interaction page to improve the user's interaction experience. 


I design possible scenarios: delineate the personas, including the user's specific tasks or goals, pain points related to the experience, stress, and ways to accomplish the task or goal.

 Persona(s) & scenario(s)

As an international student, Neo has to check and pay his tuition every semester. At the beginning of the new semester, Neo tried to query and pay his tuition on the student website "student hub".

Neo successfully logged in and checked the new tuition bill on the "student hub", totaling $9700. He plans to continue to use flywire to pay for his academy on the "student hub". 

After clicking the "Make a payment" button, he found a clear classification of payment methods. Each classification has a clear comment to facilitate his confirmation of applicability. 

After he selected the correct payment method, Neo successfully paid his tuition for this semester by using the Visa bank card he brought from China

After the successful payment, Neo received a reminder and receipt of the successful payment from his mobile phone text message, and email.
 

Improve Scenarios

Draft Design

Test Objective

I want to know from the feedback whether the new payment method “Flywire” classification I designed improves the efficiency of users' choices when making payments. In other words, can users complete payments faster and more easily through this new method.

 

Potential participants

My main test participants are NEU students. Especially Chinese international students who need to pay their bills through an online platform with a credit card which has both Visa and UnionPay.

Test Plan

  1. As a first step, I will inform participants that they will pay $9700 in tuition fees as international students using UnionPay and Visa dual currency credit cards.

  2. In the second step, I will show the testers UnionPay and Visa dual currency credit cards to help them understand and become familiar with it.

  3. In the third step, I will observe the reactions of the testers during the testing process and collect their feedback on the following questions at the end:

  • Can you clearly see that you have a backlog?

  • Can you clearly view how much you need to pay?

  • Can you clearly distinguish between NUpay and Flywire?

  • Can you clearly find a suitable payment method for UnionPay and Visa dual currency credit cards?

  • Did you receive clear completion feedback?

  • Is there anything else you think needs improving?

I will spend about 10 minutes with each tester. The tester will spend 5-6 minutes conducting background and prototype testing. Then I will spend 3-4 minutes asking questions and collecting information for the tester.

UX Test Plan And Feedback Expectation

Test 1: Linyuan Chen (in class group)

After we completed the preliminary prototype, we conducted a test in small groups in class.

  • First, I told Linyuan the background of this prototype, and then I showed her the prototype I made in Figma.

  • After the test, she gave me the following feedback.

  • Finally, I improved my prototype with this feedback.

Feedback and Improvement

Test 2: Hanjia Zhang

After completing the preliminary prototype, I found a student who is also Chinese, Hanjia Zhang.

  • First of all, I told him the background of the prototype and the problems I encountered when paying for it.

  • Then I showed him the prototype I made at Figma.

  • After the test, he gave me the following feedback. Finally, I used this feedback to improve my prototype.

Test 2: Hanjia Zhang

Test 3: Wenyue Cui

After completing the preliminary prototype, I found a student who is also Chinese, Wenyue Cui. 

  • First of all, I told her the background of the prototype and the problems I encountered when paying for it. 

  • Then I showed her the prototype I made at Figma. After the test, she gave me the following feedback. 

  • Finally, I used this feedback to improve my prototype.

Test 3: Wenyue Cui