Your Journey North mockup

Your Journey North

Your Journey North is entirely my own project; I am responsible for its content, design, UX, and technical implementation.

See website
See the XD protoype
See the full report (PDF)


A personal matter

I’m personally more interested in the arctic areas, culture, hiking, roadtrips than going to warm places and hitting the beach. Throughout my journeys I’ve discovered that not everyone is aware of the nuances of the nordic landscape, and locals struggle dealing with the recent increase in tourism.

Educating tourists from different countries, geographical areas and cultures could help easen the locals’ struggles, and create a safe and memorable (in a good way) experience for visitors.

How does it work in practice?

After observation and research, I prepare content for the website. Instead of showering visitors in general information, I encourage them to use the bucketlist app; there they can choose the places they want to visit, and get specific, practical information about the places of their choice. Such information can be do’s and dont’s (according to locals), the best time to visit, the equipment you need, the unique things you have to watch out for.

The goal is to make this process exciting for visitors, so they WANT TO educate themselves about the place. Nobody likes to be lectured, but putting your bucketlist together, share it and get inspired can be exciting.


It started with observation. I’ve seen the trash at Norway’s most remote and beautiful places with my own eyes. I’ve seen how shamelessly people just hide their kids’ diapers under a rock and move on with their trip. Therefore I had some assumptions that I went out to verify or disprove.

Competitors: I’ve found that there are lots of travel agencies organizing Nordic holidays, but I’ve also found that the use of travel agencies has been declining since the 2000s.

Quantitative research: Via a survey I gained more insight into holiday planning habits and interests of visitors.

Qualitative research: Via numerous interviews, I got more familiar with the struggles of locals.

Personas: In order to better understand both parties, and clarify assumptions, I created personas. I was also able to refer back to them upon when making content, design decisions or technical features.

Sketching and wireframing


For wireframing I used pen and paper first, to sketch layout ideas and user flow. I wanted to eliminate basic problems like dead-ends in the user journey or inconsistencies in the content. I also wanted to ideate about what technologies would be the best to use in certain cases.

I created a digital wireframe for the bucket list app in Adobe XD, with special attention to the add / remove features. This way I prepared content for production, and the basic logic for the user flow.


In order to prepare for coding I prepared a user flow and a UML chart of how the interactive app would work.


I gathered inspiration from the simplicity of Scandinavian design, hence the dark blue and white color schemes spiced up with large-scale imagery of landscapes and all things Scandinavian.

For icons I used flat, less saturated colors that fit the clean design.

For typeface I use Inter, which is a sans-serif typeface. Sans-serif is a clean choice, but it’s versatile enough for both headings and paragraphs using a variety of its font weights.

The emphasis is on the travel destinations, therefore the images should be in focus. The simple design and the sans-serif font lets the imagery be in focus.


In my prototyping phase I created a prototype that’s high-fidelity in design for the web page, where I implemented a more detailed user flow and included content, like the countries and specific places, as well as the bucket list app.

I also created a functionally and design-wise high fidelity prototype for the bucket list web app, where I included functionality for the country selection, to view the most popular places in Norway, add and remove items from the bucket list, and view the bucket list in a new window.

Major changes in the prototyping phase were:


It was challenging to do good testing done during the 2020 pandemic situation, but the vast selection of online tools helped me overcome this.

Usability testing was limited to interviewing the few people that were close to me (friends and family), but aren’t necessary the target audience. Nevertheless, it still helped me flush out major usability flaws, like the sidebar being too big in the app (or that there was a need for the sidebar, at all).

In order to get more feedback, I used usabilityhub to create a 5-second test. I showed the top of the index page for users for 5 seconds and asked the following questions afterwards:

The reception of the design was generally positive (some said it was a little gloomy), and people understood that the page is about travelling and Scandinavia.

For the app, I added a “how does it work?” button, so people have a helping hand using the app for the first time.

How does it work? UI

From design to code

My biggest challenge was that I really wanted to design something visually unique, but reusable and responsive, because I knew I would be working a lot with API later on, and then populate the HTML with fetched data.

Therefore I took a rather lengthy design process, and spent a week on sketching and pseudo-coding the elements to figure out how to make them reusable and responsive with an optimal amount of code.

Reusable HTML elements

Throughout the whole design process I had a focus on technical feasibility. Based on the prototype I set up different HTML/CSS components I could reuse later in my template tags for displaying content from an API, or just in general layout.

This took a significant amount of time in the beginning, but saved a lot of time in later phases of production. When I started filling the page up with content building the actual page took little time, so I could focus on the content creation. Reusing HTML elements this way also helped keeping a consistent appearance throughout the whole site.

View the responsive photo collage element on CodePen

React.js & API

I used a JSON object generated from Google Sheets for storing data because It’s easy to maintain and navigate. I used React.js for building the bucketlist app, because it’s a highly dynamic page, often reusing elements and updating the UI.

How does it work?

The user selects a country that calls a component.

Choose a country, UI Choose a country, code Country components in React code Components in file list

The selected country’s component then:

Destination component Destinations look like this when rendered to the section

How filtering works

The filters are buttons with an eventhandler.

The eventhandler then iterates through the objects in a similar way “popular” does (with a for loop).

The button changes to an “active” state, to visually indicate what filter is applied.

Clicking any other filter / button removes the active state from the previous button, and displays different suggestions.

Activity filters, UI Activity filters, code Destinations with a specific activity rendered to the UI Destinations with a specific activity, code Destinations with a specific activity rendered to the UI
Go back to Home