PROJECT OVERVIEW
THE PROBLEM:
Improve the usability of the Capistrano Unified School District website.
Improve the usability of the Capistrano Unified School District website.
THE SOLUTION:
CAPOUSD website navigation is inconsistent and confusing. Some of the content is redundant and hard to navigate and in some cases impossible to find.
CAPOUSD website navigation is inconsistent and confusing. Some of the content is redundant and hard to navigate and in some cases impossible to find.
The new proposal is focused on polishing the view of the site by increasing contrast throughout the pages, organizing menus, links and content and defining hierarchy for easy usability. Looking into making it more accessible to everyone.
MY ROLE:
User Research, UX/UI Designer
User Research, UX/UI Designer
TOOLS:
Figma, Miro, InVision, Photoshop, Illustrator
Figma, Miro, InVision, Photoshop, Illustrator
1. USER INTERFACE ANALYSIS
GOVERNMENT AGENCY
Capistrano Unified School District (CAPOUSD) - Current Site
USER PERSONAS
USER FLOW
Usability Testing Tasks & Analysis
01 Task 1: (Parents)
Home / Navigate Site / Parent/Student Resources / Reopening Schools / CUSD 2020-21 School Year Safety Plan
02 Task 2: (Teachers)
Home / Navigate Site / Staff Resources / Work Tools / My CUSD
03 Task 3: (Parents & Teachers)
Home / Navigate Site / Calendars / District Calendars / Testing Schedule
04 Task 4: (Parents & Teachers)
Home/ Navigate Site / Parent/Student Resources / Reopening Schools / CUSD 2020-21 School Year Safety Plan
HEURISTIC ANALYSIS
01 Extremely busy interface
Inconsistent and complicated to navigate and understand.
02 Misleading results
Some headings, terminology and links mislead the users.
03 Search is inconsistent
Some content found through search is not the same than content found through the menu (same label).
SCREEN READER TEST
Will (teacher)
"I can’t find [these] services… it takes me a long time."
Shelby (teacher)
"If I have to sign into this website all of the time, it should be easier to access."
James (parent)
"This [top image] was a distraction."
COLOR TESTING
Contrast ratio increased in each combination with new color palette.
USABILITY TEST
Ella (teacher)
"Given the pandemic’s impact, I would expect that things would be easier to find."
Wende (teacher)
"I always use “teacher resources”, because I know where I can find what I need."
Nicolle (parent)
"I would assume [these features] would be somewhere around here... but they’re not."
ANNOTATIONS
01 Homepage
“Navigate Site” is the “central hub”.
There is a general hierarchical structure within the homepage.
02 Elementary Schools page
“School Directory” is the main call of action based on hierarchical analysis. Schools are listed alphabetically.
03 District Calendars page
There are too many logos and linked text in the page. Sidebar has many buttons and ads.
TASK ANALYSIS
01 Task 1: (Parents)
Participants : 2
Task accomplished : 75%
02 Task 2: (Teachers)
Participants : 3
Task accomplished : 100%
03 Task 3: (Parents)
Participants : 5
Task accomplished : 100%
04 Task 4: (Parents)
Participants : 5
Task accomplished : 100%
Success Rate
KEY User successfully completes task
SCORE 4
KEY User partially completed task
SCORE 0.5
KEY User does not complete task
SCORE 0
CARD SORTING
01 Our users emphasized COVID-19 related news as a potentially important feature.
02 The district was often divided by age range, and there were frequent discrepancies between resources for teachers and parents.
03 Users seemed most interested in emphasizing key resources that led away from the site itself.
SITEMAP
2. USER INTERFACE DESIGN
WIREFRAME
Homepage
SECONDARY PAGES
Desktop
SECONDARY PAGES
Mobile
UI COMPONENTS
CLICKABLE PROTOTYPES
UI STYLE TILE
HOMEPAGE MOCKUPS
FIVE-SECOND TEST
01 "The logo caught my attention first. It is hard to read what the logo says."
02 "Initially I didn’t catch this here [News title]... my attention went straight to the [content] boxes."
03 "This button here [Online Enrollment] caught my eye..."
04 "The footer makes sense, it is exactly what is expected to be."
" Register and top banner buttons are getting more attention."
(First Click - Heat Map Tests)
3. RESPONSIVE DESIGN
STYLE GUIDE
RESPONSIVE MOCKUPS
HI-FI PROTOTYPES
Desktop Prototype
Mobile Prototype
USER TESTS
Jamie
"Parents & Families Online page, looks good! The apps icons are very helpful and straightforward. The information is well organized."
Nicky
"Adding “New News” about COVID-19 or major updates would be good in the homepage. Otherwise the page looks good."
Pam
"Some tabs seem misleading - “Mathematics” could indicate several things... in this case, wording is important."
Cody
"The site looks pro! I’d love more consistencies within each text or font."
NEXT STEPS
01 Homepage
• In “Select Language” field, add Flag or name of language in tab.
• Add a sub-head to the Tweets section.
• Add to the top image, “Digital Classes” button since it is most used during this school year.
02 Parents & Families Online page
• “Get Involved” links need to stand out more. As they are now, are too plain.
03 Staff / CUSD Account
• “Related Content” links need to stand out more. They are too plain.
04 Our District / Calendars
• The new proposal is clear and conveys all calendars within the district.
05 COVID-19 / General Services
• COVID-19 Dashboard needs a small description of what it is (e.g “See updated cases per school in our district”).
06 Footer
• When adding the map image with the location of CAPOUSD, can be helpful to add a link to google map or other.
• Create “careers” section for easy access.
07 Additional Steps
• Test mobile Hi-Fi prototype.
• Iterate Mobile and Desktop pages based on feedback.
• Create additional responsive pages.
• More testing and more iterating.
KEY LEARNINGS
01 Homepage
Layout is key when it comes to sites that rely on high amounts of data / resources.
02 District Calendars page
The calendars page can utilize design concepts from its sources, like Google Calendars.
03 Parents & Families Online page
Tab layout providing access to key websites is a much needed addition to a potentially confused page.
04 COVID-19 / General Services
The design of this page is laid out as clearly as possible, allowing for easier access to key resources.
05 Footer
Dividing links by Staff / Family makes for clearly legible architecture - but we still need to create a “careers” section.
06 Additional Feedback
Font coherency is important! Communication is key to ensure general consistency from page to page throughout the entire design process.
_____________________
