School Counselor Site Redesign
Check out redesigned site prototype. It was created with Figma.
Project Overview
Jessica Triplett is the new school counselor for Centennial Middle School reopening Fall of 2022. She wants to be accessible and provide resources for students and families at the school. She has established a supplemental website with healthcare and education resources, as well as, community and school news and announcements.
Time Frame
15-20 hrs over 3 weeks
Define
Problem
Accessibility and Identity
- Healthcare, housing, and educational resources for students and families need to be readily available, organized, and accessible.
- Due to the nature of some of the site’s resources, the site branding needs to be linked to the school to underscore the school’s relationship to Jessica’s supplemental counselor site. Appropriate branding adds to the legitimacy and trust of the information being provided.
Research
Research Goals and Objectives
- Establish a baseline for UX heuristic improvements to know areas to concentrate on for improvement
- Create a simplified workflow to create a site map that helps users find healthcare, housing, or educational resources
- Determine branding from school district to apply to website
- Confirm site is following basic web accessibility standards per WCAG
Research Method
Secondary Research Heuristic Evaluation Analysis: The evaluation was based on the ten UX heuristics from Nielsen Norman Group.
Heuristic Evaluation
- Navigation needs to list completed pages (Error Prevention) and main navigation needs to be simplified and visible (Recognition rather than recall)
- Main navigation menu jargon for non educators needs to be clearer (Match between system and the real world)
- Blog healthcare, resources from counselor need to be clearly organized, searchable, and include pagination (Flexibility and efficiency of use)
- Clearer visual hierarchy (Match between system and the real world)
- Create clear CTA about what happens when clicking link or buttons to prevent errors (User control and freedom)
Heuristic Analysis created for
School Counselor Site
Design Moving Forward
After completing the heuristic evaluation and establishing UX areas for improvement. In order to fix the accessibility and branding issues the next steps for this process are:
- Map out a simplified user workflow to create a site map and feature road map for the minimim viable product
- Determine branding from established school district to apply to improve cross site branding and trust of the information being provided
- Confirm site is following basic web accessibility standards per WCAG
Ideate
User Flow
User Flow: Locating healthcare resources and/or reaching out for more healthcare resources to the school counselor.
Feature Roadmap
1- Must Have
Show resources for mental and physical healthcare, housing, and clothing.
2- Must Have
Make posts from counselor searchable and categorized
3- Must Haves
Supply counselor’s contact information and allow for messaging to counselor
1 - Must Have
Resource Page
Show resources for mental and physical healthcare, housing, and clothing.
2- Must Have
Make posts from counselor searchable and categorized
3- Must Have
Supply counselor’s contact information and allow for messaging to counselor
Sitemap
Site Map Stage One: This allows time for the stakeholder to build out her “Teacher Advice” Posts and “Our Curriculum” Page
Site Map Stage Two: Added “Teacher Advice” Posts to “Teacher Advice” page and activated a “Our Curriculum” Page
Wireframes and Sketches
I choose simple UI patterns, increased the visual hierarchy, and page layouts to tie the site to the official Centennial Middle School site.
Wireframes
High Fidelity Mockups
Reflection &
Next Steps
Project Next Steps
UX Testing
I would need to run a quick UX test on four things:
- Can users find healthcare resources without help?
- Can users contact Mrs. Triplett if further help is needed beyond the listed resources?
- Do users trust the information provided on the site?
- Would users recommend the site to others that may need help with healthcare, housing, clothing, or educational resources?
Project Reflection
I am excited to see how this site will work. The key at this point is for the site changes to be implemented.
The next steps for the updated site will be:
- Finishing content for the “Our Curriculum” page and sourcing content for the “Teacher’s Advice” portion of the site’s blog feature.
- Buying the domain name to have a less generic site which makes the site and its resources more trustworthy.
- Setting up Google Analytics tracking features within Weebly. The Google Analytics feature will allow for tracking of resources clicked on and most used to help guide future changes for the site. This is a clear metric that needs to be measured.
- Site translation tool “Convey This”: the site is set up on the content management service (CMS), Weebly, and thus needs a plugin that works with that system. While there are tools to set up “Google Translate” it is not a straightforward process thus the alternative would be “Convey This”.
Check out redesigned site prototype. It was created with Figma.
Other Projects
High Five Properties
Website Redesign
MyChart Billing
Case Study
Howlr Playdate App
Case Study
Contact Kathryn