Typing Club: Solving an Information Architecture Problem

Typing Club is an educational startup with a product used in schools across the country to teach touch typing. Teachers who use the product were having trouble remembering how to navigate through the classroom manager to find key features. Our improved design also needed to be scalable to Typing Club's future plans to create product lines in other disciplines.

My Role: Competitive Analysis, User Interviews, Ideation and Sketching, Wireframes, Usability Testing, Client Presentation
Tools: Typeform, Google Hangouts, Omnigraffle, Axure, Illustrator
Team: Jeanna Kim, Julia Christian, Nina Baliga
Duration: 2.5 weeks
Scroll for Full Case Study

Competitive Analysis

The team started the project off by studying how other touch typing products and educational products implement reporting features and site navigation in their teacher portals. The main competitors in the touch typing space that we analyzed were TypingAce, TypingPal, TypingWeb, TypeScout, and EduTyping. Other educational products that we looked at were Khan Academy, Academic Earth, and EverFi.

Key Takeaways:
  • Simple UI is a more effective way to convey information
  • Reporting features should be prominent and highlight useful information for teachers
  • There should be a balance between features, the ability to customize settings, and ease of navigation

User Research

We used both user interviews and surveys to capture data from users of the product and potential users of the company's future product lines. The teachers that we interviewed and surveyed had a range of teaching experience from 1 to 25 years. Overall, schools seemed to be adopting more technology as effective educational products begin to emerge in the market.

Key Issues and Pain Points:
  • Teachers feel that there are not enough hours in the day to accomplish everything
  • There tends to be a high learning curve for new technology
  • Teachers wanted to be able to use the product to highlight student outliers (students performing exceptionally or poorly)
  • Teachers were having difficulty replicating actions and finding key features

Personas

We created personas based on our user research to reflect the needs and goals of the teachers with whom we spoke. This helped us target the areas that we needed to focus on in improving the user experience of the current TypingClub interface.

Client Engagement

Having the client come and participate in our sketching sessions was critical throughout the project because they had intimate knowledge about the users and the way the product is used. By having the client participate in the sketching, we were able to discover more details on the issues that the client wanted us to address, and potential ways to improve performance and functionality.

Key Takeaways:
  • Provide teachers with more actionable items and the most relevant and useful data
  • There should be less digging to get to key features like progress reports and manage class activities
  • The navigation within the teacher portal needs to be consolidated and reorganized
  • Use prime real estate areas for the most important features

Processing Information + Idea Generation

Whiteboarding as a team played a major role in allowing us to process information, map out user flows, generate ideas, and solve problems that we came across while working individually throughout the project. While we did not end up implementing everything that we drew on the board, each session provided us with valuable insights leading to the final design. Some examples of insights developed through whiteboarding include personas, user flows, page layout, and information architecture.

Creating a New Information Architecture

We wrote down every single feature within the current classroom manager on post-it notes and held a card sorting session to determine the best way to reorganize the navigation and eliminate redundant information.

Changes Made to IA:
  • In order to assign a lesson plan to a class, teachers needed to be in the "classes tab" rather than the "lesson plans tab". To add more clarity to this functionality we separated it from the "classes tab", making the "classes tab" strictly for managing classes and the "lesson plans tab" for finding lesson plans and assigning them.
  • Within the "classes tab" there were many features that were separated out into multiple pages by subnavigation. To reduce the number of pages within the "classes tab" we grouped features in similar categories together.

Sketches + Wireframes

At the start of the ideation phase, we made sure to keep an open mind by sketching and whiteboarding different ideas. Once we figured out the direction that we wanted to go in, I began to create wireframes of the "classes tab" while my teammates worked on starting to put together our client presentation. After several iterations, I consulted my teammates and did some quick user testing with other classmates to see if they were able to identify where to click to find key features that teachers need on a daily basis. We also were able to do a user test with a teacher who actually uses the product over Google Hangout and discovered some important usability issues that we needed to address.

Usability Issues to Address:
  • With the iteration that we were leaning more towards, the "classes tab" was separated out with tabs for each class that a teacher has. While users greatly appreciated the ability to easily switch from one class to another, one issue that we uncovered was that users were having difficulty establishing a hierarchy of information because all of the features for a class were displayed on one page.
  • Another iteration included an intial page with a list of classes where the teacher would select a class and then move into the classroom manager where all of the features would be grouped into tabs based on the type of feature. With this iteration, users were able to more easily establish information hierarchy on each page, but they had to go through more steps to find the information.

Recommendations to Client + Lessons Learned

We presented our competitive analysis, research findings, personas, and recommendations to the client. Included in our presentation were a mockup for the classroom view that Julia created based on our user testing results and a demo of a clickable prototype created by Nina. Overall, the client was impressed that we were able to take their complex site architecture and think about new ways to simplify the interface.

Lessons Learned:
  • Due to the short timeframe of this project, we were not able to study a wide range of users and user behaviors. Our recommendation to the client reflected the research that we were able to do, but had we had access to more information we may have selected a different iteration of the design as our recommendation.
  • Having done multiple iterations of the wireframes proved to be invaluable because the client had a concern about the scalability of one aspect of the design that we recommended and we were able to refer to a different wireframe that addressed the concern that they had.

Before + After

Before - Manage Class View

before view of the product

GET IN TOUCH

I look forward to speaking with you.

Jeanna Kim

Washington, DC

Website made with Bootstrap