Designing a student co-op review platform
Designed the search flow and save draft flow to improve navigation and enhance overall user experience.
Timeline
Organization
Role
Skills
Sep 2025 - Present
UI/UX Designer
Figma, Github
Sandbox
OVERVIEW
I improved the search flow and designed the save draft flow for Cooper.
Cooper is a student-driven co-op review platform where users can explore co-op reviews from past employed students to make informed job decisions. I joined the team at a time where the basic foundations of Cooper were already established. Thus, I focused on refining the existing experience and expanding Cooper’s features.
Refining the Search Flow
THE PROBLEM
The existing Cooper platform didn't have a way for users to filter through different job listings and match their preference.
When I joined Cooper, the team was exploring a three-panel layout, with the third panel intended to serve as a filter bar. Since the concept was still in its early stages, I was tasked with iterating on this design to enhance the overall search experience and make it more intuitive in guiding users seamlessly through the platform.
MARKET RESEARCH
To make informed decisions, I analyzed how different products approached filtering.
I looked at how different platforms organized their filters, where filters were placed, and how users interacted with them. This helped me identify common patterns, understand what worked well across existing products, and determine which approaches could be adapted for Cooper.
9 analyzed
Top filters
Side filters
Immediate "must-haves"
Fewer filters
Filters near search bar
Category driven
Analyzed each company's filtering pattern
Lots of options
Presence of images
ITERATIVE DESIGN
I chose a top filter layout with a collapsible side panel to give users more flexibility.
I explored various filter design options to determine which approach felt most intuitive for users while staying cohesive with Cooper's brand identity. I explored dropdowns vs. search inputs, pill buttons, text fields vs. sliders, star ratings vs. number ratings.
Collapsible side panel
FEEDBACK
I asked fellow designers in Sandbox and a current UX researcher for feedback.
Peer Feedback:
Sandbox designers preferred the sliders over the text inputs. They also noted that the star ratings are good as it shows Cooper's brand well.
Expert Feedback (current UX Researcher)
He noted that the filter section appeared visually overwhelming and cluttered, which could discourage users from engaging with it. He also mentioned that the sliders were not very accessible and that the dragging interaction felt less intuitive than simply using buttons.
Sandbox designers voting for preferred filter designs!
FINAL FILTER DESIGNS
Use filters to ifnd the job review you're looking for.
Quick-access filters with a collapsible side panel
I organized the most frequently used filters along the top for quick access, while placing additional filtering options in a collapsible side panel to keep the interface clean and focused.
FINAL SEARCH FLOW
Filter through various co-ops and internships through improved search system.
Improved navigation and search flow
Navigation is now intuitive and efficient. Key filters sit at the top, while a clear toggle lets users view jobs, companies, or both. With an organized side panel, users can manage and filter through detailed criteria to find the exact co-ops they’re looking for.
Intuitive and Collapsible Side Panel
The sliders were replaced with a click-based range selector, allowing users to choose their desired range. This interaction is more intuitive, as the hover state clearly indicates the selectable range and removes the need for dragging. The pill-style filters were replaced with checkboxes, as the pills extended across the filter bar and made the layout appear visually cluttered and overwhelming.
Designing the Save Draft Flow
INITIAL IDEA
I was tasked with designing the flow for saving and editing a review form and draft.
I started by wireframing the flow for how users could save and access a review form draft. I explored two entry points: accessing drafts through the Profile page or through a Saved Drafts section when adding a new review. After gathering feedback from other designers and discussing the options with the broader team, we decided to make drafts accessible through the Profile page for a more centralized experience.
Opportunities
-
Draft Card — Redesign the existing review card and create a draft card that maintains visual consistency across the platform
-
Edit/View Review Modal — Provide a modal where users can reopen a draft to view and edit their previously saved responses
-
Progress Indicator — Break the lengthy review form into manageable steps
-
Confirm Modal — Provide a confirmation step to ensure users save their changes before leaving the review form
ITERATIONS
I refined each component through multiple rounds of iteration and feedback.
Through multiple rounds of critique, I explored different design directions, tested concepts with users, incorporated feedback from other designers, and worked closely with the development team to account for technical constraints.
Draft Card Iterations
Our goal was to make the review and draft cards informative yet intuitive to scan. This was challenging as the relevance of each detail varied depending on the specific co-op experience.
.png)
.png)
Edit/View Review Modal Iterations
Determining the flow for the edit/view review modals required several rounds of discussion and iteration. We explored what information to prioritize in the top banner, where to place actions, and how to name each option to make the experience clear and intuitive.
Progress Indicator Iterations
Because the review form was extensive, the edit/view modal also became lengthy to navigate. We wanted to make it easier for users to jump to a specific section when they only needed to update one part of their review, leading us to explore adding a progress indicator.
FINAL SAVE REVIEW FLOW
Write reviews, save progress, and easily edit the experience
.png)
.png)
Guiding users through edits
Users can quickly navigate to the specific section they want to edit using the progress indicator. The confirmation modal also provides a clear checkpoint when users initially save their review as a draft, ensuring they know their progress has been saved.
.png)
.png)
Review and Draft Cards
The review and draft cards share a consistent visual design, while the red dot clearly distinguishes a draft from a completed review. Key information, such as the rating and role is surfaced at a glance. Clicking the ellipsis reveals a dropdown menu.
FINAL SAVE REVIEW FLOW
User flow for viewing and editing a review.
Adding a review and saving it as a draft
Users can save their review as a draft and receive a confirmation toast to indicate that their progress has been saved.
Edit/View Modals
The saved draft is accessible through the profile page, where users can view previously submitted reviews or open and edit saved drafts.
KEY TAKEAWAYS + LEARNING
I learned to think beyond individual screens and consider how users move between screens as one cohesive experience.
Designing for long-form experiences
Both the collapsible side filter and review form is a "long-forms." Long forms can become difficult to navigate, so breaking the experience into clear sections and providing progress indicators can help users understand where they are and quickly return to specific sections.
Small details impact usability
Decisions around button placement, naming, hierarchy, and confirmation states required careful consideration because even small inconsistencies can create confusion in an otherwise straightforward flow.
Maintaining consistency is important
Keeping review cards, draft cards, modals, and actions visually consistent helps users understand how different parts of the review experience connect.
.png)
I hope you found something worth exploring.