Developing the digital citizens guide to the internet and digital literacy.
Overview
In collaboration with a team of 9 members we explored the the concept of “Digital Equity and Accessibility.” We originally understood this to mean equal access to the internet, technology devices, and information. We wanted to address this inequity by creating a platform that gave students and families access to digital devices and hardware to support their education, but our research revealed unexpected insights.
Challenged to work quickly under a short deadline, we split between 5 UX/UI designers and 4 software engineers, we began the development of our product NavigatEDU.
UX/UI Team
Zachary Jasper
Gregory Beacham
Jessica Page
Colleen Barrett
Mike Bresnahan
My Role
Research Prototyping UI Design
Software Engineer Team
Brian McCune
Chris McClarin
Maggie Yu
Dustin P.
Duration
5 Day Sprint
Families are experiencing conflict communicating with their child’s educational system because in todays age it requires digital literacy skills to interact effectively with teachers and schools.
NavigateEDU, is a live centralized platform that provides users with step-by-step tutorials to expand digital literacy skills and boost confidence skills while communicating online.
Research
&
Findings
To better understand the current education system in the technological age, Initial plans led us to seek out members in the K-12 educational field for interviews, such as: teachers, principals, staff and administration. We conducted interviews across 5 States and 5 schools in: Hawaii, Arizona, Texas, Illinois, and New York
3 Teachers
2 Administrative Staff
5 School Districts
Contrary to our initial belief, all of the educators we interviewed stated that they aren’t currently lacking in computers or devices for their students. But rather, they all mentioned a gap in digital literacy between students, and their parents & teachers. Focusing on the following pain points and new insights discovered during our research interviews, we pivoted and re-framed our concept to create a more user-centered solution addressing pain points of our audience, and speaking directly to our users needs.
Key Insights
Pivoting our solution after re-evaluating research and gaining deeper user understanding
5 out of 5 of those interviewed, work in an environment that caters to a diverse population of students and families
4 out of 5 Staff and teachers highlighted it is challenging communicating with parents due to a lack of digital literacy
3 out of 5 of our interviewees spoke to the wide diversity of their student population, and expressed empathy for non-English-speaking parents.
Problem
Parents are experiencing issues communicating with their child’s educational system (teachers and Schools), because of a lack of digital literacy skills.
How might we:
Create a digital literacy platform that is adaptable to language barriers, while providing interactive learning and empowers families to bridge the digital divide?
Ideation
After re-framing our project goal, I synthesized pain points brought up in our interviews that teachers and school staff expressed encountering when engaging with parents. Our team agreed a persona was a valuable tool for guiding us on what features to focus on developing and designing for our Users.
Building the Focus around our Users
Solution
NavigatEDU - a digital platform that provides families with resources and tutorials to teach parents fundamental digital literacy skills to navigate the digital landscape.
Key solutions:
Drop-down to select Multilingual capabilities for diverse user base to access content.
Interactive learning tutorials with lessons about step-by-step everyday digital literacy skills.
Develop a glossary of key terms and definitions for users to practice.
Developing Low-Fidelity to Hi-Fidelity solutions
Sketches
Given the scope of the project and our limited timeline, we decided to focus on specific scenarios mentioned during our interviews that parents and teachers both expressed struggling with. From this we began drafting ideas with a prominent focus on developing the Homepage, Lesson plan, and Glossary of key terms pages.
Mid-Fidelity
Hi-Fidelity
Homepage
Building the homepage I focused on how to represent Navigate EDU right from the first encounter toying with color and illustration placements as well as what services visitors needed. I constructed the navigational hierarchy based on comments mentioned by our interviewees. While also incorporating a multilingual drop down menu, allowing users to explore our site in their preferred language.
Low-Fidelity
Mid-Fidelity
Hi-Fidelity
Lessons
We simulated a “dummy desktop browser” because teachers expressed parents lacked comprehensive knowledge of what features are available on desktop, such as: accessing incognito windows, navigating numerous open tabs, and checking past history. It was clear Users needed a quick and easy method of learning that fit into their busy lives.
Low-Fidelity
Mid-Fidelity
Hi-Fidelity
Glossary
Keeping things short, simple, and intuitive when working with busy users, it was important to provide a Glossary tab of common technical terms that can be easily accessed to gain refreshers on.
Low-Fidelity
Cross-functional hand off process & Final minimum viable product (MVP)
With limited time remaining during this project our UX/UI team kept open communication between the software engineering team consistently discussing feedback on potential features and sending over wireframes.
The software engineering side, had divided the work between 2 Front-end engineers and 2 back-end engineers.
Click through the slideshow below to see the necessary changes and adjustments made for the final product.
With multilingual users in mind, we made sure to include a translation dropdown as a feature we know will help address the topic of equity & accessibility. For the language drop down, the Engineering team set up a connection to the back-end (MongoDP) for translation and used memoization to keep/reduce the number of API hits to a minimum and keep the number of re-rendering lower.
Hi-Fidelity Design: Due to the limitations of the project time line the Front end development team would not have been able to incorporate pop up text or animated arrows that pointed to specific features being addressed in the Lesson while still connecting them to the automated translation engine. Instead we pulled our minds together and decided a simpler approach by instead highlighting subjects with a back glow for easy and noticeable attention.
Live Final Site Design: Due to the limitations of the project time line the Front end development team would not have been able to incorporate pop up text or animated arrows that pointed to specific features being addressed in the Lesson while still connecting them to the automated translation engine. Instead we pulled our minds together and decided a simpler approach by instead highlighting subjects with a back glow for easy and noticeable attention.
Developing a visual language
Developing a visual way to communicate NavigatEDU creating an experience that is welcoming and easy to follow was crucial to engage a new audience. Using organic shapes and earthy jewel tones, I saw it was important for NavigatEDU to feel friendly, approachable, and playful.
Colors
Shapes & Imagery
I created a brand identity around the concepts of learning and imperfect growth to create a sense of fun and comfort. Using slightly muted hues of reds, greens and blues are known to simulate creative thinking in language learning and adapting to new skills.
I created a brand identity around the concepts of learning and imperfect growth to create a sense of fun and comfort. Using slightly muted hues of reds, greens and blues are known to simulate creative thinking in language learning and adapting to new skills.
Conclusion
We navigated the project by being flexible and open minded. Leading with an idea, yet pivoting when feedback and research pointed to a problem none of us would have realized had it not been for our users. Staying agile and empathetic guided decision making in the user-focused solution. We were able to create robust design solutions and code with the limited time we had; and were able to present a strong product moving forward!
Thanks for reading!
Head on over to my other projects to check out more of my work!
Let’s Get in Touch!
Have an idea for an awesome project?
Need a UX Designer for an innovative solution?
Fill out the form on the right side to get in touch!