5 min read
Designing the Modern Student Dashboard
How we built a student interface that feels more like a modern web app and less like a government portal.
Apterlearn Journal
Insights & Architecture
Thoughts, updates, and deep-dives into the engineering and design of the modern Philippine K-12 educational operating system.
%20by%20%E2%80%9ELisa%20Wischofsky%E2%80%9D%2C%20licensed%20under%20%E2%80%9ECC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cmask%20id%3D%22viewboxMask%22%3E%3Crect%20width%3D%22980%22%20height%3D%22980%22%20rx%3D%220%22%20ry%3D%220%22%20x%3D%220%22%20y%3D%220%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23viewboxMask)%22%3E%3Crect%20fill%3D%22%23b6e3f4%22%20width%3D%22980%22%20height%3D%22980%22%20x%3D%220%22%20y%3D%220%22%20%2F%3E%3Cg%20transform%3D%22translate(10%20-60)%22%3E%3Cpath%20d%3D%22M663%20169c3%201%204%204%205%206l1%2015c0%2017-6%2034-15%2049%2012-4%2025-6%2038-5%2014%202%2029%206%2040%2015%204%205%2010%2011%209%2018l-4-2-17-10c-10-5-22-6-34-7-10%201-20%202-29%205%206%201%2011%204%2017%207%2023%2014%2044%2035%2053%2061%205%2013%206%2027%202%2041-1%201-2%203-1%205%207%2019%209%2039%208%2059-1%2017-5%2034-13%2049-4%209-11%2017-18%2023-5%204-12%207-19%205-7-3-12-10-15-18-4-8-4-18-4-27%201-10%202-20%205-29-7%204-15%209-23%209l8-9c6-6%2011-13%2015-21%203-11%203-22%202-32-4-25-15-48-32-66a128%20128%200%200%201-4%2080c-5%2013-14%2025-25%2035-7%208-18%2016-29%2018-2%200-6%200-6-2%203-7%208-14%2010-22%204-12%204-25%203-38-1-18-4-35-9-51l-4-11v17c-1%2016-5%2032-11%2047a97%2097%200%200%201-58%2049c-4%201-9%203-13-1l11-7c8-6%2016-11%2023-18s12-16%2017-24c8-17%2013-35%2013-54-2%2011-7%2022-11%2032-9%2017-21%2033-35%2047-14%2015-31%2028-50%2035-5%202-11%204-17%203l-3-3c0-7%203-13%205-19%203-16%206-32%206-48a170%20170%200%200%201-59%2067c-14%2011-30%2019-47%2025-4%2024-6%2048-4%2072%203%2026%2012%2051%2030%2071%201%202%203%203%203%206-5-1-8-4-11-7a97%2097%200%200%201-30-47c-1%2016%201%2031%201%2047l-1%205c-9%201-18-3-26-7l-29-16c-12-10-24-23-31-38-8-17-17-34-23-52-11-32-17-65-12-99%204-26%2013-51%2028-72%2020-26%2045-48%2074-64a351%20351%200%200%201%20288-27c22-10%2041-29%2051-51l6-19Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M495%20234c28%201%2056%206%2084%2015a201%20201%200%200%201%20100%2065c19%2025%2031%2055%2035%2086a361%20361%200%200%201%202%20101l-5%2034-4%2020c-1%202-1%202-3%202-2-4-2-8-2-12-1-15%201-29%202-44%201-24%203-48%201-72l-6-45c-7-28-20-54-40-75-18-18-40-33-63-43-22-9-44-15-67-19-18-3-36-4-54-4a277%20277%200%200%200-128%2029c-13%209-25%2020-35%2032a276%20276%200%200%200-55%20139c-1%2024%200%2047%208%2070l7%2015%2012%201%201%203c-3%202-7%202-11%203-10%202-20%206-29%2012-7%205-14%2011-18%2019-5%2010-3%2022-1%2033%205%2019%2017%2037%2033%2049%2011%209%2025%2014%2039%2016%2010%202%2020%200%2030-1%205%204%208%2012%2011%2017l18%2027a136%20136%200%200%200%2066%2050c22%209%2045%2014%2068%2019l41%208%2017%205v4h-12a535%20535%200%200%201-67-8%20255%20255%200%200%201-84-33c-11-7-21-16-29-27a214%20214%200%200%201-16%20123c-15%2027-40%2048-70%2057-3%201-7%202-10%201-2%200-2-1-2-3%201-3%204-5%206-6%2012-8%2026-14%2038-23%2013-11%2024-23%2031-38%206-15%2010-32%2012-49%202-13%203-26%202-40l-4-38-18-36-19%204a88%2088%200%200%201-75-38%2093%2093%200%200%201-20-58c0-9%203-18%208-25s12-13%2019-17c5-4%2012-6%2018-8l-9-24c-5-22-5-45-2-67a292%20292%200%200%201%2063-149c9-10%2018-19%2029-26%207-4%2014-5%2020-9%2043-19%2090-25%20137-22Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M475%20243a276%20276%200%200%201%20121%2023c23%2010%2045%2025%2063%2043%2020%2021%2033%2047%2040%2075l6%2045c2%2024%200%2048-1%2072-1%2015-3%2029-2%2044%200%204%200%208%202%2012l-1%2020c-2%205-2%2010-2%2016-2%2024-2%2049-6%2074-1%2012-3%2025-8%2036-3%209-8%2017-15%2024-12%2013-27%2024-43%2033-19%2011-39%2016-58%2024-5%202-10%204-13%208%208%201%2015%200%2023-2-5%2012-6%2024-6%2036%200%205-1%2011%201%2016%203%205%208%209%2013%2012l35%2013c22%208%2043%2018%2065%2027%202%204%205%207%206%2012%206%2011%207%2023%203%2035-5%2013-15%2024-27%2031-16%2011-36%2019-55%2024a494%20494%200%200%201-235-7c-20-7-40-14-58-24-14-8-29-18-40-31-6-8-11-19-12-29a122%20122%200%200%200%2086-107c4-24%204-49%200-73%208%2011%2018%2020%2029%2027l27%2014a331%20331%200%200%200%20124%2027h12v-4l-17-5-41-8c-23-5-46-10-68-19-13-6-27-13-39-21-10-9-19-18-27-29l-18-27c-3-5-6-13-11-17-10%201-20%203-30%201-14-2-28-7-39-16a94%2094%200%200%201-33-49c-2-11-4-23%201-33%204-8%2011-14%2018-19%209-6%2019-10%2029-12%204-1%208-1%2011-3l-1-3-12-1-7-15c-8-23-9-46-7-70a276%20276%200%200%201%2054-139c10-12%2022-23%2035-32a277%20277%200%200%201%20128-30Z%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M260%20571c4%200%207%200%2011%202%205%201%2011%204%2014%208%202%203%202%207%200%2010-5%206-12%2010-16%2016%206%204%2014%206%2021%209%204%201%208%203%2011%206l1%203-8-2-24-7c-4-1-8-3-9-7-1-3%201-7%203-10l15-13c-4-7-15-8-19-15ZM703%20577l2%203%202%2016a483%20483%200%200%201-2%2089c-2%2011-5%2023-10%2033a198%20198%200%200%201-106%2071c-1%2014-3%2031-2%2047l5%205c8%206%2018%209%2027%2012a451%20451%200%200%201%2068%2028c7%204%2013%209%2018%2015-5%201-10-1-16-2-22-9-43-19-65-27l-35-13c-5-3-10-7-13-12-2-5-1-11-1-16%200-12%201-24%206-36-8%202-15%203-23%202%203-4%208-6%2013-8%2019-8%2039-13%2058-24%2016-9%2031-20%2043-33%207-7%2012-15%2015-24%205-11%207-24%208-36%204-25%204-50%206-74%200-6%200-11%202-16Z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M668%20488c8%200%2016%204%2022%2010%202%203%205%208%204%2012%200%203-4%205-4%208-2%208-9%2014-16%2018-4%202-11%202-14-2-3-3-3-8-4-12%200-8%203-17%206-24-4%200-8%202-11%205-11%206-19%2017-24%2028-2%203-3%208-6%2010-1%201-3%201-4-1v-9c4-13%2012-25%2022-34%209-6%2019-9%2029-9ZM444%20498c20-1%2043%202%2060%2013%209%205%2017%2013%2020%2023%202%204%200%207-2%2011-2%203-7%205-11%207-12%203-24%201-36-1-5-1-11-2-14-6-4-5-3-11-1-17%201-7%203-14%209-20h-23c-17%202-33%209-47%2020-2%202-5%204-8%203-5%200-8-5-7-9s4-6%207-8c16-10%2035-14%2053-16Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M505%20385c8%201%2016%202%2023%206%205%204%208%209%2010%2014l-2%202c-2%201-4-1-6-2-9-6-21-7-32-7-9%200-18%202-27%206-8%203-17%205-24%209l-19%207c-13%205-27%205-40%2010-7%203-12%209-18%2013l-9%209c1-8%205-16%2010-22l13-13c7-6%2017-9%2026-11%2010-2%2019-6%2029-9l19-5c8-2%2015-5%2023-6l24-1ZM671%20399c7%201%2014%204%2022%204v3c-7%206-15%209-24%2010-12%202-26-1-37%203l-5%203c-9%2010-14%2022-20%2034-2-7%203-15%205-22s7-12%209-19c4-9%2014-16%2024-16h26Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22m591%20528%202%202%207%2022c4%208%2010%2015%2015%2023%204%206%206%2013%205%2020-1%206-4%2012-9%2016-7%207-16%2012-25%2016-5%203-11%204-17%202l5-4c11-9%2025-14%2036-24%202-2%204-6%204-9-1-7-5-11-8-16-5-9-10-16-13-25-2-7-4-16-2-23Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22M607%20684c3%202%202%206%201%209-2%208-4%2015-9%2022-5%205-10%2010-17%2012-10%204-22%202-31-3-4-2-9-5-11-9-1-1-2-3-1-4%202-2%205-3%208-3%209%201%2018%206%2027%207%207%201%2013-3%2017-8%205-6%208-15%2012-22%201-2%202-2%204-1Z%22%20fill%3D%22%23000000%22%2F%3E%3Cpath%20d%3D%22m663%20170%204%203c2%205%202%2011%202%2016%200%2018-6%2035-15%2050%2013-4%2026-6%2040-4%2013%202%2028%206%2038%2016%205%204%2010%2010%209%2016l-6-3c-7-5-14-9-22-11-19-6-38-5-56%200l17%208c23%2013%2042%2032%2052%2056%205%2013%207%2026%204%2039s-9%2026-17%2036a151%20151%200%200%201-51%2042c-4%203-9%205-14%205l10-12c9-7%2015-18%2016-29%202-13%200-26-4-38-5-19-15-35-28-50%208%2027%206%2056-4%2081-6%2014-15%2026-26%2036-7%207-16%2013-26%2016-3%200-6%201-8-1l7-13c4-9%206-18%206-27%202-22-2-44-7-65l-6-18c1%2020-1%2039-8%2057a94%2094%200%200%201-61%2056c-4%201-9%203-13-1%206-4%2012-7%2017-12%209-6%2017-13%2024-21l11-18c8-16%2012-34%2012-52-2%2012-7%2023-12%2034-11%2019-24%2036-40%2051-14%2014-30%2025-49%2031-4%201-7%202-11%201l-4-2c0-7%203-13%204-19%204-16%207-32%207-48a181%20181%200%200%201-56%2065c-16%2011-32%2020-50%2027a253%20253%200%200%200-1%2089c4%2020%2014%2039%2027%2054l4%205c-6%200-9-4-13-7a97%2097%200%200%201-29-46c-1%2012%200%2024%201%2037%200%205%201%2010-1%2015l-4-3-11-7c-10-7-19-14-27-23-11-12-19-27-23-43l-3-6c-14-13-27-28-36-45-10-19-16-39-17-60-2-32%207-63%2024-90%2019-31%2048-55%2079-73a354%20354%200%200%201%20280-28c3%201%206%204%2010%202a102%20102%200%200%200%2052-63l2-6Z%22%20fill%3D%22%23000000%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate(10%20-60)%22%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Get our weekly insights
Join our newsletter to receive the latest architecture deep-dives, ed-tech product updates, and school operating strategies directly in your inbox. No spam.