top of page

Case Study:

Desktop View
Digital Product
 

Dark wordmark.png
Untitled (7).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."

Untitled_Artwork 184.png
Untitled_Artwork 159.png

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

44.jpg

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

Untitled_Artwork 155 1.jpg

Selected Solution 

IMG_8428.png

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.

Tasks

1. Search for a country and find Lisbon, Portugal.

2. You’re interested in moving to Portugal, how would you begin this process?

3. Find your first task to complete on your dashboard.

4. Complete the first task “Upload pet vaccine form”

5. Navigate to dashboard

Testing Round 1

Untitled (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

Untitled (3).png

Testing Round 2

Untitled (1).png

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

Untitled (4).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.

mockup.png

Brand goals

Untitled_Artwork 164.png

Create a joyful and energizing experience for the user that feels friendly and welcoming.

Untitled_Artwork 165.png

Foster action and encourage motivation for the user's dreams of living abroad.

Untitled_Artwork 171.png

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

image 13.jpg
image 15.jpg
image 12.jpg
image 10.jpg
image 11.jpg
image 14.jpg
image 9.jpg
Screen Shot 2022-11-18 at 3.17.06 PM.png

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.

Vector.png

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. 

Dark wordmark.png
Group 14.png

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.

Untitled_Artwork 171.png
Untitled_Artwork 159.png
Untitled_Artwork 164.png
Untitled_Artwork 165.png

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.

Untitled (6).png

I also designed a marketing website to help potential users understand what Yonder is all about.

Prototype

Mobile

Marketing Website

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

Icons: “Phosphor” Figma Icons Plug-in
Illustrations: All illustrations by Alex Smyth
Photos: “Photos” Figma Plug-in

bottom of page