From 6032a71f7d0eea98486ff1de2057c668eb9d807d Mon Sep 17 00:00:00 2001 From: Andrew Gioia Date: Fri, 1 May 2026 10:45:49 -0400 Subject: [PATCH] Fixes mobile menu in the header; v1 with the first case study is done! --- assets/css/site.css | 46 ++++++++++++++++++++++++++++----- assets/icons/book.svg | 1 + assets/icons/github.svg | 1 + assets/icons/mail.svg | 1 + content/studies/legacy/index.md | 8 +++--- layouts/_default/baseof.html | 16 ++++++++++-- layouts/index.html | 2 +- layouts/partials/footer.html | 2 +- 8 files changed, 63 insertions(+), 14 deletions(-) create mode 100644 assets/icons/book.svg create mode 100644 assets/icons/github.svg create mode 100644 assets/icons/mail.svg diff --git a/assets/css/site.css b/assets/css/site.css index ee3e0b2..dcbf9b5 100644 --- a/assets/css/site.css +++ b/assets/css/site.css @@ -170,10 +170,31 @@ body { /* right menu */ menu { align-items: center; - display: none; + display: flex; gap: 1rem; font-size: 1rem; list-style: none; + padding: 0; + + a { + align-items: center; + display: flex; + justify-content: center; + } + + span { + display: none; + } + + .icon { + height: 1.5rem; + width: 1.5rem; + + &.icon-mail { + position: relative; + top: -1px; + } + } a:hover { color: #000; @@ -251,6 +272,7 @@ body { li { display: grid; grid-template-columns: 1.5rem auto; + margin-bottom: 1rem; span.symbol { font-size: 1.25rem; @@ -315,8 +337,7 @@ main { line-height: 1.5; strong { - color: var(--blue); - font-weight: 800; + font-weight: 700; } + .lede { @@ -892,7 +913,7 @@ body#legacy position: relative; > svg { - bottom: 0; + bottom: -1px; height: auto; left: -5dvw; width: clamp(150px, 20dvw, 320px); @@ -929,7 +950,7 @@ body#legacy body#legacy { main > header { - background-position: bottom 0 right 0; + background-position: bottom -1px right 0; svg { left: 0; @@ -944,8 +965,15 @@ body#legacy body > header { padding: 0 2rem; - menu { - display: flex; + menu + { + span { + display: inline; + } + + .icon { + display: none; + } } } @@ -1059,6 +1087,10 @@ body#legacy body > footer { + section { + justify-content: center; + } + #end { grid-template-columns: var(--article-grid); gap: var(--article-gap); diff --git a/assets/icons/book.svg b/assets/icons/book.svg new file mode 100644 index 0000000..d04e08f --- /dev/null +++ b/assets/icons/book.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/github.svg b/assets/icons/github.svg new file mode 100644 index 0000000..e3b8de6 --- /dev/null +++ b/assets/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/icons/mail.svg b/assets/icons/mail.svg new file mode 100644 index 0000000..cf9af70 --- /dev/null +++ b/assets/icons/mail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/content/studies/legacy/index.md b/content/studies/legacy/index.md index cb660e7..59e7492 100644 --- a/content/studies/legacy/index.md +++ b/content/studies/legacy/index.md @@ -55,6 +55,8 @@ study: footnotes: - symbol: "†" note: "Product names have been changed to maintain confidentiality. I'm happy to answer product questions as needed, but would need permission to share specifics like names and customers." + - symbol: "‡" + note: "User stories and personas were an important part of the discovery process and directly informed the problem statements behind this redesign. In this case, however, those audience definitions were already well established within the product, and reproducing them here wouldn't be worth it. What mattered most for the work was the wide variation in user contexts we needed to account for, from parents with one child to families, teachers, and staff operating across multiple children, schools, classrooms, and roles. That complexity is why testing required so many different demo accounts and permission combinations." --- {{< intro id="intro" title="Designing for clarity over polish in complex admin software" >}} @@ -76,7 +78,7 @@ Wallabyte had two halves: an administrative app for creating and managing forms, The existing experience had become painful enough that major customers, including NYC, were at risk of leaving unless the product became significantly easier to use. My job was to figure out how to make their mobile and desktop experiences more efficient and pleasant. -At the same time, Wallabyte was also rebranding as **Schooltastic Forms**, now a year after it had been acquired by Schooltastic. This project was my first interaction with this app and team, and not only did I have to get up to speed quickly, its users could be seeing a lot of sudden change. +At the same time, Wallabyte was also rebranding as **Schooltastic Forms**, now a year after it had been acquired by Schooltastic. This project was my first interaction with this app and team, and not only did I have to get up to speed quickly, its users could be seeing a lot of sudden change if this update wasn't handled carefully.
@@ -91,7 +93,7 @@ At the same time, Wallabyte was also rebranding as **Schooltastic Forms**, now a We identified **four main UI/UX issues to target in this refresh**, following my own deepdive into the product and several meetings with the product manager. -I was fortunate to share an entirely fresh set of eyes on a mature product, and it helped question a lot of assumptions that had been taken for granted over the years. This app necessitated multiple demo accounts with different permissions and scopes, and I spent the first week cataloguing my experiences. +I was fortunate to share an entirely fresh set of eyes on a mature product, and it helped question a lot of assumptions that had been taken for granted over the years. This app necessitated multiple demo accounts with different permissions and scopes‡, and I spent the first week cataloguing my experiences. These four problems became the core problem statements we used to frame the work and evaluate whether the redesign was actually solving the right things. The PM initially estimated a six-month path from early design through implementation. @@ -409,7 +411,7 @@ Taken together, I think the impact of this work is best understood less as a sin {{< section id="reflection" title="Reflection" >}} -The biggest lesson I carried forward from this project is that large customers do not all experience "good design" the same way. Because I had already spent years working at a company with NYC as a major customer, I knew they were especially resistant to drastic interface change once their admins and staff were comfortable with a tool that met their needs. +The biggest lesson I carried forward from this project is that large customers do not all experience "good design" the same way. Because I had already spent years working at a company with NYC as a major customer, I knew they were especially resistant to drastic interface change once their admins and staff were comfortable with a tool that met their needs. They complained about usability issues but would complain about change as well, so it was a narrow path to navigate. They were also quick to escalate around downtime, missing data, or broken workflows. That context shaped several of my decisions here: **I advocated against a full Honeycomb rollout in one pass**, pushed to keep the updated color palette closer to Wallabyte's original purple, and was extremely cautious about disrupting account-switching behavior that users had already learned. The right move was not to freeze the product, but to improve it progressively without breaking trust. diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 44bc5d3..6d6c1bb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -45,10 +45,22 @@
  • - Case studies + + Case studies + {{ partial "icon.html" (dict "name" "book") }} +
  • - Get in touch + + Get in touch + {{ partial "icon.html" (dict "name" "mail") }} + +
    • +
  • + + GitHub + {{ partial "icon.html" (dict "name" "github") }} +
    • diff --git a/layouts/index.html b/layouts/index.html index 56c4003..3ccafcf 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -5,7 +5,7 @@ Principle product designer building thoughtful and accessible interfaces.

    - 20 years experience designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, & WCAG to bridge design and engineering. Performance, accessibility, and the semantic web still matter! + 20 years experience designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, & WCAG to bridge design and engineering. Performance, accessibility, and the semantic web still matter!

    Read more about my design philosophy or take a look at some case studies below. diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index b160516..7876d7a 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -36,7 +36,7 @@ Case studies

  • - Get in touch + Get in touch
  • GitHub