/* APMC, Northeastern Protothon 5.0 website redesign case study */ const { useEffect: useEffectAM } = React; const AM = { phases: [ ['01', 'Understand', ['User research', 'User interviews (11+)', 'Community forum analysis', 'Persona creation']], ['02', 'Explore', ['Insight clustering', 'Mapping user needs', 'Feature brainstorming', 'Feature prioritization']], ['03', 'Execution', ['Lo-fi sketches', 'Mid-fi wireframes', 'Hi-fi UI on Wix + Figma', 'Usability testing']], ], interviews: [ ['📋', 'Info was scattered', 'Users struggled to find schedules and event details, key info was buried or unclear.'], ['⚠️', 'Participation felt risky', 'Students feared missing deadlines; faculty lacked clarity on their role.'], ['❓', 'Vague CTA language', 'Unclear call-to-action copy left users uncertain of next steps.'], ], pulse: [ 'Real-time questions in FB groups revealed exactly what users couldn\'t find on the site.', 'Peer replies filling gaps showed students had become unofficial help desks, a gap the site should own.', 'Discussions hinted at missed opportunities to convert interest into actual event signups.', ], priority: [ ['High', ['About Us', 'Home Page', 'Events Page', 'Contact us & Social Media', 'Meet the Team', 'Videos & images of the club', 'Sign up / Sign in', 'Resources 1.0 + RSVP Events', 'Viewing other members']], ['Medium', ['Resources 2.0', 'Newsletter', 'Resume Review', { label: 'Protothon', sub: ['Problem Statement', 'Booking mentors', 'Qualifier slot', 'Finale Ticket'] }, 'Resources for Protothon']], ['Low', ['Blog / testimonials / videos', 'Guest Blog', 'Mock interviews', 'Product case studies']], ], userMap: [ ['New User', [ ['Events & programs by the club', 'base'], ['Current team & contacting them', 'base'], ['About the club', 'base'], ['Individual space for events', 'key'], ['Club resources & community help', 'base'], ['Sign up as a member', 'base'], ['Student hub', 'key'], ['Social media', 'base'], ['Contact us', 'base'], ['Student support', 'key'], ]], ['Both', [ ['Future events & RSVP', 'base'], ['Previous events', 'base'], ['PM 101 resources', 'key'], ['Newsletter', 'key'], ]], ['Existing User', [ ['Feed', 'base'], ['Resume review', 'key'], ['Summer / Fall internship', 'key'], ['View other members', 'base'], ['Interview prep material', 'base'], ['Mock interview', 'key'], ['PM study material / guidelines', 'cut'], ['Resources library', 'idea'], ['Course & certification', 'idea'], ['Guest blogs', 'base'], ['Product showcases, compare products', 'idea'], ]], ], exec: [ ['Mid-fidelity wireframes', 'Refined the information architecture and tested the homepage → schedule → registration path to cut drop-off before committing to visuals.', 'assets/apmc/wireframes.png'], ['An early direction', 'A first full-fidelity pass, a bold, photo-driven hero and clearer event framing that I put in front of users.', 'assets/apmc/v1-home.png'], ['The final website', 'Shipped on Wix: a warm, photo-led homepage with prominent CTAs, a clear program lineup, and the 400+ member community front and center.', 'assets/apmc/cover.png'], ['Program & judges detail', 'Deeper pages, Protothon details, judges, and rewards, all built on the same visual system for consistency.', 'assets/apmc/judges.png'], ], improvements: [ ['01', 'Clearer visual hierarchy', 'Used real photography and typographic contrast to guide users through content naturally, eliminating the visual noise of the old site.'], ['02', 'Accessible event info', 'Moved upcoming events to the top and made RSVP easier to find and act on, the most critical action now has the most prominent placement.'], ['03', 'Unified brand language', 'Replaced conflicting styles with a cohesive visual system rooted in Northeastern\'s identity. One design language, across every page.'], ], metrics: [ ['695', '', 'Sessions tracked during usability testing'], ['6.5k', '', 'Total clicks analysed across the flow'], ['4', '', 'Rage clicks, the interface rarely fought users'], ['3:48m', '', 'Average time on page'], ['47.8%', '↑', 'Average scroll depth, pushed key content earlier'], ['36.2%', '↓', 'Drop-off rate, led me to simplify registration'], ], learnings: [ 'Balancing speed with UX quality in a real launch scenario, when the event is in 3 months, every decision is a trade-off.', 'Rapid testing with real users uncovers critical gaps that no amount of internal review finds.', 'Cross-functional collaboration was the single biggest factor in shipping on time, design doesn\'t ship alone.', ], outcomes: [ ['Shipped on deadline', 'Delivered the full redesign in the 3-month window, kickoff to live, in time for Protothon 5.0.'], ['Became the club\'s platform', 'Adopted as APMC\'s permanent home, not a one-off event page. Every program the club runs now lives on the system I designed.'], ['Still live, 2+ years on', 'In continuous use across multiple Protothon cycles, two years after I left the club, with no redesign needed.'], ], nextSteps: [ ['Instrument analytics from day one', 'I added Hotjar after launch. Next time I\'d define success metrics and event tracking before the build, so conversion is measurable from the first visit.'], ['Pressure-test the mobile timeline', 'The horizontal timeline shines on desktop; on small screens it needs a dedicated round of testing I didn\'t have time for.'], ['Document a reusable component library', 'Wix limited true components. A documented system would let the next club lead ship new events solo, without rebuilding patterns.'], ], wfNotes: [ [ ['Photo-letter hero', 'Spells APMC in event photos, not stock art. Community-first signal before a single line of copy.'], ['Staggered programs grid', 'Alternating card heights break monotony of flat rows, adds rhythm without extra visual weight.'], ['Empty events kept in', 'Honest empty state vs. hiding the section, sets expectation so users know where to return.'], ], [ ['Two CTAs above fold', 'Register deck + Book slot side by side, the two jobs users come to do, visible immediately.'], ['Horizontal timeline', 'Dates as a milestone rail, same info as a bullet list but a fraction of the words.'], ['Logos before the brief', 'Social proof before commitment lowers hesitation, who\'s involved matters as much as what.'], ], ], finalNotes: [ [ ['Real photos in the letters', 'Tested against illustrations in user sessions, real people won 2:1. Warmth over polish.'], ['Dark hero anchors hierarchy', 'High contrast pushes both CTA buttons to the foreground. Dark also hides seam between letter photos.'], ['Red from NU\'s identity', 'Pulled directly from Northeastern\'s brand, instantly familiar without needing to explain the club.'], ], [ ['Red problem-statement card', 'Isolated highlight so it cannot be scrolled past unread. The brief is the whole event.'], ['Mentor logos lifted up', 'Heatmaps showed cold engagement below the fold, logos moved up after testing; click rate doubled.'], ['Consistent photo-led system', 'Same visual language across every deep page: judges, prizes, resources, feels like one product.'], ], ], }; function ApmcCase({ project, projects, onOpen, onHome }) { useEffectAM(() => { window.scrollTo(0, 0); }, []); const idx = projects.findIndex((x) => x.id === 'apmc'); const next = projects[(idx + 1) % projects.length]; return (
{/* HERO */}
02 Web · UX 2023

APMC

Website Redesign, Northeastern Protothon 5.0

A full UX redesign of a university club's event website, from buried information and vague CTAs to a clear, conversion-driven experience that launched for Protothon 5.0. Still live & in use today ↗, two years after I left APMC.

{/* device strip */}
APMC homepage
APMC Protothon page
{[['Role', 'Lead Product Designer'], ['Context', 'Aspiring Product Managers Club · Northeastern'], ['Timeline', '3 months, kickoff to launch'], ['Tools', 'Figma · Wix · Heatmaps']].map(([k, v]) => (
{k} {v}
))}
{/* STATS BAND */}
{[['450+', 'Sessions from launch'], ['700+', 'Daily active users'], ['2 yrs+', 'Still live & in use today']].map(([n, l], i) => ( {n} {l} ))}
{/* CONTEXT */}
00Context

A student club, a real event, a tight deadline

Sept 2023. The Aspiring Product Managers Club at Northeastern University needed a full redesign of their event website for Protothon 5.0, a hackathon bringing together students, judges, sponsors and faculty. The old site wasn't keeping up with the event's ambition. The redesign I shipped is still the club's live site two years on, now running Protothon 6.0.

What I led

End-to-end UX, research, IA, wireframes, usability testing, and the shipped build on Wix.

Collaborated on

Visual direction with 2 club designers; content and event logic with the Protothon organizing team.

Worked with

Club leadership, faculty advisors, and 11+ interview participants across students and staff.

{/* PROBLEM */}
01The problem

The site was making the event look small

The old APMC site had three compounding problems, any one alone would cost signups. Together they made the event harder to discover, understand, and join. Here it is, annotated.

{/* left column callouts */}
1
Cluttered, flat navigation

Seven peer links crammed across the top, schedules, registration and key info were buried with no hierarchy or clear path.

→ top navigation bar
3
A dead-end events section

The one place people came to act read “No upcoming events at the moment”, no CTA, no next step, no reason to sign up.

→ community / events block
{/* centered screenshot with pins */}
The original APMC website homepage before the redesign 1 2 3
{/* right column callouts */}
2
Off-brand, inconsistent visuals

Loud stock illustrations and clashing styles undercut the event’s credibility, it looked like a club page, not a flagship hackathon.

→ hero & Protothon block

Net effect: visitors couldn’t tell what Protothon was, when it ran, or how to join, so most simply left.
{/* OBJECTIVE BAND */}
( The objective )

Redesign the site to boost engagement, drive signups, and lower bounce, in time for Protothon 5.0.

{/* PROCESS */}
02Process

Three phases, three weeks, one launch

{AM.phases.map(([no, t, steps]) => ( {no}
{t}
    {steps.map((s) =>
  • {s}
    • )}
))}
{/* UNDERSTAND */}
03Understand

Two weeks of listening before a single pixel

Dived into an intensive 2-week research sprint: 11+ user interviews with students and faculty, college forum analysis, and persona creation to map behavior patterns.

What interviews revealed

{AM.interviews.map(([icon, t, d], i) => ( {icon}
{t}

{d}

 ))}

Community pulse, Facebook groups

Real users in public forums were doing the site's job for it, answering each other's questions. That told me exactly where the site was failing.

{AM.pulse.map((p, i) => ( ✳ {p} ))}

The community I designed for

Not abstract personas on a slide, a real, 400+ member club of Northeastern students chasing product careers. Designing for them meant designing for their energy.

APMC members gathered at a Protothon event
Northeastern University seal

Aspiring Product Managers Club, Northeastern University, Boston. A student-run community of 400+ aspiring PMs.
{/* EXPLORE */}
04Explore

Too many insights, I needed a way to cut through

I clustered raw needs by user type, then ran a team brainstorm to score every feature by impact, turning a messy wishlist into a clear build order.

Mapping user needs

An affinity map split needs across new members, returning members, and the overlap, so the IA could serve both first-timers and regulars.

affinity-map · user-needs.fig
Key need New idea Deprioritized
{AM.userMap.map(([group, items]) => (
{group}
{items.map(([label, kind], j) => ( {label} ))}
))}

Prioritizing features for impact

A High / Medium / Low pass scoped the MVP, what had to ship for Protothon 5.0, what could wait, and what was a nice-to-have.

priority-matrix · mvp-scope.fig
{AM.priority.map(([label, items], i) => (
{label} priority
    {items.map((it, j) => ( typeof it === 'string' ?
  • {it}
    • :
  • {it.label}
      {it.sub.map((s) =>
    • {s}
      • )}
    • ))}
))}
{/* WIREFRAMES */}
05Wireframes

Mapping the whole structure before any visuals

Before committing to type, colour, or photography, I wireframed both key pages end to end, locking information architecture, hierarchy, and CTA placement in low fidelity. Structural problems surfaced early, while they were still cheap to fix.

{[ ['Homepage', 'apmc.northeastern.edu', 'assets/apmc/wf-home.png', 0], ['Protothon page', 'apmc.northeastern.edu/protothon', 'assets/apmc/wf-protothon.png', 1], ].map(([name, url, src, ni], i) => (
Wireframe {name}
{url}
{`${name},
{AM.wfNotes[ni].map(([t, d], j) => (
{t}{d}
))}
))}
{/* FINAL DESIGN */}
06Final design

The shipped site, built on Wix, live today

The same skeleton, now in full fidelity: a warm, photo-led system rooted in Northeastern's identity, with the 400+ member community and the most important actions pushed to the top of every page.

{[ ['Homepage', 'apmcneu.com', 'assets/apmc/final-home-web.jpg', 0], ['Protothon page', 'apmcneu.com/protothon', 'assets/apmc/final-protothon-web.jpg', 1], ].map(([name, url, src, ni], i) => (
Final {name}
{url}
{`${name},
{AM.finalNotes[ni].map(([t, d], j) => (
{t}{d}
))}
))}

What I improved

{AM.improvements.map(([no, t, d]) => ( {no}
{t}

{d}

 ))}

Usability testing, what the data told me

I ran Hotjar across the live Protothon site, click maps and scroll depth showing where attention, and friction, actually landed. Three screens drove the biggest changes.

Click heatmap of the Protothon registration screen
01 · Registration screen

Clicks bunched on the top nav and the red register CTA. The problem-statement copy in the middle ran cold, people skim straight to the action.

Click heatmap of the Resources cards
02 · Resources cards

The middle “Previous Decks” card ran hottest, teams wanted prior examples first, so I led the lineup with it.

Scroll-depth heatmap of the Judges and rules section
03 · Judges & rules, scroll depth

Engagement fell off sharply below the judges row. The rules panel and prize icons sat in a cold zone, so I tightened the page and lifted the essentials higher.
{AM.metrics.map(([n, arr, d], i) => (
{n} {arr}

{d}

 ))}
{/* OUTCOMES */}
07Outcomes

The redesign didn't just launch, it stuck

The clearest measure of a club site isn't launch-day polish, it's whether the next team keeps using it. This one outlived my time at APMC.

{AM.outcomes.map(([t, d], i) => (
{t}

{d}

 ))}
{/* LEARNINGS */}
08Learnings
{AM.learnings.map((l, i) => ( 0{i + 1}

{l}

 ))}

What I'd do next

With more time, and the benefit of hindsight, here's where I'd take it further.

{AM.nextSteps.map(([t, d], i) => (
{t}

{d}

 ))}
{/* NEXT */}
onOpen(next.id)}>
( Next project )

{next.title}

{next.subtitle}
→
); } Object.assign(window, { ApmcCase });