DraftSchoolwio Case Study

Fixing Problems Inside an Organization with a Startup Mindset

The end goal of this project was to create a new brand and application to help teachers track students' behaviors. The company I work for has a solution for this currently. However, I started to notice problems and ways we could improve our design, development, and business strategy. I tried to implement a few of these ideas into the current product. However, A green field project ended up being more appropriate. It allowed us to experiment without breaking user flows, harming brand integrity or dealing with development debt. The case study is in a problem and answer format. It is not in the linear progression it was developed in. My roles in the project were UX researcher, product business analysis, graphic designer, user interface designer, and developer. The application is currently in private beta. All the animated examples are from the React application.

Brand

Problem

The current brand, is closely tied to the PBIS Framework. The framework is used to positively incentivize students for good behavior. Our brand and naming strategy was easily recognized by our customers. They quickly understood the pain point we were solving for them.

However, our product does things outside of the PBIS framework, which some have criticized us over. The close association to the framework required us to have a more authoritarian appearance. Lastly, this limited our market reach to only school's that used the PBIS framework.

Solution

The new name Schoolwio added the acronym WIO standing for Work It Out to the end of the word school. Stating who it was for and where it could be used but not how things should be done. The name and brand was meant to appeal more to the end user which was teachers working in the kindergarten through eighth grade space. Everything is curved, rounded and lower case to convey more of a friendly tone. The vibrant secondary colors make the brand cheerful, energetic and fun.

Information Architecture

Problem

The current application has a group's page where a user can make a small group of students from their school to interact with them more easily. Through Google Analytics and talking to users, we determined that most teachers spend their time on this page. However, the user flow on the current page wasn't intuitive and it took users a while to understand how to use it. I attempted to fix the page with some minor adjustments in current application, but it would break the users current workflows.

Solution

After fixing a few problems with the current group page layout and applying the user flow to the entire application, the user could accomplish all tasks without leaving the page. The layout allowed users to only see appropriate actions and information based on their last selection. As seen below, the user has selected students on the left panel which changes the actions in the top nav. Since, reward is selected in the nav, the students' cards are displaying their current points and the reward panel on the right is visible.

Same Action Different User Type

Problem

The company has a product where teachers can request and reward points for various activities. The user goal is similar to the student application just for teachers. However, the teachers must open a different application and perform a completely different flow to complete a similar task.

Solution

Adding another user type for teacher in the left panel, the actions at the top could change in the application based on a selection. So, now teachers can reward and request points without leaving the application, along with any other actions that might be only for teachers to interact with each other.

The Feed

Another feature to improve teacher communication is the feed. It is a record of what is going on at the school: announcements, past drills, new users, teacher praise, other teacher classroom activities, and seasonal digital bulletin boards. Also, it introduces a place where we could have promotions for additional features and training or events.

Parents User Type

Parents are another user type in the application with different actions. Most of the interactions between teachers and parents in the application are in messaging. So, when selecting the parent user type on the left side, the application view in the center changes from a card to an inbox row layout. As seen in the animation below, a user can switch the view from card to row in all user types and actions in the application.

Current Sales Process

Problem

Currently, the only way a customer can see our product's value is through a live demo or video. The groups page is one of the main selling points of the application, but it is usually too much information to take in at once. The user needs to fall in love with the product before a school or district purchases it.

Solution

A product-led approach where the user could use the product with a free trial or a low monthly rate. Allowing multiple teachers in a school to see the value of the product without the sales team. Lowering the friction to larger sales at the district level.

Our current application can't be sold to an single teacher for use in one classroom because of a technology limitation. The entry into the market was to start offering this application to users who were unable to purchase the current one.

Technology

Problem

There are many problems with a current technology stack. We are not using a framework or components, so developers must copy and paste code to make the application consistent. Making the layouts responsive in the application is difficult because of the inconsistent layouts and the amount of CSS technical debt. Lastly, many pages in the application need to be refreshed to see new information.

Solution

Using an Atomic Design component based approach with React and Storybook allows for a quick and consistent development process. Also, adding Firebase NoSQL backend allows for quicker builds and experimentation. The combination of React and Firebase allow for information to update on the page without the user refreshing.

Customer Feedback on Brand

Potential customers were asked: who they thought the brand was for, what age group, and if it made them think of any other brands. The findings were mostly positive responding with a playful technology company for teachers. However, the age group of students suggested were a bit younger than the target market. So, minor adjustments were made to the site.

• Reduced some of the color variation in headlines
• Down played color pallet by replacing some colors with pastels
• Removed cartoonish illustrations with older kids
• Added more supportive text

Marketing Site

Usability Testing

During usability testing, users could easily find what they needed in the application's left and top navigation. Also, creating groups and adding new students weren't a problem. The main problem during testing was the clicking and dragging process of adding a student to a group. In the browser, teachers do not use applications with this mechanic. Most users went to the search bar to find a student to add to the group. Two solutions were put into place. The first was to add the functionality in the location where the user naturally went. The other was to add helper text and a link to a tutorial to help the user understand this core piece of functionality.

Research User

Problems

I did several user interviews with different professionals that specialized in student behavior. There was always a story of an interaction with a student with a behavioral problem caused by an external factor, and the staff member was unaware. They would later find out that the information was in an accessible silo that they didn't regularly check.

Persona Development

Lead Persona Development Workshop

Solution

The overview page is an inbox for external factors that might affect a student's behavior. One secure place to communicate, manage, and address student's issues as they come in. A simple line graph to show over time if the issue causes a behavioral change.

Outcome

Solution

• A friendly brand aimed at the end user teachers
• A more intuitive product so users can start falling in love without a demo or training
• Multiple user types in one application
• A free trial and low cost to entry so a teacher can try our product
• Updated technology so our application is responsive