SHORT RUN
Short Run
A brand and mobile redesign for a Pacific Northwest comics collective that brought Short Run's bold, handmade social energy onto their website and gave first-time visitors a clear path to join.
Role
Visual designer
Timeline
5 weeks
Team
Solo
Tools
Figma, Photoshop & Illustrator
My contributions
Brand identity, mobile UI, 3-step signup flow
Impact
Cohesive visual system across logo, web, and social
#brand-design #mobile-UX #visual-system #risograph #zine-culture #PNW #solo-project
bel tee-graziose · 2023 · UW HCDE
34
✦ ✦ ✦
The problem
When your social and your site are strangers
Short Run is a Pacific Northwest comics collective built around one belief: that alternative and self-published artists deserve a real community behind them. Every year they put on the Short Run Comix Festival in Seattle, award the DASH grant to an independent artist premiering new work, send exhibitors across the country through the Katie Kelso Travel Grants, and run Trailer Blaze, a week-long comics residency where artists work out of trailers on the Washington coast. They publish risograph anthologies. They run workshops. They do all of this with a volunteer team and a WordPress site. The energy they bring to the community is loud, handmade, and completely genuine.
The mobile site was none of those things.
(Short Run's social presence was bold and print-inspired. Their Instagram felt like a zine. Their website felt like a form letter. Key updates lived inside blog posts that required scrolling to find. The mailing list redirected people to an external form mid-visit. And across the website, logo, and social channels, nothing looked like it came from the same organization. For a community that explicitly asks you not to call them a comic-con, that gap mattered.)
Three things were working against first-time visitors:
Updates buried in blog posts
Key announcements, grants, festival dates, exhibitor lists, lived inside long-form posts. Finding out what Short Run was doing next meant scrolling and hunting instead of landing and knowing.
A brand that felt split
Short Run's social presence was bold, print-inspired, and full of personality. The website didn't carry any of that energy. Logo, web, and social felt like three different organizations.
Signup that broke mid-flow
The mailing list sent people to an external form. One redirect was enough to lose anyone who wasn't already committed.
Before
Initial homepage
Blog posts
Mailing list
Resources
Our guiding question
How might I make Short Run feel like a cohesive brand so people can get involved?
#short-run #PNW-comics #brand-system #mobile-UX #solo-project
bel tee-graziose · 2024 · UW HCDE
52
✦ ✦ ✦
The Product
What Short Run enables
Short Run’s website helps artists and curious visitors find the community: what’s happening, how to join, and what to explore next.
No digging through blog posts. No guessing where to start.
See what’s happening
Find the latest events, festival news, and programs without digging through a long feed.
Join the list
Sign up in three small steps, then choose which Short Run updates you want to hear about.
Find your next thing
Browse comic shops, classes, and creative resources for whatever you want to make, learn, or explore next.
(Short Run already had the community, artists, and opportunities. The redesign makes them easier to find and brings the site closer to the playful, handmade world it supports)
#website-redesign #mobile-UX #brand-system #content-design #comics #risograph
bel tee-graziose · 2024 · UW HCDE
127
✦ ✦ ✦
The Research
Following the friction
5 weeks, lightweight research, one clear opportunity. The goal wasn’t to go deep on everything. It was to figure out exactly where to focus.
Brand + touchpoint audit
Reviewed the website and social channels side by side, looking for gaps in tone, color, hierarchy, and UI patterns.
Why: you can't fix a cohesion problem if you don't map exactly where the breaks are. The audit turned a vague "it feels off" into a specific list of things to change.
Competitive scan
Looked at similar comics collectives and festivals for mobile patterns around updates, events, resources, and join paths.
Why: Short Run isn't the first small arts org with a mobile problem. Seeing how others had solved it meant I could spend the five weeks designing, not reinventing.
Journey mapping
Mapped the full mailing list path and marked every place the flow broke down.
Why: "it's hard to join" is too vague to design against. Mapping the journey showed the external form redirect was the single biggest drop-off point, which gave me one clear place to focus.
That work surfaced three priorities:
The door was hard to find
First-time visitors had no obvious entry point. To join, learn, or get involved, visitors had to already know where to look.
Two brands, one collective
Short Run's social presence and website looked like separate organizations. Every touchpoint needed to speak the same visual language.
You had to hunt for what's next
Updates, grant deadlines, and festival announcements were buried in blog posts. On mobile, nothing surfaced fast.
One primary journey to design around: Landing → "Join" → Info → Interests → Review → Resources
#research #brand-audit #journey-mapping #competitive-scan #5-weeks
bel tee-graziose · 2024 · UW HCDE
19
✦ ✦ ✦
The brand
Bringing the zine energy home
Short Run already had a visual point of view. Its posters and social posts felt bold, colorful, and handmade, while the website looked like it belonged to a different organization. I wanted the redesign to bring that zine energy onto a small screen without making the interface harder to use.
Rebuilding the mark
The existing logo didn’t carry the same personality as Short Run’s event posters and social graphics. I explored marks that could flex across the website, merchandise, and social without losing Short Run’s handmade feel.
The final mark is a little wink to how you make a zine. Fold one sheet into eight pages, snip the center, and push the folds together. That’s where the little open-book shape above the wordmark comes from. That felt right for Short Run. It ties the logo to the hands-on, make-it-yourself process behind zines instead of just making the identity look handmade.
The black-and-white version keeps it clear on the website, while the layered versions let it play across posters, merch, and social graphics.
Click to explore color treatments
Color as layered ink
I treated color like ink in a risograph press. Sunflower yellow anchors the palette, while teal and warm accents can overlap and shift to create energy.
I kept important text and actions on clear, high-contrast treatments so the print effect could stay expressive without getting in the way of reading on a small screen.
(I took one risograph printing class at SAIC before quarantine shut everything down. I still use the reference guide from that printing center. Short Run literally publishes risograph anthologies. This was the one project where that background had a real reason to show up.)
The result was a visual direction that could move from a poster to a phone screen and still feel like Short Run.
#brand-identity #visual-system #logo-design #risograph #zine-culture #web-redesign #mobile-UX
bel tee-graziose · 2024 · UW HCDE
27
✦ ✦ ✦
The System
Same ink, different pages
Short Run’s social posts, website, and signup flow needed to feel like they belonged to the same place. I turned the zine-inspired direction into a small set of repeatable patterns for the mobile site.
The pieces behind the pages
The same visual language carries across navigation, updates, forms, and the signup handoff. The goal wasn’t to make every screen identical. It was to make each part of the site recognizable, connected, and easy to scan.
A frame for the story
The centered logo and simple menu create a clear frame for the rest of the experience.
Panels with a job to do
Repeatable card layouts turn updates and resources into distinct, tappable choices.
The page after the form
After signup, the success state points visitors toward Resources so the journey continues instead of ending at the form.
The system gave Short Run a consistent visual language without sanding off what made it feel like Short Run.
#design-system #mobile-UX #web-redesign #visual-system #content-design #risograph #zine-culture
bel tee-graziose · 2024 · UW HCDE
42
✦ ✦ ✦
The Sketch
The first fold
Once the visual system had a direction, I tested it on the part of the site that needed the clearest path: joining the mailing list. Before adding visual polish, I wanted to make sure the path was clear: spot Join, move through signup, and know what to do next.
Three things I was checking
Can visitors find the signup?
The primary action needed to stand out on the first screen.
Does it feel manageable?
The form needed to feel like a short sequence, not one large task.
Is there a clear next step?
Resources needed to feel like part of the journey, not a separate page.
I carried the same panel structure into the homepage and Resources so the path felt connected from the first tap through the handoff.
The low fidelity sketches helped me test the structure first, before spending time on color, typography, and visual polish.
#lo-fi #wireframing #mobile-UX #user-flow #interaction-design #information-architecture #prototyping
bel tee-graziose · 2024 · UW HCDE
31
✦ ✦ ✦
The validation
The ink test
I took the first pass to critique, then checked it on my phone. I was looking for two things: where the page got noisy and where the next step got lost.
Homepage
Join
Resources
“On mobile, the homepage reads dense. Your hierarchy needs to do more work on the first screen.”
“Watch the overprint on headers. If it muddies the letterforms, you lose scannability fast.”
Feedback loop
What I heard
The homepage felt dense, and the overprint could muddy the headers.
What I changed
Increased type size and spacing. Kept important headers on solid, high-contrast treatments.
What I checked
Ran a 15-second scan, a contrast check, and a light tap-through on my phone.
Two quick checks
15 sec
No tapping
Could someone understand:
What Short Run is
What they should do first
Where they could go next
Menu → Join → Resource
Light friction scan
I checked for cramped spacing, unclear actions, and places where the flow lost momentum.
The goal wasn't to make the page quieter, it as to make the next step louder.
#critique #mobile-UX #iteration #visual-hierarchy #accessibility #interaction-design #usability-testing
bel tee-graziose · 2024 · UW HCDE
38
✦ ✦ ✦
The Validation
Two quick fixes
The homepage was doing too much
What I saw
The first screen felt dense on mobile. Too many headlines, cards, and actions were competing for attention.
What I changed
I tightened the type scale, increased spacing, and gave the primary action more room to breathe.
Result
The homepage became easier to understand at a glance, without losing the busy Short Run energy.
Before: Homepage hero + CTA
After: Updated type scale + spacing + CTA
Resources grid felt cramped
What I saw
The grid had personality, but the cards were packed too tightly to scan comfortably on a small screen.
What I changed
I opened up the spacing between cards and clarified the grouping so each resource had more room to register.
Result
The page still felt collage-like, but the destinations became easier to scan and tap.
Before: Tight card grid + smaller tap targets
After: Increased gutters + clearer cards
The goal wasn’t to make the page quieter; it was to make the next step louder.
#mobile-UX #responsive-design #visual-hierarchy #information-architecture #interaction-design #design-iteration #usability-testing
bel tee-graziose · 2024 · UW HCDE
44
✦ ✦ ✦
The Redesign
The clean pull
After critique, I brought the fixes back into the final interface: a clearer first screen, more breathing room in Resources, and a join flow that points somewhere useful. The goal wasn’t to make Short Run quieter. It was to make the rhythm easier to follow.
Hierarchy first
The homepage gives the event and join button the clearest weight.
One language, different jobs
The same panel logic carries the join flow, content cards, and resource grid.
Color with a job
Layered color keeps the site expressive without taking over the text or actions.
The final pass kept the zine energy intact, but gave the interface a clearer rhythm from first tap to next step.
#hi-fidelity #mobile-UX #visual-design #interaction-design #design-system #responsive-design #prototyping
bel tee-graziose · 2024 · UW HCDE
36
✦ ✦ ✦
The reflection
The next run
What I learned
Short Run was special to me because it let me connect my current work as a UX designer with my background in graphic design, especially my love of risograph printing. During undergrad, I became fascinated by how risograph inks layer and mix, and how much personality the process can create with relatively simple tools. I was only able to take one risograph class before quarantine, but I still use the reference guide from that printing center as a benchmark for printed work.
Returning to that visual language was really fun, but it also helped guide the rest of the project. The layered colors, bold type, and handmade feel shaped the brand and system, while the mobile layout made me think carefully about where that energy could show up without getting in the way. This project reminded me that personality and usability can work together. It also helped inform many of the design decisions I made throughout my time at the University of Washington.
What I’d change next time
Prioritization
I would set a tighter sprint scope earlier, with one primary journey and a clear definition of done. That would keep the work focused and shippable.
I would also spend more time on the main join flow by adding a few key interactions and using the form to guide people toward the resources most relevant to them.
Style over substance
I would simplify the heaviest comic and print treatments in the highest-information areas so the experience reads clearly at a glance.
I would also run an accessibility pass on the mockups earlier, checking contrast, type scale, and spacing while the visual system is still taking shape. That would let the work stay bold without sacrificing readability.
Personality isn’t the opposite of clarity. The system has to carry both.
#reflection #design-process #iteration #mobile-UX #visual-design #case-study
bel tee-graziose · 2024 · UW HCDE
29