Ying Ye | Visual Designer
Visual Designer

A Desktop Platform
for International
Student Success

Within the 2018-2019 academic year alone, international students contributed about $41 billion and supported 458,290 jobs in the U.S. economy. 

Delays, denials, and visa cancellation are common conditions that disrupt foreign student’s academic and professional progress. Especially with COVID-19 and the delicate state of the visa process.

Our client saw an opportunity to build an accessible, central resource platform that supports international students and professionals.

My Role

Visual designer, User Interface designer in a team of two

Timeline

A comprehensive 4-week design sprint that included client meetings, workshops, market and user research, mid to high fidelity design, user testing and iterations

The Challenge

Design a preliminary user interface to an international student resource platform concept that meets our client's initial MVP goals

Our client's landing page

Our client's landing page

Our landing page design solution

Our landing page design solution

The Outcome

The client implemented the redesign because:

• The landing page was engaging, comprehensive and representative

• The design embodies the vision of what they aimed to accomplish

Click here to experience the desktop prototype

Domain Research Insights

• There is a gap in the marketplace for an accessible platform that provides the right resources for international students and employees
• Government immigration platforms use impersonalized jargon when users need personalized support, simplicity and clarity

Our domain competitors

Our domain competitors

Visual Competitive Analysis


A Desktop Resource for International Students

Target Demographic

Age: 15 - 35 years old, International students and employees on visas, attending academic institutions or working for a company in the U.S.

Target users :

1. Have very little knowledge of immigration rules and regulations 
2. Are very independent 
3. Don’t know who to go to for help to navigate the system

Ideation

Moodboarding

Gathering the data and information from our domain research, competitive analysis, meetings with our client and user interviews, we had a stronger vision of the platform's look and feel. I jotted down keywords that expanded into concepts. 



Style Tile

After creating the ambiance and mood of the concept, I focused on exploring color, typography, UI elements, button states and use of photography or illustrations. 

style tile direction

style tile direction

Desirability Outcome

66% target users chose the style tile direction because:

• Unconventional color palette
• Diverse representation
• Approachable blend of professional and straightforward typography
• Rounded iconography and good-natured, supportive tone of voice
• Felt hopeful, modern, unique and relatable

Logo Ideation


The Problem with "Diasppo"

Our client provided us users to conduct desirability interviews but along the way, we realized they were a biased pool of users because they were all aware of what Diasppo was and its mission. We took the initiative to find users who weren't aware of our client's vision and asked what they thought. 


"Diasppo reminds me of an autocorrect of the word "disappoint""
-unbiased user comment
Our client's logo

Our client's logo

"Diasppo isn't memorable, how do I pronounce it?"
-unbiased user comment
A Desktop Resource for International Students

Our Solution

The word "Allay" stood out in my brainstorming. Through my user interviews, many users had overlapping frustrations when navigating their visa experience. The word form "Allay" evokes calm and ease. The world global indicates the breadth and possibility of reaching out on a global scale.

Our client's goal was to put the control back into the user's hands so that the complex visa process isn't so of their control.

I used Sansita, a humanist sans serif with its gentle curves and brush-like angles for the primary letter mark "Allay" and Montserrat for the secondary letter mark "GLOBAL".

A Desktop Resource for International Students
High Fidelity Screens

Global Design

Guidelines after auditing our client's existing Wordpress platform

• Light UI theme
•  12 column grid, 78px with 13px gutters & 40px padding
• Minimal use of color; brand green used for active states
• Simplified filtering system

Allay Landing Page

Allay Landing Page

Landing Page

The marketing landing page was an important client request. Being the first point of contact with a potential user, I took on designing a dynamic and comprehensive marketing page. 

A Desktop Resource for International Students

Animated Illustration 

A captivating and subtle way drawing user's eye toward the hero. Subtle bounce in button also draws users' eyes to "sign up today."

Keynote was used to animate this concept

A Desktop Resource for International Students

Hover Animation

Upon a mouse hover, the video player and elements animate by rotating back and forth. 

Keynote was used to animate this concept

User Interface Principles

Guidelines I kept in place as I was designing the landing page


Hick's Law
–Designed the hero area with an email sign up CTA 

Fitt's Law–CTA buttons are close to relevant content, ensuring they are to-scale

Chunking–Testimonial stories expand to a video for added interactivity

Cognitive Load–A focus on highlighting important features and vital information

Ockham's Razor–A simplistic, flat interface pattern over a more illustrative pattern

Dashboard and Action Task Screen

The strategy when redesigning the dashboard was to keep things minimal, with usability heuristics in mind, my aim was to design a minimum viable product with the understanding that this concept will be further tested. 

Our client's dashboard screen

Our client's dashboard screen

Our redesign of the dashboard

Our redesign of the dashboard

Our design of the action task screen

Our design of the action task screen

"Students wants something that’s welcoming, not intimidating or just something that is a waste of their time. It has to benefit their time in order to make it have credibility."
– Assistant Dean for International Students and Accessibility

Style Guide and Elements Library

Click here to see the style guide and elements system

The First Stepping Stone

In the end, we designed and user-tested a preliminary UI concept that addresses the visual needs of our users and client. The reality is there's still so much to address and we're only getting started. I hope the stones we set lets future teams expand on.

Click here to access the Diasppo prototype! 

Lessons I'll Carry Along

This was an opportunity to help develop a tangible, impactful product.

1. Be realistic about how the design can meet the startup's needs. 
2. Developing a healthy, professional-client relationship as early as possible. 
3. Learn about the immigration process to deepen understanding.
4. The value of conducting unbiased user interviews.
5. Always, always, always conduct concept testing along the way.