Overview
Students at North High School need a better way to check class schedules, receive relevant announcements, communicate with faculty, and stay up-to-date with events and happenings at school. The current website and recommended mobile apps are confusing and important information is spread across several platforms.
Over a 3-week time span, we conducted research, ideated wireframes, and designs, and tested high-fidelity prototypes.
Roles: Researcher | UX & UI Designer | User interviews | Data Synthesis
Team: Martha Asselin | Jahna Church
Scope: 3 Weeks | Team Design | March 2019
Tools: Sketch | InVision | Zeplin | Adobe Illustrator
Research
Our client knew that they wanted an app for the student body to use, but they were unsure of what direction they wanted to go with. They liked what East High School had implemented so, to start the process we did a competitive business analysis of other high schools in the area that had a school app.
We continued on and interviewed students, faculty, and the principal to gauge what was needed and wanted out of the app. We found that what the students are currently using;
is confusing to navigate.
has too many platforms were being used, which caused confusion and poor communication.
important announcements were being lost or overlooked.
Taking what information that we received out of the interviews we created a survey and I sent it out to the students. We had participants from freshman to seniors. The survey helped to confirm the needs we gathered from the interviews.
Survey Findings
The stakeholders have use infographics to deliver information in the past. Knowing this I created an infographic to show our most compelling survey findings.
We used the survey to create hierarchy of features within the app. We chose to focus on the top four features that students used to;
Message to Teachers and Coaches.
Access grades.
Check their calendar.
View the bell schedule.
Persona’s
Jerome, 17
“It is important for me to know what my grades are and to stay on track for graduation.”
Juliette, 14
I’m a new student to NHS. It is important to me to easily communicate with my teachers and classmates. I want quick access to my daily class schedule.
Journey Map
Jahna created a student journey map in order to gain insights into student pain points, how to improve school experience, and define what students need in order to have a positive, and successful high school career.
Designing
We took our research and started designing a responsive web app (with a mobile-first mindset) that meets the needs of the students. We all sat together and did a design studio, to get the creative juices flowing. By using the NHS App students are now able to communicate with teachers and coaches, access bell schedule and grades, customize announcement feeds, and keep track of tasks and assignments. By having access to all of these features in one app, all of the confusion and missing announcements decreases with a potential of student involvement increasing.
We wanted to build trust with the users by meeting their needs with;
having an intuitive UI
customization through on-boarding
creating the main page dashboard for easy access to all necessary information.
Wireframes & Usability Testing
Martha performed the usability tests on our first iteration.
She ran them through three different scenarios.
Scenario one:
Imagine you’re signing into the platform for the first time as a new
student. Access your bell schedule.
Scenario two:
You want to see your grades for a specific class that you’re not doing
well in. Show me how you would find your grade and contact your teacher for
extra help.
Scenario three:
You contacted your teacher for help and have scheduled a time to meet. Show
me how you might add the date to your planner within the website.
From the participants we found that users;
Did not like the images on the cards, when choosing announcement preferences.
A better indication was needed to know when you have chosen an announcement preference.
The colorful background was too busy.
The dashboard layout was confusing.
Students found it unnecessary to see the lunch menu on their main page.
Second Prototype
On our third round of building we were able to gather qualitative data through more usability testing to create two user flows for the app. We also designed the dashboard for desktop to show our stake holders that this app has the potential of becoming responsive. This way students may access their necessary information in class without having to use their phone, since they are prohibited to use them during class time.
Style Guide
A style guide was created for the viability and future progress of the app. If the stake holders decide to continue on with development, engineers will have access to this guide for a more seamless transition.
Phase Two
The research and design were well received from stakeholders. The stakeholders are currently meeting and fund raising through the district is in the works. If they can raise the funds they will need hire a developer to build out the mobile first. We would like to continue on to design out the desktop so that students can access the app from any device.
To ensure a successful client relationship we;
Met with them on a weekly basis
Kept all stakeholders involved with every process, from research to design.
Coordinated schedules and kept constant communication.
