Complete UX/UI design from scratch

• UX research: desk-research, interviews, customer journey mapping, user testing, card-sorting

• UI design: Lo-fi sketching, hi-fi UI design in Sketch and Invision

About Goshuin and how this project started

A few years back me and my girlfriend visited Japan. She had bought this special notebook at a department store, and every time we visited a temple or shrine she would collect a stamp. These stamps (Goshuin) and the books you keep them in (the Goshuinchō) are part of an old tradition. Collecting them during your trip through Japan is like partaking in a pilgramage. After returning home you have a book filled with memories you keep forever.

There is also another side to collecting the stamps. You are financially supporting these historical places. Each stamp costs around ¥500 (€4,15/$4,55). This money is used by the temples and shrines to preserve their history and traditions!

I think Goshuin are fascinating and really looked forward to doing some kind of project on them. But first I needed a problem. While going through my exploratory research I quickly found a potential issue. Even though there was plenty of information on what Goshuin were, there was little to no information on where to get them. This is where I started my project.

My initial hypothesis: Tourists who visit Japan do not know where to collect Goshuin.


Sometimes you need to get creative

Survey responses
Indepth interviews
Social media groups
Lots of deskresearch!

Competitive analysis

I did some exploratory research, but it was time to really find out what was out there. It turns out I was done pretty quickly. There is very little to find!

  • Amazon.com: Has about 2 books in Japanese
  • Google: Only has basic information on what Goshuin are
  • App-store: Nothing…

So instead I looked at indirect competitors. I compared four different travel-apps and the features they offered. Something that caught my eye is that they all allow you to plan your trip, and look back at previous ones.

Because there was so little information on Goshuin I wondered how the indirect competitors tackled content creation. I found that 3 out of 4 used some form of user or community generated content. I kept this in the back of my mind for later on.

Questionnaires and surveys

Based on my deskresearch and competitive analysis I created a lean survey canvas to narrow down on the things I still needed to know. Even though I have a small network of people who either travelled to Japan, or live there, I knew getting participants in a short amount of time was going to be difficult. To compensate I split the final questionnaire into two parts.

  1. People who knew about Goshuin were asked questions about how they found out about them, collected them, etc.
  2. People who did not know about Goshuin, but were planning on going to Japan in the future, were given a small introduction on Goshuin. They were then asked about their interest and how they would go about researching them.

I collected 27 survey responses, more than I had hoped for! As for the interviews, I only managed to get two people to talk to. (So far, I did all of this in a single day). So again I had to get creative. To supplement my qualitative research I joined Facebook and Reddit groups with people collecting Goshuin. This allowed me to go back and read about what people struggled with, or really enjoyed!

Affinity diagram

Finally, I organised all of my research into an affinity diagram. Some interesting statistics about finding information and collecting:

  • 70% of those who knew about Goshuin collected them, and 50% of those who still plan on going and were told about Goshuin expressed an interest
  • Of those who collected, 75% intends to collect more! And 75% of collectors collect alone.
  • Google Trends showed searches for ‘Goshuin’ have been increasing since 2017
  • 70.6% did no prior research before collecting, but of those who did 60% looked on Google and 41.7% asked friends and family
  • People rate finding info online with an average of 5.2 out of 10

So to summarise: Goshuin are becoming increasingly more popular, but finding information is hard.

75% of people who collected Goshuin intent to collect more!
50% of people planning to go to Japan intent to collect

There were also some interesting quotes:

  • “It’s fun to see what others collected!”
  • “I convinced two friends to start collecting.”
  • “I keep track of my Goshuin using Google maps, Timeline and a Google doc I made.”
  • “I lost my paper record where I wrote down the names of each shrine/temple.”
  • “I had to wait in line for an hour in Tokyo.”
  • “Where do I get the Fushimi shrine Goshuin? I know there are 2 more…”

So to summarise: People seem to learn about Goshuin through friends and family, keeping track is difficult and they are often unprepared when they get to a shrine/temple.


Narrowing down on the problem


I wanted to reduce assumptions, so I stuck as closely as possible to the data to create persona’s I could substantiate. This resulted in two, very text-heavy, persona’s called Rose and Floran.

  • Rose is new to collecting. She struggles most with finding out where to buy the Goshuin and how to plan which places to visit so she can collect as many as she can. She also lost her notes on where she collected each. She likes to learn more about the Goshuin she collected and will definitely collect more!
  • Floran is a little more experienced and has collected over 80. He searches out the more unknown shrines/temples but sometimes misses out on limited or seasonal Goshuin. He wants to financially support the places he visits and shares his collections on social media.

User journey map

So let’s assume Rose is planning her first trip to Japan. She learned about Goshuin and is excited to get her collection started! What would this experience look like? I created an extensive user journey, starting at her preparations, showing her time in Japan, and finally her experience after returning home. I included the problems and opportunities along the way.

Problem statement

So far my research confirmed the initial hypothesis that “Tourists who visit Japan do not know where to collect Goshuin.” is correct. However, it seems there are more pain-points. Many people take their chances by just going to every place and asking whether the shrine/temple offers Goshuin. However, this means they can miss out because 1. they arrive at the wrong time, 2. or they can’t find all of the Goshuin. Also, because they have no documentation in their language they sometimes forgot which Goshuin came from which place and what they mean.

My new problem statement: Tourists in Japan who want to collect Goshuin need the right information on where and when to buy them, because any available information is in Japanese and unstructured. This forces them to take their chances and results in them often missing out.


Choosing can be hard


When working through a project at a quick pace it is easy to miss some things along the way. Before starting ideation I created a mindmap with everything I learned so far. Together with my persona and problem statement I started brainstorming ideas.


Having too many ideas and needing to prioritise I used MoSCoW. The ‘must haves’ could be separated into two categories:

  • Features related to finding the temples/shrines, learning about their opening hours, the stamps they offer and their prices. (These relate directly to the problem statement).
  • Features related to the community aspects of sharing your collection, uploading your own images, and seeing what others have done. (These relate to empowering the community to generate content).

Information architecture

Paving the way

My research showed that a lot of Goshuin collectors do not do any research before hand. So, while a desktop application could have its benefits, I decided to develop a mobile app. Additionally, tourists visiting Japan are more likely to be carrying their mobile device and will have more benefits from an application.


Having a clear idea of what features I wanted to implement I arranged them into related pages and menu items to create the app’s structure. I ended up with four important menu items:

  • Discover: Here users can look for shrines/temples based on city, popularity or recommendations.
  • Search: This allows users to use a map to search and filter (nearby) shrines/temples.
  • Add: Here users have a list of all the places they ‘bookmarked’ and intent to visit. This way they can easily keep their itinerary up to date.
  • Collection: This last page shows all of the Goshuin the user has collected, giving them an easy way to look back where each came from.

User flow

Trying to validate my new user journey I created an user flow. This also made it easier for me to discuss my solution with others and quickly tackle pain-points I missed.My first user flow was too simple, and did not include enough ‘alternate routes’, but the more expended version added here gave me the right ideas to start work on my paper prototype.

Click here to see the user flow

Paper prototype.

First steps into UI

User testing

In this stage I was still very much playing around with features, lay-out and more, but to me it was also the first step to visualising the final product. Even though my handwriting is terrible, I was able to gather some valuable feedback from three user tests. For one, my prototype showed me I had too much work on my plate. In my paper prototype I included some screens that were going to end up under the fifth ‘more’ menu button. These were ‘should have’ or ‘could have’ features from the MoSCoW. That is why I made the decision to cut these out of the hi-fi prototype (unless I ended up having spare time).

UX pivot

After making changes based on my user testing I went through the design one more time before starting my UI research. I knew the community focus was my biggest weakspot, because it was based on assumptions. Yes, I found that 75% of users collected alone, and to quote one the interviewees; “It’s fun to see what others have collected!”. But my user research was not substantial enough to conclude that users wanted a community focus.

So why did I add it? Because it helped me solve the problem of content creation. It sort of felt like cheating, so I tried doing a little, last minute, deskresearch. Diving deep into the forums I came across a site of a Japanese blogger that had recorded over 13.000 different Goshuin all across Japan! Having solved the issue of content creation I tweaked my prototype. I removed several features, such as adding pictures of your own Goshuin and adding/liking friends. Because of this I was able to focus on the core functionalities that would solve the problem statement, and I could create a more realistic MVP.

UI research.

Setting up the design

Visual identity competitive analysis

I wanted to compare the visual identity of the apps I explored in my UX article to give me somewhere to start.

  • Colours: There were large differences between the apps. Some choose a more subdued color scheme, while others used vibrant colors. In the last case they were used sparingly, so not to distract from the content.
  • Fonts: Another interesting thing is that two of the apps (seemingly unrelated) used the same font! In general all four used fonts that were very simple and easy to read.
  • Style: While the content can make things a little busier, the apps themselves seemed pretty simple and focused on functionality. Interesting to see is that the fewer content images the app had, the more it relies on icons (and in a lesser degree illustrations).


I got the most inspiration for my moodboard by looking at the design of Polarsteps and Culture Trip. Like those apps I knew my design would be content heavy. I wanted a clean design with little distractions. I decided to go for red with my primary color. This specific color has had many influences in Japanese culture (such as the language, cuisine and fashion). It is also a color associated with many different shrines and temples, and especially Torii. The red color of the shrine gates symbolizes vitality and protection against evil.

Design system.

Making designing faster

Typography and colours

As mentioned above, I chose red as the primary color for its significance. A simple grey scale was going to be my support color and of course I added in a white.

The fonts were a little harder. For the display font I went through about 400+ different brushes. I was looking for something that captured the feeling of the Goshuin, but it had to be readable. Many of the brushes were ‘too much’, too thin, too broad, etc. In the end I showed several people the same mockup with 5 different fonts. Sanstuy Brush anonymously came out on top. As for the heading and body font I chose Hiragino sans. This font actually seemed to be designed for Japanese characters, but that gave it the exact ‘Japanese’ feel I was looking for.

Sketch symbols

To make things a little quicker and easier while working on my UI I created a set of symbols. The ones shown below are the final versions. Some of them went through several iterations, especially the Temple/Shrine-card on the second row.

Click here to see the Sketch Symbols

UI iterations and additions.

Final user testing and wrap up

Temple/shrine card

Users will have different ways of browsing temples/shrines and getting important information such as opening hours or an adress. Each location has its own page, but on the overview pages I created cards that summarised certain things. This card is an important part of the UI, because it shows the most relevant options and saves the user time. That is why I spend a lot of time testing and changing it. The thing I struggled with the most is figuring out what information and options to show on the overview, and what to show on the dedicated page.

This is the earliest version of the card. I went for a horizontal devision so that users could immediately see the Goshuin they could collect at each location. But this made it difficult to fit the (sometimes long) names of temples/shrines. It was also difficult to make the design responsive for smaller types of screens (like an iPhone SE). In the following version I switched to a vertical layout.

I also felt that the overview card should have more features immediately accessible. My first attempt to do this was by creating a ‘menu-bar’ beneath the card. This menu contained different actions with the same form but a different function. I split these up and slowly came to a more streamlined card where each feature had its own distinguishable shape and spot.


Browsing by map

Sometime you might not remember what a particular Goshuin looked like, but you know where you got it from. This is why users requested a feature by which they were able to search using a map. On the ‘collection’-page they can look back at all the individual Goshuin they collected during their trip.The map allows users to pan and zoom after which the list of Goshuin shown automatically adjust to those corresponding with the area on the map.

Final design.

Bringing everything together

Landing page and app-store

After finishing the hi-fi prototype there were a few small challenges I wanted to set myself. This is why I created a desktop landing page, a iOS app-store listing and a dark-mode. Logo design by Violet Jim (thank you!).

Static Screens

Prototype (Sketch) and animation (Invision Studio) video’s


And final thoughts


Tourists in Japan who want to collect Goshuin need the right information on where and when to buy them, because any available information is in Japanese and unstructured. This forces them to take their chances and results in them often missing out.

Interest in Goshuin is growing, but tourists have little to no information to help them start or expand their collection. Through my research I found the most important pain-points and worked on ideas to solve these. Using the groundwork it laid I gave shape and created a hi-fi prototype for an MVP. With a content heavy interface I made sure the UI was clean, so I reworked the interface many times and stuck with a single color (red). Finally, I added a desktop landing page, iOS app-store listing, a dark-mode and animations to complete my personal challenge.

Personal take-aways

  • UX: Looking back it is really interesting to see how the end product compares to the first concept I had when starting this project. Having a personal interest in the topic helped me along the way, but I made sure it did not cloud my judgement. I definitely had some ideas of what I would have liked it to be, but trusting my research and listening to user feedback I made many changes along the way. Especially testing with my paper prototype and redoing some of my research helped me fix the largest weakness in my UX design.
  • UI: Going into this project I knew it would be very UI heavy. This was exactly what I was going for as well! UI is not my strongest suit and I wanted to see how far I could go. I am very grateful for the feedback from friends and testers along the way. Looking at the final result I am very happy with how it turned out. I am still learning, but I feel much more confident in my UI skills!

Future iterations

I would love to develop this idea further. One thing I am particularly interested in is a game mode. In the current MVP users can see exactly what Goshuin they can collect at each location. However, some people might enjoy the thrill of discovery. By enabling all the Goshuin images to be blurred the user would not see any ‘spoilers’. It would also be really fun to find the stands where the monks are working by having a compass on the Apple Watch. It would be like treasure hunting where the watch vibrates more strongly as you get closer to an undiscovered Goshuin! Finally, I would like to dive deeper into research concerning the community aspect. I feel like there is potential, but further study will have to show what kind.



I am always down for a good conversation and new chances, so don’t hesitate to send me a message! A cup of tea (or coffee) never hurt anyone.