Developing the digital citizens guide to the internet and digital literacy.
Overview
In the Summer of 2023 I had the opportunity to sign up for a 5 day Hackathon program sponsored by General Assembly to develop cross-functional experience and understanding between the various roles that work together to make a product a reality. At the start of the Hackathon we were divided up into 7 teams of 10 participants and given a prompt in which we had to build and present our prototype and Minimal Viable Product and presentation around. The prompt was : Digital Equity and Accessibility
From day one the race was on! We were challenged to work quickly, strengthening our teamwork and communication skills. Split between UX designers and software engineers we divided the work up between our designated skills.
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
Maggie Yu
Duration
5 Day Sprint
The Challenge
Digital Equity and Accessibility
With the prompt being a focus on “Digital Equity and Accessibility” we understood this to mean equal access to the internet, devices, information, and digital literacy skills. 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.
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 5 interviews across 5 States and schools districts 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.
Key Insights
Re-evaluating the data and discovering new insights
Developing a user-centered solution to help adults with digital literacy, I focused on the following pain points discovered during our research interviews:
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.
Based on these new interview findings, we pivoted and re-framed our concept to create a more user-centered solution addressing pain points of our audience, and spoke directly to our users needs.
Problem Statement
Parents are experiencing issues communicating with their children’s educational system because they require digital literacy to interact with teachers and schools?
How might we:
Create a digital literacy platform that provides interactive learning
That is adaptable to language barriers
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 the aging population and busy adults all experienced. After discussing this collection of pain points with the rest of the team, we agreed a persona was a valuable tool for leading us in the right direction on what topics to focus on while developing and designing for NavigatEDU to benefit our Users.
Given the scope of the project and the timeline we decided to focus on specific scenarios mentioned during our interviews that parents and teachers expressed struggling with.
Building the Focus on User Objectives
Developing Low-Fidelity to Hi-Fidelity
Sketches
Now understanding where core issues persist, I began drafting some ideas with a predominant focus on:
Digital Literacy
A multi-lingual Glossary of technology terms learners can look up (including examples and scenarios)
Lessons and skills on how to navigate the digital world wide web like using incognito browser and handling internet tabs on the computer.
Mid-Fidelity
Hi-Fidelity
Homepage
Building the homepage I focused on how we want to represent Navigate EDU right from the first encounter toying with color and illustration placements as well as what services we would need to provide visitors. We deliberated on developing the navigational hierarchy based on comments mentioned by our interviewees.
Low-Fidelity
Mid-Fidelity
Hi-Fidelity
Lessons
Regardless of whether Navigate EDU is accessed from desktop or mobile, we simulated a “dummy desktop browser” because universally both teachers and parents lacked comprehensive knowledge of what features are available on desktop compared to their younger students and children.
To engage Adults learning internet basics from: accessing incognito windows, to 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 users can easily pull up to gain refreshers on.
Low-Fidelity
Cross-functional hand off process & Final minimum viable product (MVP)
With our limited time remaining during this project our UX/UI team sent over the wireframes to the Software Engineering team, where we kept open communication while discussing feedback on what features we were potentially planning to incorporate.
On the Software Engineering team, they 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 I wanted an experience that was welcoming and easy to follow. Using organic shapes and earthy jewel tones, I saw it was important for NavigatEDU to be friendly, approachable, and playful for our users.
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!