NerdMap

With the majority of Nerds working remotely across the US, it can be difficult to get to know your peers. So as part of Nerdery’s 20th anniversary celebrations, a small team was assembled to highlight what makes Nerdery special – the people – by reviving the website’s employee page.

As we dove into the project, we aimed to solve the questions: How might we use this as an opportunity to foster relationships between Nerds? How might we facilitate a sense of connectedness and belonging amongst employees at the Minneapolis HQ and work-from-home Nerds?

In the company’s early days, Nerdery’s employees were introduced to future employees and clients via the Periodic Table of Nerds. This was also displayed in the Minneapolis HQ cafeteria, while the Chicago office had a “Nerd wall” with photos for each Chicago-based employee. As the business evolved and Nerds came and went, these traditions eventually dissolved.

With Nerdery’s shift to a remote-first org, it only made sense for the new employee page to take the form of a map. To capture the Nerdery spirit and make it fun and simple for Nerds to get to know their colleagues better, we knew the map needed to be interactive and provide both information and fun facts.

My design efforts kicked off with broad visual explorations around the look and feel of the NerdMap. I explored light and dark themes and different component styles and interaction patterns. The team ultimately decided to lean into a dark theme which we felt was more game-like and better represented the Nerdery ethos. For brand recognition and continuity, I expanded Nerdery’s primary colors to create a flexible palette for the experience. I leaned into a deep blue for backgrounds with yellow and red primarily as accents.

Next, I explored the Nerd bio component, beginning with the initial thought to use a drawer which could accommodate a lengthy bio and easily scale to include more data inputs in the future. Next, I explored different ways the bio and 2 Truths and a Lie might coexist, iterating on designs where the game existed in the drawer with the bio, where the game was launched from the bio drawer and appeared side-by-side with the drawer, and where the game was launched from the bio drawer but took over the entire screen.

The most challenging piece of the project was solutioning for the counterintuitive flow of 2 Truths and a Lie. The game requires the user to correctly select the incorrect or false statement. This journey proved to be confusing for us to wrap our heads around: after a user clicked an option to make their guess, we wanted to identify the correct option – the false statement. Yet the visuals I was using to indicate the correct answer were becoming conflated with the user’s selection, making it seem that the user had chosen correctly – even if they hadn’t.

To provide clarity to users, the team decided to persist the selected state so the user would know which option they clicked, while also revealing a check mark or X icon above each choice to indicate which option was correct. We also made the decision to include helper text below the selected card to further clarify if the user had guessed correctly or incorrectly – because this is a unique case where the correct guess would be identifying the incorrect or false statement!

As part of the finishing touches, I suggested incorporating an About page to introduce Nerds outside of the delivery team to the context behind the NerdMap. Naturally, I tapped into one of the Nerds’ most-loved fandoms for inspiration: Star Wars. Taking notes from the intro crawl at the beginning of every movie, I experimented with ChatGPT to write an About page in George Lucas’ infamous style and worked with our accessibility engineer to adapt the animations for better readability.

Lastly, I needed to create illustrations for the map overlay. For the MVP, I leaned into the geography of areas throughout the Americas, looking at the flora, fauna, and vistas for inspiration. I worked in a loose, sketch-like style in a notebook and then image-traced the scanned drawings in Illustrator. I embraced the imperfections of the human hand, leaning into varied stroke weight and individual pencil marks to capture a game-like feel. For NerdMap v2, additional illustration will be created around various themes so each user can customize their map with the overlay they want to see.