Designing the first
mobile friendly
Teacher Marketplace

Mobile design · Responsive design· Product design

Introduction

The Teacher Marketplace is the central platform where educators browse and apply for available classes each semester. Unlike traditional job boards, where applications remain open for extended periods, Elevate K-12 classes operate on a first-come, first-served basis. Pre-approved teachers who apply for a class are allocated instantly, making speed and accessibility critical.

Until this project, the Teacher Marketplace was only available on desktop. Teachers frequently voiced their frustration about missing out on class opportunities due to lack of mobile accessibility, which was also reflected in support tickets and internal feedback. However, teachers needed a way to access and apply for classes on the go. If they had to wait until they got home to log in, they risked missing out on the best opportunities. Many teachers had already been attempting to access the desktop site from their phones, highlighting the urgent need for a mobile-friendly solution.

my role

Responsible for research, conceptualization, design, user testing, delivery of key modules and feature areas, accessibility considerations, and stakeholder communication

the team

1 Lead Designer (me), 1 Design Director, 3 Product Managers, 15+ Engineers, and multiple internal stakeholders

timeline

June 2024 - August 2024

the goal

With the new school semester just two months away, we needed to design and launch a mobile-friendly version of the Teacher Marketplace within an extremely short timeframe. This meant balancing speed with usability, ensuring that teachers could easily browse, filter, and apply for classes on mobile while working within the constraints of Elevate K-12’s existing framework.

Building from Scratch...Within browser Constraints

Although we were building the mobile experience from scratch, it wasn’t a fully independent app, it was a browser based mobile version of the desktop Teacher Marketplace. This meant we had to mirror the desktop experience on both the front and back end, which introduced several constraints:

Design limitations: We had to maintain visual and functional consistency with the desktop.

Technical constraints: The back-end structure was built for desktop, so we had to ensure mobile compatibility without breaking existing functionality.

Navigation challenges: Desktop workflows didn’t always translate seamlessly to mobile, requiring thoughtful adaptations.

Research & Approach

Before diving into wireframes, we researched how browser-based apps function and examined platforms like LinkedIn, Sephora, and Indeed to understand best practices. Since the mobile version had to align with the existing desktop experience, we prioritized translating interactions into mobile friendly components while keeping the interface familiar for teachers.

Given the limited timeframe, we also relied on existing user feedback and behavioral data from teachers struggling to access the desktop site on mobile. This approach allowed us to make informed design choices efficiently.

Wireframes & Prototyping

I started with sketches and mid-fidelity wireframes to outline the core structure. After early feedback, it became clear that the mobile attributes needed to match the desktop version closely. Because this was a browser-based app, the back-end coding couldn't change significantly. As a result, the mobile flow needed to mirror the desktop flow. We could break things up or hide certain elements, but we couldn’t introduce entirely new features.

Bridging Desktop and Mobile Experience

Since I had proactively planned for mobile breakpoints during the desktop design phase, each step of the desktop flow was strategically adapted into mobile screens. This approach maintained consistency between platforms, ensuring that teachers wouldn’t need to relearn the process.

Solving for the Calendar Challenge

One of the biggest UI challenges was adapting the calendar interface for mobile. The API we used wasn’t flexible, limiting our ability to modify the design. Our solution was to implement different calendar views for desktop and mobile, selecting the most effective layout for each device. This was necessary because teachers needed a clear, efficient way to view their schedules without unnecessary scrolling or confusion, ensuring they could confidently select and apply for classes.

Collaboration & Iterations

Throughout the design process, I worked closely with engineers and PMs to align on what was feasible within the existing framework. To keep development efficient, I focused on essential flows for the MVP, ensuring that we built a strong foundation that could evolve over time.

Our feedback came from internal teams who work closely with teachers and the Teacher Marketplace. While they were not involved in the design process, they had deep insight into teacher needs and pain points. Their perspective provided the closest, most honest feedback we could get within our time constraints, allowing us to refine usability and ensure the mobile experience aligned with real-world teacher workflows.

Impact

REFLECTIONS

This project reinforced the importance of designing within constraints while maintaining usability. There were a lot of cool, fun ideas that were brought up, but I learned to prioritize what needs to get done. This project demonstrated how thoughtful UX decisions can directly impact both users and business operations. By making class applications more accessible, we improved teacher engagement and scheduling efficiency.

Moving forward

Gather post-launch feedback from teachers to identify any pain points.
Optimize key workflows, such as improving filtering and search for faster class discovery.
Explore adding push notifications to help teachers stay informed about new opportunities in real time.

Designing the first mobile friendly Teacher Marketplace