👩🏻💻 My Role
UX/UI Design
🛠 Tools
Google forms, Figma, Zeplin.
⏱ Timeline
2 weeks
The Problem
When you move to a new country or city, sometimes it is hard to understand all the things you need to do to settle and live like a local.
→
The Goal
Create a version of the welcome kit for Lisbon to help foreign people to learn everything they need to know to ease their setup in the city.
1. Research
1.1 Interview the stakeholder
To start to understand the company and the welcome kits, I interviewed Pierre, the owner, and CEO of KitNations.
Discoveries
➤ KitNations is a B2B-C company, and the clients are usually Universities.
➤ They have a Chinese version of the kit and the KitBot in WeChat.
➤ Pierre didn’t want to invest time in developing an app at this stage.
➤ Because of the GDPR, the company couldn’t give me access to interview the real users of the website.
1.2 Survey and Interviews with potential users
To get some insight about what the user think of a welcome kit, I conducted an online survey which had 31 answers. In addition, I did 5 interviews with people that already lived abroad.
Discoveries
➤ They would like to receive a transportation card, bank card, and SIM card;
➤ Some recommendations about where local people normally go to eat and have fun would be appreciated.
➤ They want to know more about the local culture.
2. Define
2.1 Affinity Diagram
I built an affinity diagram to clarify the insights that I had and to find patterns on the answers.
2.2 User Persona
2.3 Problem Statement
How Might We help foreign newbies in Lisbon to learn everything they need to know to ease their setup in the city?
3. Ideate
3.1 MoSCoW
After the brainstorming session, I had a lot of ideas on how to start building solutions. To prioritize, I used the MoSCoW tool to find my Minimum Viable Product (MVP).
3.2 Site Map
3.3 User Flow
1st user flow: Emma decide to go to the home page to know more about the local food in Portugal.
2nd user flow: Emma talk to kit bot to know more about the local food and where she can eat (places that the KitNations indicates).
4. Prototype
4.1 Low-Fidelity
Discoveries
➤ The users want a way to go to Google Maps directly from the “Local Culture — Food” page;
➤ The call to action needs to be more clear to the users;
➤ The KitBot button was not clearly indicated.
4.2 Mid-Fidelity
Discoveries
➤ People don’t want to read a lot when talking to a bot. They want direct answers;
➤ The different communication methods with the bot weren’t very clear (clicking on the options or typing in the text box).
After all the corrections, I was ready to start to think about the UI part of the project.
5. UI Design
5.1 Moodboard
I was inspired by the collage style that KitNations already have on their website and the colors that I usually see on Lisbon.
5.2 Style Guide
5.3 High-Fidelity
The KitNations website had consistency issues in the landing page, so I decide to redesign it, but keeping the logo, colors, and typography.
The old website
The new website
What has changed?
➤ Created the Local Culture page where the user can easily get information about the city they are moving to.
➤ Moved the Kitbot to be embedded in the website giving more easy access to users.
➤ Added an option of typing communication with the Kitbot. The user can find faster the answers they are looking for.
➤ Designed a new look to the KitNations website, with more consistency.