Role:
Lead Designer, UX, Visual Design
Project description:
While at MasterClass on the Consumer Product Design team, I led the global redesign of our Search experience across Web, iOS, and Android platforms. This project was prioritized following the successful redesign of our Library page, which was aimed at enhancing content discovery for users. Initially, Search was not redesigned due to scope limitations for our Library project, but in Q3 2022, we decided to invest in its redesign due to the significant number of users relying on Search to find content. Many users were abandoning searches or not getting the desired results.
The previous Search experience was challenging to access as it was only available on the Library page, and the search results were disorganized in long dropdown UIs. As the lead designer, I collaborated with cross-functional teams including engineering, product, and data, as well as with the Design Systems lead to develop new pattern designs. This project was designed to scale for both Consumer and Enterprise (B2B) use cases, similar to our Library project.
Project Goals / Hypotheses:
Our goals for this project were to enhance Search quality and engagement. Our hypotheses were that placing Search in the Global nav and designing it to improve result understanding would boost content discovery, search usage, and engagement.
Project Scope:
During the design process of this project, after re-alignment with Product and Engineering, we split this project into 2 design delivery phases:
V1 - Search designs to place search in our Global nav, to validate that this would increase Search Usage
V2 - Delivery of Search in Global Nav + Redesigned Search Results page / functionality to prioritize understanding of content types in results
Process:
Initially for this project, I created a design brief including relevant data and project milestones within a Design Timeline that I shared with my Product Manager as she finished her PRD to gain alignment. Throughout this project I met with my cross functional team including engineering, our design team, product and leadership. I also worked with UX researchers to create test plans and prototypes for user-testing throughout this project.
Initial Ideation and Iteration:
I began with low-fidelity mocks and wireframes to define project scope and align with my Product Manager's product requirements. Together, we aligned on globalizing Search, adding personalization, and refining result display hierarchy. As we refined wireframes, leadership suggested improving result visibility, leading to a versioned feature release into V1 (global search) and V2 (redesigned results UI). After we decided to version the Search project releases, I finalized V1 designs for the web, iOS, and Android while also exploring V2 designs. V1 was released in Q1 2023 and boosted engagement across platforms.
Search V2 Context and Design Strategy:
For our Search V2 designs, we aimed to enhance content display by emphasizing parent-child relationships and improving content type recognition. I explored various structural improvements for web and mobile, focusing initially on web due to its larger visual space and higher engagement rate at the time.
Search V2 - Final Designs:
For our final designs, after leadership feedback, I provided structural UI options for Search Results pages, and refined use case flows with the team. We settled on a UX model with a consolidated 'All' view for web, featuring content type tabs for differentiation and unique cell types for each content type. A standout design detail was showcasing 'best match' results prominently in a large, celebratory tile at the top of the UI for web for exact matches, enhancing user experience.
For mobile, we used a tabbed experience to make it easy for users to differentiate content types. We also used larger cell types for Class/Parent level content types, while smaller cell types were used for shorter pieces of content like lessons. I also consulted Material and iOS guidelines when considering the flow and tile design for mobile designs.
For final designs, I created web, iOS, and Android use case flows and prototypes at visual design fidelity. I also created a design spec, including responsive designs, empty states, and edge case mocks.
Search V1 was launched to 100% of users and positively impacted engagement metrics, while Search V2 was released to A/B test and was scheduled for release in Spring 2023. This project resulted in new patterns for web and mobile and an updated global navigation component.
Designs included:
Desktop web, responsive web, iOS, Android