Hauken

2025 Year in Review

2026-02-10T00:00:00+00:00

2025 was a year of building and shipping. At Heder Bank, we went from a manual mortgage process to automated processing, savings accounts, and the beginnings of an online bank. Outside work, I sold my first side project, launched a car bingo app, and spent family time cycling through Denmark and racing obstacles with the kids. Here’s my look back at 2025:

Work

2025 has been intense. After Robin and I jumped into designing and coding a bank from scratch last year, we’ve shipped a (manual) Minimum Hateable Product for mortgages, two websites, savings account onboarding, automated mortgage processing, and the start of an online bank while building brand and style guide. Solid output for what we claim is the smallest IT department in banking (plus a handful of consultants).

Being CTO means I’ve learned more about regulations than I ever wanted to know. I’ve written outsourcing documents, reviewed contracts, done endless risk assessments. I’m genuinely glad banking is heavily regulated, but I’m even more glad we hired a dedicated CISO who’s brilliant at this stuff. Hopefully that frees me up to actually build things next year.

Account creation in Heder Bank

A definite highlight was launching and automating our savings account flow. Since we needed more capital to fund new mortgages, releasing this feature became our top priority over the summer. The response was overwhelming—within days of launching, over 2,000 customers signed up for savings accounts, and we actually had to pause new applications because we’re such a small bank. I think that makes us one of the first banks to ever “sell out” of savings accounts. Now, our focus has shifted to building out the daily banking experience, which is both challenging and genuinely exciting!

Our Know Your Customer (KYC) process

Norway Fintech Festival

This year I also spoke at Norway Fintech Festival about Hyper Personalization in banking. In a moment of questionable genius, I decided to hand-draw every slide. Because what’s more personal in the age of AI than actually drawing and painting my own slides? The presentation was luckily well received!

Side projects

Sold Violating-gdpr.com

The site I sold this year

This year I sold my first side project. I was contacted by a company that saw potential in the site I created years ago checking your website if you sent data outside of the European Union. After some mails back and forth we agreed with a sum and I sold the site to them via Escrow. A win-win for both parts!

isecrets.io

iSecrets.io - iOS tips database

Years ago I launched isecrets.io as a newsletter that automatically sent over 150 emails with iOS tips. The problem was that running a high-traffic newsletter cost more than I was making from it. So I shut down the newsletter and turned all the tips into a searchable database instead. You can try it out here.

Launched Car Bingo

Car Bingo – a road trip game for kids

This year I once again attended Revenuecats shipathon in October. This year I launched a car bingo app inspired by the car-bingo sheet my wife created for our kids this summer. It was a fun “quick” project over some weekends, and the kids have enjoyed it on trips. Though they keep telling me I added way too many things to find. Try out the app here.

Sunday SMS

Weekly schedule reminder via SMS

I got tired of digging through my daughter’s school bag every week, so I made a Cloudflare script that texts my wife and me every Sunday evening with the week’s school schedule for the oldest one. Small thing, but it’s been helpful.

Parental leave tracker

Simple webapp for tracking parental leave hours

In September I started part-time parental leave for our youngest. Currently this means two hours less work each day and every other Friday off. That’s about 600 hours to track across a year, so naturally I built a simple webapp for tracking it.

I have only written 5 blogposts this year, which is quite disappointing considering one of my goals last year was to write more. I probably did write more, but mostly for myself and for work. The thing is, time spent writing means less time building, and building is what gets me excited these days.

The Good Parts

Travel

Dyreparken

Once again we travelled to Dyreparken some weekends before our real vacation started. I can’t recommend it enough being a couple of days in the magic of the pirate land. This time we rented a hut in Juliusskogen with canopy walks between the trees. A lovely memory!

Scouting camp in Gjøvik

Our main vacation this year started with a bang when we attended the national scout camp in Gjøvik with over 8 000 scouts. The first evening is also where I discovered my biggest blunder of the year: I had forgotten to pack the tent-rods for our family tent, so I had to scour Gjøvik and beyond to find a blackout family tent in a couple of hours. Luckily I found one and we ended up having a good time!

Bike vacation in Denmark

Then we spent two weeks in Denmark on bikes. We rented three different cabins in the north and just cycled everywhere. Turns out not having a car feels more freeing, not less. We’re definitely doing this again.

Cycling through Denmark

Toughest Oslo

Going to Oslo for Toughest in the autumn is becoming a family tradition. There’s something about the combination of running, obstacles, and that final exhausted sprint up the ski slope. This year I ran with Helene on Saturday and our two oldest on Sunday. We didn’t attend last year since I dislocated my shoulder the year before in the race and my shoulder wasn’t fully rehabilitated. This year it went fine in the main race, but I actually managed to dislocate my other shoulder during the family race. Luckily it snapped quickly into place with no later side effects.

Trolljegerprøven

The week after we ran Trolljegerprøven with both our oldest kids as well. I was more nervous about this since the middle one cancelled last year because she became too cold with all the water hurdles. But this year she finished strong!

Kaizers Orchestra

I haven’t been to a concert in years, but when Kaizers announced they were coming to Bergen I bought tickets immediately. Ended up going alone but really enjoyed it.

Health

Having three kids between 1 and 8 while working at a startup bank doesn’t leave much time for the gym. I’ve had to accept that. What I do now is pop into the training center near our office right after cycling to work. I’m already warm, so I just do a quick full-body workout. My average session is about 20 minutes. Sometimes it’s literally one set per body part. But staying consistent with this and doing lots of supersets with almost no rest has somehow made me stronger than I was last year.

2025 in training. Quick sessions, consistent effort.

Wonderful things from 2025

Purchases

Trmnl I bought this e-ink screen as soon as I saw it. It sits in our kitchen showing the next three days of our family calendar, today’s weather, and a countdown to whatever we’re looking forward to. The best part: I’ve had it for months and haven’t charged it once. tech

Quadlock case for iPhone I got the new iPhone 16 Pro, which is great. But it’s even better with the QuadLock case that lets me attach it to my bike or running band. I’ve used QuadLock cases for years, but this year I also got a ring for the back and it’s been incredibly useful for propping up the phone and just holding it better. gear

Media

Books I enjoyed this year

Endurance This is about Shackleton’s 1914 expedition to Antarctica. His ship got trapped in pack ice and he and his 27 crew members had to survive by drifting on ice flows, traveling in small boats, and living on seals and penguins in freezing conditions until they made it back to civilization. Absolutely gripping. Book

American Kingpin A detailed account of the Silk Road—the darknet marketplace built on Tor and Bitcoin—and how they eventually caught its creator. One of the best true crime books I’ve read. Book

Replay Jeff dies but wakes up as a younger version of himself. He uses what he knows about the future to get rich, but every time he reaches that same point, he dies again and wakes up even younger. Eventually he meets Pamela, another replayer in the same situation, and they figure it out together. Book

Red Rising Red Rising is a sci-fi novel where humanity has colonized the solar system under a rigid color-coded caste system, with Golds ruling as godlike elites and Reds toiling as the lowest slaves in underground mines. The main character Darrow, a Red, is surgically transformed into a Gold and infiltrates their brutal academy to destroy the society from within. I’m on book 4 now, which probably says enough. Book

The Gentlemen I actually read more books than watched movies this year. But the movie I enjoyed most was The Gentlemen, which had all the energy of Lock Stock and Snatch. Fast-paced with great dialogue. Movie

Taylor Swift - The life of a showgirl My most played album last year even though it came out in October. So many good songs! Album

Apps

Obsidian My favorite note-taking app got a major speed upgrade this year, which made it way more useful on my phone. Highly recommend it.

Claude Code I've played a lot with Cursor, ChatGPT and Claude over the year, but Claude Code has been the real game changing app for this year! It is amazing what it can do and how it empowers me as a creator!

Plans and goals for 2026

As I look ahead to 2026, I’m even more excited about the year ahead than last year. The pace of AI development keeps opening up new possibilities. Here’s what I’m focusing on:

Create a daily banking experience for Heder Bank. I’ve spent 15 years in fintech. Time to apply all of it and build something exceptional.
Launch another iPhone app. I’ve been thinking about this concept for years, but the technology has finally caught up. Excited to ship it.
Write to learn in public. Last year I had the goal of writing more in public. I am fairly certain I wrote more, but I definitely shared less. Let’s change that up this year!
Create more family adventures. When I look back at this year, the family trips are what I remember most. I want more of those.

Why Your Users Aren't Listening (It’s Not What You Think)

2025-08-18T00:00:00+00:00

There’s a right moment for everything, and sometimes good design is just about noticing those. Last night, I had been watching a show and about to turn off my TV when a notification popped up on my Apple TV: “Charge your remote now”

What a perfectly timed message!

It didn’t interrupt the show. It didn’t ask for attention when I was deep into what I was watching. It waited until I was done. Until my brain had shifted modes from consuming to wrapping up. The request was timed to match my context. That’s rare, and it felt strangely thoughtful.

The difference between charging it now and doing it some time later was effectively zero for me, but for my future self, it would be the difference between the TV working and not working.

Designers often obsess over how we say something. What the words are. Whether the button is red or blue. Where to place the button. But we often forget to think about when we say it. And timing, in design, often matters more than phrasing. The same prompt can be helpful or annoying depending purely on when it arrives.

I saw this when I worked with Skandiabanken. We’d sometimes promote new features or products right after users finished something. Like after they had paid a bill or logged out. And strangely, conversion rates were good, even though the customers had to log in again. Why? Because their minds were clear. They weren’t trying to do a task anymore. They were just… done. And when you catch people at that moment, they are far more open to noticing something new.

Contrast that with what happened today at the store: I opened my payment app to pay for something, and a notification took over the entire screen. I swiped it away instantly, didn’t even read it. They interrupted me mid-task. So instead of engaging with their message, I treated it like an obstacle to remove.

We talk a lot about empathy in design. Understanding what someone needs and how to present it. But timing matters just as much. Knowing when someone is ready to hear your message can be the difference between helping them and annoying them.

The surprisingly difficult art of paying for my Apple developer account

2025-08-14T00:00:00+00:00

There comes a moment in every person’s life when they realize that the modern world operates on a system of dependencies so complex that even the companies who built them haven’t the faintest idea how they work. For me, this moment arrived last week when I tried to do something as simple as giving Apple money.

Specifically, I was trying to pay for my company’s developer subscription. The sort of transaction that, in a rational universe, would involve handing over money and receiving goods or services in return. But apparently we do not live in a rational universe. We live in a universe where Apple has constructed a digital Rube Goldberg machine of such staggering complexity that it requires the precise alignment of no fewer than three separate login states, one payment card, one specific biometric authentication method, and what I can only assume is a favorable lunar phase.

“Hello! This is Apple Developer Support,” chirped the first representative with the sort of bright, helpful tone that suggests she genuinely believed this would be a straightforward conversation “How can I help you?”

“I’d like to renew my companys developer subscription,” I said, foolishly believing this was a reasonable request.

“Are you the Account Owner?” she asked, as if I might have called to renew someone else’s subscription for the sheer sport of it.

“Yes. It was transferred to me half a year ago.”

“Great! Are you logged in with your Account in Settings on your Mac, in the App Store, and in the developer App?”

“Well,” I admitted, “I’m logged in with my personal account on my computer and not the business account I want to renew.”

“Sure! Let’s just transfer the ownership to your personal account instead!”

For a brief, shining moment, I thought I had encountered that rarest of creatures: an Apple support representative who understood that technology should serve humans, not the other way around.

“Wait!” she said, and I could practically hear her consulting some sacred text of digital bureaucracy. “I see your personal account is an owner of another organization. I’m sorry, but an Apple ID can’t be an owner of multiple Business Accounts. You’ll then have to log out of Settings, App store, the developer app on your Mac, wipe your iCloud on your computer and then log in again with your business account everywhere.”

There it was, the moment when I realized that Apple, a company worth more than the GDP of most nations, had constructed a system where the simple act of renewing a developer license when you are the owner of multiple business accounts essentially contaminated your entire digital existence, requiring a full cleansing to proceed.

I spent the next hour performing what can only be described as technological exorcism, logging out of everything, wiping iCloud on my computer, and logging back in with my business Apple ID account.

“It’s done,” I reported back, “but I still get the same error.”

Twenty minutes of mystical troubleshooting later, during which we presumably consulted ancient scrolls and performed the technological equivalent of reading tea leaves, my support representative achieved enlightenment: “You know what: I think this will automatically renew in two weeks and you don’t have to do anything.”

Ah. The classic solution: maybe the problem will disappear if we all pretend it never existed.

“Ok! Sure! Thanks!” I said, because what else do you say when someone tells you that the solution to your problem is to have never had the problem in the first place?

Four hours later, my phone rang.

“Hello! This is Apple Developer support! I’m sorry, but what my colleague told you was wrong. Could you log out everywhere on your computer again and wipe your iCloud so that we can renew your developer license?”

At this point, I was beginning to understand that Apple’s support system operates on the same principle as a wobbly table: each attempt to fix the leg makes it wobble more while convincing you that surely, surely, this next adjustment will be the one that works.

“Why,” I asked with what I felt was admirable restraint, “are you making it so hard for me to give you money? Why?” The support representative, to her credit, did not attempt to answer these questions, perhaps recognizing them as the existential screams they were meant to be.

In desperation, I dug up an old iPhone from the technological graveyard that is my kitchen drawer, wiped it clean (because apparently, in Apple’s universe, all devices are born in sin and must be purified), and installed it with my business Apple account.

Surely this would work.

Surely.

It did not work.

Ten minutes into my next call with developer support (call number four, but who’s counting) we finally discovered the solution. To successfully renew an Apple Developer subscription of an organization that was transferred to you (and you use another Apple account day to day), one must not only be logged into the correct account across three seperate applications on a clean device and possess a working payment method, but also have Face ID enabled. Apple, masters of cramming supercomputers into pocket-sized devices, has created a payment system for developers that would baffle the engineers who built those very devices.

And we accept it since we don’t actually have a choice. I couldn’t simply take my business elsewhere, because leaving Apple’s ecosystem would mean abandoning years of work and watching our app vanish from the only store that matters. They can make the process as maddeningly convoluted as they like because what are we going to do? Switch to Android and leave our iOS customer base hanging?

I got my subscription renewed, eventually. But I can’t shake the feeling that somewhere in Cupertino, there’s a room full of very smart people who have created a system so convoluted that they themselves need technical support to use it, and they are just as trapped by it as the rest of us.

Notes from inside an accidental airbag

2025-02-13T00:00:00+00:00

I lifted my daughter from the bike in our garage, her small hands gripping my shoulders. The January chill stung our cheeks, and my Hövding airbag helmet sat forgotten around my neck.

I gestured toward the house. “Race you to the door!”

She grinned, before hopping onto her kick wheel. She propelled herself forward with the practiced confidence of a toddler who didn’t know fear.

But halfway up the path, I saw it - a small pothole in the asphalt, barely noticeable to adult eyes but a trap to tiny wheels. She rolled forward, oblivious, while my pulse hammered in anticipation. In the span of half a second, I saw two futures: one where she toppled headfirst and another where my reflexes caught her mid-fall.

I didn’t think. I just moved — lurching across the asphalt. My hands extended to grab her shoulders, disarming the inevitable fall.

Then it happened.

A deafening hiss, like a tire exploding. A sharp POP. My Hövding, still around my neck, detonated into action. Instantly, it ballooned upward, encasing my head in a cartoonishly massive pillow.

The helmet wasn’t just inflated; it whirred. Little electronic confirmations buzzed from its connection to my phone, echoing in the still January air. The Hövding app offering alerts of a “potential crash detected” and asking if I was okay.

And then I started laughing. I couldn’t help it. The sheer absurdity of the situation, the way it had all spiraled from a subtle turn of her kick-wheel. This collision of cutting-edge technology and human fallibility resulted in a single, absurd moment.

Her eyes filled with betrayal. Then came the crying. Instead of gratitude for my heroic save, I was met with wide-eyed terror.

I crouched down trying to explain. But what could I even say? “It was just my helmet” didn’t make sense to a toddler. I managed to carry her home, while she turned away from the sight of this terrifying transformation.

Later, as I stood in the entrance with the Hövding deflated in my hands, I reflected over the scene. They tell you these things are tested for every edge case: precisely calibrated, exhaustively prototyped. A marvel of modern design. But as a designer, I knew: you can simulate a million scenarios in the lab, but you can’t account for the chaos of real life - like a father’s instinctive lunge to catch his daughter, nowhere near a bicycle, triggering a $300 false alarm.

The power of a MHP (Minimum Hateable Product)

2025-01-30T00:00:00+00:00

I never thought I’d advocate for creating something I hated. As a designer, my career has been built on crafting beautiful, intuitive experiences. But there I was, watching a potential customer struggle through a digital obstacle course that would make even the most patient user want to tear their hair out. This digital train wreck could become our greatest asset.

The interface was clunky, the flow unintuitive. Each click seemed to lead to a new frustration. My designer’s instincts screamed to fix it, to polish it, to make it shine. But a new reality was setting in: we needed to move forward, imperfections and all.

If you aren’t embarrassed by the first version of your product, you shipped too late. — Reid Hoffman

We're not proud of this, but...

Enter the Minimum Hateable Product (MHP).

You’ve heard of MVP - Minimum Viable Product, the startup world’s favorite way to test markets with bare-bones functionality. MHP is MVP’s embarrassing cousin, the one we don’t invite to family gatherings.

MHP is the product that makes you cringe. It’s functional, sure, but only in the most basic sense. Imagine a website held together by virtual duct tape and a prayer – that’s our MHP. And yet, it might just be the key to rapid innovation in established industries like banking.

When we started at Heder Bank, we faced a choice: spend a year building the “perfect” banking system, or get something - anything - out the door in two months. We chose speed over perfection, progress over polish.

Our mortgage application process became a Frankenstein’s monster of disconnected parts. Credit checks on one url, anti money laundering in a mail later on. Customers bounced between URLs like pinballs, filling out forms that seemed to multiply like rabbits. Behind the scenes, our case workers performed digital acrobatics, juggling systems and manually connecting dots.

As a designer, every fiber of my being rebelled. This violated every best practice and committed war crimes against user experience. But as we watched our first mortgage payment go out, just 80 days after starting, it all made sense: Each customer’s struggle through our imperfect system taught us more than months of hypothetical planning and testing ever could. The product was rough, but it worked - and it gave us something invaluable: real customers with real feedback. We’re still improving, but we’re moving faster than we ever could have with a polished-but-delayed launch.

2024 Year in Review

2025-01-17T00:00:00+00:00

In 2024, life threw everything at me at once: welcoming our smiling third child, rebuilding strength after shoulder surgery, and taking the biggest leap of my career. After 14 years in consulting, I found myself helping build a bank from scratch, all while somehow managing to ship three passion projects in the margins of life. It was a year of pushing limits and finding new rhythms. Here’s is a look back at my 2024:

Work

After almost 7 fantastic years at Stacc, 2024 brought significant changes. What began as Stacc X - a project division I founded with Robin Sandborg and Espen Sæverud - evolved into something remarkable. Under Stine Neteland’s skilled leadership, Stacc X and our sister company Stacc Flow had grown increasingly collaborative. In March, we merged to form Stacc Link. The merger felt less like a corporate restructuring and more like making official what was already happening in practice - the natural next step in a story of shared successes.

2024 was also a year of saying goodbye to key team members: Stine moved on to play an important role at Frendegruppen, Helene Sofie Borthen Stenstadvold (our superstar designer) became the first designer at Norges Bank Investment Management, and Erika Iden Steen (our circus artist turned awesome designer) returned to her hometown of Trondheim to join Sparebank1 utvikling. While these changes were bittersweet, they reflected some of the incredible talent we’d gathered at Stacc X and the exciting new chapters that opened for each team member.

In October, I made the most transformative change of my career when Robin and I embarked on a new adventure together at Heder Bank. After working together across four workplaces - spanning my entire career - we decided to take on the challenge of building a bank from scratch. The transition from consulting to an in-house role felt right after 14 years, though leaving Stacc - an incredible workplace with the most talented and friendliest people - wasn’t easy. The opportunity to create something new in the banking sector proved too compelling to pass up.

Heder Bank

The vision for Heder Bank emerged from a simple observation: Norway’s most financially responsible customers are often its most underserved. While banks compete fiercely for high-risk customers with premium rates and perks, those with strong finances and low loan-to-value ratios get surprisingly little in return for their stability. We’re changing that, starting with mortgages at 50% of property value and competitive savings products. It’s banking redesigned from first principles, with technology and customer experience at its core.

Working in a lean startup environment with a small, dedicated team has allowed me to leverage everything I’ve learned over the past 14 years. Since joining in October, we’ve moved at an incredible pace. In just 80 days, we transformed an idea into reality, reaching a major milestone just before Christmas: issuing our first mortgage loan.

Rather than spending a year building an elaborate banking system, we focused on quick, practical results. In about two months, we created our brand, established our technology infrastructure, maximised existing systems, and launched a digital loan application. While the process wasn’t perfect, it proved our concept works. This rapid progress came from our nimble team of three founders, an experienced banking team, and two pragmatic design technologists. I’m incredibly excited to see what we can accomplish and how fast we can move in 2025!

Hopefully, this also means that I can share more from the process (if I get time 🙈) as I’m not as bound by NDAs as you are with clients!

Side projects

While building a bank by day, my nights and weekends yielded their own breakthroughs. After years of tinkering with various projects, 2024 brought what I call the “ketchup effect” - when everything suddenly pours out at once. Suddenly I launched 3 side projects the same year:

Pie Menu reimagines how we interact with our computers, replacing keyboard shortcuts with an intuitive radial interface. Since launch it has gotten multiple updates driven by user feedback. I’ve documented the entire journey, from initial concept to current development.

Hot Corners

The development of Pie Menu yielded an unexpected bonus: core technology that could power another productivity tool. Hot Corners transforms your screen’s corners into powerful app launchers. By moving the cursor to the corner of the screen you can launch whatever app you want. I had especially fun creating the website, collaborating with the great illustrator Etherbrian.

Baby Leaps

During my summer vacation, I started my first iOS development journey with Baby Leaps - an app born from the chaotic joy of becoming a father for the third time. It helps parents track developmental leaps, those periods when little ones seem extra fussy or suddenly develop new skills. Built with SwiftUI and fueled by early morning coding sessions in our cabin (often with lukewarm coffee and a kid watching iPad beside me), it embraces a raw, hand-drawn aesthetic that mirrors the beautiful mess of early parenthood.

Thanks to the RevenueCat Ship-a-ton challenge providing motivation and a deadline, I transformed those bleary-eyed coding sessions into a finished product. While there are more polished baby tracking apps out there, Baby Leaps aims to be the trusty pocket knife of parenting tools - simple, reliable, and available during those 3 AM moments when any explanation for a crying baby feels like a lifeline.

In 2024, I’ve published 12 blog posts (triple last year’s output) and 5 Fintech newsletters. I’m happy with this increased productivity, but I have many blog ideas and side projects in the pipeline. I’m particularly excited to share more about Heder Bank’s development and two ongoing side projects – including one I’m building with my daughters, which they currently use daily.

Podcast

An appearance on “Simen Spør” forced me to articulate something I’d been struggling to explain: how to build side projects while juggling a busy family life and job. The conversation went beyond typical productivity advice, diving into specific strategies like my use of AI “board members” for decision-making and techniques for making the most of small time blocks. Through discussing projects like iSecrets and Pie Menu we explored a central theme: the power of consistent, small actions in creating something significant. For listeners pursuing their own side projects, the episode offered practical strategies for turning spare moments into meaningful progress.

The Good Parts

In a year of professional milestones, nothing compared to welcoming our third child. Her perpetual smile (earning her the nickname “Smiley”) brought joy to our home, now happily chaotic with three kids aged 7, 4, and our newest addition. Her arrival also inspired Baby Leaps, proving that sometimes the best products come from life’s biggest changes.

Travel

With a newborn in tow, we traded distant adventures for local discoveries this year. Our summer became a Norwegian travel diary, starting at Mikkelparken where our older kids discovered the joy of amusement parks. At Hotell Ullensvang, we found unexpected luxury: the sauna might have the world’s most spectacular fjord view, and our kids were in heaven with the multiple pools and dedicated play areas.

The view from Hotell Ullensvang

The heart of our summer unfolded at our cabin in Mjølfjell. Between early morning coding sessions and family hikes, I discovered something surprising: the limitations of traveling with three kids actually enhanced our experience. The mountain rivers reached an unusually warm 18°C, turning our “backup plan” destination into the perfect summer retreat.

Your browser does not support the video tag.

Spending time at the cabin

An impromptu weekend trip to Vestlia Resort in Geilo with friends proved to be another highlight. The kids were thrilled with the swimming pools and slides, while the adjacent climbing park gave us all a taste of adventure. What started as a spontaneous getaway became one of our most memorable family weekends.

Small getaways during our summer

The year’s travel story concluded in Oslo, where my new role at Heder Bank became a family adventure. While I worked on launching a bank, my family explored the city’s treasures—from interactive exhibits at Popsenteret to quiet corners of the public library. These small adventures showed me how work transitions can create unexpected family memories.

Saying goodbye

In November, we said goodbye to my grandmother, who passed away at 92. She was a remarkable woman who embraced life with unmatched enthusiasm and curiosity until the end. While her peers viewed technology with suspicion, she mastered Snapchat and ordered groceries online. I was fortunate to visit her the evening before she passed away, a final moment with someone who was genuinely one of the coolest people I’ve ever known.

Health

I started 2024 on sick leave after my shoulder surgery in December 2023. My spring involved taking it easy with my shoulder and barely using a computer for months. I actually got really good at using one hand on my Mac and testing speech recognition software. While on sick leave, I cycled a lot on my erg-bike while watching movies, totaling around 1 000km on my erg with my arm in a sling.

In spring, I worked with a physiotherapist to regain my shoulder’s range and strength. I needed to train differently and buy a safetybar to continue squats since I couldn’t position my shoulder under a regular squat bar anymore. By year’s end, though some shoulder mobility remained limited, my adapted training had made me stronger than ever—leading to an unexpected need to update parts of my wardrobe. Considering the year started with a newly operated shoulder and a baby I’m quite pleased with the consistency of the training this year.

2024 in training. My current goal is to get 3 good sessions a week.
Most of them strength.

Trolljegerprøven

Despite my shoulder injury from last year’s OCR event, I couldn’t resist returning to obstacle course racing. This time, I made it a family adventure with my two oldest daughters. We participated in Trolljegerprøven at Fløyen in Bergen, with my 4-year-old confidently joining us (despite technically being under the age limit!).

What followed was a memorable two-hour journey through pouring cold Bergen rain, conquering obstacles, wading through mud, and climbing walls. Halfway through, we had to make a tough call when my 4-year-old got too cold, resulting in a strategic retreat to warm clothes and hot chocolate. Far from discouraging her, she was already planning “next year’s complete run” over her hot chocolate at the café afterward. This experience perfectly summed up what I love about these events: they’re not just about physical challenges, but about discovering what we’re capable of, supporting each other, and creating lasting family memories - even in typical Bergen weather!

Trolljegerprøven 2024

Wonderful things from 2024

This year’s most impactful purchases ranged from digital real estate to sleep “technology”:

Purchases

Hauken.no After years of hoping, I finally secured my dream domain. The transition from hauken.io felt like moving into a digital home I’d always wanted, arriving just in time for my growing collection of projects and writing.

AirPods Pro 2 revolutionized my mobile lifestyle with their superior microphone quality. I’ve used the older version for years, but now I can take Teams calls and record voice notes while biking, with clear audio even in windy conditions! tech

Omnia oven - Who knew a portable oven could change family adventures? From fresh pizza at the cabin to warm cinnamon buns on mountain tops, this simple device turned our outdoor meals into memorable experiences. Our kids now expect gourmet dining wherever we go! gear

A buckwheat pillow - The strangest purchase of the year became one of the best. Despite its unusual texture and subtle rustling sound, this pillow’s perfect moldability and hygienic properties have transformed my sleep. (Pro tip: Skip using this for pillow fights - the weight of this pack quite a punch!) home

Habits

The most impactful habit I developed in 2024 was turning my monthly reviews into “mental board meetings” with AI. These structured sessions became a powerful forcing function for progress—each month, I’d sit down with my AI “board members” to evaluate achievements and set new priorities. As I detailed in my blog, these reflections helped me ship three products while maintaining focus at work and home. The practice proved especially valuable during my transition to Heder Bank, helping me balance startup intensity with ongoing side projects.

Media

During evening wind-down time, I enjoyed some great media this year. Between shows, books, and stories, these were the ones I found myself eager to return to return each evening:

Slow Horses has delivered exceptional storytelling in the British spy thriller genre. It follows the misfit MI5 agents of Slough House. The blend of intelligence service drama and dark humor keeps us engaged. TV show

Shrinking. We’ve loved watching Shrinking this year. It’s short between the laughs, with a character gallery you can’t help but love - especially Derek, who steals every scene! TV show

Slow Productivity by Cal Newport revolutionized my work management through a thought experiment: imagine writing reports taking seven hours of focused work plus one hour of daily overhead (emails, meetings, mental space). Working on one report at a time lets you complete one daily, but juggling four simultaneously means half your day on overhead tasks, doubling completion time for each. This insight, along with advice like booking compensatory time for yourself when others schedule meetings, transformed my approach to task management and deep work. Book

Scarcity Brain by Michael Easter transformed my understanding of why we chase more - information, rewards, or possessions. The book reveals how humans are wired to consume vast amounts of information as a survival strategy, trapping us in “scarcity loops” of endless seeking. Recognizing these patterns in my life has been revealing, and Easter’s mantra of embracing short-term discomfort for long-term gain has stuck with me. Book

The Perfect Match by Ken Liu, published in Brave New Worlds, is a short story about humanity’s growing dependence on technology. I’ve come to love short story collections, particularly in science fiction after enjoying Ted Chiang’s work. I recently discovered Ken Liu in the sam genre. Liu’s “The Perfect Match” is a compelling story exploring humanity’s merging with technology, as our minds integrate with digital systems: “Churchill said that we shape our buildings, and afterwards our buildings shape us. We made machines to help us think, and now the machines think for us.” Book

Echo Wolf I've been obsessively listening to this synthwave/retrowave project by designer Trent Walton while working this year. Music

Apps

2024 marked my deep dive into AI tools. What started as curiosity evolved into essential workflows, leading to a significant monthly AI budget. But the investment paid off through increased productivity and creative possibilities. Here are the tools that earned their keep:

Claude became my daily workhorse in 2024. If someone had told me in 2023 that I'd mostly use something other than ChatGPT, I would have laughed. However, Claude's code understanding, artifacts, and custom projects where you can add reusable files for context made it indispensable.

ChatGPT's voice mode revolutionized my mobile workflow. While Claude handles the heavy lifting, voice mode turned previously "dead" moments—biking to work or walking between meetings—into productive brainstorming sessions. The automatic conversation summaries ensure no good idea gets lost in transit.

Cursor elevated my coding efficiency to new levels. Its context-aware autocomplete feels almost telepathic, while its ability to reference documentation and multiple files simultaneously has dramatically accelerated feature development. I'm still discovering new ways to prompt it better to be more effective!

Midjourney's ability to transform text prompts into precise visuals is powerful. For designers, writing a few words and getting an image resembling what you're after is highly addictive. In 2024, I've spent countless hours in this tool learning to prompt, training it for my taste, and generating illustrations and graphics for projects.

Chalk Performance Training, created by Ryan Fischer, launched its first app this year. As a long-time user of his training programs, I'm excited to see them in app form. It offers two main options: three ongoing daily workout programs or structured 6-12 week training plans. I rotate between programs twice yearly to maintain variety in my fitness routine.

Plans and goals for 2025

As I look ahead to 2025, I’m excited about the opportunities ahead. While 2024 was a year of changes and achievements, I believe 2025 will be a year of building and growth. I’m focusing my energy on a few key goals:

Create the world’s best mortgage process for Heder Bank. Apply everything I’ve learned from 14 years in fintech to create something extraordinary at Heder Bank.
Launch another side project. I’ll continue developing Pie Menu, but I have something special in development with my daughters: watching them use our early prototype daily has been incredibly motivating.
Write to learn in public. This year taught me that writing clarifies thinking. In 2025, I’ll share more about building a bank from scratch, developing products, and finding that tricky work-life harmony.
Create more family adventures. As our youngest grows, we’ll explore Norway’s outdoors together, from hiking trails to bike trips. In autumn, my parental leave will give us quality time to bond, just as I did with her sisters.

I’m excited to see what 2025 brings. 🚀

The ultimate guide to building a home gym

2024-12-28T00:00:00+00:00

What started as a few kettlebells in a spare bedroom evolved into me literally digging out a custom gym space from the side of my house with my bare hands. Over eight years, I’ve transformed from a commercial gym devotee to someone who built their dream training space from the ground up—quite literally. Whether you’re just starting with a yoga mat or ready to break ground on your dream space, here’s what I’ve learned along the way.

My current Home gym setup

Start Small, Start Smart

My home gym journey began in a spare bedroom, where I trained for 5 years before upgrading to a proper space. It wasn’t fancy, but it was effective. With just a barbell, some weight plates, a small squat rack, and a rowing machine on rubber flooring (to protect the floors and reduce noise), I had everything I needed. The space was tight - I had to perfect the art of the “plate shuffle,” moving weights around just to have enough room to deadlift. But those constraints taught me my most valuable lesson: consistency beats aesthetics every time. That cramped bedroom saw more genuine progress than many perfectly curated garage gyms on Instagram.

My orginal home gym in a spare bedroom and a gym haul from a Crossfit gym that upgraded their equipment

Upgrading Through Opportunity

While we were renovating our home and investing in essentials like walls, flooring, and lights, I gradually improved my gym by finding deals on quality used equipment. But when a nearby CrossFit gym upgraded their equipment, I bought kettlebells, a plyo box, and wall balls at discounted prices. This phased approach helped me identify my true equipment needs while slowly building on my existing basics.

The Dedicated Upgrade: Building My Home Gym

After five years of maximizing every square inch of that spare bedroom, I made a decision that my wife initially thought was crazy: I was going to dig out a dedicated gym space from the hillside next to our house. By hand. With a pickaxe, shovel and wheelbarrow. For over half a year, my “workouts” consisted of moving dirt and rocks. I gained some of the worst blisters of my life and discovered muscles I didn’t know existed, but watching that space take shape was more satisfying than any PR I’d ever hit.

The space I dug out by hand at the side of our house

Once the space was ready, I approached equipment selection like a chef stocking their dream kitchen. The centerpiece being a squat rack that could handle anything I threw at it, complete with built-in pull-up and dip bars. I added carefully chosen barbells and dumbbells, each with its purpose, from an Olympic bar to hex-bar for deadlifts to a lighter weightlifting bar for my wife.

But the heart of the gym isn’t the expensive equipment—it’s the little touches that make it uniquely mine. The suspension system that doubles as monkey bars for my kids (and a worn-out tissue gifted from Erika). The whiteboard that’s equal parts workout tracker and my children’s art gallery. The Sonos speaker that’s probably played more Disney soundtracks during family workout sessions than pump-up playlists. Even my Concept2 rower has become more than just cardio equipment—my kids love playing the built-in fishing game on the monitor while I get my workout in, turning a serious piece of fitness equipment into something the whole family enjoys.

The crown jewel of the space? A sliding wall that opens to the outdoors—an idea born from those cramped bedroom gym days when I dreamed of fresh air. Now, on sunny mornings, I roll it open and let the outside in, creating a training space that feels more like a zen garden than a traditional gym.

The Perks of a Home Gym

The benefits of a home gym have far exceeded my expectations. Let’s talk numbers first: A gym membership in Norway runs about $80 per month per person. Over eight years, my wife and I would have spent roughly $15,000 on commercial gym memberships. I’ve invested about that same amount in my home gym equipment—primarily high-end Eleiko gear that will last a lifetime. So while the upfront costs were significant, the long-term math works out in favor of the home gym, especially considering the equipment’s resale value and durability.

But the real returns go far beyond the financial calculation. Beyond the obvious perks — no commute, no waiting for equipment — the magic is in the freedom to train exactly how I want. I can superset deadlifts with pull-ups without getting death stares from other gym-goers, and what used to take me 90 minutes at a commercial gym now takes just 45 minutes at home since I’m not walking between stations or waiting for equipment to free up. I also can grunt, drop weights, or workout shirtless without worrying about gym etiquette or making anyone uncomfortable.

But perhaps the most unexpected joy has been watching our home gym evolve into a family space. While I’m working through my sets, the kids often hang out there too—turning the suspension straps into makeshift swings, creating slides from the bench, or just being curious about what dad’s up to. It’s become this wonderful blend of serious training and playful family time. Sometimes they even join in with their own tiny “workouts,” which usually involve mimicking my movements with a broom or very light weights. The kids now see fitness as a natural part of daily life, not some chore dad does in a faraway building. It’s teaching them early on that staying active can be both fun and a natural part of daily life.

Your browser does not support the video tag. Your browser does not support the video tag.

The gym as family space

The never-ending project

Every home gym owner knows the perpetual itch to upgrade—that constant mental wishlist of “what if” additions. But after eight years of building this space, I’ve learned something crucial: the best equipment isn’t always the newest or most expensive—it’s what you’ll actually use consistently. Sure, I still catch myself browsing adjustable dumbbells online at 2 AM, or sketching plans for a custom cable system. I’ve even measured the perfect spot for a treadmill about dozen times. But I’ve learned to sit with these impulses rather than act on them immediately.

The truth is, my current setup already delivers everything I need for effective training. These “dream additions” are just that: dreams that are fun to entertain but not essential to my progress. It’s a lesson that took years to learn: sometimes the best upgrade isn’t new equipment at all, but finding a creative new way to use what you already have.

Top Tips for Anyone Building a Home Gym

Here’s what I wish I’d known from the start:

1. Buy Quality Equipment

“Buy once, cry once.” Cheap equipment will frustrate you and waste your money in the long run. I’ve never regretted investing in high-quality gear, and some of my equipment will likely outlive me. Most of my equipment is from Eleiko - one of the premier producers of strength training equipment in the world. Their reputation for quality is well-earned, and while the initial investment was significant, the durability and performance have more than justified the cost. My experience training in various CrossFit gyms taught me early on to recognize quality equipment, which helped inform my purchases. In fact, the only equipment I’ve ever sold was that first wobbly squat rack, and ironically, I got more for it used than I paid new.

2. Have a Training Program

Don’t just wing it. Following a program keeps your workouts intentional and progressive. For years, my go-to has been Chalk programs — they’re effective and flexible enough to prevent boredom. Other great options are Garage Gym Athlete and Functional Bodybuilding, both of which cater to home gym setups. Switching up programs once in a while keeps things fresh and ensures you don’t plateau or get too bored.

3. Upgrade Gradually

Remember that spare bedroom setup? I started with just a barbell, plates, and determination. Each addition came from a real need discovered through training, not from a preconceived shopping list. When I finally added a rowing machine six months in, it wasn’t because it was on some “essential equipment” list—it was because I needed some kind of cardio as well. This gradual evolution meant every piece of equipment had purpose and got used regularly.

4. Build for Your Style of Training

Design your gym to align with your workouts. If you love cardio, prioritize machines like the rower, bike or treadmill. If strength is your focus, invest more in weights and racks.

5. Use Your Space Wisely

Storage solutions like wall-mounted racks and hooks aren’t just for organization—they’re space-saving essentials. My golden rule is that every piece of equipment has to earn its floor space. If something can be mounted on a wall, it should be: plate storage, bands, ropes, and even racks. I’ve mounted as much as possible to the wall, leaving the precious floor space for movement and training. Think of floor space as premium real estate—if equipment isn’t actively being used, it shouldn’t be taking up valuable floor space. This mindset has helped me create a surprisingly spacious training area even in what others might consider a tight space (only 15 square meters)

My current Home gym setup. The image in front of the squat rack is a screen print saying "Don't give up. Give everything!" by Ståle Gerhardsen

Coming Full Circle

Eight years ago, I started with a simple barbell in a spare bedroom. Today, I train in a custom-built space with heated flooring that I literally dug out of a hillside. Your path won’t look exactly like mine. And it shouldn’t! The six months I spent digging with a shovel and wheelbarrow might seem extreme (my wife certainly thought so), but that’s the beauty of building your own gym: it becomes a reflection of your commitment and creativity. Some people convert their garage, others transform a basement, and yes, some of us dig into hillsides. But through all of this, I’ve learned something fundamental: the best home gym isn’t the one with the most equipment or the fanciest setup. It’s the one that gets used!

The coolest person I’ve ever known

2024-11-20T00:00:00+00:00

This weekend I said goodbye to one of the most remarkable women I’ve ever known. My grandmother wasn’t just another elderly person watching the world change from the sidelines – she was actively sprinting alongside it, even at 92.

While her friends were wary of smartphones, she was busy mastering Snapchat. She didn’t hesitate to try things out. Years before I even thought about it, she was ordering groceries online. Sometimes though, it led to funny moments: Like when she ordered what she thought was a bag of potatoes but received a single potato instead. Did she get frustrated? No. She laughed at the absurdity and kept exploring.

Even when her mobility became limited, she refused to be defined by it. She redecorated her entire apartment, scooting from room to room on a wheeled kitchen chair, determined to keep things fresh. Just days before she passed, she was shopping for new white shoes. The concept of “being too old” for anything simply didn’t exist in her world.

But what strikes me most wasn’t just her fearlessness with technology or her refusal to act her age. It was her approach to failure. Every mishap was met with laughter, every setback with a “why not try again?” attitude.

Perhaps the greatest gift she left us wasn’t her recipe for flatbread (though those were legendary), but rather her blueprint for navigating change: Stay curious. Don’t take yourself too seriously.

She wasn’t just my grandmother. She was the coolest person I’ve ever known! And in my heart, that’s who she’ll always be.

Building an AI board of advisors

2024-11-10T00:00:00+00:00

What if you could have detailed conversations with Tim Ferriss, Derek Sivers, and other mentors whenever you wanted? Using AI, I’ve built a system that turns the classic ‘What would [person] do?’ thought experiment into dynamic, actionable conversations. Here’s how it works:

A couple of months ago I was stuck on a technical problem with one of my side projects. I’d been tinkering with it for weeks, trying to figure out the perfect solution. When I brought this to my AI board, “Tim Ferriss” immediately challenged my approach: “What’s the minimum viable solution here? Could you outsource this and ship faster?”. “Derek Sivers” chimed in with his characteristic simplicity: “If you’re not enjoying this part, delegate it. Focus on what brings you energy.”

Their perspectives helped me see I was caught in a perfectionist loop. Within a week, I had hired a freelancer who solved the problem in a few hours — something that would have taken me weeks to figure out on my own.

How I’ve set it up

At the end of each month, I gather three things:

What I’ve done—everything from features I’ve shipped, blog posts I’ve written, to ideas I kicked to the curb.
Numbers—how my projects are performing (visitors, conversions, revenue… the essentials).
Braindumps—my uncensored thoughts about the month, the highs, the lows, whatever’s swimming in my head.

I feed these notes into an AI along with context about my projects and previous months’ records. With specific instructions, the AI takes on the role of each board member, offering advice that’s surprisingly consistent with their known philosophies.

An example of my montly reflection document

Creating your AI advisors

Creating these AI advisors is surprisingly straightforward. I use a simple prompt template:

Write instructions for an AI that will act and give advice like [Person’s name]. I should be able to copy and paste the instructions.

This gives me a character that I can reuse in future conversations. For example, a Tim Ferriss advisor would focus on testing assumptions, eliminating bottlenecks, and finding leverage points. A Derek Sivers advisor emphasizes simplicity, following joy, and making binary decisions.

These distinct perspectives create a well-rounded advisory board that challenges my thinking from multiple angles.

Getting Started

The beauty of this system is that you can start small. Pick just one advisor whose thinking resonates with you, create their AI character, and have a conversation about a current challenge you’re facing. You might be surprised by the clarity that emerges when you step outside your own perspective.

As you get comfortable with the process, add more advisors to your board. Each new perspective brings another angle to your decision-making toolkit. While these AI advisors won’t replace real mentors, they’re available 24/7 to help you think through your challenges in new and productive ways.

In my board I have Tim Ferriss, Derek Sivers, Jesse Itzler, Shaan Puri and a few random guests. Who would you put on your board, and what’s the first challenge you’d bring to them?

I like to add the board notes in Obsidian Canvas afterwards to structure the process visually as well. Here you see a zoomed out version of my initial note, the feedback from each board member and my conclusion at the bottom.

Useful links for achieving this

Typing mind (affiliate link) - I use this to easily switch between AI-models and different characters.
Claude projects - I also use this for adding a larger context and talking with different characters.
Caret for Obsidian - I’ve also played with this plugin extensively to add prompt chains and different characters.
Example characters - Example of some of the charaters I’ve used

The perfect routine

2024-11-05T00:00:00+00:00

Here’s something they don’t tell you in all those productivity books: Your perfect routine is temporary. Always!

For months, I had this beautiful system going - weekend mornings were my designated time slots for side projects. I was getting incredible amounts of work done in those quiet morning hours. Then our youngest decided that those precise hours were perfect for quality time. Just like that, my perfect routine evaporated.

Same for my workout routine: For years, I’ve relied on that 8 to 9 PM window to get my exercise in. Kids asleep, house quiet — ideal workout time. But last month that has changed. Bedtime has stretched into this endless negotiation, and suddenly my reliable workout hour has vanished.

I’m beginning to realize that the real skill here isn’t in building perfect routines. It’s in adapting when they inevitably break. It’s about becoming an improv artist with your time. It’s about saying: “well, that doesn’t work anymore… what might?”

Life doesn’t care about your routines. Kids definitely don’t care about your routines. The sooner you embrace this reality, the better.

The only constant routine is change itself. Might as well get comfortable with it.

Pockets of time

2024-11-02T00:00:00+00:00

There aren’t enough hours in the day! Between full-time work, family responsibilities, and even some downtime, it’s hard to imagine where you can fit in anything extra.

But here’s a secret: You don’t need huge blocks of free time to make progress. Your biggest growth can happen in the smallest moments. Those little “pockets of time” throughout your day that are often wasted.

Pockets of time

I first learned the utility of these small moments from Matthew Dicks in his book, Someday is Today. The premise is simple: Those “dead spaces” in your day — the ones when you’re waiting for a meeting to start, commuting, or waiting for your daughters dancing lesson to be done — are golden opportunities for being productive.

I’m not talking about setting up a laptop to work in tese short moments. I’m talking about thinking and planning. To use these pockets to brainstorm ideas, organize your thoughts, sketch app ideas mentally, or logic out how to tackle a tricky problem later.

With AI tools like voice transcription and note-taking apps, you now can capture ideas on the go with almost zero friction. Voice-to-text has been my friend more than once when a great thought strikes. As an example this very blog post has been written while:

…biking to work
…waiting at an indoor play center as my kids run around
…standing outside a store while my youngest naps in her stroller

In these little moments, I could be mindlessly scrolling through social media, but instead, I’m actively creating. (Don’t get me wrong — I do my fair share of accidental browsing, especially when putting the kids to bed) But when I’m intentional about these pockets of time, real progress happens.

Carving out structured time

While using these pockets of time are a great productivity hack, I also make a point to carve out larger blocks that work for me. Saturday and Sunday mornings, from around 6 to 9, are my golden hours for side projects. That’s when the kids are watching their favorite TV shows, and I can dive into my projects with little distraction. By sticking to this routine, I consistently get ~six focused hours each weekend. This is often just enough to push a side project forward without overload.

The key, however, is preparation. By using those pockets of time throughout the week to think and plan, I know exactly what I need to do when those early morning sessions arrive. There is no time wasted in those two/three-hour windows — it’s pure creative execution, powered by thoughtful preparation during the week’s scattered moments.

Progress, not perfection

Life will always be busy, and there will never be a perfect time to pursue your goals. But by leveraging these pockets of time you can make consistent progress without overwhelming your schedule. Let those small pockets of time work for you!

The power of side projects

2024-10-29T00:00:00+00:00

In a world where everyone demands your time, it seems strange to actively take on more projects. But for some of us, side projects aren’t just extra work - they’re invigorating.

A professional playground

I’m currently working on four side projects, which may sound like a burden. But they give me something no client work ever could. One of them, Pie Menu, even grew from research into a viral Twitter account with 255 million impressions. Call it a creative playground, a sandbox for self-expression, or just pure joy. These projects let me work on skills, launch new ideas, and explore passions that don’t always fit neatly into my day job. And having multiple of them ensure that I’m never stuck - I can always just jump onto another one.

“There is something special about working on a project of your own. I wouldn’t say exactly that you’re happier. A better word would be excited, or engaged. - Paul Graham

Side projects are also a no-pressure zone for experimentation. I can test new technologies or push my design boundaries in ways real-world client work doesn’t always allow. It’s a space where failing is safe. Whether I’m coding, designing, or learning how SEO really works, I don’t worry about immediate success. I’m free to experiment and explore, so when I do head back to client work, I’m a stronger contributor.

A creative outlet

It’s easy to assume that creative people start creative. But creativity doesn’t work like that. Creativity isn’t spontaneous; it comes from action. The more you work on your craft, the more ideas flow.

“You are not creative and then create something, you become creative by working on something.”

Jürgen Geuter

For me, there’s never been a time when I’ve had so many ideas bubbling up, waiting to be turned into reality. My mind is constantly spinning with new concepts, features, and entire projects I want to bring to life. I currently have 289 documents tagged #idea, which is a small or large idea I would like create.

An energy source

“Creating something amazing is a form of self-care.”

Orman Clark

What might surprise people who are not into side projects is how much energy they actually bring. Instead of draining me, they pump me full of energy and excitement. There’s something fulfilling about seeing an idea that was once just in your head materialize into something real and tangible.

Yes, it may look like work from the outside, but to me, engaging in these personal projects actually fuels me. Like I’m filling up my creativity tank.

So, next time you feel overwhelmed or uninspired by routine, maybe it’s time to pick up a side project? They’re not “extra work” - they are the fuel that keeps our creative engines running.

Sawdust

2024-09-19T00:00:00+00:00

We love to talk about “thinking outside the box.”
But what about thinking inside the bin?

When Ford started cranking out the Model T, they were left with mountains of wood scraps. Rather than tossing them, someone had the bright idea to turn those leftover bits into Kingsford Charcoal — now a brand that owns 80% of the BBQ charcoal market.

The idea taking byproducts and turning them into businesses — is essentially the framework for what we now call the circular economy. There are loads of examples of companies that are turning waste into wealth:

Brewers Spent Grain: Craft breweries are turning their used grains into everything from dog treats to pizza dough.
Coffee Grounds: Companies like GroCycle are using spent coffee grounds to grow gourmet mushrooms. I even have a caps created by Coffee grounds
Textile Scraps: Fashion brands are recycling fabric remnants into new clothing lines, addressing waste in one of the world’s most polluting industries.

Digital sawdust?

But the concept doesn’t just apply to physical waste. Digital sawdust can be just as valuable.

Take when I was working on Pie Menu, for example. I realized that some of the code I’d written for detecting mouse movement and identifying apps could be reused in another context. That code ended up forming the foundation for Hot Corners — an app that launches other apps when you move your cursor to the corners of the screen. What looked like scrap turned out to be the basis for something new.

What’s in your bin?

That app feature you cut? That might be a standalone product.

Those blog post drafts you never published? Maybe they’re the seeds of your next book.

The code you didn’t end up using? That could become the backbone of something entirely new.

Innovation doesn’t always mean starting from zero. Your next big breakthrough might be hidden in plain sight, pretending to be waste.

From mundane to Magical

2024-09-09T00:00:00+00:00

Today, I brought my oldest child to work. What I expected to be a routine day turned into an adventure, all thanks to her perspective.

The clothes-drying room? A marvel of technology.
Running between buildings in the rain? An exhilarating sprint together.
Sparkling water on tap? Pure magic.
Beeping ourselves into the office? A fun adventure!

Everything we encountered was a source of joy and wonder for her. And in turn, her enthusiasm shifted my own perspective.

It’s easy to become numb to our surroundings, to see the everyday as mundane. But children have this incredible ability to see the extraordinary in what we consider routine.

Our environments are filled with potential for joy and discovery. We just need to look at them with fresh eyes.

Today, my daughter didn’t just visit my workplace;
she helped me rediscover it.

A Designer's quest to create a Pie Menu navigation for macOS

2024-08-11T00:00:00+00:00

I hadn’t heard from my developer in over three weeks. My budget was dwindling. And all I had to show for a year’s work was a TestFlight app that only my friends and I could use. Was this the end of my attempt to rethink app-navigation for macOS apps?

This is the story of Pie Menu — how a designer with no app development experience ventured into creating a radial menu app for macOS. It’s a tale of Ukrainian bomb shelters, user feedback and the importance of resilience. But most importantly, it’s a crash course in turning a side project into a viable product.

Your browser does not support the video tag.

Table of Contents

The idea
The brief
Developing the app
Pie Menu Website
Marketing video
Minimum Viable Pie
Looking ahead

The idea

It all began when I opened FigJam and clicked on the stamp icon. I immediately thought, “Why isn’t there a radial menu available in macOS?” Radial menus are powerful tools for expert users, and the success of apps like Raycast, Alfred proves there’s a market for niche productivity tools.

Radial menu in Figjam

My initial research into developing such an app quickly dampened my enthusiasm. Creating macOS apps was well outside my comfort zone as a designer and front-end developer. But fate had other plans: my holding company received some unexpected dividends. Was this a sign to take the plunge? What did I have to lose?

The brief

This side project offered me something I craved: complete creative control. Such freedom is rare in my day job as a design consultant, as I mostly need to adhere to other companies style guides. Realizing this was an opportunity I couldn’t pass up, I dove into Figma to sketch out my vision. You can explore my initial brief here:

This exercise was crucial in defining the project’s scope. It identified essential features, what could be postponed, and what needed to be perfect for the first release.

Developing the app

Armed with my brief, I searched for a Swift developer and, after some research, turned to Lemon.io. They quickly matched me with an experienced Ukrainian developer within my budget, and our collaboration began. We had a quick video-call, and after that we managed the whole project with a Kanban board in GitHub Projects, a DM thread in Discord and a Figma file.

The collaboration went smoothly, but the ongoing war in Ukraine presented significant challenges. My developer faced numerous obstacles, including bomb threats, power outages, unreliable internet, and closed kindergartens. There were periods where I didn’t hear from him for weeks, and I found myself more concerned for his safety than the project timeline. His resilience was remarkable. Despite the dire circumstances, he adapted impressively, even securing a Starlink system and generator to keep operations running. This situation was a stark reminder that behind every remote collaboration, there are real people dealing with real-life challenges. This collaboration gave me a personal connection to the ongoing situation in Ukraine, making the global crisis feel much closer to home as we got to know each other.

Despite these challenges, our work continued. The extended timeline allowed for extensive product testing and continuous feedback from a select group of beta testers. Their response ranged from excitement to indifference, highlighting the challenges and unpredictability of product creation.

App Onboarding

As we moved from development to launch preparation, we focused on one of the most critical aspects: the user’s first interaction with Pie Menu. If we couldn’t effectively communicate the app’s value and functionality right from the start, we risked losing users before they even had a chance to experience the product’s benefits. This realization led us to put significant effort into crafting an intuitive and informative onboarding process. Here’s what we landed on for the first version:

Pie Menu onboarding (without the subscription-flow)

The onboarding process was crucial, and it was just the beginning of our journey. With this key component in place, we then faced another important decision: where to launch Pie Menu?

Choosing Launch Platforms

The App Store was the obvious choice due to its massive user base and built-in trust factor for macOS users. This was crucial as we had to be trustworthy accessing the accessibility features on users Mac and running in the background. The App Store also provided a straightforward way to handle payments and updates. However, we were aware of its limitations, such as Apple’s strict review process and the 15% commission (App Store Small Business Program).

A short while after we launched on the App Store, multiple users requested us to launch in Setapp, an interesting alternative. It aligned well with our target audience of productivity-focused users as a curated subscription service for Mac applications. Setapp’s model of bundling high-quality apps appealed to us, potentially exposing Pie Menu to a dedicated user base willing to pay for premium tools.

After launching on both platforms, I can confidently say that it’s hard to find a more engaged audience than Setapp. In the couple of weeks we’ve been there, we’ve gotten more feedback and ideas than we’ve ever received from the quieter App Store audience, making it a perfect platform for apps like Pie Menu.

We decided to launch on both platforms to maximize visibility and provide users with options. This dual approach also allowed us to compare performance and user feedback across different distribution channels, providing valuable insights for future development and marketing strategies.

Building on the insights gained from our launch experiences, we continued to learn and adapt. Every phase of Pie Menu’s development has been a learning opportunity, from the first lines of code to the latest user review. Looking back, there are several key decisions and approaches I would reconsider if I were to start over:

Learning 1: People hate subscription

Setting up subscriptions and getting that working was the most time-consuming task. My initial idea was that people should be able to use it for free for 10 invocations per day and then needed to pay. It was also important that they didn’t have to pay upfront but had some initial trial to test it. In the App Store, a subscription is the only option if you want to add a trial period before it starts running, so I opted for that in the MVP. In hindsight, I wish I had flipped the script—starting with a one-time payment and introducing subscriptions later, if at all. Some people get rashes on their backs when they see a subscription in an app.

Learning 2: Don’t assume a perfect setup

A couple of weeks after launch, we received reports that people couldn’t use Pie Menu on certain apps. After investigating, we discovered that the apps were located in subfolders of the Applications folder or in other locations, and that Pie Menu didn’t detect them. This oversight highlighted the complexity of macOS file structures and user preferences. We promptly implemented a fix to scan all potential locations, ensuring Pie Menu could detect and interact with applications regardless of their storage path.

Learning 3: People love localization

We also experienced users having issues with getting apps to work because of localization. We detected the current active apps based on their file names, but all the native Mac apps like Notes and Email have different names based on the language of macOS, causing Pie Menu to think it is different programs. During beta testing, we didn’t encounter this problem, but when the app was distributed all over the world the problem suddenly became apparent. We identified a solution using bundle-ids instead of app names. However, this fix is currently in our backlog, as we need to balance it against other highly requested features.

Learning 4: People become angry if it doesn’t work as they expect

User experience can be challenging. In a niche productivity tool like this, people have a lot of preferences. If it doesn’t work as they expect, they delete it or you get an angry review or mail. In our case, the main learning was that they wanted one click of the shortcut to show the menu, and a click outside it (or in it) to remove it, not as it worked in our first release where you had to hold the shortcut and release the shortcut over the Pie Menu for it to invoke. We had no issues with this during our beta-test period or our silent launch in App Store, but after a while this preference started to pour in. We quickly turned around and actually made this the new preferred way for the app to work, while the old option was still available. The great thing about this is that you could remap a hot-key on your mouse and use the mouse to trigger it!

Learning 5: User feedback is invaluable

The continuous stream of user feedback we received post-launch was a goldmine of insights. It helped us identify and prioritize improvements, from minor bug fixes to major feature enhancements. This experience reinforced the importance of maintaining an open line of communication with users and actively seeking their input.

We implemented a public roadmap with voting on the website and asked users to report issues or suggest improvements. This proactive approach not only helped us refine Pie Menu but also fostered a sense of community among our users. They felt heard and valued, which in turn increased their engagement and loyalty to the app. As we continue to evolve Pie Menu, we remain committed to this user-centric development approach, ensuring that each update brings meaningful improvements based on real-world usage and feedback.

Learning 6: Create an in-app news system

After launch, I regretted that we hadn’t implemented an unobtrusive in-app news system where I could communicate new features that were launched, the roadmap they could vote on, or they should update their app. Some of the issues people have been reporting could have easily been avoided with an update. And often when you get feedback there is a large silent majority that feels the same.

Website Design

I knew early on that the app’s website would be essential. It would explain the app, provide a resource for users to easily add shortcuts, and provide shortcuts for popular Mac apps while serving as a long-tail SEO solution.

The initial sketch of the website.

My initial sketch was a simple one-pager showing how it worked with a couple of examples. But as we created and used the app, I realized it became too limiting.

Take 2 of the front page

After sketching out multiple solutions, I settled on a colorful hero showing the Pie Menu and how it changed when different apps were active. However, I questioned its effectiveness. Then, I used roastmylandingpage to get feedback on my landing page. Getting expert input from someone outside the project is always valuable. In this case, it resulted in an idea of showing how the Pie Menu works with a demo on the website and more precise wording.

The front-page I launched with

One of my most memorable facepalm moments came post-launch. I showcased the simplicity of launching the Pie Menu on the website with the shortcut Shift + Z. It seemed foolproof. Who would already use that combo? After all, it’s just an uppercase Z.

But when users downloaded the app, they often tried to use that combination and discovered that Shift + Z couldn’t be used as a shortcut. Because every time you type a capital Z, the app interprets it as a command to launch the Pie Menu. Imagine trying to type “Zebra” or “Zoom” only to have the app jump in uninvited. It was a glaring oversight, revealing how easily a tiny detail can disrupt the entire user experience.

I later tried changing it to another keyboard shortcut on the website, but Shift is one of the modifier keys that can be used safely on a webpage like this. Command, option, or control won’t work in combination with another key without risking other keyboard shortcut collisions. Shift + Z is a safe bet that will always work, even though some users downloading the app will be confused.

Remix vs Next.js

When I was developing the website, I used Remix to broaden my horizons, as I usually rely on Next.js for web development. Initially, everything seemed smooth, but things quickly took a turn when I tried migrating from Remix 1 to Remix 2. The process was riddled with hydration errors, a common issue with no clear solution. Adding to the frustration, the documentation was a tangled web, bouncing between MDN, React Router, and Remix docs.

After wrestling with these issues, I migrated the entire site to Next.js. The transition was quick, and retrospectively, it was a smart move. Next.js offered much better documentation and abundant resources, making problem-solving a breeze compared to Remix. This experience reinforced why Next.js is my go-to framework for creating robust and reliable websites.

AI to enhance the website

The shortcut page for Pie Menu

One important part of the website for PieMenu.com has been the pages for shortcuts for different apps. There are two reasons for this webpage:

To add shortcuts to Pie Menu via data URIs. This way, users can find the shortcuts in one location and add them to the app. (On many apps, there is also a link to the webpage for that app in Pie Menu)
Hopefully, I can get some SEO traffic to these pages, as they are a one-stop shop for finding keyboard shortcuts for many Mac apps.

The page for Slack

The basis for these shortcuts is a JSON file for each app consisting of the keyboard shortcuts, categorization, etc. I’ve created a trained AI Agent to structure this data to make these shortcuts in typingmind.com (affiliate link), which I use for using chatGTP and other AI models. This way, I can paste the shortcuts (or a screenshot of shortcuts) for a specific app and get the JSON data I need to create the page. This has considerably sped up the creation of these keyboard-shortcut pages, especially given that finding keyboard shortcuts for each app is a task in itself. Some companies have them on their website, some only make them available directly in the app, and for others, I’ve had to rely on various keyboard shortcut directories across the web. The process still involves downloading every app to extract the app icon in the correct format, which remains a time-consuming aspect of the project.

I ran the JSON output from chatGPT through a script I’ve created to ensure the IDs are unique and lint the JSON file. This way, adding new apps and shortcuts isn’t as time-consuming as it could have been.

Marketing video

A marketing video was necessary to visually demonstrate Pie Menu’s functionality. This allowed potential users to quickly grasp its concept and benefits in action. This was an exciting challenge that allowed me to blend creativity with technology. To get started, I turned to ChatGPT for some initial ideas. I thought it could help spark some creativity and give me a jumping-off point for brainstorming ad concepts. Armed with these ideas, I dove into Figma to think visually, creating a storyboard that mapped out the video’s flow and key visuals. Here’s a glimpse of my final Figma storyboard:

Storyboard for marketing video

To bring this storyboard to life, I used a combination of tools and technologies. I used Midjourney to create high-quality imagery, refined the script to ensure it conveyed our message clearly, and experimented with Elevenlabs AI voice to create an engaging voiceover.

I then created a storyboard video using CapCut, synchronizing the visuals with the voiceover and adding sound effects to enhance the presentation’s impact.

The storyboard video

While I was tempted to dive deeper into the video production process, I recognized the importance of maintaining focus on the primary goal: to launch Pie Menu and start gathering real-world feedback, not to become a video production expert. After all, this was just a side project. To that end, I collaborated with a talented 3D artist from Upwork to transform my storyboard into a polished, professional video. This decision allowed me to leverage expert skills while keeping the project moving forward.

The final version

With the marketing video complete and the app refined based on initial feedback, Pie Menu was ready for a broader audience. The next phase would focus on expanding our reach and continuing to improve the product based on user insights.

Minimum Viable Pie

If you want to see if something works, make it. The whole thing. The simplest version of the whole thing – that’s what version 1.0 is supposed to be. But make that, put it out there, and learn. If you want answers, you have to ask the question, and the question is: Market, what do you think of this completed version 1.0 of our product?

– Jason Fried

Any new product must start by being helpful to yourself. When I launch Figma (and especially creative apps) and I don’t have Pie Menu available, I get frustrated. So, how is the market reacting so far?

The app has over 2 000 active users from Setapp.
~800 people have downloaded Pie Menu from the App Store and ~60 have paid for a subscription or lifetime. That is a 5% conversion rate from trial to paid, which is solid, but has room for improvement.
The click-through rate from the website to the App Store is 14.2%. (The average here is typically 2% to 5%, with anything above 5% considered good.)
My conversion rate in the app store is 31,95%, which is well above the 75th percentile in the App Store (~7.16%).
I’ve received detailed feedback from many users raving that this app is something they’ve wanted for a long time and requesting more features.
Someone has made a cracked version circulating on Chinese web pages. 🙈

Based on this data, there clearly is some kind of Product Market Fit with Pie Menu, though the feedback and usage indicate that the initial subscription model was wrong. Luckily the new version with a lifetime-price is now also launched!

Looking ahead

So far, I’ve shared the app on my X account, in a Slack community, in a newsletter and on Setapp. And last week I got a huge traffic spike after sharing it on Hacker News. After we’ve fixed our bundle-id issue, it is time to market the app more, launch it on Product Hunt, as well as continuing the work on the roadmap.

I’m hopeful that I, in time, can break even on Pie Menu. Based on the income the last months it certainly seems possible. But without this project I wouldn’t have:

created iSecrets
built an audience on Twitter and newsletter
received a tweet from Elon Musk
designed two Mac apps
created a fun marketing video
designed and developed an extensive website
met a lot of interesting people online
started to learn SwiftUI

Compared to studying formally, the money spent on learning this has been tremendously worth it, and I still have the potential upside to earn back the money used. I still have a lot of plans for building out Pie Menu (help me prioritize by voting on the roadmap), and for the next half year will slowly build out features while I work more on marketing the app.

If you’ve come so far and haven’t tested out Pie Menu yet I highly recommend you to download it and try it out! And please reach out if you have any ideas or feature suggestions!

Time travelling for parents

2024-07-16T00:00:00+00:00

Parenthood is the ultimate paradox. Nothing is more wonderful, nothing is more challenging. My third child is now 2 months old, and we’re drowning in sleepless nights and endless cries where we don’t know what to do.

But I’ve found two perspective shifters that reveal the magic in the mayhem:

1. The 80-Year-Old You

Close your eyes. You’re 80. Your joints creak and your kids are grown. Suddenly, you’re time travelling back to now. This moment, with a crying baby and bags under your eyes. How much wouldn’t you give to be back in this exact moment?

2. The Last Time Illusion

One day, you’ll pick up your child for the last time. You’ll change the last diaper, give the last piggyback ride, read the last bedtime story. But this is the crucial point: You will never know it’s the last time when it happens. It’ll slip by, unnoticed.

Embracing the Chaos

Night wakenings have become my trigger for these perspective shifts. When the 2 AM cry jolts me awake, I pause and imagine my 80-year-old self, cherishing this fleeting moment of midnight connection. It doesn’t magically erase the exhaustion, but it does make those hushed, drowsy moments feel more meaningful.

One day, you’ll miss these endless crying sessions. You’ll long for reading that same book for the 20th time. These chaotic moments are the good old days in disguise.

The bar is lower than you think!

2024-01-23T00:00:00+00:00

A story about how 200 students turned down earning $250 an hour.

Annually, we host a student recruitment seminar, attracting a diverse audience ranging from 100 to 300 attendees. While most focus on web development, we also welcome participants with design, economics, and business development backgrounds.

Before the event, students can tackle an optional coding challenge. During the seminar, we award the top-performing solution with the latest iPhone.

An example of the coding challenges we’ve given out:

consume a specific API and show the data in a helpful way (i.e., filtering, searching)
Solve sudoku programmatically

We’ve always encouraged candidates to approach the tasks in their own way, allowing them to leverage the technologies they feel most comfortable with and showcasing their skills.

One year, we stopped giving out the assignment. Why?
Only 3% of the attendees provided a solution.

Consider this: If they invested around 10 hours crafting an impressive assignment, they could earn $100 per hour — five times more than a typical part-time job. Yet, only 6 out of 200 graduate students looking for a job embraced this chance.

The potential downside? Even if they didn’t win, they set themselves apart as part of the 3% who took the initiative in the job application process.

The bar is lower than you think!

GitHub Codespaces for Jekyll and Next.js

2024-01-17T00:00:00+00:00

A quick step-by-step setup guide on how to set up GitHub Codespaces for Jekyll and Next.js.

Jump to the instructions for Jekyll
Jump to the instructions for Next.js

Why GitHub Codespaces?

I wrote about why Codespaces is the future back in 2020. Four years later, I’m still convinced — and now I actually use it daily.

I’ve used Jekyll for my blog since I started it in 2014. I loved the idea of the easy liquid templating language and the ease of dropping a new Markdown file into a GitHub repo with GitHub pages, and suddenly, it was published online for free. Over the years, I’ve redesigned it multiple times but never steered away from Jekyll since it just worked out of the box.

But when I got a MacBook M1, it started getting more challenging to set up a Jekyll development environment locally for someone who doesn’t understand the Ruby ecosystem. I then came across GitHub Codespaces and the possibility of running a development environment like it was run locally. I could also run GitHub Codespaces to develop on my iPad as an added benefit! All for free (or at least I’ve never touched the 60 hours you get for free every month).

How to set up GitHub Codespaces for Jekyll

Create a folder called .devcontainer at the root of your GitHub project.
Inside that folder, create a file called devcontainer.json and fill it with the content found at the Jekyll repo.
Create a file called Dockerfile and fill it with this content also from Jekyll main repo.
Commit this to your current repo. It shouldn’t change anything else.
Now, you can go to GitHub and click code. In the tab that appears, click Codespaces and create a new one.
Now, VSCode should open in your browser, and you should see your full repository.
Open the Terminal inside VSCode and write: bundle install to install all dependencies.
When that is done, write: bundle exec jekyll serve --drafts and hit Enter
The code should now run, and you should get a popup asking if you want to open another window with your Jekyll instance running. You now have a local instance of Jekyll running on GitHub CodeSpaces!

GitHub Codespaces even runs on an iPad

How to set up GitHub Codespaces for Next.js

Setting up GitHub Codespaces for Next.js is much simpler:

Go to your GitHub repo and click code. In the tab that appears, click Codespaces and create a new one.
Everything should now auto-install. Type npm run dev in your terminal to run your app.
The code should now run!

2023 year in review

2024-01-11T00:00:00+00:00

This is a look back on some of the highlights and lowlights of my 2023. I’ve written these yearly in private for 9 years, but as I reached the end of 2023, I decided to share what has happened during the year with whoever is interested, and because I know this will be fun to review in a decade.

Consulting

In previous years, I’ve written about what we’ve done at Stacc X (2021, 2020). A lot has happened since we were 3 persons in a group of 3 companies with 15 persons. Stacc now consists of over 230 employees in 3 countries, and the companies work more like different departments. As Stacc expands, I find it hard to write about just the yearly accomplishments of one department in Stacc, so instead, I’m going to write about what I’ve been up to this year:

Morrow

Morrow Bank came to us when they were still known as Komplett Bank with a proposal for a complete rebrand of their public pages. They had previously worked with another firm to establish the brand identity but needed help with expanding the visual profile for the web and developing their new website. With a small team from Stacc, I helped design and develop brand-new web pages, a visual style guide, and a design system that will be used in years to come. I sure learned a lot about gradients on the web.

Kassa

For the last year, one of my main projects has been Kassa, a digital and automated end-to-end mortgage solution that streamlines the mortgage process at every stage. The solution automatically gathers information about the loan customer from various sources within seconds and helps to ensure that the loan applicant can receive a response to their application within a few minutes. I have been the lead UX designer on the solution and worked a lot on streamlining the customer journey for borrowers and co-borrowers and the daily work of caseworkers and financial advisors.

Sensor Bachelor students in design

In May, I was privileged to serve as an external sensor for the Visual Communication students taking a bachelor at the University of Bergen. Reviewing various projects, from speculative design and AI as a design tool to board games, was inspiring and intense.

Presentations

I’ve also held a few presentations. Among others, I presented Norwegian Fintech trends for Vest Studio (and friends) in Ålesund and held a talk for students about how to build a career and why Fintech is an exciting industry to bet on. A highlight of the year was touring Scandinavia in together with my good friend Ivan Hjelmeland from Shortcut. We delivered a talk on a report we (and some of our colleagues) had created where we analyzed all the banking apps in Scandinavia. You can read the report here.

Feasibility studies and POCs

Much of my time is spent on feasibility studies, creating Proof of Concepts, and sales, and unfortunately, this is not something I can share more about. If you want to read more about my regular work-day you can read this interview from when I was Designer of the Week at UX Norway.

Side projects

Over the last two years, I’ve built several side projects on evenings and weekends.

X/Twitter

I’ve slowly built a following on Twitter by sharing hidden features on iOS and macOS, but in 2023, it grew and stabilized at around 145k followers. My most absurd moment last year was when I woke up and saw that Elon Musk had replied to one of my Tweets. I wrote about some of my learnings in this blog post. My tweets were viewed by someone over 98 million times last year! (Strangely, it was down from 171 million in 2022, so it might be safe to say that the algorithm changed in 2023).

iSecrets

Over time, I’ve added these tips to a daily email called iSecrets. It consists of an automation with over 100 emails that are automatically sent out ever weekday. Over 8 000 have subscribed! You can subscribe below to check it out:

I have written 4 blogpost and 14 Fintech newsletters in 2023. This feels disappointing considering I currently have 315 blog ideas (?!), 15 blog drafts and 2 blog edits in my Obsidian vault.

Mac App

My main side project for the last year has been a productivity macOS app I’m creating with a contractor. I’m looking forward to releasing it at the start of this year! You can subscribe here if you want to be notified when it launches. This might be one of the reasons why my blog have stagnated a bit lately.

The Good Parts

Day-to-day is hectic with a 6-year-old (Just started at school!) and a 3-year-old. Next year will be even more hectic as we welcome another family member in May!

Travel

Kristiansand zoo and amusement park

In 2023, we started something I’m sure will be a staple in our year: a precation. A shorter vacation before our summer vacation. I highly recommend it! This year, we visited Kristiansand Zoo and Amusement Park with my parents-in-law, and everyone from 3 to 60 had a great time!

South England

Our real vacation was spent in the south of England. We first had a lovely week in Greatstone with my parents (A bit bummed about the tides and extremely shallow depth of the beach), and then a week on the Isle of Wight. We fell in love with the Isle of Wight, the ease of cycling around, and the fun amusement parks. Highly recommended!

Health

Weekly ice bath

A weekly staple for the last two years has been a bath in the ocean before work (or during lunch) with a couple of colleagues. It is incredible what people do just because we have a leaderboard. The average temperature of all the baths last year was 8,3 degrees celcius.

Styrkeprøven rett Vest

Last year, one of my most memorable experiences was when my wife and I “ran” Styrkeprøven Rett Vest. It is a 45km trail (feels like 50) over 3 100 m in height and 8 mountains. We were pretty nervous about whether we would actually be able to finish, but after finishing 7-fjellsturen earlier in the spring and training fairly structured during the summer, we believed it was doable.

The first 5 mountains went okay, but then I lost all energy on the 6th mountain. I pushed on, but when I finally had my energy back and filled up my Camelbak with energy drinks, it started pouring down, with thunder and lightning close by. The organizer made the wise decision of canceling the rest of the run because of the risk of being struck by lightning at the mountaintops. We therefore didn’t get to go over the last two mountains, which was a bummer.

Toughest

A yearly tradition for my wife and I has been running the obstacle course Toughest together in Oslo! It is amusing with a lot of challenging obstacles and about 10km of running. This year, the entire family traveled over and we also ran the family race together.

On race day, I, however, had an accident that has haunted me for the whole autumn. I was on the “spinning wheels” obstacle where you hang by your hands on wheels mounted on a rig. You must gain momentum from one wheel to the next to reach them. At the last wheel, I suddenly felt a jolt in my shoulder and fell. Later, after scanning my shoulder, I learned that I dislocated my shoulder at that moment, and it apparently popped back again immediately. I didn’t know, so I continued the race (and even climbed a rope 5 minutes later)

Shoulder surgery

My shoulder never became better during the autumn, so after finding out it had been dislocated and I had some loose cartilage there, we decided on surgery to remove the cartilage and to suture the labrum in the shoulder to reduce the risk of the shoulder dislocating again. I have, therefore, spent my entire Christmas with my arm in a sling while my shoulder recovered. This whole post has been typed with one arm or with the help of different text-to-speech solutions I’m testing.

Some wonderful things from 2023

Purchases

Ice bath Yes! I bought an ice bath outside our bedroom this year. Nothing wakes you up like a sub-10-degree bath in the dark. It feels like training without training and gives much energy throughout the day.

Mercedes Benz EQB 300 The most expensive purchase this year was without a doubt a car. Our biking days are not over, but becoming a family of five certainly has its own challenges when it comes to transportation. We, therefore, saw no other option than buying a car. We wanted an electric car with at least 400km reach, 7 seats, and a 4-wheel drive to get to our cabin. We are pleased so far!

Favorite meal

Pizza with Apple and Bacon: In 2023, we used our Ooni Koda oven almost weekly. Our go-to staple pizza became Pizza with white sauce, tart apples, and bacon (and sometimes a drizzle of honey).

New habits

Dream team practice: I’ve started a habit of reflecting every morning on how I will be my best and move the needle today for work, my health, and my family. It might sound cheesy, but it doesn’t take much time, and I’ve noticed it helps me focus on what is essential that day.

Shutdown ritual: I’ve also started with a shutdown ritual at the end of the workday to unwind and plan the next day. It’s a checklist where I go through what I’ve done, log my hours at work, review the next day’s calendar, and list the top 3 things for tomorrow. It’s simple but helps immensely in controlling things and preparing to end the workday.

Media

The PARA Method I’ve been following Tiago Forte for quite a while, but this way of organizing my digital life really came to fruition after reading this book. Book

Abandon Over the last few years Blake Crouch has become one of my favorite fiction writers. Abandon is a fascinating thriller about an entire Western town that suddenly disappeared along with a large amount of gold and the people trying to find the treasure later on. Book

The Comfort Crisis This is probably the book I have referred most back to, and thought most about, in the last year. Michael Easter argues why comfort might be one of the leading causes of many of our most urgent physical and mental health issues. Book

Laugh Track by The National was my favorite album from last year. Album

Aftermath - EP by Alfonso Peduto is a piano-only album I’ve enjoyed listening to when working. Album

The Art of the Steal What can I say? I’m a sucker for bank robber films and endings with a twist. Movie

Dexter: New Blood Dexter is the TV show I’ve seen most times (I never rewatch stuff), and this sequel did not disappoint. Highly recommended if you’ve seen the previous seasons. TV show

Barry is a dark comedy-drama series about a disillusioned hitman who tries to start a new life as an actor. We quite enjoyed these 4 seasons. TV show

Billions This year, we watched the last of the 7 seasons with the billionaire Axelrod and his nemesis Chuck Rhoades. If you enjoyed Suits, this is a must-watch! TV show

Apps

Typing Mind Chat GPT became a staple in my work process last year. Typing Mind is my preferred way to interact with Chat GPT on desktop and mobile. You just add your Open AI API key to use it, and you can add custom instructions and characters very quickly.

Funnel is a way to take quick notes and add them to your preferred apps with speed. It is handy for adding notes to Obsidian without waiting for sync.

Snipd is my new preferred podcast app this year. What separates it from other podcast apps is that you can take snips from the podcast to automatically transcribe and create notes that I can store in Obsidian.

Obsidian has been my most used tool last year. I actually added over 1 400 files to my Obsidian notes this year. On average, it's 13 lines per file, so it's quite a lot of information. But by using the PARA structure I wrote about earlier, I find it reasonably easy to find what I'm looking for at any minute.

Plans and goals for 2024

New kid in town – this is definitely going to be the theme of the year
Recovery of my shoulder
Launch the Mac app
Write more regularly on the blog

Lindy effect

2023-08-16T00:00:00+00:00

One fundamental principle often goes overlooked in a world obsessed with the latest trends, fads, and shiny new objects – the Lindy effect.

The Lindy effect states that the future lifespan of something is proportional to its current lifespan. In simpler terms, the longer something has been around, the longer it will likely stick around. This principle can be a valuable guiding force when deciding what tools and technologies to adopt.

Future proof

For years, I relied on Evernote as my primary note-taking app. It had a sleek interface, powerful features, and a dedicated user base. However, after a while I realized a significant drawback – it stored notes in a proprietary format, making them non-portable and creating challenges when I wanted to switch platforms.

This is why I switched to Obsidian for note-taking in recent years. Obsidian stores notes in simple, plain text files — a format that has been in use since the dawn of computing. By choosing a tool that respects the enduring nature of plain text files, I essentially future-proof parts of my digital life.

“If you want your writing to still be readable on a computer from the 2060s or 2160s, it’s important that your notes can be read on a computer from the 1960s.” – Stephan Ango

Whether Obsidian exists or not in the future, I will always have control over my notes because they are stored in a universal format, building my digital life on a solid foundation. I can even publish them on my blog using the same file format.

Learning from Experience

I have encountered the pain of technological obsolescence before – inaccessible old Flash webpages, proprietary RAW files, obsolete Sketch documents, and webpages I’ve designed that no longer function. These experiences have emphasized the significance of prioritizing longevity and flexibility in our ever-evolving digital landscape.

The robustness of an item is proportional to its life

The Lindy effect can be seen in many other areas too. Books, movies, and music that stand the test of time have something important to offer that goes beyond just being popular in the moment.

“If a book has been in print for forty years, I can expect it to be in print for another forty years. (…) Every year that passes without extinction doubles the additional life expectancy. This is an indicator of some robustness. The robustness of an item is proportional to its life!” – Nassim Nicholas Taleb, Antifragile

So just use old things then?

While the Lindy effect emphasizes the value of longevity and the reliability of established practices, it doesn’t necessarily mean we should avoid embracing new technologies or ideas altogether. In that case, I would never have adapted Figma, React, or other great tools that significantly improved my work. But the Lindy effect simply encourages us to approach new technologies (and content) critically and consider their potential for enduring value. A good question for this is asking yourself, “How can I access this in decade (or two)”?

How to use Figma for presentations

2023-08-04T00:00:00+00:00

Forget about PowerPoint. Here is how to use Figma for presentations instead.

Things have changed
This is an old blogpost written before the launch of Figma slides.

Why use Figma for presentations?

Figma offers several advantages over PowerPoint, making it a great choice for creating visually appealing and collaborative presentations:

Improved Collaboration and Feedback: Figma allows multiple users to simultaneously work on the same presentation and leave real-time feedback and comments.
Enhanced Design Flexibility: With Figma, you have more control over the design elements, enabling you to create visually appealing presentations. For anyone using Figma for design, PowerPoint feels like a straitjacket.
Interactive prototypes (and video): Figma allows you to create interactive prototypes within your presentations.
Easy sharing and compatibility: You can easily share your Figma presentations with others without worrying about compatibility issues.
Infinite Canvas: Move your slides around like you want on an infinite canvas.
Observation mode: Others can follow your presentation remotely without screen-sharing.

Getting Started with Figma for Presentations

Creating Your First Slide in Figma

Fire up Figma and get started creating your first frame. To do that, click F and select Presentation > Slide 16:9 (on the right side of Figma) as the size of your slides. Congrats! You now have your first slide!

Organizing Presentation Frames

The key to working with presentations in Figma is organizing your presentation frames ordered from left to right, then top to bottom. Just like you would read a book. There is no need to create connections and flows.

Simplifying Slide Naming with Super Tidy Plugin

Pro-tip: You don’t have to waste your time giving names to your slides. Instead of manually renaming frames, I automate the process using the wonderful Super Tidy plugin when I want to clean things up. (As you can see in the above image).

Template Slides in Figma

Creating Component Templates for Reusability

Often when creating presentations, you want to reuse templates for slides. In Figma, you can create components: Create the base of each slide type, like a title slide, a section break, a top title, and a blank slide, and convert the frame to a component (⌥ ⌘ K). I like to create this on a separate page to make sure these don’t come up when I present. To use your template slides, return to your first frame and place an instance of your new component inside it.

Make sure to use text component properties, or name your text layers the same across components to easily switch between templates and keep the same text.

Pro tip: You can also publish your new components to your team library so that other people in your company can use your slide templates. To do this click on the title of your Figma file and select “Publish Library”. You’ll then open a Library publish dialog where you select which components you want to publish, and click “Publish”.

Reusing Fonts, Colors, and Spacing

You can also set styles for fonts and colors or variables for spacing to reuse and easily adjust choices across multiple slides.

Figmas explanation of how to create styles

Creating Grids for a Uniform Look

Figma also has a powerful grid solution to make your presentation more consistent. Figma has an excellent walkthrough on how you can use grids on Figma Learn.

Animations and Transitions

If you want to add animations and transitions, click on the prototype panel at the right of your screen and drag one of the dots from your start slide to your next slide. Now you get a dialog of transition options. You can customize the duration, delay, and easing of each animation. Choose “smart animate” for a solution similar to Keynote “Magic Move.” Figma has a lot of great resources on how transitions work.

Generating Shareable Links

By clicking the share button in the top right corner, you can enter an email address to invite others to collaborate or generate a shareable link. You can also password-protect the file if you want.

Collaborating with Others in Real-Time

One of the greatest advantages of using Figma for presentations is collaborating with others in real-time. Multiple users can simultaneously work on the same presentation and provide real-time feedback and comments. If you want to see another collaborator’s current view, you can click on their avatar in the top-right corner to follow them. You could also hover your own avatar and click “Spotlight me” to force all the other users follow you.

Using Comments and Feedback

Within Figma, you can leave comments and feedback on specific presentation elements. This allows for clearer communication and easier collaboration. You can easily resolve comments and keep track of the changes made based on the feedback received. To do this, click on C (or the comment symbol) and add comments on relevant places. You can always see the comments and threads in the right column when you are in the comments view.

Version History and Design Iterations

Figma also provides a version history feature, allowing you to view and restore previous presentation versions. This is helpful when you need to revisit an earlier design. To do this, click on the title of your Figma file (top middle of your screen) and select “Show version history.” You’ll get a timeline in the right column showing all your file changes. Click on any of them to rewind your project.

Presenting Your Figma File

Preparing a Figma File for Presentations

To prepare your Figma file for a presentation, all you have to do is to open the prototype panel and select “Presentation” under “device.” (you could also add &hide-ui=1 to the end of the URL if you want to hide the UI completely when embedding or sharing a presentation link)

Taking Advantage of Fullscreen and Figma UI Options

When you will present, click the play icon in the top right corner of Figma. This will open your presentation in prototype mmode. You can then click the expand icon in the top right corner to make it fullscreen and select options > Fill screen and make sure options > Show Figma UI is unchecked. If your slide seems weird you can click Z to switch between all the different view states.

Presenting remotely

If you are presenting remotely you could enter prototype mode (by pressing play), and click “Share prototype” and send the link to others. When you are starting to present you can click your own avatar and “Spotlight me”, and this way force the other spectators to follow you during your presentation.

Exporting Slides as PDF

Export your slides as a single PDF by going to File > Export frames to PDF. Figma will then generate a PDF with every Frame on the page you are currently on. Your pdf will follow the same order as your slides in presentation mode: left-to-right, top-to-bottom. Note that these files can sometimes become huge depending on your presentations. I’ve found ilovepdf great at compressing these into a manageable file size.

Another useful feature is the ability to embed your presentation. This is great for showcasing your presentations on your website or sharing them on social media. Check out the Embedding article in the Figma Help Center to learn how to embed your Figma files. Rember to share your prototype (Click “share prototype” after pressing the play button), and not your regular file. Here is an example of how an embedded presentation look out of the box:

Designer of the week - UX Norge

2023-03-01T00:00:00+00:00

I was interviewed by UX-Norge as designer of the week. This is a translation of this interview to english:

Name: Marius Hauken
Age: 34 years
Residence: Bergen, Norway
Education: Master’s in Design from Bergen Academy of Art and Design
Job: Designer at Stacc
Years as a designer: 13 years
Listening to now: Imagine Dragons
Watching now: Dexter - New Blood
Reading now: The Humans by Matt Haig

How has your journey been to where you are now?

It has mostly been characterized by doing what I found most interesting at any given time. In junior high, I made a lot of movies and spent lots of time with both Photoshop and Premiere. When it was time to choose a path in high school, it was an easy choice to start on Media and Communication which at the time was a brand academic track. There I learned the unique combination of printing with a Heidelberg machine and HTML and CSS for the first time. I still remember the magic of transferring some files to an FTP server and suddenly a website was accessible to the whole world.

Some of the projects from my time at KHiB

After high school, I wanted more of the same and got directly into KHiB (Bergen Academy of Art and Design) in Visual Communication. I ended up staying at KHiB for 5 years to take a Master’s in Design. The way the program was structured was perfect for me, with 2-3 week-long projects with new themes such as illustration, typography, Motion Graphics, and interaction design, etc. As I got further into my studies, I also focused more on screen design.

One of the projects we had was to create idents for NRK3. This was my contribution that NRK later put a logo on.

While I was doing my master’s, I ran a design agency with some former classmates: Kassett. There we honed our skills on real customers while studying, which I recommend to everyone studying design. We delivered projects for large and small clients, everything from Bygdalarm and Oslo Lux to Helse Vest. But when I heard that Netlife was coming to Bergen, I immediately got in touch and started there six months before Netlife’s Bergen office became a reality.

Some of the projects we delivered at Kassett

My first client at Netlife was a small startup with a dream of helping parents coordinate all children’s leisure activities in a simple way: Spond. It has been fun to see their journey afterward!

At the same time, I was gradually phased into a team that commuted to Bergen to help Skandiabanken become responsive online. I ended up working at Skandiabanken/Sbanken as a consultant for almost 5 years and was involved in everything from payment screens, mortgage flows, development of a savings robot, and two rebrandings.

Some older screenshots from Skandiabanken before rebranding to Sbanken.

One of the things I’m most proud of in Sbanken is the impressive prototype we made of the entire bank. It was a PHP rig (this was after all years before anyone had heard of React) where we simulated an entire online banking experience and could load simple customer data so that customers would recognize themselves when we user-tested the banking solution on them. The CSS and markup in the prototype were taken forward into the production of the bank. Now there are thankfully better rigs for this with reusable components in React/Vue/etc, but I think that the prototype in context with monthly user tests of this over 5 years has played an important role in Sbanken’s position in the Norwegian banking market for many years.

While working at Sbanken, Robin Sandborg, who I’ve worked with since we studied together, and I became acquainted with Espen Sæverud. We quickly realized that a skilled developer and two coding designers were a good combination. Together, among other things, we won a hackathon hosted by Sbanken, which resulted in us integrating Coinbase into the online bank as a PR stunt. We all agreed that things were going a little too slowly in the banking industry, so with the fintech company Stacc behind us, we started Stacc X. We believed there was a market for themeable frontend components for banks (there wasn’t 😅), but there was a market for delivering complete application flows and UX consulting for banks.

At Stacc, I have been on a fantastic exciting journey from when we were a total of about 15 people in the conglomerate to now being 200+ with offices in several countries. There are a lot of skilled people here, and if we have a technical challenge or other issue within finance, there is definitely someone in the organization who can help with the answer or has encountered it before.

Some of the skilled people in Stacc X from our summer party

During my time at Stacc, I have among other things been involved in designing the first version of Bulder Bank, a car loan solution for Danske Bank, a communication platform between car dealer Nordea Finans and the car buyer, several mortgage solutions, a platform for underwriting for Tryg, and feasibility studies for various banks.

Some of the work I did for Bulder Bank together with Eivind Kjellevold.

It’s really fun to be in the position that we are now in Stacc, where in very many projects we can work with (and deliver) the entire customer journey, from someone starting to apply for a loan, to a case worker looking at the case and until it is paid out and the loan is followed up. This also means that my role as a designer often blends just as much into business development and the technical landscape when it comes to what data we get from various APIs, etc.

Process for mortgage

What are you currently working on?

One of the disadvantages of working at a company that helps banks and other fintech companies is that I can very rarely share what I’m working on at the moment. But I can reveal that we are about to deliver our first end-to-end mortgage solution and an exciting rebranding of a bank. This is actually the sixth time I’m involved in rebranding/designing a bank and defining how the profile should be carried out on digital surfaces.

What does a typical workday look like for you?

It is mostly chaos from when I get up until I come home from work (and often after work too 😅). I typically juggle multiple projects and deliveries for different customers while involved in sales processes. This means that no two days are alike, which I really enjoy.

During a typical week I will often do this:

Have a workshop with a customer
Work concentrated in Figma
Work closely with business developer and architect on how a flow should look and function
Possibly sales meetings
Interview potential people for the team
Write a newsletter
Attend a standup with a customer team
Follow up part-time students or employees

What tools can’t you live without?

Figma for sketching, designing flows, and thinking
Obsidian for writing and thinking
Things to avoid thinking
I also have an extensive list of tools I use regularly at Hauken.no/uses

Who or what inspires you?

I am inspired by a lot, but especially by designers who master code as their tool and have a playful and exploratory approach to what they create, such as: Rauno Freiberg, Jordan Singer, Alyssa X, Anthony Hobday, Ivan Hjelmeland, Jonnie Hallman, Tim Holman, Brian Lovin, Rafael Conde, Steve Ruiz +++

What would you like to learn more about in the future?

I want to learn more about TypeScript. I certainly see the value and have ended up using it in some side projects, but I do not quite understand what I am doing.

What do you find most challenging in your job as a designer?

Selling the value of design. No one I talk to disagrees about the value of design, but why is it so much harder to sell than a developer hour? This despite the fact that the developer hour can be worthless if a good design job isn’t done first.

What do you think designers in Norway should get better at?

We should more widely acknowledge that domain expertise in an industry is important as a designer. Too often, design consultants are sold as designers regardless of industry, and that they can jump from healthcare providers, to finance and further to the maritime industry without this being a problem. In my opinion, that is utopia and not least very frustrating for designers to have to handle a fairly broad field while constantly jumping between industries.

Yes, a designer can definitely deliver value in new industries, but it’s not comparable to how much value a designer who knows the industry can deliver. Therefore, I would like to advocate for specializing towards an industry for designers.

What do you do when you are not working?

Most of the time is spent with the family with 2 small girls (soon to be 3 and 5 years). We have two outdoor girls, so the time is mostly used outside.

In the evenings, I’m regularly at our home gym, which luckily was ready long before the pandemic. Having it available right outside the house drastically lowers the threshold to get started, and not least the luxury of not having to wait for someone to finish with the equipment you need. I don’t really train for anything specific, but we’ve usually taken part in one obstacle course during the year. Last year, the eldest also got to participate – that was great!

In the evenings, I work on some side projects to test out new ideas, technologies, and to simply have fun. So far, this has resulted in a daily newsletter with hidden iPhone features (iSecrets.io), a bunch of followers on Twitter, a response from Elon Musk 😮 and soon a macOS app 🤞.

Do you have a short tip for students or those new to the field?

Document what you create for clients for your own sake. If you’ve designed a website, for example – take screenshots and videos of it after launch for documentation for later in dumb formats (.jpg/png and .mov). Make it a habit!

How a side project to a side project lead to 255 Million impressions in 9 months

2023-02-08T00:00:00+00:00

Last year I had an idea for a side project (which is now launched). I approached the subject methodically and realized I would get next to no traction on the idea unless I had an audience.

I, therefore, started diving deeper into how to build an audience and grow on Twitter (as a side-project to the original side-project). I took a course, got to know many like-minded peers, and started getting some reps in publishing content on Twitter.

Fast forward to today, nine months later, I have:

255 Million impressions of my tweets 🤯
149 000 followers
19 000 newsletter subscribers
1 800 tweets

Most of my followers came from two threads.

Starting point

These numbers are rather mind-boggling. Especially considering my starting point: I had about 400 followers and tried publishing thread after thread without any traction. Suddenly one of my threads hit a nerve, and my phone started to burn. 100 likes, 500 likes, 1 000 likes. I woke up the next morning and had 20 000 new followers. I stumbled upon a topic that combined my interest in UX with what users found useful: Features on iPhone that are hidden but practical.

I continued digging up interesting tidbits hidden in iOS and new features released in the next iOS version. After diligently publishing a thread every Saturday for half a year, I suddenly had amassed 75 000 followers. I guess you could say I found a Product Market Fit.

This lead me to start a newsletter with one daily iOS tip covering a new hidden feature in iOS. The perfect guide for anyone new (and experienced) to the device. Check it out at isecrets.io

Hello Elon Musk!

I continued publishing one thread every week on hidden iOS features, but last week something special happened:

A thread I had written had previously done quite well with over 1.5 million impressions and 2 500 new followers, but Elons comment catapulted it into a completely new life:

All of these spikes are how the threads I've written have performed.
As you can see it varies a lot. The last two are from the Elon-comment.

I had set up notifications for every person subscribing to the newsletter. Suddenly my phone wouldn’t stop buzzing, and the followers poured in. After one week, I had gotten nearly 75 million impressions on the tweet and 70 000 new followers! It is funny how many people you can reach with what you create on your mobile phone while your kids watch TV in the morning.

Your browser does not support the video tag.

Every user subscribing to the newsletter

What tactical nuggets have I learned?

This journey has been interesting, and I am lucky to have stumbled onto a topic that resonated that much with people. Twitter is a great platform for building an audience, and I grew a large one in a relatively short time with a couple of great pointers:

Provide value for others
If you want to grow on Twitter, you need to write threads (sorry all thread-haters 🙈)
Tuesday, Thursday, and Saturday are the highest-performing days for threads – Monday and Friday are horrible.
Everyone tells you you should tweet daily, but I got fatigued from that and ended up on a pattern of publishing one thread a week instead. I didn’t see any change in followers from that — quite the contrary.

I started out writing every day, but landed on quality threads once a week.

Everything comes down to your hook: Will people click the “Show thread” button?
Your profile is important. It should tell what you write about and what they have to gain from following you. Pin your most valuable tweet, and clean your timeline now and then for new followers.
Avoid this:
- Linking off platform
- @mentioning at the beginning of a tweet (causes it not to be seen)
- Hashtags
- Give too much away in the hook
You need a crew to get through the cold-start problem that can promote each other and help give feedback to your threads. This is especially important for hooks.
It takes time. Crafting quality content that people enjoy is time-consuming. I usually spend at least two hours on each thread. (Based on this, my hourly rate has been 7 000 followers per hour worked on average)
Don’t fall into the trap of thinking that numbers are the only way to measure success. Sure, it’s fun to reach millions of people, but it doesn’t matter much in the big picture. I haven’t earned a single cent from it (yet), but I’ve met many interesting people I wouldn’t have met otherwise, and even a few friends.
The implementation of double opt-in for email subscriptions is crucial in enhancing the open-rate of emails. However, it can be disheartening that almost half of the subscribers fail to engage with the double-opt in emails and are lost. (14k subscribed, 8.2k double opted-in )
As everything else in life, habits are important.

And if you’re sitting there at the end of the post and wondering: “What was that original side-project he wanted to launch?”. Add your mail below, and I’ll make sure you get a notification when it’s released!

All of the statistics above are gathered from Typefully, my favorite writing and publishing environment for Twitter

Light comes from above

2022-06-28T00:00:00+00:00

One design tip you'll see everywhere once you know it:

Light comes from above.

🙄

Kind of obvious, but this means that:

Objects are lighter at the top
Shadows fall below elements
Elements closer to you are brighter

This is why shadows spreading out evenly seem subtly wrong.

This is why gradients that are darker on the top seem weird.

This is why darker cards on lighter backgrounds are off.

Just remember: Light comes from above!

As soon as you know this you’ll notice it everywhere!

Use fewer words

2022-06-21T00:00:00+00:00

Use fewer words.
Reducing your message by 50% can DOUBLE its effectiveness without losing the meaning:

It is much easier to read the text (and way more efficient for the reader) if you avoid writing words that only serve as extra filler words in the text
—
29 words

It is easier and more efficient for the end-user to read a text where you avoid writing unnecessary filler words in your text
—
23 words

It is easier to read a text if you avoid writing words that act as filler words
—
17 words

It is easier to read a text if you avoid writing filler words
—
13 words

It's easier to read a text without filler words
—
9 words

Drop filler words, increase readability
—
5 words

Inspired by Hilde Kristoffersen and the article write shorter messages.

Layering makes you dangerous

2022-06-16T00:00:00+00:00

This untold career strategy will make you stand out from the crowd.
Here’s how to make yourself indispensable:

If you want success, you have two strategies:

Become the best in the world at one specific thing
Become the top 25% at two (or more) things

The first path is very hard. The second one is doable with some effort.

By combining skills you get more unique — and valuable!

Some skills are meta-skills that always will enhance your other skills:

Communication (writing/presenting/marketing)
Leadership
Technical
Business

One of your skills should always be at least one of these layers.

Capitalism rewards things that are both unique and helpful. The more layers you add, the rarer and more valuable you will become. It is hard to find a successful person without multiple layers.

I first heard about this concept from Scott Adams, and have since thought about how to apply it to my career. My layers currently are:

Designer
(Front of the) Front-end developer
Fintech expert
Writer (Working on this)

Which layers do you have? Which layers are you working on?

7 things learned from publishing over 100 newsletters

2022-06-13T00:00:00+00:00

I just wrote my 100th newsletter.
100 weeks. 100 mistakes.
7 things I wish I knew before I started:

1. Deadlines are crucial

Without a weekly deadline, I wouldn’t have published anything. It keeps me accountable, and people nag me if I don’t post on time. Lesson: Set deadlines to make things urgent

2. Consistency is key

A weekly cadence creates a habit of writing and sharing. By checking off the box every week, I am slowly getting better, and it gets easier to write. Lesson: Habits are essential to get better!

I have written the newsletter by itself and just sent it out to readers. Growth is hard without an initial audience or referral program. Lesson: Have a plan for marketing and distribution. Twitter is a powerful funnel!

4. You never know what readers will appreciate

It has been impossible to predict the outcome of each newsletter. Some issues are wildly popular, but I can’t find any patterns. Lesson: You might be wrong about what your readers think is interesting! Talk with them!

5. It can be stressful

Writing newsletters take time. You don’t have infinite time, so something else will have to go. For me, it had meant less book reading and relaxation. Lesson: Don’t bother if you aren’t motivated

6. New doors will open

Writing regularly on a topic automatically makes you an authority. Other people might know more but don’t share. This puts you in a spot where people take contact for talks or consulting gigs. Lesson: You never know what doors your next post will open

7. Time is your best friend

I fumbled for a long time to find my pace and topics that resonated with my expertise and audience. The best part: most won’t see the fumbling start since they didn’t follow you! Lesson: Finding your niche might take time, but don’t worry!

Tl;dr

Set deadlines
Consistency is key
Have a marketing plan
Time is your best friend
You won’t know what will resonate
Don’t bother if you aren’t motivated
Posting regularly will open new doors

(The newsletter in question is about the Nordic fintech scene and the intersection of design and technology.)

The two device solution

2022-05-12T00:00:00+00:00

How I use multiple devices to boost my productivity and focus:

We often use the same device for work as we use to relax. What if you thought of your devices as a single-purpose environment for different activities?

Computer → Work
Tablet → Refine
Phone → Relax

This way, you can use your devices to switch contexts. The fresher your eyes, the easier it is to refine and edit. A few examples:

Writing

Take notes in your notebook (or phone)
Write on your computer
Edit on your iPad Pro tip: Use different fonts to see the text differently

Designing

Sketch on paper
Design on computer
Refine / edit on iPad

Music

Songwriting with an instrument
Create on computer
Listen to the music on a walk and refine

Switching devices and context is as refreshing as waiting a day between creation and editing. Suddenly it is obvious what to remove or adjust!

Focus on primary task

An additional benefit is that you can set up each of your devices to enable focus for its primary task:

Computer → Work apps - no notifications
Tablet → Refine - no notifications
Phone → Relax - social notifications etc.

Stacc X year in review 2021

2022-02-09T00:00:00+00:00

Daily we design and code things for our clients, but we’re not often as good at sharing what we’ve done during the year. Then it’s nice to take a step back and look at all the projects we’ve delivered and worked on during the year.

This is a blogpost from Stacc X. One of seven teams within the Stacc ecosystem. See what all our products and services.

Projects

Working within banking and finance, there is much secrecy involved before launch. These are a few of the projects we have worked on and can talk about this year:

Danske Bank

Last year we launched a new car loan process for Danske Bank. The result is a flow where you can apply for a car loan (and certificate of financing) and upload documentation. We’ve also developed a flexible system for caseworkers and back-office. The launch successfully reached its goal for the year in only four months!

Nordea Finans

We’re continually working on new solutions for Nordea Finans and their popular dealer and customer portals that handles all communication between Nordea, car dealers and car buyers. With secure chat, file upload and an easy-to-use case management system, the platform brings all the parties together and simplifies the experience for everyone.

Webmegleren

We helped Visma Real Estate Solutions take their business system for real estate agencies, Webmegler, into all platforms. Our job consisted of creating a new design system and examples of some of the most used pages. We also interviewed and user-tested the new solution on many real estate agents, continually improving the user experience. This job was made easier because of Covid since everyone suddenly was used to meeting digitally. The first beta version is now slowly released to the first users.

Spense

Last year we launched the first version of Spense – a simple solution to get quickly paid for (mainly) the car industry. Their key product is a simple payment flow where customers can choose to pay by bank transfer, card, pay later, or split the invoice, while the creditor gets paid immediately. This payment flow is brandable through an elegant theming system we’ve made for Spense. The whole solution is fully integrated via APIs, but we’ve also made a clean portal for creating orders over the last year.

Escali

In April, Stacc acquired Escali Financial Systems, and we got a new sister company specialized in solutions for portfolio-, treasury, and finance management. Based on thorough interviews and user tests, we’ve redesigned Escali Financials to deliver a more consistent experience and better reporting.

Innovation Norway

The largest project in Stacc at the moment is to digitize the credit process for Innovation Norway. The delivery consists of Stacc BM Analysis, delivered on Flow, Stacc’s cloud platform for process automation, integrated with INs own solutions and third parties. Since this is a real cross-collaboration between all the specialties and departments in Stacc, we also have a few persons working full-time on this project.

Kravia

After helping Kravia create a more cohesive user experience for their collections software, they wanted to start moving their application from Angular to React. Migrating years of code from one framework to another is never an easy job, especially when you want to be able to keep releasing new features even faster than before.

Instead of doing a ground-up rewrite, we helped Kravia leverage micro-frontends to divide their legacy Angular front-end into small pieces that they could keep running while still writing new features as small React apps.

BNP Paribas

We helped BNP Paribas, Personal Finance analyze their current credit assessment process and created a report and prototype optimizing their flow. The enhanced flow included sketches for both end-users and caseworkers.

Secret projects

We’ve also worked a lot on a few projects we can’t wait to show you this year!

Consulting

Like last year, we’ve turned more towards delivering complete solutions for clients instead of consultants. However, we have some superstars out working in teams with clients: Torleif and Helene have spent most of their year helping Tryg respectively with their client-facing team and a Nordic underwriting project.

Offices

Last year we got new offices, and sadly they were too small when we finally got back after working from home. Therefore, we were thrilled when our department got our own space at the end of the year – right before we had to work from home again.

Great to finally meet up at our new offices when we had the opportunity! (Yes, we have an ice cream freezer)

Team

This year we welcomed a few more amazing people to our team:

Our new full-time employees in 2021!

Bjarne Helland started with us in March and has, in a short time, made a huge difference in our projects! He is a full-stack developer with love for Next.js. Bjarne also brews beer, and we’re looking forward to tasting some at our next summer party.
Christer Nordnes is our first full-time project manager. He comes from Sbanken, where he was responsible for the securities team. Christer is a photo model in his spare time.
Francis Soliman Dyrhovden is a developer with a previous background in the offshore industry. He has worked with us for half a year now and started to make us embrace his taste for PetNat wine.
Rein Undheim is a developer we knew even before he started working with us in August due to his active use of Slack the months before! He already loves to complain about design changes and is our live streamer when our e-sport team games.
Synnøve Sørensen joined us in August. She had worked 11 years in the oil industry before she chose to join our team as a developer. Synnøve has over 300 parachute jumps!!
Øystein Lund Rolland joined us in December after working as a backend developer in Vimond. He is quickly coming back to his roots as a full-stack developer in our team!
Erika Hågensen and Johann Bugge are joining us part-time from February, respectively, as UX designer and developer! We’re looking forward to that!
You? We’re always on the lookout for new people on our team! We’re in high demand and still looking for more designers and developers. Just send me a message at hauken@stacc.com if that sounds interesting.

Because of the pandemic, most of our regular social activities have been amputated, but luckily we’re able to meet a bit more in 2021 than the year before. We managed to have a small summer party, a disc-golf tournament, a Halloween party, and a Christmas party at Voss.

Some of our Flow colleagues at our Halloween party | Our summer party | Disc-golf tournament

Written

Our weekly newsletter about finance, technology, and design has passed its #86 edition during the last year, becoming a weekly staple in people’s inboxes. We’re glad for all the great feedback we’re getting!

Last year we also wrote a comment in DN on DNB’s acquisition of Sbanken and the potential consequences that could have, and got interviewed by Kode 24 about how we’ve been using Gather.town during the pandemic.

Presentations

We also held a few presentations this year. Stine Neteland presented our strategy for expanding from Bergen to the world for the Bergen Chamber of Commerce and Industry. She also gave this presentation for our seminar on the Future of Fintech, where Helene Stenstadvold talked about working for Tryg in their Nordic Underwriting program.

We also contributed to ReactJS Bergen by talking about Styled components and how to leverage that for styling your react projects.

We’ve also held a presentation for Uni Micro about what UX is, why it’s important and how you can implement it into your organization. Please reach out if you want us to give a presentation on UX, banking, trends, or technology!

Stine and Henna presenting “fra Bergen til Verden” | Helene presenting Trygs Nordic Underwriting program | Presentation about UX

Thanks to all our clients and partners!

2021 was (also) a strange year, but thanks to our great clients and partners, it has been an exciting year! Now we’re looking forward to continuing to help clients launch new solutions and ideas!

PS: You should subscribe to our weekly newsletter to keep up to date on what happens in Fintech, design, and technology in the Nordics.

65 things I learned in 2021

2022-01-01T00:00:00+00:00

1 horse has about 15 horsepowers. Source
The world is spinning faster than it used to. Source
In Poland, they use clams to check if the water is clean. Source
Tomatoes was unknown to Italy before the 1600s. Source
Lego is the largest tire manufacturer in the world. Source
George HW Bush went parachute jumping at ages 72, 75, 80, 85, and 90. Source
An American TV viewer who watches Netflix instead of normal ad-funded television could avoid 160 hours of ads every year. That’s equivalent to a month of eight-hour working days. Source
A million seconds is 11 days. A billion seconds is 31 years. Source
The most expensive substance on Earth is antihydrogen, priced at $62.5 trillion per gram. Source
16 pt text on Windows is ⅓ larger than 16 pt text on macOS. Source
Elon Musk personally met with the first 3 000 people that Space X hired to make sure the company was hiring the right people. Source
Almost 25% of all the bones in a human body are located in the foot. Source
The moon landing was only 66yrs after the first aircraft flight with a crew (1903-1969). Humans went from not having flight technology to traveling 384 400 km from Earth within a lifetime. Source
The combined value of all Oscar’s actor/actress swag bags in 2021 was almost as much as the total box office for Best Picture frontrunner Nomadland ($5.1m swag bags vs. $6.1m total box office). Source
All the planets could fit between the Earth and the moon. Source
Pepsi once had the 6th largest military in the world. Source
Venus flytraps have to put their flowers far away from their traps to not accidentally kill their pollinators. Source
During WWII, the British forces created inflatable tanks and armies to distract Germany from Normandie. Source
In 1850, 60% of all deaths in NY were children under age 5. The main killer? Milk. Pasteurization wasn’t invented before 1865. Source
At the University of Kansas, some students had an initiation where they sucked on parts of Einsteins’ brain. Source
Polar bears only live in the Arctic. The Arctic means “near the bear” while the Antarctic means “not near the bear.” (The bear in question is, however, Ursa Major). Source
Walt Disney is the 2nd biggest consumer of explosives in the United States. Only the US Department of Defense uses more. Source
On spacewalks, astronaut fingernails sometimes pop off, and we are unsure why. Source
A buttload is an actual term of measurement, referring to a butt or cask used for wine or ale. It’s equal to 573 liters (wine) or 491 liters (ale). Source
The length of a day on Venus is constantly changing. But on average, a day on Venus is equal to 243.0226 Earth days Source
A turtle shell is modified ribs. Source
To be in the top 1% of podcasts in the world, you only need to publish 21 episodes. Source
The gasbags inside hydrogen airships of the 1930s were made from the outer layer of a cow’s intestines. The gasbags of the Graf Zeppelin were made from the guts of around half a million cows. Source
Octopuses have eight arms, but they also have three hearts. Source
Wider tires on road bikes are faster than thin tires. Source
In Disneyland, they have smellitizers, think speakers emitting smell and not sound to make your experience more memorable since smell is closely related to memory. Source
4th of July 1892, Samoa moved the international dateline. This meant they had Monday 4th of July 1982 twice. It’s the only time a country has had a year with 367 days. Source
The LED boards with advertisements around the soccer field during the UEFA European Championship ran at 200fps with every 4th frame for different Ads. TV operators take multiple channels from a camera to make four different feeds with the same content but different ads. This is possible because TVs in Europe run at 50fps. Source
In 1986, Cleveland released 1.5 million helium balloons just for fun. Source
You can run javascript in a pdf. Source
Paper planes are older than airplanes. In 1864 kids were flying paper planes; decades before the Wright brothers had their first flight. At that time, they were called “paper darts. Source
After WWII, Idaho dealt with a surplus of parachutes and a nuisance beaver problem. Their solution? Parachuting beavers into the backcountry. Source
The moon causes high and low tides. The moon’s gravitational pull causes Earth—and its water—to bulge out on the side closest to the moon and the side farthest from the moon. The Earth rises half a meter from this pull. Source
Any time you see a blimp, you look at 4% of the world’s blimps. Source
Butterflies taste with their feet. Source
Gravity creates most of the sense of urgency for peeing, so astronauts can’t always tell when they need to go in microgravity. It’s such a complicated process that they pee on a schedule. Source
The color blue is always out of focus for the human eye. Our brain extracts some color information from the blue channel but delegates sharpness to the red and green channels. Source
Sloths are moving slowly because they have to preserve their energy since they only eat some specific leaves that take up to a month to metabolize. This also means that they only defecate once a week. Source
The United States uses more electricity for air conditioning than the whole of Africa uses for everything. Source
The first drones were cameras strapped to pigeons in 1907. Source
Cyclops are real, and there’s a plant that causes cyclopism that grows wild in the Rocky Mountains. Source
Oxford university was founded 200 years before the rise of the Aztec civilization. Source
Greenland sharks reach sexual maturity at 150 years old.Source
The original Latin word for “decide,” decidere, means “to cut off,” as in slicing away alternatives. Source
When Fiat built their factory, they had a racetrack on their roof. Source
Swiss railway clocks run 1.7% faster than normal clocks. The second-hand hits the top of the clock after 58 seconds (instead of 60 seconds). This gives a train two full seconds to arrive at a station “on time,” which helps maintain the illusion of punctuality. Source
Your eyes are the only part of your brain outside your cranial. Source
Hergé’s drawing style is referred to as “Ligne claire”. Source
Closing roads can improve everyone’s commute time. Source
A one-in-billion event will happen eight times a month. Source
Hot water freezes faster than cold. This is called the Mpemba effect. Source
FedEx originally charged by weight until they got a big customer whose product was ten-gallon hats. Source
Cleopatra lived closer to the moon landing than the building of the pyramids. Source
The new MacBook Pro M1 Max chip has 57 billion transistors, 2x all the CPUs in all the Macs shipped in 1984. Pixar’s render farm for Toy Story only had one billion transistors in total. Source
That distinctive, earthy odor associated with rainfall is called petrichor. Source
Bees can’t fly in the dark. If the light suddenly disappears, they fall to the ground. Source
10% of US electricity is generated from old Russian nuclear warheads. Source
You always turn to the right before turning to the left on a bike, and vice versa. Source
If you put one adult’s veins, capillaries and arteries end to end, it would circle the Earth two and a half times. Source
Both male & female Reindeer grow antlers. But all male Reindeer lose their antlers in the late fall, well-before Christmas. Santa’s reindeer, which all sport antlers, are therefore all female, which means Rudolf has been misgendered. Source

Stay close to the final pixels

2021-12-26T00:00:00+00:00

The lines between design and code are becoming more and more blurred. You can choose to ignore it or start embracing that code will make you a better designer.

Patterns

One day I suddenly became a better designer. I had worked with CSS for multiple years, but a workshop with Harry Roberts in the cold city of Zurich changed my relationship to design and code forever. We got a task to review a design and look for patterns and similar elements. The idea behind the exercise was to simplify the code and find objects and abstractions we could reuse. I was struck about the parallel to how this also made the design better: Do these elements have different border radius? Why do I have five different font sizes when I easily could have only two instead?

Understanding code forces you to think about reusability and modularity in your designs. Design isn’t just impacting the styling anymore – it also lives in code. This means that designers who can think like developers will have a vast lever as we advance. Design tools now have components with variants, color variables, and flexible layout systems emulating real-world code. Design is suddenly starting to play a role in how codebases and components are structured.

Material

I was bored of being bored. The teacher in front of me had been going on for three hours about how paper is created and what defines the fiber direction of the paper. He continued about offset printing, digital printing, and gravure. We couldn’t care less. In the middle of the room stood an old Heidelberg Windmill printing press, and the teacher had promised that we would try it out. This was a once-in-a-lifetime opportunity! Our teacher was retired but came to talk to us out of his love for paper and this printing press. No one else knew how to operate the noisy monster, so it was a matter of time before the school would have it removed.

After lecturing for four hours, he finally fired up the Heidelberg machine. It looked like an octopus sucking up a sheet of paper, laying it elegantly on a metal plate, and rolling ink over. It was a hypnotic, meditative, and noisy dance taking place right before us. We each got a turn letterpressing our name and controlling the beast. The prints were crisp, and you could see the subtle imprint on the letters.

We were all ecstatic when we bound small leaflets of papers with all our names to conclude the day. There was only one problem: our booklets wouldn’t lay flat, making it hard to see our printing results. Our teacher smirked when he once again could lecture us on the magnificent world of papers: We hadn’t considered the paper’s fiber direction when we printed, causing the paper to rise rather than lay flat.

Just like any material, screens have affordances. [..] The grain is what gives the material its identity and tells you the best way to use it. Figure out the grain, and you know how to natively design for screens.

– Frank Chimero

As a print designer, you’ll want to understand paper, fiber directions, ink, and printing processes. As a software UI designer, you’ll want to understand computers and code.

Blurred lines

A designer’s job is not just about how things look but also the intangible. What happens between the screens? How does the solution behave in response to interaction? Some of these states are impossible to adjust or communicate without touching code.

Designing the way elements adapt and morph in the in-between moments is half of your work as a designer. You’re crafting the interstitials.

– Frank Chimero

One of these intangible features of user experience is speed. A website can be beautiful and have great UX, but that doesn’t help if half of the visitors won’t use the site because of performance issues. It is dependent on everyone’s decisions, from designer to front-end to back-end.

Your design choices directly impact the code, so it’s time you get your hands dirty and understand how it’s used! After all, the users are seeing the result of the code, not your elaborate Figma sketches. The lines between design and code will become more and more blurred over the coming years. You can choose to ignore it, or you can start thinking like a developer and stay close to the final pixels!

Why selling our car and buying a cargo bike is the best investment we've ever done

2021-11-21T00:00:00+00:00

Three years ago, we sold our car and bought two e-bikes as a replacement. Purchasing a cargo bike is by far one of the best choices we've made over the last few years.

Why?

The idea of getting rid of our car came when we had to pay for changing rusty brake pads. We were not using our car enough. The car was a Volvo V40 we bought to commute between Bergen and Førde because of work, but when we finally moved to Bergen again, we only used the car for the occasional weekend getaway.

The math

As you expect from an analytical couple, we calculated our expenses from the car and our alternatives. The conclusion? We didn’t need a car – we didn’t use it enough to defend the costs. We quickly calculated that our transport needs were well covered by having two bikes combined with the local car collective when we needed to go for longer rides.

Our situation

We’re a family of four - two parents and two kids (Now 3 and 1 year)
We live close to both our parents
We live close to the kindergarten (15 min walk ~ 5 min bike ride)
None of us has ever driven a car to work; we always commuted by bus (~30 min), biked (~15 min for me, ~ 25 min for my wife), or walked.
We live close to grocery stores (~10 min walk) and get our food delivered at home once a week
We don’t know a lot about cars and can’t fix them ourselves

The bikes

After a lot of research, we bought two electric bikes. One large transport bike, a Riese & Muller Packster 60, and a cheaper regular e-bike, Kalkhoff Endeavour. Both with extra studded tires for the winter as well as a child seat. I’ll admit it felt a bit stupid when almost all the money from our old car got used on two new bikes, but it has been totally worth it! We have since upgraded the Kalkhoff to another transport bike: A Riese & Muller Multicharger. This is a long-tail – a regular cycle with an extended luggage tray with room for both the kids. This way, we can transport two kids on both our bikes.

Happiness

The most surprising thing about this choice is the amount of happiness it has brought us. All the perfect moments of our family rolling around. Talking about what we see. Worry-free! No sudden car expenses. We’re experiencing more freedom even though we can’t travel that far on short notice. Our kids are also much happier. A one-hour bike ride is no problem. A one-hour car ride is hell on earth.

I’ll be the first to admit that it’s not always the most fun experience getting out when it’s below zero and sleet out. But when it’s your only option, it’s actually not that bad. You just have to dress for the weather. As my wife said when we were bicycling home from a mountain trip in the snow: “I’ll admit that I had preferred jumping into a warm car now, but then I thought that car-people don’t know what they are missing.”

Car collective

When our bikes don’t cut it, we use the local car collective (or parents cars 😘). The downside with car collectives is that you have to plan a lot ahead and that it on paper seems very expensive to pay 2 000 NOK for having a car for one weekend. But if you crunch the numbers and plan ahead, it’s better for both your wallet and the environment. After all, the typical car is parked 95% of the time! It’s also a more carefree experience. If something is wrong with the vehicle during your trip, you have to report it in the app. After that, it’s not your problem anymore. No more thoughts about service, tire change, EU-control, insurance, or resale value.

What is the actual cost?

Transportation is costly, no matter if you are driving, biking, or commuting. But owning a car has many unseen expenses that are easy to forget: tolls, insurance, scheduled and unexpected services, and the largest one: value loss. Getting all our transport related bills from two providers, the car collective and the bike repair shop, it’s easier to see our actual cost of transportation than it would have been if we owned a car.

Last year we used ~ 19 000 NOK on all expenses related to cars - everything from car collective, parking, toll rings to rent. We used 4 300 NOK on service and new parts for our two electric bikes. If we add the value loss on electric bikes, we’ve used ~ NOK 43 000 on transportation over the last year. This includes a two-week car holiday in Norway and multiple weekend trips to our parents’ cabins.

Value loss

For well-known market brands, an e-bike depreciation rate is evenly divided over a five to seven year period. A rule of thumb is that the value loss on cargo bikes is 10 000 NOK a year.

Comparing expenses, a Nissan Leaf would cost us NOK 70 000,- for a year on iMove included service and insurance, but without toll and fuel expenses. With that alternative, we would still need to bike to work or have a public transport ticket costing a total of 15 000 NOK a year for the both of us. (Just the parking costs of using a car to work would be more than the expenses we had for transportation last year.)

This of course, depends on your needs for getting around. But you certainly don’t have to live in the city center to not own a car.

Environment

The choice to not own a car was mainly based on logic – we didn’t use our car enough to justify the expenses. But also from an environmental point of view, it just makes sense: Cycling is ten times more important than electric cars for reaching net-zero cities, and it’s just a more fun (and healthy) way to travel. I prefer cities that prioritize cyclists and walkers. They are more welcoming! Bergen has never been better than when we arranged the 2017 UCI Road World Championships, and the city center was closed off for cars.

Going forward

We might buy a car down the line or subscribe for a car service for a few months a year if we see the need, but for the moment, we’re pleased with our current transportation solution.

Return on design

2021-11-07T00:00:00+00:00

Why invest in design? Design can at times be very abstract and hard to quantify. Here is five hard numbers, three stories, and one framework to back it up:

Five hard numbers

The ROI for investing in design is 301% Source
Design makes you launch your product twice as fast! Source
Design reduces your development time with 33% Source
Design-centric companies outperform S&P by 211% over 10 years Source
Design-invested companies outperform competitors by two to one in revenues and shareholder returns. Source

Story 1: Better conversion

In 2017 I worked as a consultant for the fully digital bank Sbanken. My role was designing, prototyping and user test their new self-service mortgage wizard.

After the development was finished and we launched the new mortgage wizard, Sbanken saw their conversion rate go up 33,5%. That is a huge deal when the bank’s largest source of income is mortgages. As a consequence of faster and more efficient processing of loan applications, the number of inquiries regarding mortgages to the customer center decreased by 15%.

Story 2: The cost of not investing in design

In February 2021, employees of Citibank accidentally wired $900 million incorrectly. The error happened despite three persons needing to accept the transfer. The reason? Users of the software didn’t understand which checkboxes they should check off to pay down parts of a loan.

When they discovered the error the next day, their first reaction was to email tech support to say the software was broken, not to email the lenders asking for the money back (which they did afterward). Eventually, they got back about $400 million, a total net loss of $500 million that can be attributed to three people not understanding the design of the solution.

Story 3: Validating ideas early

A client came to us with an idea and a business plan. We helped them create a clickable prototype of the product and interviewed some of their existing customers to validate the concept. Is this feature something they would find helpful? The answer was unanimous: this was not relevant. We brought the feedback back to the client, telling them this idea should be scrapped.

This saved them thousands of hours of development, helping them pivot to a more lucrative idea. Lesson learned: design reduces risk by validating ideas earlier. Design helps you understand the customers’ needs, focus on the right ones and thereby develop fewer things.

A framework

Reading this, designers could reason that nerding out, tweaking colors, and cleaning up typography is a worthwhile return on investment. But making the design “better” isn’t necessarily more valuable to the user or the company’s bottom line. Therefore Designer Fund has created a valuable framework for communicating return on design called “20 levers for return on design.” It is a tool that bridges the world of design with the world of spreadsheets.

The framework consists of four quadrants. The quadrants at the top are divided into saving money and making money. Along the sides, you’ll see the direct impact and indirect impact for the business. With direct impact, you see a causation of your work and the money your business earns or saves. With indirect impact, the money your business makes is often correlated: An improved net promoter score and increased word of mouth can increase sales.

The framework can be used as a starting point or checklist for talking about the return on design. When it comes to UX design, the most significant Return On Investment is often about putting an end to poor design. Using the framework, we can see that eliminating poor design directly affects the upper quadrants, with potential better conversion, more sales, better retention, and potentially saving money for the IT department and support. On the lower quadrants removing poor design could indirectly earn more by getting more satisfied customers, better usability, and increased brand perception. Getting rid of poor design could also save money by reducing training time and errors.

Thanks to Jens Wedin for some of the numbers!

Forget goals

2021-10-09T00:00:00+00:00

I always found it a bit embarrassing having the yearly performance talk with my previous employer. Most of the conversation involved talking about the goals in the prior year and how I missed them. Then we set new goals that I didn’t care about and would miss the following year. Strangely enough, my employer and clients were pleased with my results. So much that they one year just said: “whatever you are doing, just continue doing that,” and I finally got freed from the goal-setting.

Goals have never worked very well for me. I’m having a hard time coming up with them, following them, and reaching them. How does that work in a very goal-oriented society?

I make systems or micro-strategies. I put one foot in front of the other and focus on that. After doing it enough times, I’m suddenly at the top of the mountain. I don’t focus on the view at the top or what my time is going to be. The strategy is to get out of the door and move the feet, preferably faster than yesterday.

System stacking

One thing I’m relatively consistent at is training. I do it more or less every day. I have a lot of systems for getting to work out almost daily instead of goals. The problem with goals in training is that not reaching them can become demotivating. Reaching them can be just as bad. We all know people having running a marathon as a goal and stopped running the day after.

My first system for training regularly is probably more of a mindset or a rule: I break a sweat every day. It doesn’t matter how much or how long, as long as I break a sweat. It’s just like brushing my teeth —something I do every day.

A second system is to place training in the calendar every day. I rarely train at that time, but I have seen that there is room for it in the schedule and thought about the training that day. If the days are hectic, I’ve also noticed that beforehand and probably found a way to break a sweat.

A third system is to have a training program. I want as few hurdles as possible between me and the training. Knowing what I’m going to do each time I work out makes it more effortless to see progress.

The good thing about all these micro-strategies is that they don’t take much time. All of them can be performed separately, but they have more effect the more you stack on top of each other.

I also know that it will be easier for me to train if the barrier is lower. Therefore I’ve invested in a home gym. This way, I can walk downstairs and work out without being bothered by bad weather, what equipment is available, transport to the gym, or being away from the family.

Atomic habits

It all made sense when I read Atomic Habits by James Clear. The book’s main point is that if you want better results, then forget about setting goals. Focus on your system instead. Just like I have been doing for as long as I can remember.

Your outcomes are a lagging measure of your habits. Your net worth is a lagging measure of your financial habits. Your weight is a lagging measure of your eating habits. Your knowledge is a lagging measure of your learning habits. Your clutter is a lagging measure of your cleaning habits. You get what you repeat.

Another central idea in the book is to build identity-based habits. You should focus on the type of person you wish to become rather than the outcome of what you want to achieve. This way, you won’t stop because you’ve reached a goal, but continue. I, for example, see myself as a person who works out. That means that I work out even though we’re on a company trip, or there doesn’t seem to be that much time.

You do not rise to the level of your goals; you fall to the level of your systems.

– James Clear

Forget goals

Goals aren’t as important as we think. Try working without them for a week. Turns out, you can do amazing things without goals. And you don’t have to manage them, cutting out on some of the bureaucracy of your life. You’re less stressed without goals, and you’re freer to choose paths you couldn’t have foreseen without them.

– Leo Babuta

Goals often rely on extrinsic motivation, while systems become habitual and automatic after a while. Yes, goals can provide direction and even push you forward in the short term, but eventually, a well-designed system is a winning formula. What makes the difference is committing to the process and not the finish line. As James Clear point out, winners and losers, after all, have the same goals.

Summer reading list 2021

2021-07-10T00:00:00+00:00

Summer means reading time - at least for me. If you need some tips, here are some books I have devoured and was pretty sad to finish. The list is leaning towards science fiction, but don't let that come in the way if you're not a sci-fi fan.

Some of my recommended books

Project Hail Mary - Andy Weir

Ryland Grace is the sole survivor on a desperate, last-chance mission — and if he fails, humanity and the earth will perish because something is slowly eating the sun. The book is filled with fun science facts and the witty banter you can expect from Andy Weir. Weir has also written “The Martian” and “Artemis”, two other favorites of mine.
Amazon: Project Hail Mary: A novel

Lexicon - Max Barry

At an exclusive school somewhere outside of Arlington, Virginia, the art of coercion is a science. Students control the hidden power of language to manipulate the mind and learn to break down individuals by psychographic markers to control their thoughts. The plot might seem a bit weird, but I thoroughly enjoyed this book when I read it seven years ago. It might be time to read it again, but on top of my reading list this summer is Max Barrys’ new book: “The 22 Murders of Madison May”.
Amazon: Lexicon: A novel

Story of your life and others - Ted Chiang

Story of your life and others is a collection of short stories by the American Science fiction writer Ted Chiang. The movie Arrival is based on one of the short stories from this book. If you want something quick to read, this is a great starting point with shorter, captivating stories. A natural follow-up is Chiangs second collection “Exhalation”.
Amazon: Story of your life and others

Mr. Penumbra’s 24-Hour Bookstore - Robin Sloan

Mr. Penumbra’s 24-Hour Bookstore combines ancient mystery and very modern, internet-savvy characters set in San Fransisco. An out-of-work marketeer and web designer takes a job as a clerk at an odd little bookshop. He soon realizes that there is more to Mr. Penumbra than meets the eye. The book is written by Robin Sloan, an eclectic writer/programmer/tinkerer who produces olive oil (named fat gold) in his spare time.
Amazon: Mr. Peneumbra’s 24-Hour Bookstore

The Psychology of Money - Morgan Housel

Morgan Housel is one of the best writers on the topic of finance. He has written an easily digestible book consisting of 19 short stories exploring the strange ways people think about money and how to make better sense of your finances. Also, be sure to check out his blog.
Amazon: The Psychology of Money.

Bonus podcast: Acquired on Berkshire Hathaway

How does a 9-hour podcast about Warren Buffett and his company Berkshire Hathaway sound? No thanks, you say? I would urge you to reconsider since this podcast series is a captivating and entertaining deep dive into one of finance’s most famous figures. As a stark contrast, I would also recommend their episode about Etherum.
Aquired podcast

Links to Amazon are affiliate links.

Kids mode for iPhone and iPad

2021-07-07T00:00:00+00:00

Here is a little tip for everyone with children using iPads or iPhones to watch videos or play games. We all know how they suddenly can turn up the volume, switch apps or suddenly sit longer than they promised. I have a simple tips for you: it’s called Guided Access and is built into iOS.

To enable it go to settings > accessibility > guided access and turn it on. Then you need to go to Passcode-settings and add a passcode for parents. You don’t want your child to get a hold of this. After you’ve done that make sure Accessibility shortcut is on as well. Now get ready for a simpler life!

How the guided-access screen should look

The next time you are lending away your iPad or iPhone open their favorite app and triple-click the home-button (or the close button if you don’t have a home-button). Your screen is zooming out and you’ll see a few menus. Click on options in the bottom left corner. Here is what each of the items does:

Sleep/wake-button if this is disabled they can’t close the screen
Volume if this is off they can’t change the volume. A true lifesaver!
Motion To limit how your device responds to motion, turn this off. For example, your screen won’t respond when shaken, and the screen won’t rotate no matter how you hold your device.
Keyboard This disables the keyboard from appearing. This way they can’t write or communicate.
Touch This is most useful for static displays in shops etc, but could be useful if your child is constantly switching films or stopping the video or similar. When this is off nothing on the screen will work.
Dictionary lookup To use the Look Up feature when you select text, turn this on.
Time Limit Here you can specify how long the session can go on. When you reach the time you need your special password to continue. Perfect when you say «you can watch another 5 minutes».

The options when you're turning on guided access on an iPad

When all your settings are configured click «start» in the top right corner. Now you can’t switch programs as well as other restrictions you’ve sat.

Turn it off

Great — how do I turn this off again? Same way you turned it on! You’re now a pro iPad/iPhone-parent. Pat your own back!

Apples guide to use Guided Access with iPhone, iPad, and iPod touch

Want more iPhone and iPad tips?

Did you enjoy this tip? Subscribe for free at iSecrets.io, and get a daily new tip about features on your iPhone:

Why GitHub should be the app store for code

2021-04-24T00:00:00+00:00

Where do you go to sell a t-shirt? Shopify.
Where do you go to sell a pdf? Gumroad.
Where do you go to sell code? GitHub?

The problem

I love open source as much as any developer. The web (not to mention our society) wouldn’t be where it is today without it. The people who created Linux, Git, WebKit, Tensorflow, and many, many more deserve all the recognition in the world. All the key parts of software development today are open source. The next unicorn tech company will be built on the shoulders of open source projects, developed by volunteers. On one side, this is what makes the web beautiful. On the other side, we are dependent on volunteers, donations, or companies sharing the code that they’ve built for everyone.

When the people behind React Router launched Remix, a React framework for creating websites, they launched with a paid yearly license. The license created a lot of discussion in the community.

In this post, I’ll explore some alternative payment models for code. I believe that GitHub can empower developers to get paid for code in much the same way that Apple created a new market for apps.

Is anyone doing this today?

Highsoft

Meet Highsoft, the company behind the web charting library Highcharts. The library isn’t widely known outside of data visualization circles, but it’s used daily by many Fortune 500 companies. With over 30 employees located in idyllic Vik in Sogn, they are an example of what can be done by sharing code openly, but still licensing it for commercial projects. The library’s free to use for noncommercial projects, with various license and support options available for commercial use. In 2019 they had $8M in revenue. In comparison, Webpack, the standard build solution for modern web applications, had ~3% of Highsofts revenue.

Tailwind CSS

Over the last three years, Tailwind CSS – a utility-first CSS framework, has grown massively in popularity. In the summer of 2020 it passed 10k installs. The project is open source, but the creators can still live off the project without donations. How? They sell a component library built on top of Tailwind CSS, Tailwind UI, netting over $2M their five first months.

How can we empower more successes like these?

The cost of free

I see the cult of the free as the web’s original sin. To my mind it’s an essentially random historical development that could have gone quite differently, but, once the idea of everything on the web being free took root, became a cultural touch point that is almost impossible to dislodge. – Peter-Paul Koch

There is a cost of free open source software that is rarely talked about. It became more apparent when Firefox had to fire 25% of their workforce during Covid because 90% of their revenue came from Google–their closest competitor.

Recognizing that the old model where everything was free has consequences, means we must explore a range of different business opportunities and alternate value exchanges. – Mitchell Baker - Mozilla

The current payment model for code is heavily reliant on donations, sponsors, and uncompensated work from dedicated developers. Some companies even hire open source developers so they can work their projects full-time.. But this is for the select few. How can we make the web more resilient so that more people can earn money from their contributions to the community?

❤️ Open source

I don’t want to dismiss open source development in any way. There is no better way to learn code from others, start your career and build up your professional reputation, and get your work in from front of a large group or people. But there’s a problem when the whole industry is reliant on free work and donations from people and large corporations.

I need to make sure that I am building not only a body of work and contributions that I’m proud of, but also financial security for when I can’t do this anymore. […]. Despite having very marketable skills, I don’t own a home, much less have a pension and savings in place. Rachel Andrew, web developer, member of the CSS Working Group, and the go-to-source of anything CSS Layout related.

One of the largest contributors to open source, Sindre Sørhus, has been funded by the open-source community since 2018. He actively maintains 1100+ npm packages (2 billion downloads a month) and many popular projects. Based on available information from Github, Open Collective, and Patreon, he earns about $52k a year from donations alone. He would have made more by staying in his home city in Norway and working as a postman or telephone sales agent. By comparison, Sindre would easily earn five times as much as a developer with his resume. Luckily for all of us, this is Sindre’s answer when it comes to money: «You don’t want to be rich – You want to be happy.» Still, I wonder if there is a better way than donations and sponsors to support the great work of developers like Sindre.

Burnout is unavoidable when you’re active in open source. Sindre Sørhus

Github code store?

Github is at the center of code and open source. It’s where all developers hang out. OK, not literally, but we sure do spend a lot of time on GitHub. They’ve enabled many businesses built on top of GitHub with their marketplace and GitHub actions. You can pay for SAAS-apps that connect to your repo on GitHub and deploy, check your code, monitor your project, and more. But what if GitHub also enabled developers to sell their code on GitHub, not just complex SAAS-apps?

Apple’s App Store, launched in 2008, now has almost 2 million apps and is visited by half a billion people each week across 175 countries. In 2019 the App Store ecosystem supported $519 billion in billings and sales globally in 2019 alone! By offering payment for code, GitHub could enable a new market for developers and create a distributed revolution.

Selling code

If you want to sell code today, there isn’t a go-to marketplace. Current marketplaces are outdated and do not embrace today’s technologies. Almost every open-source project uses GitHub to manage its code, but you’ll receive a zip-file if you pay for the code. You get no package-management, history or easy way to get the latest version. Solutions like GitMarket are trying to change this, but the best experience would be if this was built directly into GitHub.

Products like TailwindUI and Remix have to spend time developing elaborate payment schemes instead of developing their product. And don’t get me started on the intricacies of recurring payments. What if GitHub made this accessible right in their repos? They’re in a great position since they’re already equipped to process payments from developers and their organizations.

GitHub could support selling code in a lot of different ways:

Multi licensing

Highcharts, among known names as MySQL and MongoDB, have an open source license and a commercial license. If you earn money from the code, you have to pay for a commercial license (yearly usage or a one-time fee.) By making it easy and frictionless to pay developers for using their code in a commercial project, GitHub could enable developers to get paid for their work without the customer having to jump through hoops or pay for something without knowing it’s value up-front.

Example of how multi licensing could work when creating a project

Paid extra features, plugins or repos

Tailwind UI, the component library built on top of Tailwind CSS, would benefit from being a paid upgrade for Tailwind CSS. It would also reach more customers if it was front and center where people interact with Tailwind. Another option is closed repos that open when you pay for them.

Example of how it could look with a commercial license

NPM

Last year, GitHub acquired NPM. The acquisition of the default package manager for Javascript, the largest developer ecosystem in the world, is an incredible opportunity for monetizing code.

NPM downloads code to your local environment based on what you have specified in a JSON-file in your repo. Most packages are free, but you can also distribute private packages on NPM. This is where GitHub could monetize in the Terminal itself using your GitHub credentials and card info. If you add a paid package to your package.json, you’d be prompted to pay for it from the command line. If you paid for it on GitHub, you could download it immediately. This would also open up new licensing opportunities, like paying for code usage.

Sketch on buying open source in terminal

Voluntary Open Source Tax

GitHub already has a solution for sponsors, but the acquisition of NPM got me thinking that GitHub could automatically distribute developers’ money. Let’s say you pay $40 per month for supporting open-source code. GitHub could then distribute this money based on all your active projects and which code is actually used.

Paid technical support

We’ve all been stuck on a code-problem where the documentation is lacking, or you need help getting further. What if you could request paid technical support directly in the repo causing the problem? Win-win. You get the best person to solve your problem–they get paid to help and learn how to improve the project further.

They could also offer to pay for certifications, bug bounties, or training and courses directly connected to repos, but I won’t go further into that space in this article.

Sketch on paid technical support connected to repos

Liquidity

It starts to get truly interesting when GitHub gets multiple projects funded through their solution. Then GitHub can begin to forecast money for yearly payments and provide more liquidity for developers, much like Pipe does for SaaS-businesses.

Wrapping up

Despite GitHub’s popularity with enterprise users, individual developers, and open source projects, it never turned a profit before Microsoft bought them in 2018. GitHub’s primary revenue source today is paid accounts, which allows for private repositories and several other features that enterprises need. By enabling their users to sell code on their platform and take a small cut of that revenue, they’d empower their greatest assets and fans, developers, as well as increase their earnings. GitHub provides a lot of value for developers, and it’s time both Github and developers capture it!

There are a lot of paths for GitHub to create an ecosystem around a marketplace for code on their platform. I’m not sure which approach is best, but I am pretty confident that if anyone can contribute to enable a paradigm shift around paid code, GitHub is uniquely positioned to do so. In my mind, this is very much a case of “a feature, not a product”. By leveraging the massive amounts of developers and code already on the platform, GitHub can do this in a way that developers on both sides of the deal will benefit from.**

Barkley Marathons – Where dreams go to die

2021-03-19T00:00:00+00:00

You are exhausted! Of course you are exhausted! You have been running for close to 10 hours in the freezing rain. 32 fu***ng kilometers without as much as a trail! A conch woke you up in the middle of the night to tell you to start running. Finally, you reach the yellow finishing gate signaling that you now ...have four more rounds to go.

This is the reality for the 40 persons that run one of the world’s most obscure races: the Barley Marathons. It’s an ultramarathon trail race held in Frozen Head State Park in Tennessee. The goal is to complete 5 “rounds,” covering closer to 160km in 60 hours. Sign me up for this madness, you say? Well, how you sign up is a secret, as well as the date it is held.

Despite the race being held yearly since 1986, only 15 runners have so far completed the race. No press is accepted at the race, so the only way to follow it “live” is by following @keithdunn or #BM100 on Twitter.

If this sounds intriguing to you, I highly recommend watching the documentary about the race!

In 2017 Gary Robbins was 6 seconds too late to finish the race within the 60-hour cut-off, almost becoming the 16th runner ever to complete the Barkley. However, he had taken a wrong turn in the race’s final stages, thus cutting two miles off the course. He would have been disqualified even if he had been faster. Gary Robbins has been followed by a camera crew for over two years, documenting his two attempts at completing The Barkley Marathons. In the documentary, you see the sacrifices that come with dedicating one’s life to completing this mythical race. I recommend this documentary as a follow-up if you enjoyed the Barkley-movie!

Note taking during user testing

2021-03-03T00:00:00+00:00

If you've user-tested a product, you know the hassle of taking notes and comparing them across the different users and what they did. Often we've ended up with huge, messy google docs or sheet files. You get an overview if you read everything, but it is hard to see patterns of people failing and organize quotes quickly.

The solution

Five years ago we came across this article from Jessica Crabb, which talks about how they are using Trello to organize their user-testing. It quickly made sense for us, so we tried using it for a couple of tests. It was a lot quicker to type in during the user-test and mark up which users accomplished what. What we were missing, however, was the ability to look at the data from other angles. When you are taking notes, you are taking notes on just one user, but when you are reading your results, you want to read the notes per task and see all the users’ results: Enter Airtable.

The stages of user testing

Airtable is Excel on steroids. It has the same basic functionality as Excel, but with many extra input-forms like images, text-fields ++. It can also be formatted as a Kanban-board like Trello (or as a web-form if needed). Where it shines, though, is its ability to link cells together. The linking makes it possible for us to take notes of one user during the test and then, afterward, flip the data on it’s head and look at each task’s problems. Airtable also has the ability for same-time collaboration, which is quite useful during testing.

While preparing for the test, we go through different note-taking stages, and Airtable guides us through all the steps.

Collection of participants

Usually, we have a few requirements for the users that we want to recruit. We then send these requirements to Norstat, which typically helps us recruit people, along with a link to an Airtable-template where they can fill out the test-persons information as soon as they are recruited. This way, we early know how recruitment is going. (After GDPR, you should check if you can store names and information about test-subjects in Airtable.)

Creating the tasks

At the same time on another page in the document, we create the tasks that we are going to test and prepare the test. One great feature in airtable is that you can hide information you don’t want to see or view the data as a gallery instead of a spreadsheet. Here is the same data as above, but with another view:

Note-taking during the test

When it comes to the test-day, we take notes in another view in Airtable and link the notes to the person performing them and their task. Here it can be useful to write general statements as “managed to transfer money” so that you can link up multiple test-persons to the same note. This makes it easier to read through your notes afterward.

Emojis 👍👎💣

We’ve also found it useful to add emojis indicating if the finding or behavior is negative or positive for the test.

Review afterwards

After the test is over, we walk through all the tasks. I often find it most useful to go from the task-view and from here see what the different users did on each task and the related quotes. At times I find it more beneficial to go out from the person and see how they solved the different assignments chronologically.

Download

I’ve made a starter template to get you started using Airtable for user-testing. Please give me a word on Twitter if you have some improvements or suggestions!

Stacc X year in review 2020

2021-01-14T00:00:00+00:00

2020 was a strange year for all. We had projects lined up, but suddenly everything was canceled because of Covid-19. Luckily many of us found a new normal, and we’re proud of all we’ve managed to do despite this weird situation in the world.

This is a blogpost from Stacc X. One of five companies within the Stacc ecosystem:

Stacc X — consultants with domain expertise in Fintech. Both for hire within your existing team or specific projects
Stacc Core — a flexible ledger core banking system
Stacc Insight — an advisory suite for bank advisors
Stacc Flow — a banking middleware process platform
Stacc Nova — credit card specialists

Projects

Working within banking and finance, there is much secrecy involved before launch. These are a few of the projects we have worked on and can talk about this year:

Bulder Bank

In 2019 we were proud to launch Bulder Bank. At the beginning of 2020 we gave the UX relay baton over to their new UX-lead, together with sketches and concepts for further releases. Some of them have been launched this year, together with refinement of earlier designs. Be sure to look out for exciting and useful features here in the years to come!

Shifter - krisepakkejungelen

When everyone suddenly was sent to work at home, a few of the projects in our pipeline fell through or were postponed. However, we were in a good position and looked for ways to help other companies in a worse situation. Our good friends at Shifter had done a fantastic job to compile all the different grants coming from various public institutions. Together we created a simple guide for business owners to see which grants they were eligible for.

Quantfolio

We’ve partnered up with Quantfolio on a lot of different projects over the years. In 2020 we helped them design a white-label, brandable prototype of a savings-robot to show potential clients how their saving-robots could look.

Prototype for Quantfolios savings-robot

Frende

Sometimes projects don’t go the way we expect: we had created Frende’s new EPK-solution (Norway’s new pension account solution coming 2021) and were almost ready to launch the first version. Then came the news of Nordea buying their pension-portfolio, thereby making our solution obsolete. That’s business, but luckily we got to know some of the skilled persons in Frende.

Nordea Liv

Together with Quantfolio and Nordea Liv, we designed and developed a Proof of Concept on a green EPK-application based on the UN’s sustainable development goals. In order to focus on the upcoming EPK regulatory deadline, the project has been paused. We can’t wait to pick this up again in the coming year!

Proof of concept on a green pension app

Tryg

This autumn, we’ve helped Tryg simplify and standardize their underwriting process across the Nordic countries. This project is just started, but we’re already launching a working MVP for an UW workbench to get feedback.

UW Workbench for Tryg

Co-own

Together with Fueled, we created a profile and webpage for scaling up Co-own, in just two weeks. Co-own helps people get earlier into the housing market by buying into a shared apartment instead of renting. Check it out at co-own.no.

Autoplan

Over the last three years, we’ve created and developed a dashboard for users of Autoplans leasing-solution, delivering one invoice for all car-related expenses for companies. In the dashboard, users can see specifications for their invoices, deviations, and which leases are soon running out.

Property Improvement system

We made a Proof of Concept for Proptech Innovations group for data-driven innovation. The result is a Proof of Concept on a data-driven sustainability barometer for commercial buildings. The plan is that this can be a tool that banks can use for green loans.

Pngr

When the pandemic hit, we started to see news of people getting into economic trouble. We teamed up with Shortcut and Susanne Håvardstun to create Pngr to help people control their entire economy. We’ve helped with the design and the backend for the solution while Shortcut developed the app. Be on the lookout for the first version coming in January! You can subscribe for updates at pngr.no

Nordea Finans

After the success of the Flow Manager service, other parts of Nordea Finance took note of how Nordea Finance Norway had greatly simplified their workflow. Nordea saw that their offering for submitting a car financing application for both dealers and car buyers could benefit from improving the user experience and a higher degree of self-service. We delivered a full scale CX-project throughout the Nordics with both car dealers and car buyers to find out what people found painful about financing a car. We are now in the process of launching a self-service solution for car dealers in Finland as a first step.

Bank logos

We’ve also sold our collection of all Norwegian bank logos to a few banks. We couldn’t find a common source for all Norwegian Bank logos in vector and within the same template when we worked on a PSD2 project, so we collected and created a library ourselves. You won’t believe how many different trees are used in bank-logos in Norway!

Consulting

The last year we’ve seen a turn towards us delivering complete solutions for clients instead of just consultants. We’ve still hired a few consultants out, working in a team with our clients. Torleif has continued working for Sparebanken Vest, polishing the excellent component library he has been developing for them over the last few years. We’ve also hired people out working on smaller tasks or projects for Ztl, Lyse, Brage, Aprila, Spire, WasteIQ, iMove, Brabank, and more.

Some of the projects or consultants has helped with over the last year

Offices

The week before the first lockdown, we moved into new offices. Funny enough, we’ve hired so many this last year, that we need to expand the offices when we can meet again at our offices.

We’re looking forward to get back to our offices!

Team

We had high recruitment ambitions this year, but it’s not easy to hire and onboard new people during a pandemic. Luckily we managed to welcome a few amazing people to our team this year:

Stine Neteland joined us in 2019, but last year she became the CEO of Stacc X!
Kristoffer Marthinsen. Kristoffer started amidst closed offices and remote working this spring. Luckily he had worked part-time with us for almost a year before starting. He is a full-stack developer and just finished his Master’s Degree in Information Science from UiB. He is the strongest in our team, regularly deadlifting over 250kg!
Lene Whiteley Lene is an experienced iOS-developer coming from TietoEvry. She has during the last year also become a skilled front-end developer. Lene has participated in some of the major international projects X has delivered in 2020 as well as writing several interesting articles.
Guro Prestegard Guro has been with us part-time for one year before she finally started full-time with us in August! She is a full-stack developer and has just finished her Master’s degree in Computer and Information Sciences. Guro is our quizmaster, having introduced a weekly quiz to our team. She has also, not surprisingly, the person in our team that has won the most quizzes.
Sebastian Øverhaug Larsen Sebastian finished his Master’s degree in Information science and started working with us in August. He has previously worked part-time at Ambita. Sebastian prefers to work on the backend, and has in record time, become an essential part of the team in Ztl!
Helene Stenstavold. Helene starts to work with us full-time from 2021, but has already been an essential part of researching Nordea Finans in the Nordic countries and designing and developing a solution for Trygs underwriters. We’re looking forward to her being done with her Master’s thesis and join us full-time!
Bjarne Helland. Bjarne is joining us in March! He is an experienced full-stack developer coming from Profitbase in Stavanger. We’re looking forward to him relocating and being a part of our team!
More students. We’ll also be joined by three students starting in August, as well as a few other skilled people we can’t share yet. But that doesn’t mean we’re done looking for people! We’re in high demand and still looking for more designers and developers! Just send me a message at @stacc.com if that sounds interesting.

Kristoffer, Lene, Guro, Sebastian and Helene

Because of the pandemic, we haven’t maintained all the regular social activities, like our yearly trip to a secret destination, but we’ve done our best during this strange year. Luckily we managed to have a small summer-party for our team outdoor before we had to attend most of our other social events remotely.

Summer party

Remote Christmas party with supplied drinks and food

Toiletroll-santa-competition

Written

We’ve also written a bit more this year. We’ve challenged Vipps in both Shifter and Dagens Næringsliv about their strange strategy launching a mobile subscriptions and charging 5kr for digital gift wrap. Even regular gift wrap in the store is free! The answer is apparently that that Vipps strategy is to simplify everything, not just within Fintech.

We’ve also written about bridging the gap between designers and developers - a subject close to our heart. We want all of our designers to be able to adjust designs in code and know the limitations of the medium we’re working with. Aleksander has also written about learning SwiftUI to become a better designer, and Lene about the Debug View Hierarchy in XCode.

In February, we started with a weekly internal post in Slack, covering interesting news of what happened in our world of finance, design, and technology. After a few weeks, the feedback was that this shouldn’t just be internal, so we started a newsletter. We now have hundreds of subscribers. You can subscribe to nyhetsbrev.stacc.com.

Thanks to all our clients and partners!

2020 was a strange year, but thanks to our great clients and partners, it has been an exciting year after all. Now we’re looking forward to getting started with the year ahead and help clients launching new solutions and ideas!

Why GitHub codespaces is the future!

2020-08-10T00:00:00+00:00

GitHub codespaces makes an instant dev environment available wherever you want. This is why codespaces is the future of development:

Faster setup

No more endless debugging to get started on a new (existing) project or environment.

True remote anywhere

You don’t longer need a computer — just the availability of a browser.

OS won’t matter anymore

Windows, macOS, iOS, Android, Linux, Chrome Os ++. Work on your favorite OS - switch whenever you feel like it.

You can have other people look into your environment. Goodbye, “it works on my computer”!

Open source growing

Easier to get up and running on open source projects and contribute.

Learning

Previously we learned from view source in our browsers. Now we’ll learn from running actual source code in our browsers.

More specialization

You don’t need to get into the nitty-gritty parts of setups (Webpack / Sass / Docker ++) There will be defaults for that. Focus on what you are (becoming) an expert on.

Good artist copy, great artists fork

Forking projects and expanding them will become more accessible. It’s going to be faster to start a fork than from scratch.

Trendsetting

Environments that aren’t supported by GitHub codespaces will feel obsolete. Developer experience is essential! Why work with languages that need days to set up when you are up and running in minutes on codespaces?

Update: I’ve since written a practical guide on setting up Codespaces for Jekyll and Next.js if you want to get started.

Iterate over a color array with help of a modulo operation

2019-11-21T00:00:00+00:00

A quick little tip if you are using Styled Components in React and want to iterate over a color-array. Usually you don’t know how many elements you will iterate over, but you want to be sure that your color array starts over again if you have specified fewer colors than elements. Here is an example:

Let’s say we have this array of 5 different colors:

const colorArray = ["#24BC9D", "#FFAB00", "#3798DA", "#E64C3C", "#9A59B5"];

And lets say that we have an array with 11 numbers in called anArray. We then iterate over this array and use modulus with the index of our number-array together with the index of our color-array to pass the HEX-code down to our styled component. Wow that was a long, complicated sentence. Let’s look at this code example instead:

{anArray.map((item, index) => (
  <Example
   key={item}
   color={colorArray[index % colorArray.length]}
  />
)}

What this basically does is for each time we iterate through anArray it takes the index of our current item and calculates which item in our color-array it should pass down. And when it comes to the bottom of your color-array it starts at the beginning again. So basically we’re saying this on our first iteration: color={colorArray[0 % 5]}. This is the same as saying: color={colorArray[0]}. This is again the same thing as saying color="#24BC9D" to our styled component. So the only thing left for us to do is to pass down that prop to our styled component like this:

const Example = styled.div`
  background-color: ${(p) => p.color};
`;

How does this work?

The modulus operator (%) calculates the remainder of two numbers. It’s a kind of repeated subtraction. This StackOverflow answer is the best I’ve seen to explain this:

In fact, with a % b you’ll ask yourself: What number remains if I repeat subtracting b from a until that operation is no longer possible?

So in our case if the array we’re .mapping ( anArray) has 11 elements and our colorArray has 5 elements the computer does something like this on the last element:

Can I subtract 5 from 11? Yes, result is 6.
Can I subtract 5 from 6? Yes, result is 1.
Can I subtract 5 from 1? No, final result is 1.

If you want to see all the calculations for each element

0 % 5 = 0 = colorArray[0]
1 % 5 = 1 = colorArray[1]
2 % 5 = 2 = colorArray[2]
3 % 5 = 3 = colorArray[3]
4 % 5 = 4 = colorArray[4]
5 % 5 = 0 = colorArray[0]
6 % 5 = 1 = colorArray[1]
7 % 5 = 2 = colorArray[2]
8 % 5 = 3 = colorArray[3]
9 % 5 = 4 = colorArray[4]
10 % 5 = 0 = colorArray[0]
11 % 5 = 1 = colorArray[1]

You can see a full example here

7 tips for visiting Lisbon with kids

2019-11-18T00:00:00+00:00

We went to Lisbon for a week this summer with our two year old. Here are a few tips if you’re travelling to Lisbon with a toddler. A couple of the tips works rather well without a child as well.

1. Bring a good stroller.

The streets here wreck havock on your stroller. It’s bumpy and the curbs are small. Especially in the old town. We had our Ergobaby 360 with us to carry her, but we also needed a stroller for her afternoon nap. I wish we had brought one with larger wheels.

2. Parque Recreativo do Alvito

A large and lovely playground right outside the city. Lots of slides and great climbs for our daughter.

Parque Recreativo do Alto da Serafina also seems like a similar, great place.

3. Swimming

Lisboa don’t seem like the best place for swimming to be honest. The beach is at least a half hour train ride away. So if you are staying with a toddler in the summer heat I would recommend a hotel or apartment with a swimming pool.

4. Gelato Davvero

This was a nice break in the summer heat. Fantastic gelado and a fun interior with a slide for the smaller (and bigger) ones.

5. LX factory

A surprisingly nice shopping/creative area worth a visit. Maybe not the most child friendly, but a lot of gret places to buy food and icecream or relax when the little one takes a nap.

6. Parque das Nações

Parque das Nações is a newer part of Lisboa located in the north. There are nice green-areas, playgrounds and a lot of public art and fountains to play in. Our little one especially loved the water sculpture right outside of Oceaneário de Lisboa, the local aquarium. She even enjoyed it more than the visit we had to the aquarium.

7. Transportation

It’s quite easy to travel around in Lisbon. All you need is a via viagem card. They are sold on every train and metro station. To get around just use Google maps that have all the suggestions for how to get around and possible connecting busses and trams.

(8.) Pistola y Corazon

Ok. Maybe not the most child-friendly place. No babyseats or anything. Just benches and tequila. But they had really good taco!

Bulder - from idea to launch in a year

2019-10-28T00:00:00+00:00

In the autumn of 2018, the CEO of Sparebanken Vest, announced that they would launch a new national, mobile-only bank, later known as Bulder Bank. This started a snowball of events that would involve hundreds of people. But how to get this snowball to run in the direction you want? Here are 13 concrete tips I believe played an essential part in making this a successful launch:

Decisions. From the first week on, we had regular decision-meetings with key stakeholders where we made hard choices and prioritized. This was a small team consisting of UX designers, CTO, CEO, and project manager. After each meeting, we posted all decisions to a Slack channel for transparency.
Sketch in the open. We sketched everything out in Figma and invited the whole team, and this way, everyone got a saying and saw where we were going with the design from day one.
NeedScope. While creating the brand for Bulder, NeedScope was used for positioning the brand. After researching the positions of other banks in Norway, it was clear that the red segment would be perfect for positioning a new bank that would challenge the traditional banks. This framework was efficient for us as UX designers, and we could continuously ask ourselves if this was for the red segment and if it would nudge us in the right direction.
Dogfooding. As soon as the services were available in the app, we would get our paychecks and invoices into Bulder and pay from the app to observe how it worked. We got custom-made temporary cards to test everything from push notifications from ATMs and transactions abroad and what information to show.
Guerilla testing. As soon as we had a basis sketched out in Figma, we linked it up as a prototype to test our assumptions. Did people find what they were looking for? We even designed features we knew were years ahead to see if they had a natural location in the information architecture.
A close team. Developers were an integral part of creating the design. They continuously came with better design solutions based on the APIs available and how we could utilize existing patterns and components.
Dual design. Having two designers working together (much like pair coding or pair writing) was immensely useful. It’s great for learning, developing multiple ideas, sharpening the design process, and creating tidier and more maintainable design systems.
Open Thursday. Creating a company within a new company has its challenges. One of the established measures was “Open Thursday,” where we served beer and presented the work from the last week. Open Thursday helped be transparent to the rest of the organization and get feedback from experts within its field within banking.
Industry experience. There is no hiding that this wouldn’t be possible without industry experience from business developers, developers, and designers. There are many regulatory rules and systems for banking and finance, and knowing this saves a lot of time when you are building a new bank.
Deadline. A deadline that seemed possible but hard to reach was essential to prioritizing what to make, and this made us focus and worry about the crucial parts. You could design and code forever in a project like this without letting real users into your project.
Gradually opening for real users. We made a signup page for people interested in the product early on. This list evolved to about 3 000 people that ended on our beta-list, and we gradually added to our app to test the experience on real users.
Feedback. We had multiple ways to get feedback that we collected in a Slack channel. We had a community, an email available from the app, and Facebook and Twitter presence to constantly monitor input.
Backing. Last but not least, it is impossible to get a project like this running without backing from the whole corporation.

Dual design

2019-08-08T00:00:00+00:00

Originally published on Medium
Written together with Eivind Kjellevold

This is an article about co-creation. It is co-written with my friend and colleague Marius Hauken . My name is Eivind and we both work at Stacc as user experience designers in the fintech space. The inspiration for this post came from a project we are working on together.

The tool we’re using at the moment — Figma — is an online collaborative design-tool. It means we are both working in the same document, at the same time. The whole team can follow cursors in real-time and see what everyone is doing, inspect design or export assets they need.We can copy, iterate and discuss our project in a way that was impossible a short time ago. The design document, the prototype, and developer handoff is all the same thing. Always.

Sometimes we even chat in Figma, drawing text-boxes and typing right in the document. Because we can see everyone‘s cursors, we know when we are looking at the same thing.

Co-creation is so powerful, that it has totally changed our view on how design-teams are set up and how much our clients are gaining by hiring not just one, but two (or even more) UX-designers on one project.

I cannot see how we ever managed to create good stuff before Figma , and we will never, ever, ever go back to working offline!

I don’t think the new bank ( www.bulderbank.no ) we’re designing would be half as good without a truly collaborative design process. One of us will come up with a new idea. The other one will argument against or refine it even more. One can sketch out new stuff while the other may clean up the design to make it more consistent. We can work remotely and speak about the design as if we were sitting right next to each other.

I will leave this here for now, and let Marius take over for a bit — and when we are finished the end result will be better than what we would do on our own. I don’t even have a real plan for this article, but I know we will end up with something. Probably something good.

In writing, pair-writing has been a thing for a long time. Same for programming. Developers have seen the value of pair programming for years. It’s useful for learning, it makes cleaner code, the code is finished faster and the end-result is more maintainable. I would argue that the same holds true for pair-designing. It’s great for learning, for developing multiple ideas, to sharpen the design process and for tidier and more maintainable design systems.

Two designers is ten times better than one, and this dual approach is something we recommend our clients consider, especially on projects of scale.

Tools like Figma makes the design process even smoother. You can remotely pair-design and discuss issues, while simultaneously easily involve the whole team in the discussion without interrupting everyone’s work day. The real time collaboration and openness these tools enables really makes a difference. The team feels more like… a team, and our clients are included and gets faster and better results.

Good design needs to be challenged. It needs friction. It needs to be refined and tested. Only then can it become great.

Microinteractions - the secret ingredient

2019-03-04T00:00:00+00:00

We’ve all been there: You’re paying a bill. Typing in what feels like hundreds of numbers. Checking to see if the numbers are correct. Checking. Again and again.

Vipps, the Norwegian mobile payment application, fixes this problem elegantly. You either type in the mobile-number or the name to the reciever, and you get to see their profile-image. This way you never need to double check if the number is correct. Hello, microinteraction!

What is a microinteraction?

Microinteractions are moments of delightful experiences or useful feedbacks helping the user accomplishing their task. These micro-moments are what guides the users through a flow in an effective and intuitive way. They are an underutilized but powerful instrument for designers.

Another simple example is fiverr, a freelance service which shows a few of your key numbers on their logged in page. When you hover the key-numbers it shows an explanation of your account balance when you hover the figures.

A microinteraction consist of 3 (or 4) elements:

A trigger - Something that releases the interaction. That could be typing in an account-number.
Rules - Rules that describe what the interaction is and when it should happen.
Feedback - The interaction is initiated and the user get a moment of delight or a feeling that this was useful.
Loops and modes - How the interaction changes if it is used again and again.

The role of microinteractions in banking

Trust is what enables banks to exist. Microinteractions can play a small, although important, role in enabling this trust and security now that we don’t meet a person when we’re handling our money.

The best cases for microinteractions are moments where the user feel insecure. This is the moment where we as designers must step up the game and help the users. One of my favorite examples of this is a feature we implemented while I worked as a consultant in Skandia:banken (now Sbanken). When you’re paying a bill and typing in an account-number, they show when and how much you last paid the same account. This way you can easily confirm that you don’t pay the same invoice again, or that the amount is the same as previous transactions.

The details are not the details. They make the product.

Charles Eames

Guiding the user

Consider one of the most prominent microinteractions in online banking: the thousand-separator in input-fields. It’s a feature you don’t think about, but you sure do notice when it’s gone. It is an interaction that a developer has used hours to add, just to make your bank-experience a tiny bit better.

The thousand-separator has:

a trigger - typing a number more than three digits.
rules - when the number is above 999 there should be a gap between the first number and the three next (and a lot of other rules).
feedback - the interaction is initiated and it’s easier for the user to understand how much they have actually typed in.

Some microinteractions also need loops or modes to work: Say you are transferring money and type in a higher number than what’s on the account. If the input-field then subtly shakes when you are leaving it, it indicates that there are not enough money. If you don’t understand the shaking the first time, delete the number and type it in again the user should probably get a message explaining why the input is saying no. If not our delightful little interaction suddenly is becoming an annoying experience.

An example of shaking input from the Wordpress login page

Imprisoned by our design tools

Microinteractions are unfortunately an underutilized tool in designers toolkit. They are easily forgotten. We’re imprisoned by our design tools. Whether you use Figma, Sketch, Framer, Adobe XD or Illustrator (++), they all have the restriction that they are static sketches (maybe except Framer).

You can’t easily prototype what happens when it is time- or trigger-based, for example if you type in a number outside coverage. If you can’t easily prototype it it’s easily forgotten. This is where an actual prototype in code shines and why it’s a foundation for our projects to jump into code rather early.

A few helpful questions before designing a microinteraction

Do I need to add a new element? Microinteractions are often best when they seamlessly flow into your existing design.
Does the interaction feel the same the 1st and 5th time? Make the interaction adapt to the context and the user. It’s fun if it rains confetti the first time you log into the bank, but can become tiresome and ironic if it happens every time you log in.
Do I understand my users? Talk to them! Test your interface regularly! If you don’t know their motivations or how they use your bank you could be fixing problems that don’t exist.
Am I using the right tools for sketching and designing our product?

How to combine pdf files from terminal

2019-02-27T00:00:00+00:00

I’ve previously written about how to easily create a pdf from images in terminal, but when you need to merge multiple pdfs to one it’s another ballgame¹. Usually I’ve resorted to Adobe Acrobat (Hello trial and paywall) or Preview. But preview is rather cumbersome. Luckily it seems like there is an easy terminal-based automator-script for this already included in OSX. Here is a quick guide to get you up and running.

Merge pdf pages

The script itself runs like this. So you could just copy this into your terminal and modify stuff.

"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o PATH/TO/YOUR/MERGED/FILE.pdf /PATH/TO/ORIGINAL/1.pdf /PATH/TO/ANOTHER/2.pdf /PATH/TO/A/WHOLE/DIR/*.pdf

I however found it easier to create an alias so that I can run a shorter command.

How to set up an alias for pdfMerge

Open your ~/.bash_profile file in a text-editor
Add a new line with the text:

alias pdfMerge='"/System/Library/Automator/Combine PDF Pages.action/Contents/Resources/join.py" -o'

Save the file.
Quit the editor. Your new alias pdfMerge will be set for the next terminal you open.
Open a new Terminal window and try it out:
Type in pdfMerge output.pdf *.pdf which means use Automator to convert all pdf-files in this folder and combine them to a pdf called output.pdf.
You now have one pdf-file with all your pdfs combined!

ProTip: Decide order

If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.pdf, 2-signing.pdf. You can also type your files directly out like convert output.pdf onboarding.pdf signing.pdf Source

PS

Yeah. I know that the output-file is at the end on the imagemagick solution, and first on the pdfMerge-solution. A bit annoying.

You can hack around this by still using imagemagic, but it doesn’t just combine them, it changes resolution etc. ↩

RSS wasn’t dead

2018-11-13T00:00:00+00:00

I have sweared to a RSS-reader for following blogs and interesting webpages for over a decade now. I love that I once a week can sit down with a cup of coffee and read all the blogs/websites I follow without switching context and webpages all the time.

What is a RSS reader?

From whatisrss.com

RSS solves a problem for people who regularly use the web. It allows you to easily stay informed by retrieving the latest content from the sites you are interested in. You save time by not needing to visit each site individually. You ensure your privacy, by not needing to join each site’s email newsletter.

My RSS-reader history

I got introduced to RSS-readers with Google Reader, and became quickly addicted. When Google shut it down in 2013 I needed to find an alternative. My choice fell on Shaun Inmans Fever. It was a self hosted solution, which meant a bit of work, but on the other hand I owned my own data and it would still work the day support for it stopped.

I loved how it worked and that I had control over all the files – especially the CSS. I even made my own theme people could use. Sadly Shaun Inman stopped supporting fever two years ago. I’ve been using it until now, but it’s time to admit that it’s just running on fumes now. We had a good run.

Therefore one of my weekend activities became finding a new RSS-reader. On my iPad I’ve been using Reeder 3 for reading the content on Fever. I therefore started with the list of RSS-readers Reeder supports. I checked out more or less everyone of the competitors, but there was one clear winner:

Feedbin is a small company with two persons running on a subscription-based model (5$ month). Good news: a sustainable business-model unlike Google Reader and Fever.

The one killer-feature which made the choice to switch to Feedbin easy was the ability to subscribe to newsletters and have them appear as a feed together with your other subscriptions. The last years it has, understandably, become very popular to make newsletters. There is a lot of great newsletters out there that just excist as newsletters and the only way to access them is by getting mail. I personally hate to get newsletters mixed with other mail and things I actually have to respond to. Mentally it’s better for me to read those email-subscriptions while I read the other RSS-feeds thereby seperating work from reading / getting updated. Therefore this feature in Feedbin really struck home, and I’ve been transferring each newsletter as I get mail in my inbox.

Clean up old feeds

Luckily it is usually easy to switch RSS-reader since there is an open standard for consuming and exporting them, OPML, which almost everyone use. I used that when switching from Google reader to Fever, as well as now from Fever to Feedbin. That meant there were lot of feeds that needed to be cleaned up - some feeds hadn’t been updated since 2012. Luckily Feedbin has a simple solution for seing how frequently blogs are updated and when they last were updated which made the cleaning job rather easy.

A lot of great features

Feedbin got itself a new fan this weekend. I recommend trying it out. It also has a bunch of other great features like:

Nice typography. Hello Hoefler & co!
An impressive webapp which makes me forget Reeder 3 exists. (Seriously: the only thing to complain about is if your are switching to another app and back and it forgets it’s state)
It can fetch full text from article for feeds that only offer partial content
They are private by default
They even have a solution for reading Twitter (which I haven’t checked out yet)

How to create pdf from images in Terminal

2018-10-13T00:00:00+00:00

Now and then I find myself in the situation where I need to create a pdf from some images. I often resort to Preview, but it can be quite cumbersome at times. There is however an easier and faster option, but it requires that you use the Terminal.

Images to pdf step by step

First you need Homebrew, which is basically the app store for Terminal. If you don’t have it installed open you can follow the setup at brew.sh.
Once done close your terminal and open it up again (to make sure that Homebrew works)
Then type in brew install imagemagick. This installs imagemagic which is the program that will help us create the pdf-files.
When finished close and open up your Terminal again.
Next step is to find the folder where we have the source images we want converted. The easiest way to do that is to find the folder in Finder. Then in your Terminal type in cd and then drag your folder into your Terminal window. Now it will read cd Downloads/images or something similar. Then press enter. Now we have navigated to a new folder in Terminal!
Type in convert *.jpg output.pdf which means use imagemagick to convert all jpg-files in this folder and combine them to a pdf called output.pdf. You can adjust this if you f.ex. have png-files, or create your own name on the pdf: convert *.png myAwesomeFile.pdf.
You now have a pdf-file with all your images combined!

ProTip 1

If you want the file in a specific order I recommend naming your files with numbers. F.ex: 1-onboarding.png, 2-signing.png. You can also type your files directly out like convert onboarding.png signing.png output.pdf

ProTip 2

If the resulting pdf is too big in size you can try: convert -quality 60 *.jpg output.pdf

Tl;dr

To convert images to pdf:

brew install imagemagick
convert *.jpg output.pdf

Source

Related: Need to merge existing PDF files instead? Check out how to combine PDF files from terminal.

Preparing and implementing svgs on the web

2018-04-23T00:00:00+00:00

Svgs are awesome. They are scalable, small, and you can actually edit the file both visually and in code. This is my current workflow for optimising svgs for webpages.

Visual editing

At the moment I do most of my design work in Figma, even though its svg exports is not the best. I know they are working on it, but at the moment I export the svg from figma and import it into Sketch where I usually remove some groupings and clipping masks and export it out again.

Preparation

How you prepare the svg in your editor is an important part of optimizing your svgs, but there are two quick-fixes you can do before you export that I would recommend:

If your shape has any form of transform remove it by selecting the shape in Sketch and go to Layer > Combine > Flatten. Now the Transform should say 0.
If you have multiple shapes that visually combines to one shape Combine them by selecting them and going to Layer > Combine > Union|Subtract|Intersect|Difference F.ex. an arrow consisting of a rectangle and a triangle should be combined into one shape for smallest file-size.

Export

How you export and compress your svg are important for the final file-size. The default export from Sketch has a lot of bloat (Hello, <desc>Created with Sketch.</desc>), and we don’t want that in our final files. In Sketch I therefore have the plugin SVGO Compressor installed. It just magically compressses your files when you export as usual.

I have changed the default settings to compress the files even more than the default-setting. To copy my settings you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. Your default editor will open the svgo.json file, where you’ll be able to tweak the settings. Remove the content in the file and paste this file instead. In my experience it at least halves the file-size from the default settigs. Your milage may vary if you use a lot of masks/gradient etc. but I would recommend testing out tweaking the different parameters. They are very descriptive like cleanupAttrs, mergePaths, removeTitle etc. You can see all the parameters here

Svgomg also exist as a webtool, and even though it works like magic on the svg filesize, it doesn’t change the structure of the svg. If you have unneccesary shapes, masks or shapes that could have been combined you should fix this before exporting. This is probably whats going to save most space.

Manual editing

You’d be surprised how much of a regular svg is not needed. SVGO helps a lot with this, but just to a certain point. Most tools add unnessecary class-names and divs or groups that you don’t need any-more. They are mostly not needed unless you are doing something more complex like controlling your svg via CSS or having gradients or masks. I always recommend opening up your svg-file in your favorite editor and just delete elements that doesn’t seem neccessary.

Attributes

When you export out an svg you usually get a lot of attributes added to the svg like <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >...</svg> but when do you actually need to use them?

xmlns

The xmlns="http://www.w3.org/2000/svg" attribute is

xmlns:xlink

The xmlns:xlink="http://www.w3.org/1999/xlink" attribute is:

version

The version="1.1" attribute is:

Recommended to comply with image/svg+xml files standards
Ignored by every user agent.

viewBox

This says a lot of the size/placement of the elements in the svg so this is always needed.

height and width

You don’t need to specify this. If you don’t the svg will take as much space as it is allowed. Much like a regular <img /> without width specified.

grouping

Very often you don’t need the grouping (<g>) of elements if the file is simple, or you are not editing the file any more. If you f.ex. are exporting out an icon with just one shape, the grouping is unnecessary.

fill-rule=”evenodd”

This is often not needed. I recommend trying to remove it to se if it affects your svg. Here is an article outlining how the fill-rule property works.

Implementing on the web

Inline svg

To get the most control of the svgs just copy the code in the svg and paste it into you html/twig/php/react-file and your good to go. I usually change the fill-color to currentColor to control the color better via the color-property in CSS. Other times I just remove the fill-color completely and target it in the css via fill. Or, if I need multiple colors, i might add classnames to each path and shape so that I can target them directly with css.

svg in CSS

There are multiple ways to add an svg to your CSS. Lets take this link with an arrow behind is an example. We can add this multiple ways:

See the Pen svg in css by mhauken (@mhauken) on CodePen.

A couple of things to note:

If you link to the svg-file it’s going to be a new http-requests, and microscopically slower.
You can directly inline svgs like this:background-image: url('data:image/svg+xml;charset=UTF-8,<svg>{content here}</svg>'); (Link 2). This however doesn’t work very well with some versions of internet explorer. The fix for this is to URI-encode your svg. I use this tool to convert the svg to data URI.
Another solution is to Base64-encode the svg, but is usually create a larger file than uri-encoding the svg directly.
You can’t use currentColor or similar when you URI-encode the svg since the browser reads it like it’s a svg that you are linking to. If you want the hover-color of the icon to be the same as the rest of the link I have 3 solutions for you: _ Link to another colored URI-encoded-svg on hover (Link 4) _ Use mask-image and use currentColor on the background-color. The support for this is not the best, so use with causion. (Link 5) * You could also fake a mask in SVG (basically create a box in the same color as the background, and clip out the symbol from that shape). Again we use the background-image with currentColor. The support for this is much better, but a bit hacky. ¯_(ツ)_/¯ (Link 6)

Useful links:

A short (personal) introduction to smart homes

2017-12-26T00:00:00+00:00

Are you renovating a house or starting on a new build? Smart homes are likely one of the thousand decisions you have to look into. These are my experiences and tips after fully restoring a 40 year old house.

Smart homes don’t have to be expensive

After doing some research I discovered that smart homes aren’t as expensive or complicated as I first feared. When you’re buying new thermostats and light switches, why not go for the smart versions? Products that talk to each other have become very competitive in price in recent years, so the difference isn’t that big any more

Z-wave

One of the main reasons smart home solutions have become cheaper is the wireless standard Z‑wave. It lets the devices talk to each other and relay signals if some units are farther away. It also means you’re not locked into a single platform. You can easily switch between Futurehome, Samsung Smartthings, Homeseer or other systems. Another benefit is that thermostats and switches work just like normal devices before you connect them to a smart hub.

Which smart gadgets?

“Ok. These Z‑wave gadgets seem nice, but which devices should I get to make a smart home?”

Heating

Thermostats are probably the most practical and economical devices to make smart. You get features like night setback, vacation mode and the heating back on before you return home. In Norway the Multireg thermostats are considered the industry standard. We have one in every room and are very happy with them.

Lighting

The second thing to sort out when planning a house is smart dimmers that control the lights. It’s a small unit your electrician installs behind the wall switch that controls brightness, on/off state and sends updates to the hub. There are many types. We have Fibaro dimmer 2 throughout our house. All wall switches need to be impulse switches, meaning they spring back to the same position when pressed. To change brightness you simply hold the switch.

Door lock

After a few months we also installed a smart door lock. We went with ID-lock, supposedly the best option for Norwegian weather. The best part is not needing keys anymore. Instead you type in a code or use an NFC tag. In practice I’ve never used the tag as it’s faster to just enter the code. You can also add extra codes if you want to give contractors their own.

The smart connection is handy because I get notifications if the door opens while the house is in away mode. You’re also sure the door is locked when you set the house to away or night mode. I’ve even unlocked the door remotely when a carpenter arrived before I got home.

“What if the lock’s battery dies? Can’t you get in?” The batteries are inside the door, so if I’m inside I just replace them. If I’m outside I can hold a smoke detector battery to the contacts and the door will open.

Sensors

Sensors can make your home much smarter. They come in many types: water sensors, door sensors, temperature sensors, motion sensors and more. The most useful are motion sensors that can turn lights on and off. I have three Aeotech multisensors doing this in the living room, hallway and bathroom. The great thing is that they can behave differently depending on the mode the house is in. In home mode they switch on the lights, in away or vacation mode I get a notification, and in night mode they trigger some gentle night lights so your night vision isn’t ruined. They’re easy to add later. So far I’ve found the best place for them is in hallways that are used occasionally, saving you from thinking about switches.

Smoke detectors

You can also connect smoke detectors to the system. They aren’t much smarter than regular detectors except that they talk to the rest of the system so they can turn on lights, unlock the door or send you a push notification if you’re away. Note that the small Fibaro detectors don’t have a built-in siren, so you’ll need a separate one.

Smart hub

Perhaps the most important thing you need is a smart hub. It’s a small box in your house that connects to the internet and talks to all the Z‑wave gadgets around the home. Each comes with an app so you can control everything from anywhere. Here’s a brief overview of the solutions I found most relevant.

Futurehome

This is the solution I chose. Futurehome is a small Norwegian startup that continually releases updates and new features. They have amazing customer service (I’ve had replies in under 10 minutes on a Saturday evening) and exciting plans ahead. The interface is clean and simple, though to be honest I mostly use the shortcuts on the lock screen of my phone.

Setting up Futurehome was a very positive experience. We’d lived in our house for about two months before I bought it and planned to make the house smart. I assumed it would take all evening to connect the devices, but after 10 minutes I had paired nine thermostats and fifteen dimmers.

Futurehome also has an API you can access if you want to do more advanced things.

Smartthings

This is Samsung’s smart home solution. It seems solid, simple and clear. The features are quite similar to Futurehome and it’s probably what I would pick if Futurehome didn’t exist.

Homeseer

This is probably the most advanced solution. You can do absolutely anything and create the wildest rules, and it supports the most devices. I must admit I dismissed it purely for aesthetic reasons: the Homeseer mobile app looks like it was made in the 90s by an engineer. They supposedly have a program where you can design it yourself, but that’s not how I want to spend my time, and the program only runs on Windows.

Home assistant

Home assistant is probably the cheapest option. It’s open source and runs on a Raspberry Pi with an extra module. If you have the technical skills you can tailor it exactly how you want, and likely spend quite a bit of time getting things just right.

Modes, rules and shortcuts

When you first get a smart home you might think it’s important to create lots of advanced rules. After a while I find that having a few main settings for home, away, night and vacation mode, plus some shortcuts to toggle lights, is more than enough. Futurehome covers this well and has found a sweet spot between usability and advanced features.

IFTTT

If you want more advanced features, Futurehome supports IfThisThenThat. This means you can connect it to many other online services for extra functionality. I use it to automatically set the house to home mode when I approach its location with my phone. Another use is turning on a surveillance camera when the house is in away or vacation mode.

Alexa

IFTTT has also allowed me to hook the house up to an Amazon Echo Dot so Alexa can turn lights on and off. It’s undeniably fun. Since getting Alexa I’ve barely used the shortcuts in the Futurehome app, relying mostly on voice commands. Samsung Smartthings apparently has even tighter integration with Echo.

Enova

If you buy control for three or more heating zones you can also get support from Enova. They cover 20% of the total cost (up to 4000 NOK) for smart equipment. For me it was easy: I uploaded the receipts and filled out their form. A few weeks later the money was in my account.

What’s it like living with a smart home?

All in all a smart home won’t revolutionize your everyday life. It’s convenient that the lights turn on and off without a switch, the doors lock when you want and the heating adjusts for vacations and night-time. Or that you can sit on the couch and ask Alexa to put the house in TV mode. But I wouldn’t use saving money as an argument. It will take many years before my electricity bill has earned back what I’ve spent—especially as more smart devices keep entering the house.

My devices

I bought almost everything from Intin, a smart home retailer in Førde with a good selection, prices and quick service. That’s why all links point to their site, but the products are available elsewhere.

Originally published on medium.com/@hauken

6 new HTML-elements (I dream of)

2017-09-15T00:00:00+00:00

As a designer one of my jobs is to recognise patterns. Small design- and code-patterns that get used again and again on every project. Every time I get to a new pattern I stop and ponder how to mark it up. Accessibility is important for me, but I often find it unclear what’s best practice for these patterns.

This is a short list of some elements I wish existed in HTML. By officially becoming HTML elements, these patterns would then be more likely to be marked up for accessibility. They would also be marked up more consistently — and frankly they’d also be easier to talk about, since we’d all use the same names for them.

Filter

The first pattern I think of is an element that filters or sort the rest of the content. You’ve probably used this on a webshop sorting from cheapest to most expensive. Or most popular to least popular. Or to filter by brand. Or color. I think you get the gist. Usually these filters are just marked up with a simple div around them. My proposal is something along the lines of the snippet below, just to make it clearer that some content is filtering another block of content. I guess there should also be some kind of indication if it is filtered or not, but I’m not sure how this is best solved.

<filter for="product-list">
  However you would like to filter the content. Select, radio-buttons etc.
</filter>
<ul id="product-list">
  <li>The content you are filtering</li>
</ul>

Select

“But we already have the <select>-element”. Fair point. I often find myself wishing the Select element was more flexible. Maybe I want to add a flag to a list of countries, or maybe two lines on top of each other like an account-name or an account-number. My proposal here would be that you could actually use spans, images and divs inside the select-element. I guess this could cause headaches for creators of mobile browsers. But they are really smart people. They have created a browser. I guess they will find a way.

<select>
  <option>
    <img src="norway.svg" />
    <span>Norway</span>
  </option>
  ...
</select>

Expanding table

Imagine that you have a list of contacts with information about their names, addresses, telephone-numbers, and e-mails. Now place everything in a regular table and try to make it responsive. Yeah? Struggling, right? One solution is one of these fancy responsive tables, but what I want is to hide the columns that don’t fit on the screen and when you click each row it expands and show the rest. My hack for now is to use a <tbody> for each row and then place two rows inside that. One is the regular row and one is a row with just one column that is hidden but which appears when you click the first row in the <tbody>.

<!-- how I am doing it now -->
<table>
  <tbody>
    <tr>
      <td>Visible</td>
    </tr>
    <tr>
      <td>Hidden until you click on the row above</td>
    </tr>
  </tbody>
  ...
</table>

<!-- how expanding tables could work -->
<!-- thr = TableHiddenRow -->
<table>
  <tbody>
    <tr for="example">
      <td>Visible</td>
    </tr>
    <thr id="example">
      <td>Hidden until you click on the row above</td>
    </thr>
    ...
  </tbody>
</table>

Step-indicator

You are applying for a loan, or maybe you are filling out your tax report or answering a questionnaire. Each page has a lot of fields you need to fill out and every time you click ‘Next’ you hope you are done, but you just get more boxes to tick and fields to type in. Wouldn’t it be nice if there were some kind of common navigation that told you how far in the process you were? My proposal for this is something like <step current="2" of="6"></step>. The idea is that you can place what you want inside of it and style it however you like. The nice thing about this feature is that browsers could indicate subtly that you now are in a flow and how far through you are. Screen readers could for example say “step 2 of 6 of car loan“ reading the steps before the title of the page.

Carousel

Ahh. Carousel. Much hated. Much used. Much badly implemented. I guess there are as many people who know html as there are ways to code up a carousel. You have a wrapper, some content, some arrows maybe, and a navigation showing where you are. Imagine using a screenreader to browse a website and suddenly your screenreader stops midway through reading a description and starts on a new one, and a new one. If we just had some consistent markup this could have been avoided. I have no suggestions for how it would work, but it would be useful.

Expand

One pattern that comes up again and again is expand. An element that when you click it, shows more content. I thought quite a bit about how, in a perfect world, this should be marked up. Then I asked around, and it seems the world is perfect, after all. There actually is an ‘expand’ element being implemented in browsers today. Internet Explorer hasn’t caught up yet, nothing new there, but almost all the newest browser have implemented it:

<details>
  <summary>Read more</summary>
  Text that is hidden and appears when you click read more.
</details>

Do you have any ‘HTML elements’ that you lie awake at night, wishing existed?

Originally published on Medium

How to store your photos?

2016-01-05T00:00:00+00:00

Let’s talk about how you store your photos. Since you probably don’t use film anymore you need to store them somewhere digitally, and probably not just on your computer. You don’t want to risk all your images if your computer crashes or gets stolen.

I’ve gone through a couple of the cloud-storage solutions out there and compared them with each other.

	Dropbox	Google Photos	iCloud Photos	Amazon Cloud Drive Prime photos	Jottacloud
Good search functionality
Timeline-feature
Albums
Collaborate on albums
Collect family photos with different accounts
Support RAW-format
Displays RAW-files as images
Works with Lightroom
Windows app
Mac app
iOS
Android
Price up to 1 TB/month	€8.25	€9.54	€9.99	€0.95	€9.44
Price over 1 TB/month	€50.00* ∞	€95.38 10TB	€19.99 2TB**	€0.95 ∞	€9.44 ∞

* €10 / user / month minimum of 5 users
** Doesn't seem like you can buy more than 2TB.

Some findings

Google Photos is ridiculously expensive (100 times more than Amazon Cloud) if you have more than 1TB of files
No-one can compete with Amazon Cloud prices
iCloud and Google Photos have the best search. iCloud is probably a bit better because it has face-recognition
Google Photos has an amazing Assistant that creates albums, animations and adds filters etc. to your images automatically. It’s actually pretty good!
The Norwegian Jottacloud is a good competitor to the rest and the only solution that stores it’s files in Norway

My current setup

I sync my iPhone images with iCloud. I store the RAW-images from my camera on a Synology NAS that syncs the images to Amazon Cloud. This way I don’t have to store them on my computer, but has fast access to them at home. I use Adobe Lightroom as my image-organizer and Amazon Cloud more as just file-storage. Since all my pictures are RAW-files I sadly miss out on a lot of the great search-functionality that’s out there.

My dream setup

If Google Photos supported RAW-files and had a regular filesystem (so I could use it with Lightroom) I would pick that. Mostly because I love the Google Photos assistant.

What should I do if I just have images on my mobile phone?

Do you have an iPhone? Sync it with iCloud. It works great, is simple to use and works out of the box. It is however a bit more lock-in solution than Google Photos (and doesn’t have the assistant).
Do you have an Android-device? Sync it with Google Photos.
Are you switching between iPhone, Android or similar? Use Google Photos.

A last little tip

There is a clever app for macOS called Expandrive that can mount a lot of these cloud-solutions as a Network Drive. This way you don’t have to store the files on your computer, but they are accessible in the filesystem. It works great with Amazon Cloud Drive, Google Drive, Dropbox ++.

15 takeaways from cssconfeu 2015 that you can use today

2015-10-28T00:00:00+00:00

You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.

  .div-over-img {
  background-color: #2f3138;
  background-blend-mode: lighten;
  }

For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages. Eks: <HTML lang="no">

  HTML[lang="no"] q {
  Quotes: '«' '»';
  }

@media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
Flex overwrites width and float, so they can be used as fallbacks.
To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:

  @supports(flex-wrap:wrap){
  // instead of modernizr
  }

order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.

Tired of minified files when you search through your project?

2015-01-15T00:00:00+00:00

Are you also tired of having your minified versions of CSS and JavaScript showing up when you are searching through your project?

It turns out there is an easy way to fix this if your are using Atom. Go to Atom => Config and add this to your configuration-file:

ignoredNames: [
".git"
".svn"
".DS_Store"
".jpg"
".png"
"app"
"vendor"
"dist"
".css"
"min.js"
]

Are you using SublimeText? Go to Preferences => Settings – User and add this to your configuration-file:

"file_exclude_patterns": [
"*-ck.js",
"*min.js",
"*.css"
]

I have added *-ck.js because that’s the default output from CodeKit for minified files. I’ve also added all CSS files since I just want to search through my SCSS.

Todos in SCSS

2014-12-20T00:00:00+00:00

You can write todos to yourself in your scss by adding this line where you need to remind yourself of something:

@warn "Add breakpoint here";

This way you get a nice warning each time you compile, listing out all your warnings. You could also use @debug instead of @warn. The difference is basically that you can turn warnings off with the --quiet command-line option or the :quiet Sass option, and that the warnings look a bit different:

This is how warnings and debug-notifications look in CodeKit

When to use svg attributes

2014-12-18T00:00:00+00:00

Are you inlining your svg in HTML5? Just use<svg></svg> tags without attributes.

Are you linking the SVG as an image, background-image or importing it another way that causes the User Agent to use an XML parser? Then you need the xmlns attributes like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`

How to use modifiers on modifiers with BEM?

2014-03-27T00:00:00+00:00

For the last few project I’ve had the pleasure of naming my SCSS-files with the BEM methodology. The upside is easier maintainable files and far more informative class-names.

The BEM syntax is very strict and the naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}

If you haven’t used BEM or haven’t got your head around BEM yet I highly recommend this article by Harry Roberts.

Usually it’s rather easy to tell if you are making a block, an element or a modifier, but one problem I’ve had again and again is a modifier on a modifier. Take this example:

We have these two buttons called .button--primary and .button--secondary coded like this:

<a href="#" class="button button--primary">Main attention</a>
<a href="#" class="button button--secondary">Cancel</a>

..and looking like this:

This works great on the regular background, but as you can see we got a problem if we need to wrap the buttons in a red warning-box or similar. We still want the same look, but maybe not green on red?

A few solutions comes to mind:

.button--secondary--inverted
We could add a modifier to .button--secondary. This just overrides the values that we need to change and we still need to add .button--secondary to the button. This feels a bit wrong and is very tiresome to write out. The code is however very logic to read and builds nicely on the BEM syntax.
.button--secondary-inverted
We make a seperate modifier which is almost a duplicate of .button--secondary, just changing the colors that we need to change. This is also very nice to read, but feels very bloated since you are copying almost every style.
.button--inverted
We create a .button--inverted class that changes .button--primary and .button--secondary if they have the .button--inverted class. Ex:
```
.button--inverted {
&.button--primary {
color: black;
background-color: white;
}
&.button--secondary {
color: white;
border-color: white;
}
}
```
This solution is a bit inconsistent with the BEM naming since we are using nesting. However the HTML is very nice to read and easy to remember. It also means that we can easily toggle the .button--inverted class with javascript without having to worry about if this class later on is going to be a .button--primary or a .button--secondary – the invertion will still work.
.box--notification .button--secondary
We could also nest the styling and say if .button--secondary is inside .box--notification we always want it to be white. This is probably the most dirty way to do it, but why not when you never want a green button inside a red box? The downside here is reusability and the location of the code. The big upside of BEM is the structure and that we from the name know the location of every class. If we suddenly start to nest classes we miss control.

I’m still not sure what is the best solution here. For now I’ve landed on alternative 3 mainly because the simplicity and readability. I’m eager to hear your thoughts and ideas. Give me a word on twitter or on mail about your thoughts.

Smarter toggling for good design and great performance

2014-02-06T00:00:00+00:00

This is a repost of a post I’ve written for our company-blog, iAllenkelhet.

Good design isn’t just how it looks, but also how it works. This is why code is an important part of our design process at Netlife Research. By coding we can control other important design aspects of our website like speed, animation and how the design “feels”. We can also test how the site behaves on different devices and browsers.

Toggling

A much used effective design pattern is toggling. Toggling lets us hide parts of the content behind a button to make the content more easily scannable. The main problem with toggling is performance. Smaller devices have the most to gain from toggling, yet ironically, they also are the least capable of rendering it. We usually have two different methods for toggling of content:

Using jQuery's slideToggle. This is usually the best solution. The content slides in gradually and pushes the elements beneath it down. jQuery basically increases the height of the expanding element multiple times each second. On a fast desktop computer it looks like a nice animation, but on smartphones and tablets it can often become choppy and sluggish.
Turning a hide class on and off. We can achieve the same result by adding or removing a class with the display:none property. This works well on any device, but is very sudden. The element doesn’t expand: it’s either visible or hidden. This can at times feel confusing for the user, especially if you are expanding a lot of content.

Performance of transitions

Neither of these solutions are optimal in my opinion. Even though I’m not a developer, I understand that performance is an important part of the overall user experience. I therefore looked further into how we could have a toggle-solution that animates and works well on most mobile devices. With CSS3 we have the opportunity to animate and use transitions in CSS. We can use transitions to animate the height (or max-height) of the expanded element. But it would still perform badly since we don’t make use of the devices GPU (Graphic Processing Unit) for rendering the animation and moving the content underneath. The only CSS properties that invoke the GPU to make smooth animations on mobile are transform and opacity. The optimal solution would be to move the content away with the transform property. The problem with transform is that it just moves the content from it’s original position: it still takes up the same space as it did before, leaving us stuck with a big empty area. The same is true for all the GPU invoking techniques.

[quote]The more content the browser has to rewrite, the slower it renders. [/quote]

Rewriting the content

Another important aspect of making smooth animations is that the more content the browser has to rewrite, the slower it renders. To avoid affecting other elements it’s therefore recommended that animated elements are position:absolute; or position:fixed;. After trying out a variety of different approaches I ended up fading the content in or out via opacity, and clever use of positioning combined with display:none; when the animation is finished. We still manage to push all the content underneath the element down, but with only one rewrite compared to a regular slideToggle tens of times each second. This performs nicely on mobile where the content fades in, and because it’s under the fold you won’t notice that the content is getting pushed down.

Example showing how a regular slideToggle works compared to the cssToggle-plugin

cssToggle

I’ve made my approach available as a jQuery plugin called cssToggle. In short the plugin checks if the element it’s called on is display:none; or not, then shows or hides the element via CSS opacity. When the animation is finished it sets the element to display:none; or display:block; based on it’s previous state. cssToggle also takes multiple options like position, speed, easing and firing functions after the animation is finished. This way you can easily tailor it to suit your needs. The plugin is about 1kb minified, and gracefully degrades on browsers that don’t support animations and just hides or shows the content with no fading. Grab the plugin on gitHub.

PS: If you would like a regular slideToggle(); on devices that can handle it, you could also use the excellent tool Modernizr and replace all your slideToggles with cssToggle when you detect touch-devices. While you’re at it I would also enable fastclick on these elements, to get rid of the 300ms wait before a click is registered.

How Skitch can help you become a better designer

2014-02-04T00:00:00+00:00

When you are designing you get to a point where it suddenly says stop. You don’t know what to change or how to make it better. This is the moment I fire up Skitch and take a screenshot of what I’ve just made. I then start to annotate and draw on that. There it is. My magic trick. It might sound stupid. It might sound pointless. But the fact is that by doing this I take a step back from what I’ve done and evaluate it in a new way. Often I see things I’ve never seen before in the design. Sometimes it takes seconds to fill the canvas with notes. Other times it’s more a struggle to find anything. This is when you are getting close to something good, or when you probably need to take a break.

This might be a simple design-equivalent to Rubber duck debugging; to explain what you’ve done and your choices, and then hitting upon the solution in the process of explaining the problem. You’ve probably noticed it before when you’re talking to colleagues or writing a post on Basecamp about your design-choices. Suddenly you see your design in a different light and need to sketch out some new ideas. If you have a printer nearby printing it out and writing on that works the same way. Firing up Skitch and taking a screenshot facilitates that kind of thinking for me. Maybe you should give it a try as well?

A push from an astronaut

2014-01-21T00:00:00+00:00

During my christmas vacation I read Chris Hadfields excellent book “An Astronaut’s Guide to Life on Earth ”, and he talked about an interesting term that he called minus one, zero and plus one.

Over the years, I’ve realized that in any new situation, whether it involves an elevator or a rocket ship, you will almost certainly be viewed in one of three ways. As a minus one: actively harmful, someone who creates problems. Or as a zero: your impact is neutral and doesn’t top the balance one way or the other. Or you’ll be seen as a plus one: someone who actively adds value. […] I think about how to aim to be a zero and to try to contribute in small ways without creating disruptions. Chris Hadfield

These terms stuck a bit with me, and i thought quite a lot about that during my vacation. How can I stretch to reach a plus one instead of a zero on the web? (I sure hope that I’m not a minus one). Well, you can’t be a plus one without contributing anything. I’ve been very grateful all the times I’ve been stuck and suddenly found the solution to my problem because someone bothered to post their solution to the web. Hopefully I can pay it forward by posting some of my solutions and thoughts, and this way contribute in small ways. One year after Chris Coyier sparked the idea I just needed a little push from an astronaut to start…

Hauken

2025 Year in Review

Work

Norway Fintech Festival

Side projects

Sold Violating-gdpr.com

isecrets.io

Launched Car Bingo

Sunday SMS

Parental leave tracker

Blog and newsletter

The Good Parts

Travel

Dyreparken

Scouting camp in Gjøvik

Bike vacation in Denmark

Toughest Oslo

Trolljegerprøven

Kaizers Orchestra

Health

Wonderful things from 2025

Purchases

Media

Apps

Plans and goals for 2026

Why Your Users Aren't Listening (It’s Not What You Think)

The surprisingly difficult art of paying for my Apple developer account

Notes from inside an accidental airbag

The power of a MHP (Minimum Hateable Product)

2024 Year in Review

Work

Heder Bank

Side projects

Pie Menu

Hot Corners

Baby Leaps

Blog and newsletter

Podcast

The Good Parts

Travel

Saying goodbye

Health

Trolljegerprøven

Wonderful things from 2024

Purchases

Habits

Media

Apps

Plans and goals for 2025

The ultimate guide to building a home gym

Start Small, Start Smart

Upgrading Through Opportunity

The Dedicated Upgrade: Building My Home Gym

The Perks of a Home Gym

The never-ending project

Top Tips for Anyone Building a Home Gym

1. Buy Quality Equipment

2. Have a Training Program

3. Upgrade Gradually

4. Build for Your Style of Training

5. Use Your Space Wisely

Coming Full Circle

The coolest person I’ve ever known

Building an AI board of advisors

How I’ve set it up

Creating your AI advisors

Getting Started

Useful links for achieving this

The perfect routine

Pockets of time

Pockets of time

Carving out structured time

Progress, not perfection

The power of side projects

A professional playground

A creative outlet

An energy source

Sawdust

Digital sawdust?

What’s in your bin?