top of page
Alex Smyth
Case Study:
Desktop View
Digital Product
.png)
Project Overview
Figma, InVision, Otter.ai, Google Docs, Procreate, Pen + Paper
UX/UI Designer
UX Writer
Research/Testing
Illustrator
Project
Roles
Tools
10 weeks
Capstone Project
BrainStation UX
The Problem Space
International moves can be stressful. Maybe you want to move where your partner lives, relocate to a new job, or your home country just doesn’t feel like the right fit for you and your lifestyle. No matter the reason, figuring out where you’re headed is just the start.
Due to an increase in stress over political strife, work-life balance, and rising costs of living, more Americans are looking to move abroad. Compared to even a decade ago, more professionals have remote jobs that make moving internationally more feasible thane ever before.
More than
6,000
Americans gave up their citizenship in 2020 —compared to only 2,072 people in all of 2019 and the highest figure in at least a decade (2).
Increase in traffic to WhereCanIMove.com after the Supreme Court’s reversal of Roe v. Wade (1).
Increase in traffic to International Living’s “Best LGBTQ+ Friendly Countries to Retire to” website page after the Roe v. Wade reversal (3)
193%
600%
What are
people saying?
Research Plan
I conducted 3 qualitative interviews to explore why people were looking to move, or why they had moved prior, as well as the obstacles they faced in that endeavor.
-
18 years or older
-
US Citizen
-
Access to smartphone or wi-fi
-
Interested in living in another country/has prior experience living abroad
Participant Criteria
-
In-person and phone interviews
-
Open-ended and specific questions
-
Transcripted by Otter.ai
Settings and Parameters
Goals and Objectives
-
Explore motivations for wanting to move out of the country
-
Uncover frustrations/obstacles with the idea of moving/past experiences with moving and immigration
Interview Insights
From the interviews, the biggest pain point I discovered was keeping research and planning organized. The participants voiced a desire for a more clear cut checklist of documents and requirements, and a way to keep track of them.
"I'm stressed out about it because there's not like one place I can go or one resource that I can go to that can really help me like keep on top of things."
"It feels very daunting because there is so much information out there and resources that it's just overwhelming."
"I feel like I can easily miss if I'm not really careful and like meticulous with planning everything."
How might we make countries’ immigration information more organized and accessible to Americans, in order to help them achieve their goals of moving abroad?
Persona
User stories
Using my HMW question, I created 20 user stories to start imagining what functions were possible and useful.
As a user, I want to be able to compare two countries, so that I can decide which would be a better match for me.
As a user, I want to create a profile with my preferences, so that I can clarify my goals and preferences,
As a pet-owner, I want to check requirements for moving pets abroad, so that I can be prepared with the right documents etc before my move.
As a user, I want to visually see a cost breakdown of the move, so that I can budget accordingly.
As a user, I want to save resources and documents within the app, so that I can come back to read them later for reference.
As a user, I want to organize my immigration documents, so that they don’t get lost or unorganized.
As a user, I want to check off requirements as I finish them, so that I can feel accomplished and encouraged to keep going.
As a user, I want to connect with someone from the country I am interested in moving to, so that I can get a firsthand account of what it’s like there.
Selected user stories
I narrowed these down into epics, and selected “Staying on Track” as my core epic to develop a task around.
As a user, I want to set a timeline for when I would ideally like to move, so that I can have a more tangible plan of how to go through the process.
As a user, I want to set a timeline for when I would ideally like to move, so that I can have a more tangible plan of how to go through the process.
As a user, I want to check off requirements as I finish them, so that I can feel accomplished and encouraged to keep going.
As a user, I want to track my progress of checking immigration requirements, so that I can know my timeline better and see where I’m at.
Task Flow
Start
Landing Page
User clicks "Search for Countries"
Search page with carousels for recommended destinations
User clicks Lisbon, Portugal or types in search bar
Moving details
modal opens
User fills in from and to fields, and selects date
Is the date too soon to complete?
User selects a later date that fulfills requirements
Next modal screen with account creation forms
User inputs name, e-mail, sets password, checks off if they have pets
"Finish" button appears at bottom of modal when all fields are filled out.
User clicks
finish
Dashboard page with upcoming tasks
User clicks "Complete first task"
"Tasks" page with checklist of tasks
User clicks task to complete pet vaccine form
Modal opens to download and attach filled out form
User downloads and attaches form
"All done" screen in modal with button to go back to tasks page
User clicks
"Back to tasks"
Task list is updated with check mark on completed task
User clicks "Dashboard" in nav bar
Dashboard shows updated tasks
End
Sketches
Exploratory
Selected Solution
Initial Wireframes
User testing
Summary
-
2 rounds of testing
-
5 testers each round
-
In-person and virtual testing
-
Scripted tasks
-
Transcribed with Otter.ai
​
Goals + Objectives
-
Gauge whether users can understand and complete tasks
-
Identity pain points or obstacles in completing tasks
-
Gather testing data to create prioritization matrix to update each prototype
Using my greyscale prototype, I did two rounds of user testing to end up with a third prototype iteration that would become my hi-fidelity prototype.
Testing Round 1
.png)
All testers completed all tasks but there were key takeaways:
- The most severe pain point was a moment of confusion after clicking the “First task” on the Dashboard and being directed to the Calendar view on the My Move page. Almost all testers noted before clicking the button that they would have expected to read more details about that specific task.
Most other pain points or areas of confusion are relatively low effort fixes:
- showing selected states in the navigation bar
- offering more consistency in styling of overlays, buttons, and language
Testing Round 1:
Design Prioritization Matrix
.png)
Testing Round 2
All tasks were completed by all testers, once again. However there were some clear issues that emerged:
- I had hoped that having the “Complete First Task” button from the dashboard link to the list view of tasks would be enough, but testers still expressed confusion as their expectation was for it to go straight to the specific task info. So based on that, I will link that button straight to the form download/upload.
Testing Round 2:
Design Prioritization Matrix
.png)
After two rounds of user testing, I felt like I had uncovered many usability issues given the time constraints of this 10-week project. I revised my second prototype into one more iteration before diving into high fidelity.
Brand Identity
I imagined Yonder being used by people thinking outside the box. People who don't just fantasize about a life in another place, but want to make it happen. I wanted to create a look and feel that resonates with young professionals (many of whom now have remote jobs that make International moves more possible), and idealistic/dreamer folks with a modern romanticism.
Brand goals
Create a joyful and energizing experience for the user that feels friendly and welcoming.
Foster action and encourage motivation for the user's dreams of living abroad.
Help the user feel their goals are attainable and feel fulfilled when tasks are completed.
Moodboard
Warm, energetic, bohemian, eclectic, motivating, excitement, vintage-feel, adventurous, flexible, open-minded
-
more pencil than pen
-
more spontaneous than routine
-
more summer than winter
-
more vintage than ultra-modern
-
more clean than cluttered
-
more wayfarer than homebody
-
more quirky than cool
-
more soft than hard
-
more vibrant than pastel
-
more energetic than laid back
-
more keener than aloof
-
more whimsical than serious
-
more punchy than subtle
Color
The colors I extracted from my moodboard embody the funky, eclectic, but friendly and approachable feel for Yonder. These made a perfect starting point to expand into versatile shades in my design system.
PP Monument Extended
The quick brown fox jumps over the lazy dog
Beatrice
The quick brown fox jumps over the lazy dog
Type
After looking for inspiration online, I settled on using Pangram Pangram's PP Monument Extended as a larger heading and title font. This extended typeface feels bold and future-thinking, and brings a modern edge to the Yonder brand.
For subheadings and body text, I chose Sharp Type's Beatrice typeface. It's versatile, easy-to-read, but still brings something a little extra to the table.
Wordmark
The Yonder wordmark uses the same PP Monument Extended type with the addition of the spiral image.
Illustrations
I created my own illustrations to add a handdrawn, quirky touch to the Yonder look. I'm a big fan of Mailchimp's brand illustrations and I love the personality, joy, and recognizability that it can bring.
Design Solution
Putting it all together
After user testing my initial prototypes and building my brand identity and design system, it was finally time to bring the prototype to hi-fidelity. I also created a preview mobile screen to show how I would approach a mobile view of Yonder, as the website would greatly benefit users if it can be accessed on-the-go as well.
.png)
I also designed a marketing website to help potential users understand what Yonder is all about.
Prototype
Mobile
.png)
Mobile
Marketing Website
Mobile
.png)
Mobile
.png)
Impact
Freedom and mobility
A tool like Yonder can help people feel empowered in their dreams of moving to another country. We want to give agency and tangible ways to make a goal happen, by making a daunting task feel more attainable.
Organizational resource
Yonder's checklists and reminders can be incredibly beneficial for those easy overwhelmed by paperwork and deadlines, which could be a very real obstacle for someone feeling discouraged from moving somewhere new.
Use for social good
Yonder's target user might have a position of privilege with a remote job or the financial means/stability to move abroad. How could Yonder's data and resources be used to assist refugees or marginalized immigrant populations with figuring out how to reside in their new country?
Appendix
UI inspiration board
User Testing Script
User Testing Output Document
Yonder Mood Board
Prototype 1
Prototype 2
Prototype 3
Hi-fi Prototype Desktop
Hi-fi Prototype Mobile (Preview)
Marketing Website Desktop
Marketing Website Mobile
Icons: “Phosphor” Figma Icons Plug-in
Illustrations: All illustrations by Alex Smyth
Photos: “Photos” Figma Plug-in
bottom of page