Case Study:
”Sub In” Mobile App and Responsive Website
Role
Brand Creator, Lead UX Researcher, Designer, and Writer
Duration
6 Weeks
July - August 2022
Deliverables
Background Research, User Research, Personas, Wireframes, Mockups, Prototypes, Usability Testing and Synthesis
Tools
Adobe XD, Google Suite, Whimsical, Dribbble, Unsplash, Blush
National Education Association (NEA), Illinois State Board of Education (ISBE)
Overview
Sub In is a mobile app and responsive website that seeks to solve one of the foremost issues facing schools today: the staffing crisis. Sub In functions as a centralized database for each state’s substitute guidelines and provides individuals with the guidance and support they need to become a substitute teacher in their state of residence.
The process of becoming a substitute teacher in the United States is decentralized, with each state having unique processes and guidelines. Navigating the process of becoming a substitute teacher is confusing and overwhelming for users.
Problem
I created this fictional brand/company and corresponding app/responsive website for two reasons, 1.) to serve as a tool that aides users on their journey to become a substitute teacher (this Case Study focuses on Illinois specifically), and 2.) more broadly, to serve as a tool that may ameliorate the school staffing crisis.
Solution
Stage 1: Empathize
Background Research and Discovery
Understanding the School Staffing Crisis
• Teachers in the U.S. are struggling and 90% of teachers surveyed by the National Education Association (NEA) feel “burned out”
• Education as a whole is facing an “unprecedented staffing crisis across every job category”
• 74% of teachers have had to “fill-in for colleagues” and assume additional responsibilities due to the current staffing shortage
• 93% of respondents reported a need to hire additional teachers, and 92% of teachers also expressed a need to hire additional support staff, including (but not limited to) paraprofessionals, teaching assistants, and substitutes
* Jotkoff, Eric. “NEA Survey: Massive Staff Shortages in Schools Leading to Educator Burnout; Alarming Number of Educators Indicating They Plan to Leave Profession.” NEA: National Education Association, 1 Feb. 2022.
Surveying Current Educators
• In a survey I conducted among 15 education and childcare professionals, ranging from the pre-K age group to College professors, the NEA research findings were echoed regarding burnout and staffing shortages
• Of the respondents, 87% have experienced anxiety in the workplace
• 73% of respondents reported a lack of time as a significant issue, noting that they have been required to use their plan periods to fill in for absent staff
• 67% of respondents have seriously considered leaving the education/childcare field within the past 3 years
Current Educators Reflect
User Research
On July 22, 2022, I conducted interviews among non-educators regarding the current usability process of becoming a substitute teacher in the state of Illinois. The participants were shown the Illinois State Board of Education’s current substitute license webpage and asked 5 questions:
If you want to become a daily short-term substitute teacher in Illinois, what are the requirements?
Do you need to have a teacher’s license to be a substitute in this state?
Can a retired teacher be a substitute in Illinois?
Show me where you would go to apply to be a substitute. Where do you fill out an application to become a substitute?
Do you understand the terminology used throughout these web pages? What makes sense? What doesn’t make sense?
“Educator Licensure: Substitute Licenses.” Illinois State Board of Education, https://isbe.net/Pages/Short-Term-Sub-Teach.aspx.Findings:
Surveyed users:
• Demonstrated initial confusion over the existence of different types of substitute licenses
• Struggled to understand career-specific acronyms like PEL (Professional Educator License)
• Expressed that the information provided was unclear and unnecessarily confusing
• Had difficulty finding the application to become a substitute
Stage 2: Define
User Pain Points
Inconsistent Processes
States vary in terms of their substitute requirements and application processes. This is intimidating and complicated.
To address this, a centralized substitute application mobile app/responsive website will be created.
Requirements Vary
The requirements and steps required to become a substitute vary WITHIN individual states.
This mobile app/responsive website will help users easily identify their state’s requirements and guide them through the steps of becoming a substitute in their state.
Confusing Language
The language used on individual states’ Board of Education pages is confusing and inaccessible to the average person.
Each state’s requirements will be rewritten in accessible language and acronyms will be defined.
Personas & Journey Maps
Based on initial user research, I created two personas:
1.) Stella Hatzi - “The Empty Nester”
2.) Mark Mendoza - “The Education Student”
These personas helped me put myself in the user’s position and understand their wants and needs. With that knowledge, I crafted a User Story for each persona.
Fleshing out these personas allowed me to create detailed Journey Maps of their user experiences and brainstorm possible pain points and opportunities for improvement with the Sub In app/responsive website moving forward.
User Story:
”As a retired librarian with two grown children, I want to become a substitute teacher so that I can support the local school district and help my community.”
Stella’s Journey Map
User Story:
”As an Education graduate student, I want to become a substitute teacher so that I can gain extra practice in a classroom setting and help relieve the stress level on teachers who are spread too thin.”
Mark’s Journey Map
Main User Flow
I mapped out the main user flow within the substitute app, which helped me begin to think more broadly about the app/website’s Information Architecture.
Site Map
The user flow chart allowed me to visualize what the site map of my app/website might look like.
Stage 3: Ideation
Initial Sketches
With the knowledge I gained through background research and user research, I began sketching out my ideas for the substitute app. To keep myself on track, I allowed two minutes to create each wireframe.
Paper Wireframes
Based on user pain points from my initial research, I began sketching out paper wireframes on my iPad of the substitute app Home Page. I wrote down the elements I wanted the Home Page to include, then I began iterating on my designs in 3 minute chunks.
I experimented with different tag lines, headings, and layouts, as well as placement of a call to action button. I also played around with the content of the bottom navigation menu.
Digital Wireframes
After I sketched out paper wireframes for each screen, I began turning them into digital wireframes in Adobe XD. As I worked on my wireframes for the mobile substitute app, I kept in mind the importance of addressing the two main user pain points:
1.) confusing language, and
2.) unclear guidelines about qualifications for being a substitute
The Home Page of the “Sub In” mobile app invites users to engage with the central purpose of the app via a clear call to action button that reads “Become a Sub.” Users are then placed on a step-by-step path to determining their qualifications and whether those qualifications mesh with the substitute regulations in their state of residence.
Users are pulled in through clear, concise, and descriptive language that explains the transformative impact they could have as a substitute teacher.
• There is a clear call to action at the top of the Home Page to engage users
• Users can quickly begin to understand the nature of the school staffing crisis and how their work as a substitute teacher can be transformative
• Users are given two choices for selecting their state of residence. They can use the drop down menu, or click on their state.
• Clear, concise language is used to increase accessibility
Once users complete Steps 1-4, they are prompted to create an account on the Sub In app. The perks of creating an account are presented at the bottom of the screen, and users quickly realize that in order to complete the process of registering to be a substitute in their state, they would benefit from becoming part of this community.
• Users are prompted to create an account on Sub In
• Users can quickly grasp the benefits of creating an account
Stage 4 & 5: Prototype and Test
Lo-Fi Prototype in Adobe XD
In my low-fidelity prototype in Adobe XD, users can navigate through the 5 step process of determining their qualifications to be a substitute in their home state. The prototype focuses on Illinois and their substitute regulations. The user is prompted to create an account on “Sub In” after Step 4.
Usability Testing
Usability Testing Round 1
Round 1 Usability Testing was conducted on August 3-4, 2022. My research goals were:
1.) to determine if users can complete standard tasks within the lo-fi prototype
2.) determine pain points and ways to improve the prototype
Findings
1.) Font size is important for emphasizing hierarchy. Adjust accordingly.
2.) Strong microcopy and placement of call to action buttons is a factor in retaining users.
3.) Spacing affects how users process information. Some users prefer less negative space, others prefer more. Find the middle-ground.
4.) Some users prefer narrative explanations, others prefer bullet points. Give users options. Keep accessibility in mind.
Affinity Diagram
Brand and UI Considerations
Before revising my wireframes or beginning my hi-fi mockups, I devoted time to thinking about the Sub In brand.
App Name, Wordmark, and Icon
When deciding what to name my app, I wanted a phrase that would be widely recognizable and immediately understood by users. Many people are familiar with the terms “Sub In” and “Sub Out” as they are used in various sports, and I felt that the name Sub In would quickly convey the intent of the app.
I created a Wordmark and icon for the Sub In app, as it might appear in the App Store. The “raised hand” represents the typical volunteering of students in a classroom, as well as volunteering to serve as a substitute teacher.
“Sub In” seeks to expand the substitute teacher pool through outreach, assistance, and ongoing support. We are the simple path to substitute teaching. Substitute teachers can make a transformative, positive impact on students, teachers, and communities. We’re in this together.
Brand Personality
Imagery Inspiration
• These images convey a sense of community and highlight the bond between teachers and students in a classroom setting, further emphasizing the need for substitute teachers.
• I wanted the images to evoke feelings of togetherness, teamwork, and collaboration, as those are qualities that substitute teachers can contribute to education, as well as qualities upon which the Sub In app prides itself.
Brand Attributes
Enthusiastic, personable, polished, convenient, playful
UI Inspiration
• These UI designs are simple and utilize negative space with colorful accents to highlight the most important components.
• Yellow and orange are colors easily associated with school (ie. school buses, pencils), and also evoke feelings of excitement, positivity, and warmth.
• While thinking about a brand icon, I first thought about the idea of raising your hand in class to volunteer, which easily connects to volunteering to become a substitute teacher. Hands can also connect us, which emphasizes the idea of community and teamwork.
Design System
In choosing the app’s primary and secondary colors, I went with variations of the three "standard primary colors” that we often associate with school: yellow, red, and blue.
Sub In Infographic
Accessibility Considerations
Clear, standard icons were used, along with clear headings and typographical hierarchy to improve accessibility and usability.
A grid was used to assure appropriate margins both for the mobile app, and for web. This allows all elements could be selected easily on any device. All text is 16 px or larger. Ample negative space is utilized to allow the eye to rest.
All colors were checked against the WCAG guidelines using WebAIM’s color contrast tool. All major visual elements that contain text are in line with these guidelines. Some decorative elements (like the light green boxes around text on the Home Page and About Us page) have a contrast ratio of 1.29:1, but that is the only color with a low ratio. Additional usability testing would be required to determine how much this impacts usability for those with low vision.
Iterations and More User Testing
Changes After First Usability Test
As I worked on my hi-fi mockups, I kept user feedback from Round 1 of Usability Testing in mind:
• focus on font size to emphasize hierarchy
• use of spacing/negative space
• placement of call to action buttons
• desire for brevity
Usability Testing Round II Findings
After Round 2 of Usability Testing (August 16, 2022), I gained additional feedback that resulted in these findings:
• Simplify/shorten text on Home Page for accessibility and appeal to broader audience.
• Ensure consistency and organization of UI elements.
• Provide more information on roles that substitutes can fill – not all subs need to be in classroom teacher roles.
Inspiration From Iteration
When I began the progressive enhancement process for a responsive website version of Sub In, I quickly realized various aspects that I would need to add to visually break up the information on each page, and that I would need to make things more visually appealing. My simple designs that seemingly worked well for the mobile app looked quite plain and uninteresting when scaled up for web.
I chose to add various outline boxes around written content to allow for simpler usability, as well as to change the shape of the images to create a more playful, contemporary feel.
I soon realized that these additions would greatly improve the look, feel, and usability of the mobile app and I began making changes.
Home Page for Web
Usability Testing
Round 1
Home
Step 1
Usability Testing
Round 2 and 3
Home
Step 1
Final Iteration of Mobile
(after creating for Web)
Home
Step 1
Hi- Fi Prototypes
Sub In - for Web
Access the Sub In hi-fi prototype for Web here.
While designing for web, I recognized the need for information to be visually grouped together through playful, rounded outline boxes. I also noticed that Steps 1-4 of the “Become a Sub” process felt a bit blank and lacked imagery. I referred back to the “5 Step Process” infographic I designed, and decided to utilize those graphics to enrich each step of the process. Such images will improve accessibility for English Language Learners, as well as individuals with ADHD as they navigate through the questionnaire process.
Sub In - Native Mobile App
Access the Sub In hi-fi prototype for mobile here.
After I finished mockups for web, I went back and reformatted about half of the digital mockups for the mobile app to include those same visual elements.
Overall, the rounded-edge rectangular outlines for text, together with more negative space, improve the appearance, accessibility, and usability of the app.
Final Mockups for Mobile
Next Steps
If working with a team rather than independently, I would love to expand Sub In to be a fully functional app and responsive website for all states. While we certainly cannot change the complexity of each state’s substitute application process or solve the teaching shortage, the field of technology can do a lot to simplify the process for users.
In simplifying the often-confusing process of becoming a substitute teacher, Sub In can increase the substitute pool, while still allowing local school districts discretion over which individuals are most qualified to serve in that role. Of course it would be ideal to only have fully-trained, professional educators in the classroom, but it seems that isn’t always possible.
Increasing the substitute pool allows districts broader flexibility in filling the staffing gaps at their schools, which decreases stress on existing educators and may lead to better teacher retention moving forward during these challenging times.