Overview

The Challenge

With a primary goal increase monthly active users (MAU) from ~45K to 100K, gains from new features were being negatively offset by fragmented interaction models along with inconsistency in design patterns, taxonomy, and UI components. This created friction across the platform through increased users’s cognitive workload and uncertainty in their own actions. The opportunity search experience was targeted by the design team for several reasons:

• Priority: Searching opportunities is a primary user task
• ROI: Search spanned multiple opportunity types, so the cost of a solution would benefit multiple areas
• Conversion / Retention: Fixing this problem was believed to increase new account conversions and improve existing user return rate
• Strategic alignment: Improving this area of the platform directly aligned with strategic OKRs for increased MAU goals.

Approach

Audit

It was necessary to audit the search experience for each opportunity type to establish a baseline and to dissect the workflow. Through this, the relevant search criteria was identified and the types of interaction models that were being used along with the number of instances. Defining this as a baseline provided as much insight as it did a launch point for meaningful iterations to the ‘what’ and ‘how’.

Roadmap Review & Prioritization

Working on the Leadership Team with Product Management, a prioritized roadmap based on objectives and key results (OKRs) was defined. This roadmap informed design decisions and shaped what processes and methods the design team would follow to accomplish our objectives. Regular discussions with development team occurred to align on resource availability, schedule constraints and technical feasibility.

The Scholarships Search experience was identified to be the primary area for redesign as Tallo was going to be partnering with NSPA for access to their scholarships database.

Design system

Based on schedule, resources, and roadmap strategy, it was necessary for the design system creation to happen in parallel with ongoing design work. Less than ideal, it was the best compromise in order to maintain trajectory and hit commitments. Processes were defined to make this repeatable as to permit the team to iteratively design as efficiently as possible. As the design system grew, the design work was able to get done faster.

Besides consistency and alignment across all areas of the platform, another benefit was through the use of variable tables and tokens, the design system supported a faster implementation of new branding guidelines for typography, color palette assignment, and visual design attributes.

Scalable and responsive components were created from base widgets for search page headers, backgrounds, filter panels, and results cards. The base component for the result card was designed to be universally scalable across all opportunity types (jobs, events, careers, organizations, etc…) By using properties, designers quickly could turn on / off card attributes to support the need of the target opportunity. This approach was discussed with and welcomed by the dev team.

Research

In addition to research study reports, the design team was able to access analytics data through Hotjar and journey maps in Miro. We worked closely with the research team to define hypothesis for design concepts that needed testing and used Lovable AI at times to rapidly generate interactive prototypes that users could interact with to collect data. Findings were then distilled down into final designs and metrics were collected to measure the growth / improvements.

Only 23.8% of users who searched for a scholarship viewed a scholarship details page. Possible reasons were that search results did not meet user expectations or that the interaction model was preventing them from knowing / navigating to the detail page.

Wireframes

Having a design system to work from, the Figma files were relatively high fidelity. Components were annotated to specify conditional behavior a the global and instance use. Using Figma’s Dev Mode allowed design changes to be tracked communicates to dev team members efficiently.

Utilizing the design system’s variables for viewport sizing, predefined breakpoints automatically updated the layout for pages and components when dynamically resizing the viewport.

All of this effort reduced the amount of churn with development teams and allowed designs to be coded faster with less iteration. Getting all of the ‘what if’s’ resolved early in the design process ultimately improved the development team’s velocity and integrity of their sprint commitments.