Process of designing TripMory

David Chang
5 min readJul 20, 2016

--

From Ideation to Prototype

Today the landing page for our travel diary app has gone live, I thought I would document about the entire journey of designing TripMory.

What’s TripMory? It’s an app that curates your trip memories. Overview and description of the products can be found here at www.tripmory.com

Interview and Validation

We started with a simple problem to tackle: it takes too long to organize thousands of photos after you return from you trips. To validate this idea we have recruited 11 seasoned travellers (averaging 2 ~ 3 times out of country travel per year and took approx 800 ~ 1,000 photos per trip) to conduct problem interview. We avoided first degree contacts, and instead go for second or third degree recommendations, as well as joining local travel community events and meet up to recruit participant, in order to avoid “friends being nice” problem.

While there is over 50% interviewees who feel organizing photos is a tedious task, there doesn’t seem to be a great urgency to solve the problem, and people are quite ok household name solution now (i.e. Flickr, Google, Dropbox, etc.). But we did discovered some other common themes for post-travel memory preservation.

  1. Notes and photos for parts of the trip are sprinkled everywhere. They live as a word doc on their laptop, they are photo albums on the some cloud service or in the computer, and they are bits and pieces on different social platforms
  2. With contents everywhere, no one can remember any details from the trip after some time, let alone revisiting them. Most memories are collecting dusts.
  3. Some people have spent lots of time to put together a blog, travel diaries, long Facebook posts to share their story. Some wished they have time to do that. But almost all wants something to do with sharing the trip and get followers and likes.

With the above feedbacks on user problems, I started my first design project.

Ideation

So at this point we need to come up with a very high level solution on how to solve the problem. This turned out to be harder than I thought. There are million ways to tackle one single problem, and everyone has a different mindset and pre-formed feature set in mind, aligning the team to agree on one view is a challenge. But at last we have formed a preliminary point of view:

There are only less than 5% (sometimes much much lesser) of photos from each trip that are selected, polished and shared on social networks. Yes, those are the greatest moments, but what about the remaining 95%? They are being kept in a photo folder somewhere in the laptop, aren’t they part of the great trip memory that you should remember? We believe if there is a way to integrate photos, social posts, trip notes quicker and easier, and compile and share them in a more engaging interface, people would revisit them more often.

With the point of view in place, we started to look around apps that are looking to solve similar problems, their design and features. Several apps were selected with comments on how we can utilize some parts of their design and how we can improve/iterate from their current design:

Storyboarding

We started envisioning the use cases of the product, and what benefit we would like the users to receive. Below is the original storyboards for TripMory, empahsizing the problem, when is it used, and the benefit from using it:

2 Storyboards were made on different type of use cases

Paper Prototypes

This is my first try on getting hands dirty to visualize the product. I made a paper prototype for each of the storyboards. Paper prototypes are good that it’s quick to make, and I can test out different ideas and get a sense of how the user flow works.

We went back and selected some users from problem validation interview to take a look at our paper prototype. Many of them chuckled when they see paper app, but the feedbacks we collected were golden. We learned that users are better at critiquing when there is something physical in front of them. Immediately we found some usability issues with screens that leads to nowhere. It’s valuable to be able to fix these before going to digital version prototype.

Screenshot of paper prototype screens

Interactive Prototype

A quick aside on this step. Moving from paper to digital was hard for me, I have no photoshop experience whatsoever. I started surveying the right tool with flatter learning curve for this job. I settled for Sketch 3 and Principle for Mac as my tools of choice.

It was learning to use the tool and making prototype at the same time. I am still miles away from mastering the tool, but it is enough to make something quick in relative short amount of time.

Sketch sceens
Interactive prototype in the making

Prototyping goes hand in hand with usability testing. We have decided to go straight for high-fidelity prototypes in order to get more real feedbacks. For this testing, we went to local Starbucks for think out loud guerrilla user testing. The feedback from lone and innocent looking patrons tapping through the prototype was immensely helpful: seeing participants tapping places that had no functions, saying “yes I want to do this but nothing is happening when I tap!”, critical violation of heuristics, etc.

Several iterations were made to reach the final version here:

Video of TripMory prototype

Closing Remarks

That’s it for now! But we are still far and away from finish. Design is an iterating process, even if we have gone to production and gone to market. Software product is only released but never finished.

I’ll post more updates in the future. At the same time, we welcome anyone’s feedback, comments and criticism out here, to help us out with making TripMory better.

--

--