Connecting Teachers and Students Beyond Classroom Walls
Case Study: EmpowerEd.
An EdTech App
Project Overview.
Thank you for visiting this page. As you read, please keep in mind, I’m designing in the wild! This case study is a work in progress. Come back often to see new updates.
Duration: September 2020-January 2021
Tools used: XD, Sketch, Miro, Google Suite, Zoom, Canva, Linkedin Learning, Pinterest, POP by Marvel, InVision, Coolers Color Guide, Adobe Color Palette Generator, UI Accessibility Checker
UX/UI Deliverables: Sketches, wireframes, wireflows, personas, affinity map, empathy map, user stories, user interviews, guerilla testing, usability testing, style guide, prototype, animations, research reports, brand platform
Within the walls of a classroom or a zoom meeting room, one huge issue is student behavior. Negative student behavior leads to teacher attrition, poor school performance, higher dropout rates, dangerous school communities, lower test scores, and the list goes on and on. But studies show, and teachers know, that forming a “classroom community” helps students feel safer, happier, and more successful. After studying this problem, I sought out to answer the question, “How might we equip educators with resources and techniques to form a closer bond with their students?”
02.
The Solution
EmpowerEd is a mobile application which makes connecting teachers and students fun, easy, and quick. Teachers and students can use the app to send empowering messages back and forth. This app builds that classroom community by helping students and teachers feel special after receiving an affirming message.
03.
My Responsibilites
I worked as a one-woman team with the guidance and support from my knowledgeable mentor, Tom Jepson. As the sole User Experience Researcher, Designer and User Interface Designer for this app.
EmpowerEd’s Journey To App-Hood
Design Thinking in Action
Empathize
Secondary Research
According to the educational think tank, Edutopia, and the National Commission in Social, Emotional, and Academic Development, teachers who do form a positive rapport with their students have better outcomes. When a teacher takes the time to form an affirmative bond with their students, their efforts go a long way. Their students have higher test scores, feel more comfortable in school and more secure with peers, and also have lower dropout rates. Even brain chemistry is positively affected–the hormone oxytocin is released–children experience feelings of acceptance and trust. These feelings help students to deeply connect to their teachers as positive role-models and also feel good about the school setting. EmpowerEd‘s methodologies and philosophies are research-backed.
Primary Research
To get a grasp on the problem space and truly understand the user, I conducted remote user interviews.
Researchplan: Knowing that a supportive relationship fosters students’ growth, the goal of this research would be to discover ways in which teachers build an affirmative bond with their students.
Methodology: Screener to acquire 20 candidates; conducted 7 interviews using this script.
From my interviews I learned that teachers use many methods to build a “classroom community.” Interviewees frequently stated that one way they built that community feel was to encourage their students with positive affirmations and phrases. Hence, EmpowerEd!
Define
Synthesize
All the research came to be very helpful, and so was my past experience as a teacher. Because I had this personal connection, I did work hard to break down any personal biases by reaching out to teachers in a variety of different subjects from my own. Prior to writing out each sticky for empathy mapping, I also questioned if my ideas were personal or taken from the interviews. From the affinity map, I filtered down the categories into actionable items.
Affinity Map
Empathy Mapping
Personas
Finally, I arrived at my persona. Ms. Tammy stayed with me throughout the rest of the process, as I had my users at the forefront of my thinking.
How Might We’s
Based on my persona and empathy map I came up with How Might We problem statements. I felt like answering these would benefit Ms. Tammy based on her needs, problems, and motivations found in the research and persona.
How might we equip educators with time-saving resources and techniques for forming a closer bond with their students
How might we open a means for communication between students and teachers regarding non-academic matters?
Ideate
Brainstorming Exercises
I used several brainstorming strategies to start on the path towards solutions. I found these exercises invigorating and enjoyable; they really sparked my creativity. I decided that there were many interesting solutions, but the trading card concept best fit Ms. Tammy’s needs and my interviewees real experiences and current actionable techniques for building relationships with students.
User stories
To move forward, I created a miro whiteboard with user stories that would answer the scenarios in which a teacher would use my product. Upon reflecting at this point in my process, I realized I needed to add a student aspect to my users.
Red Routes
Narrowing down and hierarchically categorizing user stories was a challenge. I deeply analyzed what tasks would contribute to answering those needs, as well as my HMW’s.
I chose to include only a select few of the tasks in the flow, as some were wants rather than needs. Ultimately, Ms. Tammy would need to onboard, login/logout, send a card, and receive cards. A student would need to do the same. At this point, I did not include an inbox or a sent box, and I would learn during my guerrilla testing that both students and teachers would need this functionality.
Lofi Sketches
I started to picture how all this would come together into a useful product.
Guerilla Usability Testing
I used POP by Marvel to put together a digital “paper” prototype. In the initial low fidelity sketches, my sketches did look a bit similar to today’s final product, but since then, I basically condensed everything.
During guerrilla testing my users had lots to say! There were a lot of great suggestions, ideas for features, and general excitement. I now know a solid foundation must be in place before jumping ahead and adding unnecessary features. Read more about my results.
Major changes implemented post guerrilla testing:
Removing decorative items that were distracting during testing. Instead, I chose to create a more minimalist design to support the ease of use
Clarify some of the wording and clean up the UI prior to making my wireframes.
“Sign up” changed to “create an account”
Wireframes
I focused on clarity and creating a frictionless experience.
Wireflows
The wireflows were also helpful in further smoothing the user’s experience. Annotating screens and adding descriptors ideal for developers helped me to hone my communication skills.
Wireflows
The wireflows were also helpful in further smoothing the user’s experience. Annotating screens and adding descriptors ideal for developers helped me to hone my communication skills.
Design System and Brand
Finally, it was a relief to be able to incorporate color! In this phase, I completed competitor research and heuristic analysis of other apps and products. For more information, click here: Heuristic Analysis of Competitors. I created a useful moodboard when looking for inspiration.
Style Guide
Creating the style guide was very challenging! It was a BIG undertaking, but I now know design thinking is not linear and much more of a fluid interaction!
Branding
When creating the brand, I used more brainstorming exercises to come up with the name EmpowerEd. I created a brand platform to zoom in on the company’s values. In terms of UI, the creative, quirky and knowledgeable teacher persona comes out in the bright colors and joyful phrases found within the app.
The logo came through myriad iterations and ideas.
The design system, especially the UI Elements, were also iterated upon many times. I constantly updated the library when I created more and more concise versions of the app, throughout the prototyping phase. This is the current version.
Accessibility Check
I value accessibility and challenged myself to come up with a color palette that would both fit the brand and make the application easy to use for all. I know that our user, Ms. Tammy, would also value this important aspect.
Prototype and Test
It came time to put the pieces together. I came back to my persona yet again; I aimed to convert Ms. Tammy’s pain points to gain points.
Hi Fi Designs
Iteration after iteration led me to the leanest possible product. Throughout the iterations, I implemented changes to everything including red routes, features, personas, and UI. Please click here for iterations and more designs.
Prototype
Please view my Prototype here. Putting together the prototype was a blast. I had fun seeing my designs turn into a responsive app.
Round 1 Remote Usability Testing
I approached my research with this test plan. I narrowed down my users as I with the many iterations, the app had also become more targeted towards a younger age level. Because of Covid, I again completed the interviews remotely. Highlights of Issues found in Round 1, and their solutions:
After many iterations, an initial round of testing, even more iterations, I completed a second round of usability testing. For more details, please read my Usability Testing Review 2.
Takeaways from Round 2 include:
Diversify your app personas:
A user commented that this was an education app helping tell the story of real educators and their students. When the app prototype sent a compliment about Robert’s math scores, I realized the app was perpetuating the story we already know. Upon reflection, I thought about how many teachers tend to be women and in my community, many people/children are LatinX. I chose the name Julia for my student persona because it could be pronounced Hulia or Julia. It also represented a female student, and I wanted to give an example of praising a girl for her math skills. Especially being an education app, diversity is an important part of setting up societal standards.
Add layman’s terms to your user tasks:
In testing, I provided written prompts for the user to complete certain tasks. THese were not quite clear enough-they had som industry terms as well as being too wordy in general. I know for next time to break down the tasks into easily understood bits.
All in all, I have really come to a lean version of the MVP. The prototype includes only what is absolutely necessary and helpful to accomplish my main user stories. However, every product is ever without goals or needs, so if I were to continue iterating on this app, I would add enhanced features like selfies, video clips, and gifs. I would also incorporate even more educational aspects such as writing prompts or math games that allow students to earn more features.
Final Reflections
After completing the project, I would definitely say the product begins to answer the original HMW question, “How might we equip educators with time-saving resources and techniques for forming a closer bond with their students?” Through this app, teachers can quickly reach out in a fun way to connect with students. Messages can be customized, teachers can both send and receive messages and students can both send and receive messages. Myriad iterations lead to a quick, intuitive method of building that classroom community. Brand personality relied on strong color and quirky design to bring students and teachers together on the shared platform. If I could devote more time to the project, I would add enhanced features such as messaging automation, gifs, and editable selfies.
Working on the EmpowerEd app was an incredible process. I have learned more about myself, my work, and the industry. This process has helped develop my UX research, UX design, and UI design skills in every area.
I have learned that I really enjoyed getting out my pen and paper to have some hands on kinesthetic experiences. I now know sketching helps me clarify my thoughts and get creative! It also encourages me to create even better, more realistic UX experiences for users. People want their interactions to be similar to if not seamless from real life. Just as e-readers have “real” pages you can turn, I plan to further integrate tactile and realistic features into all of my designs.
I have also noticed that I am a very reflective learner and throughout the process there were quite a few takeaways. I have a growth mindset that allows me flexibility to fail, but to truly succeed when it comes down to learning from my mistakes.
Highlights from my personal learnings:
Soft skills: Determination, perseverance, flexibility, willingness to learn, and diligence
Tools: XD, marvel, miro, google suite, zoom, canva, linkedin learning, pinterest, POP by Marvel, InVision, Coolers Color Guide, Adobe Color Palette Generator, UI Accessibility Checker
UX/UI Deliverables: Sketches, Wireframes, Wireflows, Personas, User Stories, User Interviews, Guerilla Testing, Usability Testing, Style Guide Creation
No teachers were harmed in the making of this app. Thanks for reading!
