A computer with an iPhone and iPad that shows Inductions website.

A new website to showcase all of Induction's services

Induction AB, based in Gothenburg, designs digital onboarding programs to support employee learning.
All participants receive dedicated support and follow-up, in-house by Induction’s support team.

My role

UX/UI

Timeframe

6 months

platform

Desktop, Mobile & Tablet

TEAM

Product owner

Business model

Business to business

Industry

Digital programs

1. Background & Context

121 days of internship at Induction

I planned and led the website redesign, aligning with stakeholder insights and weekly feedback from the Product owner (PO). 

Induction asked for a new website and a rebranding with new colors and fonts. This case will focus on the core steps of my design process, mainly working in Figma and the result of 35 iterations so I could build a WordPress website with the website builder Elementor.

Working in Figma with the new colors and fonts for Induction and a new brand guide.

Brand style guide in Figma

2. Project scope

I set my goals high to challenge myself to apply my UX knowledge

  • Launching a new website within my internship period
  • Fully responsive for desktop, mobile & tablet
  • Design process based on double diamond framework
  • WCAG focus reaching at least level AA for contrasts 
  • Track data with Hotjar and Google Analytics
  • Landing page to download their onboarding guide
  • New colours and fonts
Andreas Falkson Falk working in Miro with research for colors and layouts.

Working with research in Miro

I held a Lunch & Learn about UX

3. Research

Learning all about the company & the culture

  • Their core business
  • The company culture
  • Interviews with all employees
  • Meeting with the CEO
  • Go through Induction’s onboarding program
  • Trying other companies’ onboarding programs
  • Learning about HR and Learning & Development
  • Weekly meetings with PO 
  • Observations at the office

“Capture the culture and our slogan
Alltid Seriös, sällan allvarlig. The site should make you laugh, be playful and something unique. Think about something completely different and no square corners, more rounded”

– David Djerf, CEO at Induction

Research Key insights

  • They put a lot of effort into their culture
  • The importance of a fun & unique website
  • The existing website includes a lot of pages that were outdated and that they didn't need for the new website, e.g. the blog page and outdated landing pages
  • Making a site map helped me understand the architecture, user flows and to set estimated time for the project

5. A new identity

Branding & WCAG

  • The new colours and fonts should align with the WCAG guidelines reaching at least 2:1 color contrast for WCAG 2.2. 
  • Showcasing my ideas for the PO
  • Tested on different "above the fold sections" solutions
Screenshot of the new style guide for Induction

First draft for colours, fonts, buttons e.g.

6. Prototyping

35 iterations for my Figma prototype

With new colours and fonts, I started to sketch and make low-fidelity wireframes in Figma, this was the big part of this internship and took the longest time. 

  • From low fidelity to high fidelity, fully clickable in Figma
  • Iterations are based on insights and feedback from Product owner and the CEO
Screenshot in Figma of my first iteration in a mid-fidelity prototype
Figma-Iterations-6-Version-Of-Version-11
Screenshot in Figma of my last iteration in a high-fidelity prototype

Key insights

  • Have a good & clear structure in the workflow
  • Be clear and communicate well with stakeholders and be crystal clear in the communication
  • Working with each separate page during each iteration made it hard to focus on the content, layout and to showcase ideas to the PO. More about this further down in the case study.
  • Be ready to let go of concepts, ideas and design that doesn't align with stakeholders. I had to do that multiple times and saved the ideas for later.

7. Setbacks

We won't make it to deadline

Working back and forth to get an approved layout for the pages took more time than I put into the project timeframe, the challenges were a lot.

  • It’s easy to go into too much detail on text, photos, placements instead of just putting down the basic structure because we can always iterate.
  • Working with a PO who has a lot of work outside my internship made the work goes slowly forward (I understand that).
  • Producing content also took a lot of time, I didn’t think about that and realized that.
Andreas Falkson Falk showcasing prototype on a TV and laptop

Presenting iterations for the PO

8. Ready to go live

Built the website in WordPress

  • Designed 12 pages
  • Set up the design system in Elementor
  • Cleaning up old photos, plugins and pages in the backend 
  • Set up forms, header, footer and made my own templates
  • Designed for desktop, made it responsive for mobile and tablet
  • Set up Google Analytics, Hotjar and Make
En iMac mockup som visar startsidan av Inductions nya hemsida.
En iMac mockup som visar Onboarding sidan av Inductions nya hemsida.
En iMac mockup som visar landningssidan för att ladda ner Inductions Onboarding guide på Inductions nya hemsida.

9. Valuable lessons learned

My learnings & results

A finished website with +10 different pages highlighting Induction as a company, showcasing their services, the staff and also landing pages to convert visitors.

  • Adapting to the process is key to take new challenges and be ready to re-think and make a new structure for the project.
  • I would have prototyped one page at a time instead of creating each page, showing POs, and then iterating. This made it difficult to stay focused on the content of each page between iterations.
  • Not having a UX mentor in the office during the Internship made me trust my previous knowledge and the UX expertise I learnt in school. It was hard sometimes and I doubted myself but the result was successful.
Leafing through a notebook during my internship

Daily diary for planning and my insights

10. Important step

More time for proper usability test to re-ensure good structure, flow & content

One major thing is that the project in some way didn’t actually include some proper usability tets during and after the launched website. I made a small test from the final Figma prototype where the user had to interact with the prototype for 1 minute and I asked them to explain what the company provides. This test was a way to test fast to get insights but I lacked wider usability tests.

  • Test the user flow, to reassure how to navigate, visible links and buttons.
  • Can users find related functions like the page to download the onboarding guide?
  • Do visitors really understand what the company provides?
Pen and paper with a computer showcasing a set up in Miro to take notes during usability tests

Setting up a usability test in Miro

Quote from
Product Owner

“Andreas has been a key player in the work on our new website and the digital spaces where we meet customers and drive business.
Driven, insightful, and with an impressive ability to translate user needs into concrete and value-creating solutions.
With a sharp eye for UX and a genuine feel for our tone and identity, he has created experiences that engage and convert.
A collaboration that has made a clear impact, both for us and our users.”

Janina Franson, COO at Induction AB

Spotify, Two stage edit

Easier way to sort and organize your playlists on the Spotify application
Read now

Andreas
Falkson
Falk

2025 © All rights reserved.

File-pdf