andrew/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes mobile menu in the header; v1 with the first case study is done!

Browse Source
This commit is contained in:
Andrew Gioia 2026-05-01 10:45:49 -04:00
parent 1ef9ba17fb
commit 6032a71f7d
Signed by: andrew
GPG Key ID: FC09694A000800C8
8 changed files with 63 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/css/site.css
View File

@ -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);

1
assets/icons/book.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v14"/><path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 349 B

1
assets/icons/github.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268"></path><path d="M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 924 B

1
assets/icons/mail.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/><rect x="2" y="4" width="20" height="16" rx="2"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 287 B

8
content/studies/legacy/index.md
View File

@ -55,6 +55,8 @@ study:
footnotes:
- symbol: "&dagger;"
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: "&ddagger;"
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.
<figure>
<img src="img/overview.png" />
@ -91,7 +93,7 @@ At the same time, Wallabyte was also rebranding as **Schooltastic Forms**, now a
We identified <mark>**four main UI/UX issues to target in this refresh**</mark>, 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&ddagger;, 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 <mark color="yellow">large customers do not all experience "good design" the same way</mark>. 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 <mark color="yellow">large customers do not all experience "good design" the same way</mark>. 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.

16
layouts/_default/baseof.html
View File

@ -45,10 +45,22 @@
</div>
<menu aria-label="Primary">
<li>
<a href='{{ "/#studies" | relURL }}'>Case studies</a>
<a href='{{ "/#studies" | relURL }}'>
<span>Case studies</span>
{{ partial "icon.html" (dict "name" "book") }}
</a>
</li>
<li>
<a href='{{ "/contact/" | relURL }}'>Get in touch</a>
<a href="https://linkedin.com/in/andrewgioia">
<span>Get in touch</span>
{{ partial "icon.html" (dict "name" "mail") }}
</a>
</li>
<li>
<a href="https://github.com/andrewgioia">
<span>GitHub</span>
{{ partial "icon.html" (dict "name" "github") }}
</a>
</li>
</menu>
</header>

2
layouts/index.html
View File

@ -5,7 +5,7 @@
Principle product <span color="blue">designer</span> building <span color="red">thoughtful</span> and <span color="yellow">accessible</span> interfaces.
</h1>
<p class="lede">
<b>20 years experience</b> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <b>bridge design and engineering</b>. Performance, accessibility, and the semantic web still matter!
<strong>20 years experience</strong> designing and building software for the browser. I balance intentional design principles with a mastery of CSS, HTML, JavaScript, &amp; WCAG to <strong>bridge design and engineering</strong>. Performance, accessibility, and the semantic web still matter!
</p>
<p class="lede tablet-show">
Read more about my <a href="design" out>design philosophy</a> or take a look at some <a href="#studies" in>case studies</a> below.

2
layouts/partials/footer.html
View File

@ -36,7 +36,7 @@
<a href="/#studies">Case studies</a>
</li>
<li>
<a href="/contact">Get in touch</a>
<a href="https://linkedin.com/in/andrewgioia">Get in touch</a>
</li>
<li>
<a href="https://github.com/andrewgioia">GitHub</a>