Design and branding of a tandem search website for expats & locals
When you’re moving locally, it is not a big change. However, when you move to a new city or country where you don’t know anybody it is a different story. In addition to moving itself; finding a new flat, learning a new language & culture can be challenging, but the most importantly there is the challenge to meet like-minded locals to make friends with. Vivamondo is an online platform designed to help newcomers by the help of volunteer locals.
Research, user interviews, personas, sitemap, task/user flows, sketching, wireframing, prototyping, user testing, UI design, branding
4 Weeks
Figma, Adobe Illustrator
See prototype
Vivamondo is an online platform aiming to help expats integrate to their new city by the help of volunteer locals or other expats who share similar interests. Any local who has an interest in meeting other people from another country, help their integration process, who likes to improve their language skills, learn about new cultures, practise a sport or share a hobby with an expat can be a part of the Vivamondo family.
How do we help new inhabitants integrate a new country/city via a local-expat tandem system and provide networking & information exchange?
Creating a responsive website (desktop, tablet, and mobile) that covers core functionality of finding a local tandem partner and a branding reflecting a welcoming and friendly image
I had a look into the current popular trends in applications and websites dedicated to expats. It was useful to locate competitors or similar organizations to gain insight about the current popular and future trends. Then, I compared the direct and secondary competitors to figure out the strengths and weeknesses. This was a bit challenging as such a product doesn´t exist. I had a deeper look into similar organizations, apps and websites as well as the user comments to gain insight regarding demographics and behaviors of people who use such platforms. Then, I listed the strengths and weaknesses to figure out opportunities that can be implemented to Vivamondo. This way I could create the provisional personas and structure my primary research questions:
I have conducted 1:1 online interviews with 6 participants from a variety of demographic backgrounds who has moved at least once to another foreign country. The questions were open-end questions motivating them to tell more about their pains, struggles and goals. This helped me gain insight about common expat problems in a foreign country and expactations from a tandem search platform
“Since I moved to Germany, the language barrier has been the greatest challenge for me. Even if I attend German courses, I couldn´t find a way to make friends
with the locals”
- Antonio, 31, Italy, Researcher, currently lives in Stuttgart, Germany
“It was really hard to find friends through the apps/websites, because if you are a woman, men disturb you often seeing you as a potential date”
- Sahar, 35, Iran, Researcher, currently lives in Graz, Austria
In the light of the company goals, competitor analysis, potential target groups and the key takeaways of the interviews, I have created my persona Ajla Grovac | The Newcomer:
The sitemap below shows all existing pages in a diagram to show the website structure.
Task Flow has been made to explain a user´s journey who discovers Vivamondo through web search and discovers Vivamondo Homepage. Then, the user decides to Search for a Tandem Partner, but discovers that she has to become a registered user for this. She decides to Sign Up.
During the interviews, the greatest pain of the female interview participants stated was finding female tandem partners to practice language. So that, I concentrated on this particular task for the User Flow. All of these work helped me prioritize the problems to be solved visually, before hand-sketching the low-fidelity wireframes.
Consequently, I have made a list of the high priority pages to be designed and started hand-sketching before moving into screen. This work helped me prioritize and structure the sections on overall website before starting building the high-fidelity wireframes in Figma:
.png)
Starting with the key words “engaging, safe, friendly and helpful” I designed a company logo which can also be used with a background color.Then, I created a UI Kit with fonts, color palette, icons, illustrations, imagery, symbols and other essential UI elements such as buttons, CTAs and fields.
In the light of the information derived through the research phase, the high-fidelity prototypes of the following pages were designed because of being directly relevant to the research and the usability test goals.
All the pages were designed with a responsive design approach. Responsive Homepage for Laptop, Tablet and Phone can be seen below:
Account Customization Basics step must be filled to start using the platform. Gender preference* and what the user is interested in; Becoming or Finding a Tandem should be given at this step. Additionally, the available days and hours to meet a tandem must be provided.
* During the interviews all the women participants´ greatest pain point was being disturbed by men through the apps/websites that they use to make friends & find new connections. Moreover, 75% of the women participants mentioned that they stopped using certain websites & joining international gatherings because of the same problem. So that Gender preference option has been added to the form.
Account Customization Details step the users can define what kind of experiences they are interested in, which languages they would like to learn or offer, which topics they are interested in to receive or provide help. Setting these filters helps Ajla find a compatible tandem partner.
Find a Tandem Feature, depending on the selected filters in the Account Customization Basics and Details Sections, Ajla is provided potential matches. The user can also update or erase the filters on this page. The potential matches will also be updated accordingly.
Preview Profile Page of a Potential Match, Ajla can preview the potential match´s profile page, read the short biography of the person and read the comments about her under Reviews section prior to sending an official connection request. After clicking Connect Olga CTA, the user is directed to the PM page
Send/Receive PM, Ajla writes a PM indicating the available days and hours to meet. Then, she sends the message. Then, Ajla receives a PM from Olga with the new meeting day and time suggestions. Selects one of the time suggestions and approves her choice.
Set a Meeting, Ajla receives the confirmation message for the meeting approval with 3 suggested meeting locations
1. Ajla should select one of the suggested meeting locations and confirm her choice
2.After hitting Confirm CTA, she is provided an overview of the day, time and selected meeting location
3.Ajla receives a confirmation message
4.Olga receives Ajla´s meeting requests. She eather confirms or select one of the other two options and selects another meeting request
The usability tests were conducted online on Skype and Zoom via screen share with 4 participants. I recorded the sessions to be able to make notes later with their permission. The users were introduced 5 main tasks to complete:
During the usability tests, I focused on observing the following aspects:
At this step, I have summarized the key takeaways and prioritized the aspects to be updated. Then, I have made the iterations based on these key aspects. Some important comments regarding the usability of the website are listed below:
