top of page

Opportunity Statement

The existing system is unwieldy to use and difficult to parse information out of, thus lowering efficiency. How can we provide the tutors at Brownstone with a quick and easy way to compile SAT questions to send to their students?

Overview

Brownstone Tutors needed to revamp their existing Homework Helper tool.
Designed by only a single developer, tutors needed to read a two page instruction manual in order to navigate the site.
Homework Helper allows tutors to compile SAT questions into a PDF that they can assign to their students.

Methodologies

Brand matrix | User interviews | Contextual inquiry | Affinity mapping | User persona | Competitive/comparative feature analysis | Feature prioritization | Design studio | Rapid prototyping | Wireframing | Usability testing

Overview

ToRide is an original mobile app for casual riders who need more motivation to go outside and ride their bike. Our goal was to improve the motivation
of beginners who want to get into biking as a hobby.

Intro Image 2x.png

Homework Helper

Methodologies

User interviews | Contextual inquiry | Affinity mapping | Feature prioritization | Design studio | Rapid prototyping | Wireframing | Usability testing | Responsive Designing

Overview

Brownstone Tutors needed to
revamp their existing Homework Helper tool.
Designed by only a single developer, tutors needed to
read a two page instruction manual in order to navigate the site.

Homework Helper allows tutors to compile SAT questions into a PDF that

they can assign to their students.

Opportunity Statement

The existing system is unwieldy to use and difficult to parse information out of,

thus lowering efficiency. How can we provide the tutors at Brownstone with a quick and easy way

to compile SAT questions to send to their students?

Duration

2 months

Role

UX Designer

Tools

Figma
Breakpoints (Plugin)
Miro
Google Forms

Team

Jordan Kolb

Autumn Dornfeld

Research

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.

image 1.png
Frame 22.png

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

Methodologies

Brand matrix | Screener survey | User interviews | Contextual inquiry | Affinity mapping | User persona | Journey mapping | Competitive/comparative feature analysis | Feature prioritization | Design studio | Prototyping | Wireframing | Usability testing | Iterative design

Tutorial 1.png
Tutorial 2.png

(Instructions document blurred out due to containing sensitive information)

This provided a clear goal to the team. How can we improve increase company productivity by making the Homework Helper more usable?

Understanding the Users

The users for the Homework Helper are entirely internal employees. I made sure to conduct  the stakeholder interviews to determine if there would ever be any plans to monetize this service, to which there was not.

The tutors that use this program are in their mid 20s to 30s, graduates of prestigious universities, but not necessarily the most tech savvy. Gathering qualitative data from these users would provide us valuable data. I talked to the stakeholder who put me in touch with the employees at Brownstone Tutors.

Direct Contact with Tutors

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

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

Middle.png

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

Right.png

The way in which users filtered results to even find the questions they wanted to use was unwieldy and unclear.

The tutors showed clear understanding of basic computer competency. They knew exactly what they wanted to be able to do, and explained it to me in terms befitting someone who has used this kind of technology in the past. I was able to establish a base level of understanding of my users.

The base product can do that they want it to do. (sans rearranging) Navigating how to do it is the main difficulty.

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 site map was necessary in order to figure out the most logical and convenient way to separate the information.

Site Map.png

Design

I worked with the other product designer on a design studio session. This way we could rapidly iterate ideas back and forth as to how we were going to represent each screen in the user flow.

Layout 1.png

Given that the Homework Editor still contains multiple elements on a single screen. We devoted time to mapping out where the location of features should be. We placed the filter on the left hand side since that’s the first step the tutor needs to do in order to reveal the list of questions. These questions will go in the middle and adding them to the homework sheet will be on the far right.

IMG_9432 1.png
IMG_9433 (1) 1.png

Adding in the Details

Next, we went into Figma and created a mid-fidelity prototype to usability test. We made sure to not only usability test the mid-fi with people from the company, but also outsiders.

We did this to ensure that everyone, even potentially new tutors to the company, could figure out how to navigate the new and improved Homework Helper system.

Homework Creator Mockup New.png
Homework Creator Mockup New View Selected.png

Usability Test Feedback

Key takeaways after usability testing with 5 employees from the company and 5 outsiders.
Group 161.png

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.

noun-drag-and-drop-532906 1.png

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

noun-tab-161444 1.png

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.

noun-download-3350477 1.png

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 inital usability test, we knew we needed to redo the layout. We now divided the screen into adjustable thirds that still maintains the order in which the user will interact with it:

Group 160.png

Adjusting to Feedback

The user searches the filter to narrow down the question list, then they use the question list to add problems to the homework sheet. In order to mitigate the cluttered-interface pain point, I made sure information is gradually introduced as the user interacts with the Homework Helper.

Homework Creator - Empty.png
Homework Creator - Filters and Problems NEW Alt.png

We initially avoided adding a drag and drop feature because we did not have a developer during this stage of the project. Being able to consult one earlier in the process would have been helpful, but we were finally able to get confirmation that dragging and dropping would be feasible to implement.

Homework Creator - Edit Homework NEW 3 alt.png
Homework Creator - Edit Homework NEW Dragged alt.png

Making it Responsive

Since this tool is going to be used on tutors’ laptops, it was important to make it responsive. A tutor might also have notes about their student, a calculator app, or an internet browser open simultaneously.

I used the Breakpoints Figma plugin to recreate how exactly the screens would look while re-sized.

ezgif.com-gif-maker.gif
ezgif.com-gif-maker (1).gif
Homework Creator - Filters 6.png
Homework Creator - Filters 7.png
Homework Creator - Filters 8.png
Homework Creator - Edit Homework NEW 3 alt.png
Homework Creator - Edit Homework NEW 3 alt-1.png

(Some more responsive designs of the homework Creator side of the platform)

Conclusion

Group 99.png

My work led to an increase in overall company productivity! Tutors now enjoyed using the Homework Helper tool and it led to them being able to spend more time helping students. Now that they are easily able to compile homework and easily place each problem in a proper order, they can more closely teach students the way they want to. Internal systems can be just as fun and satisfying for the user as a B2C product.

Working on the Homework Helper tool was a nice, small, and more tightly-focused exercise in designing. I learned how to adjust my traditional B2C UX workflow for a smaller, more centralized user base.

I also gained plenty of knowledge with responsive design and structuring in Figma that I will take to my jobs moving forward!

Read other case studies!
to ride next page alt.png
ToRide
Jitter next page.png
Jitter
bottom of page