Mobile App Design
Mobile App Design
Research to High-Fidelity Prototypes
House Swap Platform for Digital Nomads
Research to High-Fidelity Prototypes
House Swap Platform for Digital Nomads
Our platform allows travel enthusiasts to explore new places affordably by leveraging their homes for house swaps, reducing travel expenses and promoting the discovery of new cities.
Target users: Digital nomads, frequent travelers, and location-independent workers seeking flexible, affordable housing solutions that align with their dynamic lifestyles.
Ensuro is a blockchain-based, licensed (re)insurance company that aims to make insurance more accessible to the public, allowing anyone to invest in insurance risk and benefit from it.
My experience as an Ensuro user informed my design decisions
This solo project, part of my DesignLab bootcamp, involved designing and adding a new feature to the Ensuro website. I handled everything from identifying the problem to UX research, visual design, and prototyping.
Role
Role
UX/UI Designer responsible for end-to-end design from research to prototypes
UX/UI Designer responsible for end-to-end design from research to prototypes
Goal
Goal
Create an affordable home exchange platform that helps digital nomads explore new cities and build community connections
To improve the user experience by creating a dashboard for better investment tracking
Problem
Problem
Digital nomads lack affordable, flexible accommodation options that offer authentic local experiences
Digital nomads lack affordable, flexible accommodation options that offer authentic local experiences
Tool
Tool
Figma, Notion, Google Docs, Maze, FigJam
Figma, Notion, Google Docs, Maze, FigJam
Searching a place to swap
Searching a place to swap
Brainstorming
Brainstorming
During the bootcamp, we were offered a few topics and I chose 'moving to a new place'
During the bootcamp, we were offered a few topics and I chose 'moving to a new place'.
During the bootcamp, we were offered a few topics and I chose 'moving to a new place'
Affinity mapping
Affinity mapping
Managed to interview 6 people, 2 in person, 4 online
Mapping and organize the content of 6 interviews with moving to new places experiences
Managed to interview 6 people, 2 in person, 4 online
Mapping and organize the content of 6 interviews with moving to new places experiences
Managed to interview 6 people, 2 in person, 4 online.
Mapping and organize the content of 6 interviews with moving to new places experiences
Research and Analysis
Research and Analysis
Through affinity mapping, I identified common themes among my interview info.
Through affinity mapping, I identified common themes among my interview info.
Through affinity mapping, I identified common themes among my interview info.
Themes
Themes
Reason for Moving
Concerns
Moving Experience
Adapt new place
Wish to have
Emotional Aspects
Reason for Moving
Concerns
Moving Experience
Adapt new place
Wish to have
Emotional Aspects
Information Collection
Difficulty
Moving within the same country
Priorities
Moving abroad
Information Collection
Difficulty
Moving within the same country
Priorities
Moving abroad
Extend the theme to generate ideas
Extend the theme to generate ideas
With the themes I developed, I created POV/HMW statements to provide context and scenarios, and from these I brainstormed more ideas.
With the themes I developed, I created POV/HMW statements to provide context and scenarios, and from these I brainstormed more ideas.
Personas
Personas
Our target audience includes frequent travelers and digital nomads who use their homes as resources to travel affordably.
Our target audience includes frequent travelers and digital nomads who use their homes as resources to travel affordably.
Project Goal
Project Goal
User Flow
User Flow
User find a house to swap (up) and List user’s own apartment (down)
User find a house to swap (up) and List user’s own apartment (down)
Task Flow
Task Flow
User find a house to swap (up) and List user’s own apartment (down)
User find a house to swap (up) and List user’s own apartment (down)
Sitemap
Sitemap
List the key features and create the sitemap
List the key features and create the sitemap
Mid-fidelity Wireframes
Mid-fidelity Wireframes
I created screens that relate to my task flow
I created screens that relate to my task flow
Brand voice
Brand voice
Concept of Logo
Concept of Logo
I use “circle”, “triangle”, and a “connecting symbol”, to convey the concept of exchange space and travel to different places.
I use “circle”, “triangle”, and a “connecting symbol”, to convey the concept of exchange space and travel to different places.
Color palette
Color palette
I believe the strong contrast of the pink/blue palette conveys the brand's free, happiness and excitement, aligning well with our focus on adventurous travel and exploration.
I believe the strong contrast of the pink/blue palette conveys the brand's free, happiness and excitement, aligning well with our focus on adventurous travel and exploration.
Typography
Typography
Open Sans is the best fit to me.
I like the font it's neither too heavy nor too light, and its height of x makes it easy to read.
It also aligns well with my brand idea, offering a solid yet relaxed feeling
Open Sans is the best fit to me.
I like the font it's neither too heavy
nor too light, and its height of x
makes it easy to read.
It also aligns well with my brand idea, offering a solid yet relaxed feeling
Open Sans is the best fit to me.
I like the font it's neither too heavy nor too light, and its height of x makes it easy to read.
It also aligns well with my brand idea, offering a solid yet relaxed feeling
High-fidelity wireframes
High-fidelity wireframes
I decided to focus on the mobile version first, because from the user usability test, I observed that most people chose to complete tasks on their phones.
I decided to focus on the mobile version first, because from the user usability test, I observed that most people chose to complete tasks on their phones.
Usability test
Usability test
Who we talked to:
People who have experiences using property rental app
People who didn't know about the purpose of my project
People who have multiple experiences with moving to new places.
Who we talked to:
People who have experiences using property rental app
People who didn't know about the purpose of my project
People who have multiple experiences with moving to new places.
Methods used:
Maze to collect data
Remote test with video call
In person test
Test with link
Methods used:
Maze to collect data
Remote test with video call
In person test
Test with link
Result: MoSCoW & Impact-Effort Matrix
Result: MoSCoW & Impact-Effort Matrix
I sorted all the feedback it into categories: what worked, pain points, questions, and suggestions.
Then use MoSCoW Analysis and Impact-Effort Matrix to prioritized the feedback.
I sorted all the feedback it into categories: what worked, pain points, questions, and suggestions.
Then use MoSCoW Analysis and Impact-Effort Matrix to prioritized the feedback.
I sorted all the feedback it into categories: what worked, pain points, questions, and suggestions.
Then use MoSCoW Analysis and Impact-Effort Matrix to prioritized the feedback.
Heat map
Heat map
With the heat map, I understand what elements people noticed at first sight and what users would click on.
For example, I can see people care about the progress, so I should adjust the size or design to make it more visible.
With the heat map, I understand what elements people noticed at first sight and what users would click on.
For example, I can see people care about the progress, so I should adjust the size or design to make it more visible.
With the heat map, I understand what elements people noticed at first sight and what users would click on.
For example, I can see people care about the progress, so I should adjust the size or design to make it more visible.
1st Iteration - Key Updates
1st Iteration - Key Updates
1st Iteration - Key Updates
Adjust the breadcrumb icon number color.
Add privacy terms to the contract upload page.
Add a pop-up message icon next to the notification bell.
Readjust the font size of numbers on the listing page.
Add card design on the confirmation page.
Move up the instructions and add more details in the description.
Add an option to upload videos.
Rethink the content of the Category and Home sections.
Adjust the breadcrumb icon number color.
Add privacy terms to the contract upload page.
Add a pop-up message icon next to the notification bell.
Readjust the font size of numbers on the listing page.
Add card design on the confirmation page.
Move up the instructions and add more details in the description.
Add an option to upload videos.
Rethink the content of the Category and Home sections.
Final High-Fidelity Prototype
Final High-Fidelity Prototype
Built and animated in Figma to demonstrate real-time interaction and responsiveness.
Built and animated in Figma to demonstrate real-time interaction and responsiveness.