Our client's landing page
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.
Visual designer, User Interface designer in a team of two
A comprehensive 4-week design sprint that included client meetings, workshops, market and user research, mid to high fidelity design, user testing and iterations
Design a preliminary user interface to an international student resource platform concept that meets our client's initial MVP goals
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
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
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.
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.
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
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.
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".
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
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 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
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.
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.