Homework Helper
Splash image showing the Homework Helper interfaces at different responsive window sizes.


2 months


UX/UI Designer


Breakpoints (Figma plugin)
Google Sheets


Jordan Kolb (Designer)
View prototype


Brownstone Tutors needed to revamp their internal homework assembly software.
It allows tutors to compile test questions into a PDF that they can assign to their students.


It was created by only a single developer.
Tutors needed a 2-page manual to know how to use it.
Only 1 month before the SAT-tutoring season begins.


I conducted user interviews and delivered a user-friendly re-design on time.


The Existing Setup

Homework Helper is a proprietary tool of Brownstone Tutors that lets employees compile SAT-prep questions into a PDF which they can then print out and assign to their students. It was developed solely by one of the full-stack developers at Brownstone Tutors and lacked the necessary usability that employees needed.

A list of items from the original homework helper interface.
A mockup of the original homework helper interface.

The Homework Helper tool required a two-page tutorial document to understand how to navigate it. This wasted valuable time that should be spent helping students. It discouraged employees from using it in the first place.

Homework Helper tutorial screen, blurred out to hide sensitive info.
Homework Helper tutorial screen, blurred out to hide sensitive info.


Understanding the Users

The tutors that use this program are in their mid-20s to 30s, graduates of prestigious universities, but not necessarily the most tech-savvy. I advocated the benefits of taking some time to run user interviews. He put me in touch with several employees at Brownstone Tutors.

Key takeaways after synthesizing our user interview notes after speaking with 8 employees:

The system was far too crowded. Too much information was present which overwhelmed users' cognitive load and caused them to abandon the tool.

Important features were missing from the existing system. Being unable to rearrange questions is a huge pain point.

How users were supposed to filter results to even find the questions they wanted to use was unwieldy and unclear.


Breaking Down the Process

The original interface was only a single screen. This cluttered interface needed to be broken up in order to gradually introduce the user to more relevant information. This would both limit cognitive load and allow newcomers to parse what they are seeing on screen. Creating a user flow was necessary to figure out the most logical and convenient way to separate the information.

User flow showing the path from entering the app through finishing assigning homework.


A Cohesive Layout

I worked with the stakeholder and the developer on some initial sketches that addressed the concerns brought up during user testing.

Hand-drawn sketch of new homework helper interface
Hand-drawn sketch of the new homework helper interface save screen

Given that the Homework Editor still contains multiple elements on a single screen. I felt it made the most sense to have the order in which interactions will typically occur go from left to right.

Chart showing the layout of elements on the page. First is Filter, Second is Master Question List, Third is "Homework Edit," and Fourth is the Save button.

Adding in the Details

I went into Figma and created a mid-fidelity prototype for usability testing.

I made sure to test the mid-fi with people from the company and outsiders. I did this to ensure that everyone, even potentially new hires, could figure out how to navigate the new and improved Homework Helper.

Mid-fi mockup of the homework helper interface.
Mid-fi mockup of the homework helper interface.


Usability Testing Feedback

Key takeaways after usability testing with 4 employees from the company and 4 outsiders:

Users tended to search and add all the questions they wanted to the homework sheet first. Afterwards, they would go into the edit screen and rearrange from there.

Users did not like that they couldn’t keep tabs on the questions that they already added to homework. Having to frequently go back and forth between pages was frustrating.

Users unanimously preferred a drag-and-drop method to homework rearranging instead of using an up and down arrow button set.

Users thought that the Save/Assign button was related to the filters and not to the homework assignment as a whole.

After feedback from our initial usability test, we knew we needed to redo the layout. We now divided the screen into adjustable thirds that maintain the order in which the user interacts with the tool.

Chart showing the layout of various elements. First is Filter, Second is Master Question List, Third is the Homework Sheet section, and Fourth is Save.


Adjusting to Feedback

Going from left to right, the user searches the filter to narrow down the question list, then they use the question list to add problems to the homework sheet.

I made sure information was gradually introduced as the user interacted with the Homework Helper.

High-fi Mockup of the Homework Helper interface

Since users disliked going back and forth between screens, now they can add and remove homework problems from the primary view.

Questions added to the Homework section can be drag-and-dropped to re-arrange the order.

High-fi Mockup of the Homework Helper interface

When the user is done finding questions, they can navigate to the "Review Homework" screen.

This provides the user with a view of only the homework questions which, like before, can be drag-and-dropped to the tutor's liking.

High-fi Mockup of the Homework Helper interface

Making it Responsive

It was very important to make this prototype responsive. A tutor might also have notes about their student, a calculator app, or an internet browser open simultaneously.

I used a combination of nested Auto-layout components and the Breakpoints Figma plugin to recreate how the screen would look when the window itself was resized and when individual sections of the page were resized.

View prototype


Users expressed how much they enjoyed the new tool!
Tutors on average saved 10 minutes per session that would have been spent compiling homework sheets manually.
Increased tutor productivity by 15%.

My work led to an increase in overall company productivity! Tutors now enjoyed using the Homework Helper tool, which led to them spending more time helping students. Now that they can compile homework and place each problem in their proper order, they can more closely teach students how they want to.

Working on the Homework Helper tool was a nice, small, and more tightly focused exercise in designing. I learned how to adjust my traditional workflow for a smaller, more centralized user base. I also gained plenty of knowledge of responsive design and structuring in Figma!

A laptop and phone mockup of the desktop and mobile interfaces of the Timesheet Entry app.Hi-Fi laptop mockup of the Homework Helper interfaceHi-Fi phone mockup of the Jitter interface.
© Jordan Kolb 2023