Toybox- Better Model Search

Designing for a more efficent Toybox search experience.

Toybox Search Image
Design System Overview

Project Details

My Role:

Product Designer

Tools:

Figma, Asana

Duration:

3 Months

Designers:

Jenn C.

Developers:

Zach O., Kyle M.

Problem

The existing Toybox search is limited to toy results only and can be overwhelming to process the results. To improve this experience, the team and I were determined to make the search process as easy and useful as possible for Toybox users to find and print a model.

"How might we improve the Toybox searching experience to reduce the time it takes for users to print a model?"

Research

To get a better understanding of how other popular 3D printing websites use filters and sorting methods, I researched websites like Thingiverse, Cults3D, and Printables.

Thingiverse

Too many categories to choose from that makes the user even more stressed out when trying to figure out what they want to print

Cults3D

The top navbar is overwhelming and hard to know what you should be looking at. There are many different deisgn categories and filters being shown, but really lacks order + organization.

Low Fidelity

Searching

Trending Searches

Search History

Suggested Search

Suggested Search + Categories

Search Result Filters

Low Fidelity Revisions

Search Result Filters

After presenting my low fidelity designs to the team, I continued to iterate and explore different ways to sort/filter search results.

The first draft was very simple, but lacked organizational hiearachy. Additionally, we wanted to add a time duration filter that would help users find models that were within their desired print time.

However, while looking at this iteration, it had become very overwhelming + unnecessary for the print duration to take up so much space.

Data-Driven Decisions

By analyzing the print time data for the models on our platform, I was able to determine what time increments to use for our print duration filter.

This helped with the final version of the design as we were able to narrow down the print duration into 3 categories: quick, medium, slow.

Final Designs

Filters

Search Suggestions

Creators

Additionally, to ease the process of modifying these cards, I created a card component that utilizes Figma’s auto layout and properties.

These features include handling username text-overflow, the ability to easily switch between mobile and desktop cards, and changing the user’s account status.

Challenges

The biggest challenge of this project was trying to figure out the best way to display the search filters.

Initially, I had designed the filters to be a drop-down menu. However, due to the large amount of options that we allow users to select from, we faced a problem where the list could possibly become longer than the user’s device height. To solve this issue, we decided to use a modal with scrolling.

Original Deliverable

Revised Modal

Implementation

Once the design was approved, it was handed off to the development team for production.