bel tee-graziose

ux designer &

gundam enthusiast

bel tee-graziose

navigation ↓

SHORT RUN

Unified brand and mobile paths to help visitors get involved

Role: Solo visual designer

Timeline: 5 weeks

Tools: Figma & Figjam, Illustrator & Photoshop

▸ TL;DR

▾ TL;DR

I redesigned Short Run’s brand and mobile site so first-time visitors can quickly understand what the organization offers, join the mailing list, and find useful resources. The final design uses a recognizable visual system, a 3-step signup flow, and a Resources page built for smaller screens.

How might I make Short Run feel like a cohesive brand so people can get involved?

What wasn't working

Short Run is a Pacific Northwest comics collective that supports alternative and self-published artists through community programs, mentorship, grants, and the annual Short Run Comix Festival.

Short Run’s community energy was there. The mobile experience did not keep up.

On mobile, key updates lived inside blog posts, so people had to scroll and hunt. The brand also felt split across the website, logo, and social channels, which made the experience feel less cohesive than the community behind it. “Hard to find what’s next” beat “hard to join.” So I defined who the redesign had to serve.

What I built

I built a lightweight system that made the brand feel consistent and the mobile journey feel obvious.

I refreshed the logo, color palette, type, panel-based layouts, and reusable mobile components. Then I applied the system to the mailing list signup and Resources so the experience feels consistent and easier to use.

What it unlocked

The redesign made “what do I do?” easier to answer at a glance.

  • A more recognizable Short Run experience across logo, web, and social

  • A faster signup flow with 3 clear mobile steps

  • A Resources page that turns dense information into clear cards

  • A clearer path from interest to action for first-time visitors

The result: a mobile experience that feels like Short Run and makes joining the community easier.

How I’d validate it

As a next step, I’d test the redesign with quick mobile walkthroughs of the main “get involved” tasks. I’d look at whether people can find updates, complete the signup flow, and move from signup to Resources without confusion. I’d also track signals like signup completion rate, time to find updates, and consistent use of the refreshed visual system across social channels.

One brand, everywhere

The biggest shift was cohesion. Short Run already felt bold and handmade on social, but the mobile site didn’t carry that same energy.

I rebuilt the brand into a repeatable visual system with color, type, and panel layouts, so every screen feels unmistakably Short Run.

Before

Short Run’s social posts felt lively and handmade, but the site felt generic on mobile. It did not have repeatable layouts, hierarchy, or color use, so the brand felt split between a bold social presence and a plain website experience.

Initial homepage

Blog posts

Mailing list

Resources

After

The redesign brings Short Run’s social energy into the mobile site. A sunflower yellow palette, bold outlines, rounded panels, and comic-style layouts create a visual system that is easier to recognize at a glance.

New homepage

Clearer mailing list

Organized resources

What I learned

In 5 weeks, I used lightweight research to lock the mobile priorities fast: clarity, cohesion, and a clear path to join. I focused on where the brand broke and where first-time visitors lost momentum.

  • Brand + touchpoint audit: Reviewed the website and social channels for gaps in tone, color, hierarchy, and UI patterns to pinpoint where the brand felt inconsistent and hard to scan on mobile.

  • Competitive scan: Looked at similar comics collectives and festivals to compare small-screen priorities like updates, events, resources, and ways to join to borrow patterns that make key paths easier to find fast.

  • Journey mapping: Mapped the path to the mailing list and identified where the current flow created unnecessary friction to clarify the simplest path from curiosity to joining.

That work helped me pick one primary journey to design around.

The core journey

I designed around one thing: helping a new artist join the mailing list without losing momentum.

The existing flow sent people to an external form, which broke the experience and added friction. In the redesign, signup stays on the site as a short guided flow, then points people toward Resources, workshops, and community events.

What stood out

Here’s what stood out once the journey was clear.

Community first

Make the creative community easier to understand, join, and feel part of.

Brand cohesion

Bring the website and social channels into one handmade, expressive visual system.

Discoverability

Surface buried updates and resources so first-time visitors can find clear next steps.

From insights to action

The opportunity was simple: keep the handmade spirit, but make the next step obvious.

The research pointed to one clear opportunity: Short Run had a strong creative community, but the site made it too hard to see what to do next. I focused the redesign on making the experience easier to scan, more connected, and more true to Short Run’s handmade spirit.Community first → clearer entry points: I surfaced key actions so first-time visitors could quickly understand how to join, learn, and get involved.

Community first → clearer entry points

Surfaced key actions so first-time visitors could quickly understand how to join, learn, and get involved.

Brand cohesion → handmade visual system

Turned zine, risograph, and comics references into layered color, bold outlines, playful type, and reusable panels.

Discoverability → structured mobile paths

Replaced long feed-scanning with a guided 3-step signup flow and clearer Resources cards.

Crafting the system

I wanted it to feel handmade, print-based, and still easy to read on a small screen.

Finding the vibe

I started with a moodboard to define the visual direction. Risograph and comics references guided the color, type, and component style so the system felt expressive without getting messy on mobile.

Then I rebuilt the mark to match the vibe.

Rebuilding the mark

The logo needed to be fun, friendly, and easy to reuse everywhere.

With the visual direction in place, I explored how the logo could better reflect Short Run’s zine and print culture. I focused on a mark that could work across the website, social graphics, and merchandise without losing personality.

Locking the mark

The final logo stays readable, even when the rest of the system gets playful.

The final logo is simple, flexible, and easy to apply across formats. The wordmark can be layered for posters and social graphics, helping the identity stay recognizable while still feeling hands-on.

Sketching the flow

I prototyped the join flow as fast, guided, and made for thumbs.

Early mockups focused on making signup feel quick and approachable on a phone. I used a panel layout to keep information organized, then applied the same structure to Resources so it felt like the next place to go after joining.

Critique tightened the parts that felt hard to read.

What critique sharpened

I reviewed the layouts on desktop, then rechecked them on a phone to catch what broke at small sizes. On mobile, the homepage reads dense. Your hierarchy needs to do more work on the first screen.”

Critique stayed focused on readability: stronger homepage hierarchy, clearer contrast, and risograph-style overprint that stayed bold without muddying headers. I tightened the layouts, then pressure-tested the result with a quick scan check.

Feedback loop

Feedback

On small screens, the homepage felt dense and the overprint could muddy header letterforms, which hurt scannability.

What changed

Make the creative community easier toAdjusted the type scale (size + line-height), increased spacing, and kept headers on solid high-contrast treatments (saving heavier overprint for backgrounds). understand, join, and feel part of.

How I re-checked

Re-tested on my phone, ran a quick contrast check, and did a 3-question scan to confirm the first screen and Resources read cleanly.

How I pressure-tested it

I ran a quick mobile scan test (homepage + Resources) to confirm the hierarchy held up and the primary actions were clear without scrolling.

Two quick iterations

Homepage text felt dense on mobile

The first screen needed to answer one question fast: “What is Short Run, and what should I do next?” When type sizes were small and sections sat too close together, the homepage felt harder to scan and the primary CTA didn’t stand out.

  • Decision: Lightened the first screen so “Join” pops on a fast scroll.

  • Signal: Critique + on-device checks showed the hero felt dense and the CTA was easy to miss.

  • Why it matters: If the first screen does not scan fast, people lose momentum before they ever join.

  • Result: The homepage answers “what is this” and “what do I do next” in one glance.

Before: Homepage hero + CTA

After: Updated type scale + spacing + CTA

The homepage stopped feeling like a wall of text and started answering “what is this and what do I do?” in a single glance, guiding first-time visitors to “Join” without hunting.

Resources grid felt cramped

On a phone, the goal is to choose the right resource quickly: “Which one should I tap first?” When cards were tight together, the grid felt busy and increased the chance of mis-taps.

  • Decision: Opened up the Resources grid so each card reads as a clear, tappable choice.

  • Signal: Critique + on-device checks showed the grid felt busy and taps were easier to misfire.

  • Why it matters: When cards feel cramped, people hesitate and second-guess their first tap.

  • Result: Resources is quicker to scan, easier to pick from, and harder to mis-tap.

Before: Tight card grid + smaller tap targets

After: Increased gutters + clearer cards

Resources shifted from “where do I start?” to “that one,” with clearer cards that made picking the first tap feel obvious instead of second-guessy.

Together, these changes made the first-time path feel more natural: understand Short Run, tap “Join,” then land in Resources with clear next steps.

Built to repeat

The main design gap was cohesion. Short Run’s social posts felt bold and playful, but the website did not carry that same energy. I built a lightweight design system so the mobile site and social presence felt connected.

The system pulls from two main references: comic panels and risograph printing. Thick outlines, rounded corners, and panel borders help frame content. Sunflower yellow anchors the palette, while teal and warm accents add variety without hurting readability.

I applied this shared visual language to the main components: navigation, menu overlay, blog cards, form fields, buttons, and the signup success modal. This keeps the experience steady even when content and accent colors change.

Print-style color, on purpose

I treated color like layered ink, but kept the important text clean.

To bring in a risograph feel, I let accent colors overlap and shift while sunflower yellow stays steady. That kept the brand recognizable while still feeling handmade.

Here’s the full system snapshot.

The full system

The building blocks

Frame-first nav

The navigation keeps the logo centered and uses a full-screen menu so the structure stays simple, bold, and easy to follow.

Cards as panels

These image-first cards turn updates into repeatable blocks. Category colors add variety while keeping the grid organized.

The handoff after joining

After signup, the modal gives visitors a clear handoff: go to Resources and keep moving through the community.

Short Run

I designed the mobile experience around three first-time visitor questions: What’s happening? How can I join? Where do I go next?

Find what's happening

The redesign brings important updates closer to the top, so visitors do not have to dig through blog posts to understand what is happening.

Join without the hassle

Signing up is broken into quick steps: add your info, and pick what you care about so it feels easy to finish.

Get connected to the community

Quickly find shops, print help, artist support, and nearby events on the Resources page.

Wrap-up

What I learned

This project was special to me mostly because it gave me the freedom to connect my current reality as a UX designer with my past in graphic design, especially my love for risograph printing. During my undergraduate years, I found myself fascinated with Risograph printing, the mixing of colors and the ease of printing. Though I was only able to take one class in the subject before quarantine, I still use the reference guide I received from the printing center as a benchmark for printed media. Being able to return to this stylization was extremely fun, and helped inform most of the design decisions I made for the rest of my time at the University of Washington.

Next Steps

I’d strengthen the system with an accessibility pass (contrast, mobile type/spacing, focus/error states) and expand the component set beyond the core panels with clear responsive + spacing rules. I’d define a lightweight content model for “What’s new” so updates and resources stay consistent as content grows. As a next step, I’d validate the work with 5 short mobile usability sessions around the primary “get involved” tasks, then iterate based on success rate, time-on-task, and hesitation points.

What I’d change next time

Prioritization

  • Set and protect a tight sprint scope early (one primary journey + clear definition of done) so the work stays focused and shippable.

  • Put more design attention into the main contact / “get involved” flow by adding a few key interactions and using the form to route people to the most relevant resources.

Style over substance

  • Simplify the heaviest comic/print styling in high‑information areas so the experience reads clearly at a glance.

  • Run an accessibility pass on the mockups (contrast, type scale, spacing) earlier so the visual system stays bold without sacrificing readability.

made by bel tee-graziose ✿ updated 2026

Create a free website with Framer, the website builder loved by startups, designers and agencies.