Passport

Brief

This mobile app is dedicated to helping people find language partners to practice their target language, use their target language in a more authentic context, and increase their language proficiency. It is also designed with hopes to bridge differences and motivate people to come together to celebrate the different languages and cultures of this world. This project is done as part of the course, Visual Principles for the Screen.

Research

I observed the mobile apps of HelloTalk, HiNative, Bilingua, LINE, and Longwalk.

These are my main takeaways:

• Since hover states are not available on the phone, it is important to make obvious what can be clicked into and what cannot be clicked into.
• Navigation bars are useful in helping people keep track of where they are in the app.
• Aim for a minimalistic design to minimize distractors on the screen.
• Aim for consentful technology. For example, people should be given the freedom to choose what info they want to give.
• Sign up and sign in should be made more distinct from each other.
• If there is a sign-up, progress bars are a good way to update people.

Sketches

Below are the initial sketches:

Previous Next

Wireframes

These are the lo-fi wireframes before usability testing:

Previous Next

These are the lo-fi wireframes after usability testing:

Previous Next

Usability Testing

Wireframes were shown to college students for testing. Findings are as follow:

High priority

• Community page needs to be made more intuitive.
• Combine text and voice chat.
• Separate current messages from list of friends.

Medium priority

• Break community page into topics.
• Newsfeed-like feature on home page.

Low priority

• The spacing of the features of the app needs to be redistributed.

Color & Font Exploration

Directions

Below are two possible directions with different combinations of fonts and colors:

Visual Language

Prototype

Updated in 2022 to align with latest IPhone Model, IPhone 13

Reflection

Gains

• It is important to pay attention to how much information is shown to a person at once.
• It is important to look at existing apps that function the same way because we want to adapt what is already working.

Next Steps

• Make the text for each screen bigger.​​
• Make the font compatible with different languages.