Designing Modern Stockholm — a guide that skips the clichés. The website version
Designing Modern Stockholm — a guide that skips the clichés. The website version
Designing Modern Stockholm — a guide that skips the clichés. The website version
CONTEXT
The idea
CONTEXT
The idea
CONTEXT
The idea
Planning a trip to Stockholm can be a pain — finding underhyped spots, scrubbing YouTube, drowning in text. This guide cuts the noise and shows the city in a quick and playful way.
Planning a trip to Stockholm can be a pain — finding underhyped spots, scrubbing YouTube, drowning in text. This guide cuts the noise and shows the city in a quick and playful way.
Planning a trip to Stockholm can be a pain — finding underhyped spots, scrubbing YouTube, drowning in text. This guide cuts the noise and shows the city in a quick and playful way.
My role
My role
My role
I do everything — research, writing, design, production, marketing — with a little backup from AI.
I do everything — research, writing, design, production, marketing — with a little backup from AI.
I do everything — research, writing, design, production, marketing — with a little backup from AI.
Potential audience
Potential audience
Potential audience
Stockholm has detailed info about who, when, where, and why visit the city.
Stockholm has detailed info about who, when, where, and why visit the city.
Stockholm has detailed info about who, when, where, and why visit the city.
15 million
overnight stays
The numbers is only growing.
32% of visitors
are foreigners
Mainly from USA, UK, Germany.
Foreigners walk around the city, do shopping
That's the main activities.
15 million
overnight stays
The numbers is only growing.
32% of visitors
are foreigners
Mainly from USA, UK, Germany.
Foreigners walk around the city, do shopping
That's the main activities.
15 million
overnight stays
The numbers is only growing.
32% of visitors
are foreigners
Mainly from USA, UK, Germany.
Foreigners walk around the city, do shopping
That's the main activities.
Product research
Product research
Product research
I interviewed 10 travelers, analyzed visitor stats, reviewed guide feedback, and applied Jobs to Be Done to shape the guide. Here’s what I found people really want from the guide.
I interviewed 10 travelers, analyzed visitor stats, reviewed guide feedback, and applied Jobs to Be Done to shape the guide. Here’s what I found people really want from the guide.
I interviewed 10 travelers, analyzed visitor stats, reviewed guide feedback, and applied Jobs to Be Done to shape the guide. Here’s what I found people really want from the guide.
1
Visit more underhyped spots
To get what living in Stockholm feels like + escape crowds of tourists
2
Pick restaurants for mixed diets
It’s easy to find vegan cafés, tougher — one for both vegans and non-vegans
3
Figure out where to go at night
By 9 pm, streets becoming quiet, shops are closed. It’s not clear where to eat or walk.
4
Get souvenirs beyond magnets and T-shirts
People hunt for stuff that represents Swedish culture — like food or home accessories.
1
Visit more underhyped spots
To get what living in Stockholm feels like + escape crowds of tourists
2
Pick restaurants for mixed diets
It’s easy to find vegan cafés, tougher — one for both vegans and non-vegans
3
Figure out where to go at night
By 9 pm, streets becoming quiet, shops are closed. It’s not clear where to eat or walk.
4
Get souvenirs beyond magnets and T-shirts
People hunt for stuff that represents Swedish culture — like food or home accessories.
1
Visit more underhyped spots
To get what living in Stockholm feels like + escape crowds of tourists
2
Pick restaurants for mixed diets
It’s easy to find vegan cafés, tougher — one for both vegans and non-vegans
3
Figure out where to go at night
By 9 pm, streets becoming quiet, shops are closed. It’s not clear where to eat or walk.
4
Get souvenirs beyond magnets and T-shirts
People hunt for stuff that represents Swedish culture — like food or home accessories.
DESIGN PROCESS
First version (and how I got hacked)
DESIGN PROCESS
How I crafted first version (and got hacked)
DESIGN PROCESS
First version (and how I got hacked)
I wanted to get the site live fast and improve it step by step. I used WordPress and Semplice (a visual builder for designers) — started with two pages: best places and night city. Popular topics, and fun to play with visually.
Each page had its own mood. The main page was white, but the night city page turned black, with glowing colors to match the vibe.
It looked decent, but there were a few issues:
• Pages loaded too slowly
• Any design change meant rewriting code — and that took forever
• I wanted a more complex structure, but that was out of my coding skills
• And eventually, someone hacked the WordPress site
So I moved everything to Framer — full control over layout, and way more room to experiment.
I wanted to get the site live fast and improve it step by step. I used WordPress and Semplice (a visual builder for designers) — started with two pages: best places and night city. Popular topics, and fun to play with visually.
Each page had its own mood. The main page was white, but the night city page turned black, with glowing colors to match the vibe.
It looked decent, but there were a few issues:
• Pages loaded too slowly
• Any design change meant rewriting code — and that took forever
• I wanted a more complex structure, but that was out of my coding skills
• And eventually, someone hacked the WordPress site
So I moved everything to Framer — full control over layout, and way more room to experiment.
I wanted to get the site live fast and improve it step by step. I used WordPress and Semplice (a visual builder for designers) — started with two pages: best places and night city. Popular topics, and fun to play with visually.
Each page had its own mood. The main page was white, but the night city page turned black, with glowing colors to match the vibe.
It looked decent, but there were a few issues:
• Pages loaded too slowly
• Any design change meant rewriting code — and that took forever
• I wanted a more complex structure, but that was out of my coding skills
• And eventually, someone hacked the WordPress site
So I moved everything to Framer — full control over layout, and way more room to experiment.
DESIGN PROCESS
The second version
DESIGN PROCESS
The second version
DESIGN PROCESS
The second version
Apple TV+ is a great example of mood-driven covers. The layout stays clean and readable, but the logos change to fit each show’s vibe.
Apple TV+ is a great example of mood-driven covers. The layout stays clean and readable, but the logos change to fit each show’s vibe.
Apple TV+ is a great example of mood-driven covers. The layout stays clean and readable, but the logos change to fit each show’s vibe.
So even simply using several fonts in titles of the guide can make it playful:
SWEDISH FOOD
and DRINKS
LEGENDARY
METRO STATIONS
old village
night city
But then the site layout needs a fixed structure. Otherwise it will be too inconsistent.
That’s why I went with a split two-column grid with clear borders as the main layout.
So even simply using several fonts in titles of the guide can make it playful:
SWEDISH FOOD
and DRINKS
LEGENDARY
METRO STATIONS
old village
night city
But then the site layout needs a fixed structure. Otherwise it will be too inconsistent.
That’s why I went with a split two-column grid with clear borders as the main layout.
So even simply using several fonts in titles of the guide can make it playful:
SWEDISH FOOD
and DRINKS
LEGENDARY
METRO STATIONS
old village
night city
But then the site layout needs a fixed structure. Otherwise it will be too inconsistent.
That’s why I went with a split two-column grid with clear borders as the main layout.
RESULTS
Final design
RESULTS
Final design
RESULTS
Final design
The site has a clear structure and a grid. That being said, every section uses the grid slightly differently, uses unique fonts, and gives specific vibes.
The guide doesn’t show the whole city — vice versa, it goes deep and describes Stockholm very specifically. It cuts all historical fluff — and skips overhyped touristy places.
The site has a clear structure and a grid. That being said, every section uses the grid slightly differently, uses unique fonts, and gives specific vibes.
The guide doesn’t show the whole city — vice versa, it goes deep and describes Stockholm very specifically. It cuts all historical fluff — and skips overhyped touristy places.
The site has a clear structure and a grid. That being said, every section uses the grid slightly differently, uses unique fonts, and gives specific vibes.
The guide doesn’t show the whole city — vice versa, it goes deep and describes Stockholm very specifically. It cuts all historical fluff — and skips overhyped touristy places.
RESULTS
Impact
RESULTS
Impact
RESULTS
Impact
• Page loading speed improved by 60%
• Fully responsive design across phones, tablets, and desktops
• 12% more users scrolled to the bottom of the page
• Page loading speed improved by 60%
• Fully responsive design across phones, tablets, and desktops
• 12% more users scrolled to the bottom of the page
• Page loading speed improved by 60%
• Fully responsive design across phones, tablets, and desktops
• 12% more users scrolled to the bottom of the page
RESULTS
Lessons learned
RESULTS
Lessons learned
RESULTS
Lessons learned
Set deadlines when working solo
I thought I had all the time in the world. But without a deadline, the project just dragged. I had to make my own finish line — or it’d never ship
Work with the “always done” mindset
I launched the first version in a week. It wasn’t perfect — no fancy photos, no animation — but it worked. I made the rest better, little by little
Use JTBD to shape product
I used JTBD to understand what people actually need from a city guide
Publish with Framer
I knew how to code, but Framer pushed me further — especially with motion and performance
Design for all screens
I built layouts for phones, desktops, and extremely wide screens
Set deadlines when working solo
I thought I had all the time in the world. But without a deadline, the project just dragged. I had to make my own finish line — or it’d never ship
Work with the “always done” mindset
I launched the first version in a week. It wasn’t perfect — no fancy photos, no animation — but it worked. I made the rest better, little by little
Use JTBD to shape product
I used JTBD to understand what people actually need from a city guide
Publish with Framer
I knew how to code, but Framer pushed me further — especially with motion and performance
Design for all screens
I built layouts for phones, desktops, and extremely wide screens
Set deadlines when working solo
I thought I had all the time in the world. But without a deadline, the project just dragged. I had to make my own finish line — or it’d never ship
Work with the “always done” mindset
I launched the first version in a week. It wasn’t perfect — no fancy photos, no animation — but it worked. I made the rest better, little by little
Use JTBD to shape product
I used JTBD to understand what people actually need from a city guide
Publish with Framer
I knew how to code, but Framer pushed me further — especially with motion and performance
Design for all screens
I built layouts for phones, desktops, and extremely wide screens
RESULTS
Next steps
RESULTS
Next steps
RESULTS
Next steps
I want to continue developing Modern Stockholm guide:
• Implement more dynamic content
• Launch social media accounts to grow traffic
• Start working on an iOS app with deeper traveler support
I want to continue developing Modern Stockholm guide:
• Implement more dynamic content
• Launch social media accounts to grow traffic
• Start working on an iOS app with deeper traveler support
I want to continue developing Modern Stockholm guide:
• Implement more dynamic content
• Launch social media accounts to grow traffic
• Start working on an iOS app with deeper traveler support
DROP ME A LINE
Hugo Löfquist
2024…2025
Legal name:
Evgenii Lefkvist
DROP ME A LINE
Hugo Löfquist
2024…2025
Legal name:
Evgenii Lefkvist
DROP ME A LINE
Hugo Löfquist
2024…2025
Legal name:
Evgenii Lefkvist