Scavenger Hunt

Scavenger Hunt Chrome Extension

Role: UX Researcher, UI/UX Designer | UI/UX Design, Art Direction, Prototyping | Tools: Figma, FigJam, Chrome DevTools

About

Scavenger Hunt is a Chrome extension used internally inside Wunderkind to collect brand elements from client’s website. This is so we can upload it to a brand kit that can be applied quickly across multiple onsite deployments (top bars, overlays, bottom bars, etc.) and email.

Problem

At Wunderkind, when a designer first gets assigned a new client project, the first course of action is to scope the client’s site for branding elements.
A client’s website is scoped up to 3 or 4 times by several different teams. The Design Studio scopes it three times:

• On Day 0, by a design manager (45mins)

• When the project begins (40-60mins)

• And once when the full suite begins. It’s ad hoc, looking for styling notes in particular such as animation interactions and input focus states. If a designer can’t replicate an animation or styling like gradients, they often have to rely on UX Engineers to help code it, which adds extra time to the scoping process.

  How long does it take to put together a brand kit?

  While we don’t have detailed numbers on how long a brand style in particular takes, as a part of a full suite task, it averages out to 4 hours (over 240 mins)

This is up to 4 hours, or half a day, spend scoping and building brand styles.

Solution

Working with UX engineers, I was the main UI/UX designer and UX researcher in creating a Chrome extension that users can interact with to pull out brand elements from the client’s site with less manual work. It is a tool that designers can use to collect data from a website, such as element styling and assets. It then collects this data into an object that can be used other programs like Figma.

Whiteboard Session and Research

The project kicked off with a whiteboard session where we followed the general process of a client onboarding to Wunderkind for the first time. We also researched previous plug-ins that aim to achieve a similar goal and looked into the technical aspects of design elements onsite. Lastly, we discussed leveraging newer technologies such as AI or machine learning to help with gathering color styles or scoping out text. For the initial MVP, we wanted to have a working extension to scope onsite and save email for later.

Here we laid out the general process of what it looks like scoping for a brand kit for the first time. While most elements can be gathered quickly through Chrome DevTools, technical features such animations and hover states take a bit more time to emulate.

Conducting Interviews

After whiteboarding, we took the next step of conducting interviews with associate and senior designers on how they approach the scoping process. I did a series of five interviews discussing pain points, what features they would like to see in the extension, and how they pick which elements go into the brand kit. While each one differed in their scoping, they shared similar concerns with difficulty emulating animation styles, validation styles not easy to update, and conversions between px, em, and rem values. Although we decided to primarily focus on onsite for the MVP (minimum viable product), it was also important to consider how email could have its own frustrations different from onsite experiences.

ps how great is zelda.

What may seem like an out-of-place message in the design process was actually one of our biggest inspirations when coming up with the UI of the extension. When coming up with ideas to separate the elements based on our research and interview answers, we looked to sources outside of our industry for inspiration. During the time of brainstorming, The Legend of Zelda: Tears of the Kingdom had recently released, which me and a fellow UX engineer were obsessed with playing outside of work. The game’s main spirit of in-game searching and gathering impacted the design of how Scavenger Hunt would look and function. The inventory menu in particular had clever UI design that made it easy to separate the various items gamers gather in their adventure as they travel across Hyrule.

Design Iteration and Prototyping

Using Zelda’s inventory UI as a key reference, I broke down how it would translate to gathering brand elements onsite. One of the defining features I set out having early on was a navigation bar that broke down the elements into separate categories such as typography, buttons, input fields, etc. Other functions I discussed with the UX engineers included how would we notify users if they erroneously picked the wrong element to scope, how specific we could go in editing values, and how to display the elements gathered in a visually pleasing way. The use of squares revealing the content inside was a clever way to convey information easily while also allowing for secondary information to populate underneath for more context. This allows for visual consistency across all the different categories as users click into the navigation bar while scoping other elements.

After iterating on ideas, it was time to bring it into Figma for prototyping. One important development when I was sharing digital wireframes with the team was how typography would be displayed in a concise manner. Scoping for text is one of our biggest tasks that takes a lot of time do how they differ across buttons, type hierarchies, and more. There’s also the fact that type has many properties in it that we must consider, such as font size, line height, and letter spacing that makes it more complex than collecting hex codes for color. As a result, we included a text preview with placeholder text to make it easier to envision than just the square button.

For prototyping and MVP purposes, we primarily designed for the three biggest elements while scoping: typography, buttons, and input fields. Users can seamlessly switch between categories using the bottom navigation bar, and the contents are automatically saved after scraping.

After prototyping and sharing my designs, the UXE engineers set to work coding while I took on a creative director role to oversee the finalized designs. Besides making the extension look polished and more in-brand, the team added tooltips, error flow messaging, and an export overlay for when the brand kit is ready to be exported to another software.

Takeaways and Next Steps

After gathering much feedback from consulting designers, engineers, and stakeholders, it is time to test out Scavenger Hunt! Currently, we provided a simplified version of the extension for use before expanding on new features in the future. It is now being used in the designers’ workflow where we asked them to provide feedback through a survey or message the engineers directly for any technical bugs. Already, designers have noted how much faster it is to copy and paste the elements into the brand kit, cutting as much as 2 hours from the average time of 4 hours in our previous workflow.

Additionally, Project Scavenger has increased dramatically in scope from being just a design scoping tool to gathering copy text and brand tone for copywriters, which is still being optimized. Next steps for this project include getting the copywriting UI screen to a presentable state, analyzing how it can be applied to other use cases, and adding more functionality over time like color palettes and light/dark themes.

Credits

Product Director: Triona Moynihan
Engineers: Nyssa Tyers-McGwyre and Lennon Tomlinson
UX Research, UI Design and Prototyping: Christina Lu