Role: UX researcher, UX Designer, Interaction Designer, UI Designer

Duration: 80 hours

Tools: Sketch, Adobe Illustrator, InVision, AirTable

Team: Self Directed, with guidance from mentor

Challenge: Schools in the U.S. are more diverse than ever before, with the number of charter schools growing six-fold in the last 6 years, and over half of public schools now allowing children outside of their residential zone to enroll. Because of this, parents today have much to consider when it comes to choosing a school for their child. While most schools and districts have websites, it can be a daunting task to compare schools by specific criteria and consolidate all of the information.

Classifind is the solution for parents overwhelmed with the amount of choices and lack of informational resources when it comes to finding the right school for their child. The goal of this project was to design an end-to-end iOS app that allows users to search and filter elementary schools by geographic location, name, type, and other specific criteria.

Secondary Research

Assets: Research Plan, Market Research, Competitive Analysis, Provisional Personas

Considering that Classifind is a product that does not yet exist, secondary research was extremely important in order to first and foremost understand who would be potential users of this app and determine the specific needs that these users have. I began by conducting market research on the education industry, as well as the growing trend of school choice to confirm that there is indeed a public need for this app, and also better understand how potential users currently find and compare information on schools.

I then paired my market research with a competitive analysis study to determine what other products currently serve our user base and analyze their strengths and weaknesses before building our own unique product. While I found no other direct competitors, our most formidable competitor proved to be GreatSchools.org and the real estate apps Trulia and Zillow that have paired with GreatSchools. Despite this, we were able to identify areas in which all three were lacking.

Primary Research

Assets: Interview Guide, Interview Transcript, Empathy Map, Persona

To dig deeper into the needs of potential users, I sought out to conduct user interviews with 5 individuals that fit the targeted demographic on my research plan. Throughout interviews, I asked open ended questions about how participants researched schools for their children, and what the determining factors were when deciding what school to enroll their children in.

Interviews were terminated once I began to see significant patterns in the answers provided by participants. I then began to synthesize all of the information in an empathy map, and drew out 4 main insights and user needs. With this information, I then built a user persona that would guide me throughout the rest of the design process as I was consistently reminded of who I was designing for.

Ideate & Define

Process: POV statements and HMW Questions • Rapid Ideation • Business & User Goals • Product Roadmap • Sitemap

POV statements & HMW Questions

With the insights and needs drawn out from my empathy map, I was able to create POV Statements and HMW questions to begin brainstorming design solutions for our user persona’s needs.

Using my How Might We questions, I conducted a rapid ideation session in which I came up with as many design solutions as possible for each HMW question within 3 minutes. I repeated the process twice to make sure that I had generated as many ideas as possible. Many of these ideas shaped my wireframe sketches, ensuring that I keep the user’s goals and needs at the heart of my design process.

Business and User Goals

Before beginning actual designs, I also made sure to again outline the user goals and examine how they overlap with our business goals in order to ensure that the design of the app meet the needs of both the business as well as the users.

Product Roadmap & Sitemap

Assets: Product Roadmap, Sitemap

With our goals established, I then created a product roadmap to decide what features would need to be included for this MVP, and prioritized them by user goal, effort level and confidence level.

From there I created a sitemap to map out the overall structure of Classifind, including features on each parent and child screens. The product roadmap largely informed what features would be included, and I made reference to competitor apps as well as Mobbin Design Guidelines and Material Design Guidelines, to ensure that the app’s organization would fit users’ mental models.

Interaction Design

Process: UI Requirements • Task Flows • User Flows • Low Fidelity Wireframes • Mid-Fidelity Wireframes

UI Requirements

Assets: UI Requirement Document

Exploring how different users might interact with the app given varying circumstances is a crucial step in determining what screens to design, and what actions may be carried out on each screen.

Thinking back to my early research and one and one interviews, I considered what the primary needs for this app were, and therefore, what primary tasks would need to be carried out by a majority of users. For that reason, the tasks established in these task flows would eventually allow us to test a few different crucial things: 1) The ease of assessing convenience, 2) The ease of assessing reputation, and 3) The ease of finding reliable information.

With these tasks in mind, I created a UI Requirements document where I outlined what screens would be designed for the MVP as well as the detailed requirements of each screen.

Task & User Flows

Assets: Task Flow Diagrams, User Flow Diagram 1, User Flow Diagram 2

With the three critical user tasks established in my UI requirements document, I set out to map how users would go about accomplishing each task in a task flow diagram. From there I then created two user flows to further explore how a user might interact with the app given various scenarios, and consider what different screens they would interact with, and what actions they might carry out on different screens.

Low Fidelity Sketches

Assets: Low-fi Sketches

Using my task flow diagrams, as well as my sitemap, UI requirement document, I began sketching the primary screens necessary for users to complete those various critical tasks that would later be tested.

Mid-Fidelity Wireframes

Assets: All Mid-fi Wireframes

I then created mid-fidelity versions of the most prioritized screens in Sketch while consistently referencing my sketches, as well as Apple’s human interface guidelines and Mobbin design.

Process: Prototype • Usability Testing • Revisions • UI Design • High Fidelity Wireframes

Prototype & Usability Testing

Assets: Original prototype, Usability Testing Plan, Usability Test Notes, Affinity Map

I decided to create a prototype on Invision using the mid-fidelity screens, with the hope that participants would focus on the structure and layout of the app’s design, rather than the UI. In preparation for usability testing, I created a usability testing plan that outlined 3 scenarios and various tasks that would allow me to test the effectiveness and efficiency of the designs.

Usability testing occurred over the course of a Sunday afternoon at a coffee shop, where I was able to recruit 5 participants that fit the targeted user demographic for Classifind. The following day, I used my usability test notes to synthesize participant feedback through an affinity map. By grouping common moments of confusion and frustration, I was able to consider what aspects of the designs were contributing to these pain points, and consider what might be done to eliminate those frustrations.

Revisions

Affinity mapping allowed me to pinpoint two areas of concern: 1) Confusion with regards to what school zone meant and where to access that information, and 2) Confusion with regards to searching and filtering .

To solve for these issues, I removed the “See School Zone” button from the main school screen and created a button on the main search screen that would allow users to access different views of the map, including the district maps.

As for the second revision, the helper text in the search box was changed simply to “search”, so that users would be aware that they can search anything, whether it be a school, city, neighborhood, or keyword.

UI Design

Assets: Brand Logos, Style Tile, UI Kit, Final Prototype

With these revisions in place, I began to work on the app’s UI and visual design. I first considered the brand’s attributes: ambition, creativity, youthfulness, vivacity, simplicity, and ease. This allowed me to establish a color palette of purple, representing ambition, and coral, representing vivacity. From there I created a brand logo that was modern, playful, and simultaneously hinted toward the central purpose of the app. The other visual elements that would be put towards designing the final high fidelity wireframes were outlined in a style tile and an early UI Kit.

Iteration

The next steps in this project would include further usability testing of design updates, if time and resources allowed. Designing the subsequent screens would also be highly prioritized, as well as considering screens for users to to sign up, log in, and become verified as school admin or parents. This would ensure that users are provided with accurate, reliable, and updated information on the schools they are researching.

Furthermore, if this product was going to be successfully rolled out, we would need a strong marketing strategy team to reach out to schools throughout the state or country to become involved, in order to provide information to us, as well as build a user base leading up to launch. Major technical questions would also need to be addressed, such as finding a way to access school performance data, likely via state and federal education departments’ public databases, and representing this data on our own platform.

Reflection

As a former teacher, this project developed as a passion project of mine as I quickly saw how difficult it was to find specific information on schools, and personally saw many parents struggling to decide where to send their children to school. With schools today becoming more diverse than ever, and parents having to consider factors from convenience to cost to diversity to overall school climate, it can be a challenging task to maneuver through multiple poorly designed and outdated district and government run websites. It’s important that parents have resources available to them to weigh their many options, and the multiple factors that play into that decision, while simultaneously allowing all schools the opportunity to showcase their strengths and dismantle stereotypes.