project overview

As a big fan of the show Severance, I decided to fill the void of season 2 ending with a design challenge: building an interactive quiz prototype in Figma that assigns you to a Lumon department based on Kier's four tempers. I posted it on Reddit and it ended up being a huge hit in the fan pages while also being a great design challenge!

over 56,000 post hits
~15,000 quiz takers
Lots of joy (and panic…)

so how do you make a quiz in Figma?

Without the backing of code (and not wanting a Buzzfeed quiz), I had to get creative with prototyping and result pathway logic. This meant a ton of planning before designing.

the concept

QUIZ QUESTION THEMES
QUIZ QUESTION THEMES

Each question matches one of Kier's four tempers, making the quiz taker "refine" themselves as they answer

Each question matches one of Kier's four tempers, making the quiz taker "refine" themselves as they answer

Kier tames 4 tempers (Woe, Frolic, Dread, Malice). To stay true to the themes of the show, I wrote the questions to mimic how you handle these feelings. As you answer, you refine yourself, "taming" them.

Kier tames 4 tempers (Woe, Frolic, Dread, Malice). To stay true to the themes of the show, I wrote the questions to mimic how you handle these feelings. As you answer, you refine yourself, "taming" them.

THE 6 POSSIBLE QUIZ OUTCOMES

Every answer is linked to a specific department

Each department has distinct employee traits, and every answer is written to match these characteristics. For a twist, I branched out and included employees who aren't severed and the dreaded Lumon family.

The available departments were based on the ones we've actually met so far, as of Season 2

Macrodata Refinement
Optics & Design
Not severed
Mammalians Nurturable
Choreography & Merriment
(spoiler) Member of the Eagan Family

quiz logic building

CONTENT TRACKING
CONTENT TRACKING

Mapping the identifiers for each answer and outcome

Mapping the identifiers for each answer and outcome

Each possible selectable answer was colored to match a department, while each question was shortened to the first letter of the corresponding temper it addressed. This made sure I wouldn't mix up the answer pathways as they were written, as well as gave me the opportunity to visualize the likelihood of participants getting one department over another.

Each possible selectable answer was colored to match a department, while each question was shortened to the first letter of the corresponding temper it addressed. This made sure I wouldn't mix up the answer pathways as they were written, as well as gave me the opportunity to visualize the likelihood of participants getting one department over another.

CONTENT CHALLENGES

Difficulties with Figma prototype limitations

I had the challenge of: a) not wanting the quiz to be too short, and b) also knowing I couldn't code each selection to be a count of each department answer a participant selected in the Figma. I addressed both problems by giving participants 2 chances to answer questions before a department was eliminated as a final outcome possibility.

OVERCOMING TECHNICAL BARRIERS
OVERCOMING TECHNICAL BARRIERS

Building a split vs eliminate answer pathway structure

Building a split vs eliminate answer pathway structure

I identified answers in the logic map as: Split (x number of departments would likely answer this way, filters answers into separate department pathways) and Eliminate (1 department that's the least likely answer the way you selected will be eliminated).

I identified answers in the logic map as: Split (x number of departments would likely answer this way, filters answers into separate department pathways) and Eliminate (1 department that's the least likely answer the way you selected will be eliminated).

content design

WRITING QUESTIONS

Keeping questions universal, but with Lumon's voice

All questions are general character-based questions, themed with each of Kier's tempers (Woe, Frolic, Dread, Malice) so any quiz taker could relate to the situation.

Lumon is rigid, cold, and corporate. The wording I used mirrored this mentality: very stiff and formal. It's too articulate or flat/blunt to be natural, causing an unsettling feeling as you answer.

I crafted the quiz narrative as though the quiz taker wanted to interview with Lumon willingly

WRITING ANSWERS

Crafting conversational, flexible answers

While some answers leaned towards stiffer tones (aka: Eagan) or warmer animated voices (aka: Choreography & Merriment), I kept them general enough to apply to a variety of quiz takers' own characteristics. Plus, I couldn't give away which department was obviously which.

The more they'd answer within a certain pathway, the more departments got eliminated that opposed the quiz taker's emerging voice.

USER TESTING CONTENT
USER TESTING CONTENT

I validated my content logic by seeing how friends and family answered, counting the variety of quiz results

I validated my content logic by seeing how friends and family answered, counting the variety of quiz results

While I wanted the most popular departments in the show to be the quiz taker's final result (and I built more pathways to accommodate this), I needed to make sure there wasn't an overly dominate pathway. By testing it with people I knew, I found too many people landed on Macrodata Refinement.

While I wanted the most popular departments in the show to be the quiz taker's final result (and I built more pathways to accommodate this), I needed to make sure there wasn't an overly dominate pathway. By testing it with people I knew, I found too many people landed on Macrodata Refinement.

I went back to the drawing board, editing answers in these flows to be more generic, and it worked! When I sent out the quiz a second time, there was no dominating department result.

I went back to the drawing board, editing answers in these flows to be more generic, and it worked! When I sent out the quiz a second time, there was no dominating department result.

visual design

VISUAL INSPO

Taking inspiration from the show's retro visuals

I took elements from the Macrodata Refinement desktops, Apple's own Severance promo page, and the digital file rolodex. I also pulled from Apple's classic font, SF Pro.

FIGMA GROUNDWORK

Building out components

I kept the dark backdrop, tinting everything in the show's signature pale blue-green hue and designing animations and interactions. Building components was the only way to ensure quick changes to the full quiz file, which rapidly got unruly with how many answer pathways were possible.

final design

PRIMARY PAGES
PRIMARY PAGES

I finalized the interactive entry page, question/answer pages, and the results pages

I finalized the interactive entry page, question/answer pages, and the results pages

Mimicking the Macrodata refinement files, the question/answer page content in the file-shaped container gets smaller as the number of department options dwindles, until the quiz taker is "refined" and placed into their department (the final result). Multiple completion indicators also show progress and mirror the show (refinement percentages at the top and bottom, rolodex progress bar).

Mimicking the Macrodata refinement files, the question/answer page content in the file-shaped container gets smaller as the number of department options dwindles, until the quiz taker is "refined" and placed into their department (the final result). Multiple completion indicators also show progress and mirror the show (refinement percentages at the top and bottom, rolodex progress bar).

TRACING CONTENT PATHWAYS
TRACING CONTENT PATHWAYS

Tagging (or keeping sane in an insane file)

Tagging (or keeping sane in an insane file)

As you can imagine, pulling this off in Figma meant an absolute monstrosity of prototype screens. I made a tagging structure to keep track of each screen, since they are all very similar: [kiertemper].Q[question #].A[answer#] (ex: D.Q10.A9). This helped me ensure the pathways were never broken, and I could retrace all content decisions for accuracy.

As you can imagine, pulling this off in Figma meant an absolute monstrosity of prototype screens. I made a tagging structure to keep track of each screen, since they are all very similar: [kiertemper].Q[question #].A[answer#] (ex: D.Q10.A9). This helped me ensure the pathways were never broken, and I could retrace all content decisions for accuracy.

quiz reception & takeaways

quiz reception
& takeaways

JOY, PANIC, EXCITEMENT
JOY, PANIC, EXCITEMENT

I posted the quiz on Reddit, and it had over 56K hits, with an estimated ~15,000 quiz takers

I posted the quiz on Reddit, and it had over 56K hits, with an estimated ~15,000 quiz takers

My inbox was flooded with incredibly kind comments (and some existential panic) by Severance fans, with my favorite reactions below. Ultimately, this project was a fun way to push my skills in content design, gamified thinking, and conditional logic while exploring how to translate a fictional world into a digital experience. It was a joy to make, and even more to give to fellow fans! Feel free to try it yourself.

My inbox was flooded with incredibly kind comments (and some existential panic) by Severance fans, with my favorite reactions below. Ultimately, this project was a fun way to push my skills in content design, gamified thinking, and conditional logic while exploring how to translate a fictional world into a digital experience. It was a joy to make, and even more to give to fellow fans! Feel free to try it yourself.

Made from scratch in Framer by

Bryony Hoare

Let's work together! Get in touch

Made from scratch in Framer by

Bryony Hoare

Let's work together! Get in touch

Made from scratch in Framer by

Bryony Hoare

Let's work together! Get in touch

Bryony Hoare

Work

Play

About

Connect

Work

Play

About

Connect