EduConnect: School App
UX/UI Case Study
UX/UI Case Study
UX/UI Case Study
Problem Statement
The existing communication and management systems in schools are often fragmented, causing inefficiencies and misunderstandings among students, parents, and teachers. EduConnect aims to provide a unified platform that streamlines communication, enhances collaboration, and provides easy access to essential resources.
I was tasked to create an app that aims to eliminate the pressures associated with homelessness. A toolkit was needed to bridge the gap between the homeless community and resources that are available to them.
I created Night Light to provide access and help a homeless person successfully integrate into the local community.
Client
Client
OUR HOPE
Duration
Duration
2 Weeks
Role
Role
UX Researcher & UI Designer
Year
Year
2024
The Brief
I was tasked to create an app that aims to eliminate the pressures associated with homelessness. A toolkit was needed to bridge the gap between the homeless community and resources that are available to them. I created Night Light to provide access and help a homeless person successfully integrate into the local community.
Client
Duration
Ren Skincare
2 Weeks
Role
UX & UI Designer
Year
2022
How has homelessness changed over the past 10 years?
The definition of homelessness means not having a home. You are homeless if you have nowhere to stay and are living on the streets, but you can be homeless even if you have a roof over your head.
An increasing number of people in the UK are experiencing homelessness caused by pressures on the housing market, stagnating wages, an increasing shortfall between housing benefits and housing costs, and mental health challenges.
On any given night, tens of thousands of families and individuals are experiencing the worst forms of homelessness across the UK, this includes over 200,000 households in England alone.
For the last five years’ core homelessness has been rising year on year in England, reaching a peak just before the pandemic. [CRISIS, UK. 2022]
What impact has COVID-19 had on homelessness?
Coronavirus pandemic has put a spotlight on the dangers of sleeping rough. Homeless people were at a particular risk of contracting the COVID-19 coronavirus.
During the first few months of the pandemic, the increase was driven by those already experiencing homelessness - people who were sofa surfing and living in dangerous and transient accommodation – who became more visible as their living situations forced them to access help.
Towards the second wave of the pandemic, there have been bigger increases from people who are experiencing homelessness for the first time, people who have been furloughed and those who are newly unemployed.
The Problem
According to Crisis Charity, 9/10 rough sleepers had mental health issues and 60% of them were undiagnosed.
A toolkit is needed to bridge the gap between the homeless community and resources that are available to them. Although many of the apps had over 100k downloads on google play, they didn’t cater to vulnerable individuals. They need an app that provides access to mental health services as well as being aware of local resources they might need.
Competitor Analysis
To lead my research I carried out an indirect competitor analysis. An activity which provides an assessment of the strengths and weaknesses of current and potential competitors. By identifying trends and commonalities it can identify market gaps and can help navigate the development of new products.
Acknowledging the reality that I had limited knowledge in this area, I wanted to identify the provisions currently available, trends across content style, functionality and where possible, the gaps my design could fulfil.
To look at this I assessed Shelter App, Concrn App & My Possible Self App. With a specific focus on how they serve their communities; the prevention methods they contribute and the practical benefits their products deliver to their users.
Key Findings:
App Screenshots:
The analysis identified a number of similarities across the competitor brands; These were practices such as:
the emergency button
a directory map of nearby services
support contact
a Chatbot.
another interesting function was the presence of secure formats of recording information which could be shared with local authorities.
Although varied, there was a general consensus across the brands to establish safe spaces for their users and prioritise sharing information that would either educate or alleviate current/potential outcomes of homelessness and mental health.
These are just some of the functions I will be considering implementing during my own design process.
User Research
My user research was mainly derived from secondary research, such as reports from charities and media interviews with people experiencing homelessness. This research helped me empathise with people experiencing homelessness in understanding what they need.
Ideation
At this point clear themes were beginning to unveil themselves. To utilise the insights gained from the research stage I applied the use of two ideation techniques; Crazy 8’s and Mind Mapping.
Crazy 8s
Mind Mapping: To conclude I conducted a mind map. This technique allowed me to pool all my conceptual ideas onto a “white board” and build upon avenues that could solve this problem.
Mind Mapping
This led to defining 4 main features user need in the app:
Crisis button: links to emergency services
Resources link: Directory map of nearby services
Support Chat: A daily dairy or chatbot to combat loneliness
Heath section that leads to a lifestyle quiz, which gives advice based on recommendations
Design System
I made a Design System for this project as they are essential elements for the design of an app. They make it possible to create an important base for all the elements of an app and to speed up the design phase when in collaboration with other designers.
Style Guide
Brand Logo
I named the app night light, as I wanted it to connote a sense of safety and comfort.
Based on my user research, many homeless individuals feel unseen and misunderstood.
Giving them an app that lets them control which resources they need might help them take the steps back into society.
Overview & Reflections
Based on my user research, many homeless individuals feel unseen and misunderstood. Giving them an app that lets them control which resources they need might help them take the steps back into society.
A toolkit was needed to bridge the gap between the homeless community and resources that are available to them. I created night light to provide access to mental health services as well as being aware of local resources they might need.
If I was to complete this app, I would have had more first hand user research and also further developed the lifestyle quiz with mental health professionals.
I had a chance to reflect during the creation of the app and it became a truly meaningful design process and an interesting problem to solve.
Accessibility
I considered how accessible my design is consistently throughout my design process:
WCAG
I tested my design against the contrast requirements, using a plugin on Figma; Contrast to ensure this was adhered to. Colour contrast received an AAA result.
Logical Hierarchy & Information Architecture
Structuring elements and copy on all pages to represent the intended flow of information.
Aesthetic-Usability Effect
Based on the research users often perceive aesthetically pleasing design as design that’s more usable. Unfortunately aesthetics design is not considered in many homeless apps. To support this community I made the app aesthetically pleasing using minimal icons and light colours that connote to a calmer friendlier tones.
Consistency
I wanted to ensure that buttons had the same curvature, paragraph structure remained the same and the colour scheme matched across App.
Text Size
Ensuring all text sizes are 13 points and above.
Law of Common Region
I separated elements by using a lot of white space in between items or by using coloured sections throughout the app. This clearly helped define boundaries and put elements into sections
Affinity Mapping
To help me understand the main insights from the above research, I carried out an Affinity Mapping exercise.
Sections were developed in relation to common themes and areas of interest highlighted in the research. Such as resources used in the past, support they’ve found to be useful and quotes from their experience.
This method was very helpful as it helped categorise the assumptions users had into separate themes.
Hypothesis
To create an app that supports and educates user's on relevant material that can help a homeless person with mental health issues successfully integrate into a local community. By providing access to mental health services and reducing their chances of sleeping rough. To explore this, I implemented the following approaches;
User Research
Ideation
Analysis
Business Research
Prototyping
Objectives
For Students: Simplify access to assignments, grades, and study materials.
For Parents: Improve communication with teachers and track their child's progress.
For Teachers: Streamline administrative tasks and facilitate better communication with students and parents.
Overview & Reflections
Based on my user research, many homeless individuals feel unseen and misunderstood. Giving them an app that lets them control which resources they need might help them take the steps back into society.
A toolkit was needed to bridge the gap between the homeless community and resources that are available to them. I created night light to provide access to mental health services as well as being aware of local resources they might need.
If I was to complete this app, I would have had more first hand user research and also further developed the lifestyle quiz with mental health professionals.
I had a chance to reflect during the creation of the app and it became a truly meaningful design process and an interesting problem to solve.
Research
Methods:
User Interviews
Surveys
Competitive Analysis
Contextual Inquiry
Key Findings
Students need an intuitive interface to access assignments and grades quickly.
Parents desire real-time updates on their child's performance and direct communication channels with teachers.
Teachers require efficient tools for managing class schedules, assignments, and communication.
Key Findings
Students need an intuitive interface to access assignments and grades quickly.
Parents desire real-time updates on their child's performance and direct communication channels with teachers.
Teachers require efficient tools for managing class schedules, assignments, and communication.
1. User Interviews
Objective:
To gather in-depth qualitative insights into the needs, frustrations, and preferences of students, parents, and teachers.
Process:
Conducted 15 one-on-one interviews with participants from each user group (5 students, 5 parents, 5 teachers).
Prepared a semi-structured interview guide with open-ended questions.
Topics covered included daily routines, pain points with current school communication tools, and desired features in a new app.
2. Surveys
Objective:
To collect quantitative data on the usage patterns and preferences of a larger user base.
Process:
Distributed online surveys to a broader audience (40 students, 40 parents, 20 teachers).
Included a mix of multiple-choice questions, Like scale ratings, and open-ended questions.
Analysed responses to identify trends and validate findings from user interviews.
3. Competitive Analysis
Objective:
To understand the strengths and weaknesses of existing school apps and identify opportunities for differentiation.
Process:
Selected and analysed 3 popular school communication and management apps.
Evaluated each app based on usability, feature set, user reviews, and overall design.
Created a comparison matrix to highlight key features and gaps.
Outcome:
Identified best practices and common shortcomings in existing solutions, informing the design and feature prioritization for EduConnect.
4. Contextual Inquiry
Objective:
To observe and understand the real-world context in which students, parents, and teachers interact with school communication tools.
Process:
Conducted in-context observations in classrooms, homes, and school offices.
Shadowed 3 students, 3 parents, and 3 teachers for a day.
Noted the tools they used, how they interacted with them, and the challenges they faced.
Outcome:
Gained a deeper understanding of user behaviors and environmental factors influencing the use of school communication tools, which guided the design of more contextually relevant features.
Personas
By incorporating personas into the EduConnect case study, we ensure that the app effectively addresses the specific challenges faced by students, parents, and teachers, resulting in a user-centered and successful product.
Affinity Mapping
We mapped the user journeys for each persona to identify pain points and opportunities for improvement. Key touchpoints included:
Logging in to the app
Accessing the dashboard
Viewing assignments and grades (students)
Receiving notifications (parents)
Managing class schedules and assignments (teachers)
Design System
I made a Design System for this project as they are essential elements for the design of an app. They make it possible to create an important base for all the elements of an app and to speed up the design phase when in collaboration with other designers.
Style Guide
Brand Logo
I named the app night light, as I wanted it to connote a sense of safety and comfort. Based on my user research, many homeless individuals feel unseen and misunderstood. Giving them an app that lets them control which resources they need might help them take the steps back into society.
At this point clear themes were beginning to unveil themselves. To utilise the insights gained from the research stage I applied the use of two ideation techniques; Crazy 8’s and Mind Mapping.
Crazy 8's - Mobile
Mind Mapping
Mind Mapping: To conclude I conducted a mind map. This technique allowed me to pool all my conceptual ideas onto a “white board” and build upon avenues that could solve this problem.
This led to defining 4 main features user need in the app:
Crisis button: links to emergency services
Resources link: Directory map of nearby services
Support Chat: A daily dairy or chatbot to combat loneliness
Heath section that leads to a lifestyle quiz, which gives advice based on recommendations
Affinity Mapping
To help me understand the main insights from the above research, I carried out an Affinity Mapping exercise.
Sections were developed in relation to common themes and areas of interest highlighted in the research. Such as resources used in the past, support they’ve found to be useful and quotes from their experience.
This method was very helpful as it helped categorise the assumptions users
had into separate themes.
At this point clear themes were beginning to unveil themselves. To utilise the insights gained from the research stage I applied the use of two ideation techniques; Crazy 8’s and Mind Mapping.
Mind Mapping: To conclude I conducted a mind map. This technique allowed me to pool all my conceptual ideas onto a “white board” and build upon avenues that could solve this problem.
Mind Mapping
Crazy 8's - Mobile
This led to defining 4 main features user need in the app:
Crisis button: links to emergency services
Resources link: Directory map of nearby services
Support Chat: A daily dairy or chatbot to combat loneliness
Heath section that leads to a lifestyle quiz, which gives advice based on recommendations
Design System
I made a Design System for this project as they are essential elements for the design of an app. They make it possible to create an important base for all the elements of an app and to speed up the design phase when in collaboration with other designers.
Style Guide
Brand Logo
I named the app night light, as I wanted it to connote a sense of safety and comfort. Based on my user research, many homeless individuals feel unseen and misunderstood. Giving them an app that lets them control which resources they need might help them take the steps back into society.
Accessibility
One main element of the brief was to design with accessibility in mind. So that a range of individuals across abilities and differentiating needs could access the product. Therefore it was important my design met key principles as governed by the WCAG regulations.
WCAG
I tested my design against the contrast requirements, using a plugin on Figma; Contrast to ensure this was adhered to. Colour contrast received an AAA result.
Structuring elements and copy on all pages to represent the intended flow of information.
Logical Hierarchy & Information Architecture
Aesthetic-Usability Effect
Based on the research users often perceive aesthetically pleasing design as design that’s more usable. Unfortunately aesthetics design is not considered in many homeless apps. To support this community I made the app aesthetically pleasing using minimal icons and light colours that connote to a calmer friendlier tones.
Consistency
I wanted to ensure that buttons had the same curvature, paragraph structure remained the same and the colour scheme matched across App.
Text Size
Ensuring all text sizes are 13 points and above.
Law of Common Region
I separated elements by using a lot of white space in between items or by using coloured sections throughout the app. This clearly helped define boundaries and put elements into sections
Product Offering
Key Insights for Developing the New App
1.IImproved Login Experience:
Across all personas, users experience frustration with login issues in other school systems. The new app must prioritise a seamless, fast login process (e.g., single sign-on, biometrics).
2.!Simplified Dashboards:
Dashboards were a significant pain point in some app systems due to information overload and poor organisation. The new app should have role-specific dashboards tailored to the needs of students, parents, and teachers, focusing on simplicity and clarity.
3.!Real-Time Notifications:
Notifications in old systems were either delayed or missing. The new app must provide real-time, customizable notifications to keep all users updated on essential information such as grades, assignments, or messages from teachers.
4.!Integrated Communication:
Teachers often struggled with fragmented communication systems. In the new app, integrating messaging for parents and students directly into the platform will streamline communication, ensuring messages aren’t lost or delayed.
By focusing on these key touch points during the app's development, EduConnects can deliver an intuitive, unified experience that resolves the pain points identified in existing systems, ensuring the app is user-friendly for students, parents, and teachers.
Ideation
1. Wireframing:
Initial sketches and low-fidelity wireframes were created to outline the app’s structure. Key features included:
Dashboard: Customized for students, parents, and teachers.
Assignments: Accessible list of assignments with deadlines and submission status.
Communication: Messaging system for parents and teachers.
Notifications: Real-time alerts for important updates.
2. Prototyping:
Mid-fidelity prototypes were developed in Figma, focusing on:
Navigation: Ensuring intuitive and easy-to-use navigation.
Interface Design: Clean, minimalistic design to enhance usability.
Responsiveness: Ensuring the app works seamlessly on various devices.
3. Usability Testing:
Prototypes were tested with actual users from each persona group. Feedback was collected and iterations were made to address usability issues.
Key Changes:
Enhanced the readability of the dashboard.
Improved the assignment submission process.
Streamlined the communication feature.
Following the ideation stage I felt confident to begin wireframing possible solutions to the problem at hand.
Low Fidelity Wireframes
Mobile Wireframes
Low Fidelity Wireframes
Mid Fidelity Wireframes
High Fidelity Wireframes
-
Following the ideation stage I felt confident to begin wireframing possible solutions to the problem at hand.
Next, I created the 4 main navigation menu of the app, which featured: Home, Resources, Heath and Support buttons.
I also looked into easy steps one might take if they’re struggling with mental health. So I added a mood tracker to help understand their behaviour or to shared with health professional
I’ve also further developed the resources map, with location icons, a scroll up directory and a search bar at the top.
Finalised the look and feel of the app. I chose to use light colours as they connote a friendlier tone. I used the lilac in the mood tracker section to bring a sense of calm.
Created a recommendation section that links to articles and videos. To further support anyone who’s struggling.
Extra High Fidelity Wireframe: Map Extension
I kept the map to a minimal. Added a light gradient to the top of the map to lessen the distractions and highlight the search bar.
Also made a scroll up feature to show the list of resources.
Wireframes
Mid Fidelity Wireframes
High Fidelity Wireframes
-
Finalised the look and feel of the app. I chose to use light colours as they connote a friendlier tone. I used the lilac in the mood tracker section to bring a sense of calm.
Created a recommendation section that links to articles and videos. To further support anyone who’s struggling.
Extra wireframe: Map extension
-
I kept the map to a minimal. Added a light gradient to the top of the map to lessen the distractions and highlight the search bar.
Also made a scroll up feature to show the list of resources.
Final Design
The final high-fidelity prototype incorporated all feedback and ensured a seamless user experience for all personas.
Features:
Student Dashboard: Displays upcoming assignments, grades, and study materials.
Parent Dashboard: Shows child’s progress, attendance, and communication history with teachers.
Teacher Dashboard: Manages class schedules, assignments, and communication with students and parents.
.
Visual Design:
Color Scheme: Calming blues and greens to create a conducive learning environment.
Typography: Clear and legible fonts for readability.
Icons and Imagery: Intuitive icons and relevant imagery to guide users.
Implementation
The app was developed using agile methodologies, ensuring continuous feedback and improvements throughout the development cycle. Regular stand-ups and sprint reviews facilitated smooth progress and timely delivery.
Results and Impact
Post-launch surveys and analytics showed:
Students: Reported a 40% improvement in tracking assignments and grades.
Parents: Experienced a 50% increase in satisfaction with communication and updates.
Teachers: Saved 30% of their time on administrative tasks.
Conclusion
EduConnect successfully addressed the pain points of students, parents, and teachers by providing a unified, user-friendly platform. Continuous feedback and iterative design processes were key to the app’s success, making it a valuable tool in enhancing the educational experience for all stakeholders.
Website Prototype
Website Prototype
Mobile Prototype
Mobile Prototype
