Our client's landing page
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 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
Visual Competitive Analysis
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
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.
Our client's logo
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".
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
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.
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
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 redesign of the dashboard
Our design of the action task screen
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.