Welcome to my design portfolio!
This is a work in progress space that I’ll be continually adding to. I hope to capture my design process, share snapshots of cool things I’ve gotten to make along my professional career, and insights learned from the process.
“When logic fails us, it’s an inconvenience. When magic fails us, it feels like an essential part of our humanity is brutally taken away: our ability to imagine beyond our circumstances, our potential to make meaning from the ordinary.”
— Mari Andrew from My Inner Sky: On Embracing Day, Night, and All the Times in Between
A moodboard can be a great way to guide the first stages of the creative process. Here’s one I used when redesigning the living and dining space in my home.
Prototypes & wireframes
Lightweight wireframes and mock-ups are another great way to begin translating the goals and vision of a design project into a visual language. Whether at the outset of a project, to begin putting pen to paper, or as a means to bring stakeholders along a journey, you can never go wrong with a prototype.
Take a look below! I played around with various aspects of the gestalt principles of design with two versions of a sample resume. With visual hierarchy in mind, I mocked up two versions of the same copy that present a different version of the same person.
Fig 1.1 In this example, I weighted the educational qualifications & work experience sections equally, using the vertical divider. This can be a signal to pay attention to the candidate's training and background, in addition to their most recent experiences.
Fig 1.2 Here is that first wireframe brought to life with real content! In reality, we see that the white space on the left ends up being quite visually powerful in anchoring the page and directing the user's attention to the left column much more obviously.
Fig 1.3 Another version of this wireframe takes a more traditional approach to a resume, with a single-scroll style vertical read. The horizontal yellow bars break up the page into clear sections, directing our attention mostly to the top and middle sections.
Fig 1.4 In practice, the impact of the traditional resume layout leaves us with a wall-of-text in the middle... which is less than desirable. While the circular headshot does lend a bit of whimsy to this resume, the wall-of-text stands to be improved upon in the next iteration.
Noogler Orientation
Redesigning Google’s iconic Noogler Orientation program was a dream come true. In 2020, our core team of four, embarked on the ambitious task of reinventing Noogler Orientation, an entirely in-person live three-day event, with the key constraint of it being a virtual and asynchronous scaled learning experience instead. We wanted to keep the magic, delight, and Googleyness of what makes onboarding at Google special and leverage the digital affordances that eLearning can offer.
-
We began this project in April 2020 & wanted to understand what the remote Noogler’s onboarding experience was, before going any further. We conducted a series of user interviews, surveys, and design thinking workshops with stakeholders to better understand Nooglers needs. What emerged: a yearning to feel connected to Google.
-
As onboarding at a company of Google’s size is a massive endeavor, I mapped out the 50,000 foot view of the user’s journey from receiving an offer letter to feeling fully settled in their role. By zooming out, we were able to see the many touch-points in a Noogler’s journey, our team’s piece in this larger puzzle, and the importance for consistency and cohesion across the entire ecosystem.
-
The scaled asynchronous learning experience my team designed included two pieces: (1) a central hub for prioritized internal resources (2) a virtual learning path with four eLearning modules that introduced all new employees globally to the company’s mission, values, and organizational culture.
-
Of the many design choices in this project, a few stand out as being critical to its success: a consistent visual language throughout all assets, designing for inclusion from moment one, and balancing critical content with moments of surprise and delight.
Mapping the user journey
On the right, you’ll see some early stage design ideas that walk-through the user journey of a Noogler joining the organization and beginning to connect with the company, its values, and culture. The main purpose of these early-stage wireframes was to illustrate to stakeholders the multiple touch-points a user would need to have with the program, the brand, and the organization and the importance of cohesiveness and consistency throughout the onboarding experience. You’ll see an early idea we experimented with that presented the Noogler Orientation program as a virtual fair for users to explore.
Watch this 30 second video to see snapshots through the early stages of the process in redesigning the Noogler Orientation program.
Key design elements
-
Photorealism meets illustration
While the original Noogler brand anchored on illustration and a back-to-school experience, we wanted to honor where Google is today: a bit more grown up… but not afraid of a little whimsy. Our visual language throughout the program leaned into photorealism (showcasing images of real Googlers at work) with illustration peppered in where appropriate.
-
Globally inclusive
Nooglers around the world want to feel connected to headquarters in California, but often feel excluded, when the focus of programming is too US-centric. For our program, we featured Google offices around the world and chose four locations (Sao Paolo, Dublin, Singapore, and New York) to highlight across the learning experience. Each of the four learning modules (noted in green, blue, yellow, and red here) took learners on a journey through a different local office and we used the visual language of a trip around the world to mirror the start of their journey into the organization.
-
A little bit of whimsy
We found several places to include surprise and delight and one of my favorites was the “I’m Feeling Lucky” button. Sprinkled throughout the eLearning modules, we hid fun facts and easter eggs about Google culture that a Noogler could access through this cheeky “I’m Feeling Lucky” button, a throwback to the 1990s Google homepage!
-
Graduation
In thinking about the program design, it was important that we looked at key points in the user journey — the introduction, peak moments, and the final moments. To conclude their introduction to the organization, we made sure to make graduating from the program special and memorable. Can’t share much more than that for now!
Learning experience design
In each of the four modules of our fully asynchronous Noogler Orientation program, we sought to engage learners through a variety of medium and offered several ways for learners to actively interact with and connect with the stories and experiences we chose to highlight about Google culture.
Watch this video walkthrough of a learning module within the learning experience that presents a case study of the Google Cloud business. This is one of many examples of how my team found creative ways to engage learners in an asynchronous learning experience.
In this video walkthrough of a learning module within the Noogler Orientation program, you’ll see how we incorporated video, assessment elements, and a cheeky “I’m Feeling Lucky” button to offer fun snippets about Google culture.