project overview

M.Memo

For the "Integrated Design Project 2" course, students were asked to choose a company and develop a concept product. M.Memo is an application for tablets that helps users to create stylized maps that capture users’ travel through photos, associations, and memories.

Project Type

Course Project

Timeline

Sep - Dec 2021

Role

UI Designer
UX Designer
Graphic Designer

Collaborators

Individual Project
background
Traveling is not just about the destination, it's about the journey and the memories that last a lifetime.

People travel for various reasons, such as experiencing new cultures, trying different foods, and gaining a fresh perspective on life. It can also provide opportunities for personal growth, adventure, and creating lasting memories with loved ones.

The problem
Even the most vivid and meaningful experiences can become hazy over time.

As time passes, our memories can fade and we may forget things that we don't want to forget, including travel memories.

🤔 The Challenge: How might we preserve memories about travel?

the solution
M.Memo helps users preserve and revisit their travel memories in a unique and interactive way.

The application allows users to quickly and easily capture travels of any scale — from visiting a village to a multi-countries journey, without any graphic design experience.

inspiration
I wanted to create a product that would help people to easily create illustrated maps of their travels.

n the summer of 2020, I took an online course that taught me to create illustrated maps. I like illustrated maps, but there are two potential problems: maps created by someone do not have a strong personal significance as they don't reflect the experience, and creating maps takes time, effort, equipment, and some drawing skills. At this stage, as I knew the process of creating a map, I wanted to make it easier and more accessible so that more people would enjoy their illustrated maps like me.

Illustrated Map Creation Process
concept development
Through experimentation, I improved the concept's feasibility and sustainability.

I created the first concept of the product. It would be a mobile application that would make travel maps and would reply on the community as a source of illustrations. My target users would be social media and “aesthetic” things lovers who do not have any graphic design experience.

Upon receiving feedback from both my Professor and one user interview, I further developed and improved the concept of my product. In addition to creating aesthetic images, I wanted the application to delve deeper into the theme of preserving travel memories. As part of the course requirement, I had to choose a company to develop the product under, and I ultimately chose Google due to its abundant resources, the most relevant being Google Photos and Google Maps.

Initial Vs. Improved Concepts Comparison

My challenge was to create a map with good composition while requiring minimal effort from the user. Instead of using illustrations, I opted for photos, and had to find a way to arrange them on the map. Through several iterations with mockups, I decided to automate the process of formatting photos into different sized circles and applying a filter on top.

Quick Mockup Iterations

However, the next challenge was figuring out how to create a map base without drawing. After searching for solutions, I came across Mapbox, a tool that allows users to create custom online maps for websites and applications. I chose the color pink for my map, based solely on my personal association with the trip.

Creating Map Base

To maintain map cohesion and create the illusion of a "hand-drawn" map, I decided to include small illustrations of city elements in the maps created by the application, similar to those used in illustrated maps. To make this idea sustainable, I planned to create several sets of illustrative elements that could cover all types of projects.

Map Details

To ensure the user could see all the details without the map being too overwhelming, I decided to make the completed project A5 size when printed. The frame would provide context for the trip and give a feeling of completeness to the overall design

Final Outcome
design
From idea to implementation.

I started out with low-fidelity sketches to demonstrate how the whole application would work based on the concept I created earlier.

Low-Fidelity Prototype

In the second iteration, I used default components and styles from the Material Design Library which is a design system used by Google.

Medium-Fidelity Prototype

Later, I customized those components according to the branding I developed. In the beginning, the application would have only one style, but later would be expanded to multiple themes with its colors and illustrations (for example, a theme with shades of pink).

Branding
OUTCOME
Final Design
Back to HomeNext Project