• UI/UX Design
• User Research
• Figma
• Jira
The Search page is where teachers can find resources and assignments for their students. These assignments can vary wildly, from quizzes and tests to games and videos, and cover a huge amount of curriculum.
Because the Search page was initially designed without any user testing and nothing more than a large empty search field and vague instructions, it was difficult for teachers to quickly find what they were looking for. We also learned that teachers wanted to:
• The ability to browse resources, not just search for them
• Browse by state standards
• See new resources
For reference, here is a screenshot of the original Search page:
As you can see, this UX is rather barebones. It is intimidating to users who aren't totally sure how or what to look for because all the pressure is on them, not the UI.
Rethink the design of the Search page from the ground up, with the goals of making the resources easier to find and the UI more engaging. Also, conduct user testing to ensure the new experience would be successful.
Before any sketching or designing, I needed to understand exactly how all the resources were organized to not only reflect that organization in the design, but also hopefully discover fresh ways to present them to the user.
I discovered that the resources were already meticulously categorized by the curriculum team, so that seemed like an obvious basis for the new “browse” UX.
These categories included:
• The type of resource (such as quiz, video, practice, etc)
• State education standards
• Topics covered
In addition, each resource had a publish date, so I noted that it would be smart to possibly feature “new” or the “latest” items for teachers. And since we had access to student ratings on assignments, we could have a “most popular” category to help teachers find engaging assignments that students loved.
Knowing that the categories would be the basis of my designs, I started sketching (using the Freeform app on an iPad:
It was pretty obvious to me that something was missing from the design. And that something was a banner that could be used to feature certain content. It would also help visually balance the page and give it a more solid structure.
Here’s the next sketch with that in mind:
Happy with the latest sketch, I was eager to start on hifi designs. As a side note, we typically skip wire-framing because our design system (which I also created and manage) makes it easy and efficient to use the hifi components for fast, efficient, and consistent designs.
After a few iterations, here is the final design of the new Search page:
As you can see, the new design features an eye-catching banner that helps anchor the page design. We also have a browsable UI, with different helpful sections like Resource Type, Topic, and Standards, each with colorful buttons and graphics. In addition, we were able to create new categories like Popular and New resources. Also, teachers can still search but now the instructions are more clear.
Before development, we wanted to find out what users thought of the new design and UX. Working with the UXR team by making various interactive prototypes to test, the results were extremely positive. Users found the new design to be a success. They said the new designs were:
• Visually engaging
• Fun to use
• Much more useful
