I was a Design Technologist Intern at Shopify, a global commerce platform that empowers millions of merchants worldwide to sell online, offline, and everywhere in between.

I co-designed, prototyped, and launched a reimagined on-site search experience on shopify.dev, Shopify's third-party developer documentation site.


Product design

Prototyping with code

1 product manager

1 product designer

1 content designer

Feb-Apr 2022

(3 months)


This is what the current on-site search experience looked like:

Third-party developers found the current search experience clunky and irrelevant, leading to only 0.5% of daily users using our on-site search.

"Your search functionality is awful. I use Google instead of your built-in search bar to search the docs. It needs some tender love and care."

- a third-party Shopify developer

The Challenge

With shopify.dev containing thousands of pages, the inefficiency of our on-site search resulted in third-party developers being unable to find key API resources quickly. This led to decreased Shopify app ecosystem productivity.

Understanding the Infrastructure

First, I dove deep into understanding the current technical infrastructure.

Through this, I diagnosed foundational problems with how the backend was serializing content. We were giving messy information to our search engine (ElasticSearch), and had terrible result relevancy as a result.

This deep-dive also helped me set a shared understanding in my team of how our search currently works.

Defining UX Principles

Our design team started defining principles and solutions based on our assumptions. But we were stopped by our product manager, who questioned what evidence these decisions were being based on.

So we took a step back, and interviewed eight third-party developers. Based on the frequency and intensity of their feedback, we defined the UX principles of our search:


Design search results for scannability

Currently, developers had to manually parse through cluttered descriptions and breadcrumbs to determine the best search result. Scannable results help developers quickly determine the best option for their use case.


Filtered search for the win

For a continuously-expanding information site like shopify.dev, providing developers the ability to narrow a large set of results down is critical.


Personalize the experience

Developers only cared about the one or two APIs used in their work. By saving their filters, our on-site search experience would be more frictionless.


Following a competitive analysis and low-fidelity designs, I collaborated with our senior product designer and content designer to create high-fidelity Figma wireframes based on our principles:


I created a prototype in our production codebase with React, Ruby on Rails, and ElasticSearch.

I focused on designing the interaction-heavy filtering experiences that couldn't easily be replicated in Figma, and would benefit the most from being experimented with in a production environment.

Here's what my prototype looked like:

Filter-by-category tabs

Based on the search query, the search modal would display category-specific tabs. On click, the tabs would display results from that category. A mixture of results would be displayed by default in the 'All' tab.

Dynamic tab positioning

These tabs would be dynamically ordered from left-to-right based on the relevance of their respective categories.

Personalized filters

The search modal would also enable developers to view content only from selected categories. This helped developers focus on results for the Shopify APIs of their current project.

Saving filters

Even after navigating to away from the page, selected filters were preserved using cookies.

Clearing filters

If a developer wanted to remove their filters, they could clear them in one click.

Defining Edge Cases

My prototype also challenged our design team to solve edge cases we hadn't accounted for in our wireframes.

For example, to limit the length of the 'All (results)' tab, we truncated the search results displayed in each section. After experimenting with different algorithms, our design team chose the path that best complimented the functionality in our designs.

Results below the score threshold (highlighted in red) were retained to preserve 'View all results' functionality

Implementing for the Keyboard

Another strength of coded prototypes is that it enabled our design team to design keyboard navigation, a feature required for developers.

Here's what opening, navigating, and selecting in the search modal looked like:

Interactions were linked to / (open search bar), arrow keys (result navigation), Esc (close search bar), and Enter (open selected result)

The Launch

Though my internship ended in April 2022, my co-designers were able to use my prototype to conduct qualitative research with users.

"We conducted some user research... and your work on prototyping the interactions was extremely helpful for validating that a modal format was the right choice and that categorization was an essential feature."

Anne Liu, design technologist

After validating our design choices, the redesigned search was developed and launched less than 4 months later in August 2022. Check it out on shopify.dev!

The search was well-received by the developer community, with the filtering and history features being especially appreciated. Quantiatively, the project was successful as well:

On-site search usage increased by 7%

Time to find correct result decreased by 22%

(actual values omitted for confidentiality reasons)


Before this internship, my passions for product design and software engineering had always been separated. My experience as a design technologist at Shopify proved that there exists a role where these passions not only co-exist, but thrive together.

"Jayden is an awesome design collaborator, constantly sharing his work and actively requesting feedback in order to continually iterate and improve. His innate curiosity, paired with his design and development skills enable him explore UX problems from unique perspectives and arrive at novel solutions.

Jayden is a great example of the value a design technologist can bring to the product development process. I really hope we get to work together again."

Thomas Yuill, staff design technologist and mentor


Don't operate on assumptions

Our team got too excited and made the mistake of defining UX principles before research. Had we not talked to developers, we would’ve not solved their biggest pain points. If I was to do this project again, I would start with research.


Prototyping is so, so rewarding

It is incredibly empowering to prototype interaction-heavy experiences that would otherwise be impossible to create with traditional design software. The level of clarity it can bring to stakeholder conversations and user testing is unmatched.

Next project

Jayden Hsiao - Designer & Developer