PROJECTS / PM CLUB WEBSITE V2
A Glaring Gap.
Joining the UNC Product Management Club's executive team in Fall/Winter of 2021, it was immediately evident: our website was behind the times. From outdated team photos to partner information stuck in the past, a facelift was overdue. And while Computer Science wasn't my forte, a trusty Udemy web development course had my back.
More Than Meets the Eye.
On the surface, the to-do list seemed straightforward:
Update the "Apply" section.
Freshen up "Our Team".
Revise "Our Partners".
Before: Hero section of V1 Website
But beneath these tasks lay a tangled web – a convoluted codebase that turned every minor tweak into a mission. To add to the mix, club members were clear in their feedback: they wanted more than just updates. They envisioned a central hub of resources, a go-to place for all things product management.
Mapping the Road Ahead.
My ascension to club president in Winter 2022, paired with an impending December 2023 graduation, injected a sense of urgency. The redevelopment journey comprised distinct stages:
Initial Blueprint: A humble drawing was my starting point, its inspiration stemming from a UNC course and an SVG-focused Fireship tutorial.
Initial sticky note sketch of potential PM Portal design
Digital Prototyping: Transitioning from paper, Figma became my canvas. Here, the website metamorphosed, drawing continual feedback from peers for refinement.
Figma design of PM Portal
Navigating Authentication: A trinity of cost, efficacy, and ease dictated our tech choices. Firebase emerged as our go-to for authentication, while Firestore shouldered data responsibilities. Crafting an infallible authentication trajectory was paramount, ensuring exclusive access to verified members.
Miro diagram of high-level auth flow for V2 website
Snippet of the SignUp.jsx code
Bridging Design & Code: Armed with a digital blueprint, I embarked on converting Figma visuals to React.js. Features like the image carousels for PM Lab and Partners sections, and a universal modal for user feedback, were woven in. The pièce de résistance was the intricate authentication pathway, integrated seamlessly.
Left: GIF of successful test sign up, Right: GIF of one of the image carousels implemented
A Legacy of Innovation.
After tireless efforts, our revamped UNC PM Club website has nearly emerged, complete with a user-friendly PM Portal and secure authentication features. The new look wasn't just skin deep; feedback loops were established to ensure it evolved with our users' needs.
As I approach the end of my tenure at UNC and with the Product Management Club, I'm hopeful. I may not see the full impact of this solution, but I hope I’ve laid down a foundation, a platform I believe will empower many more product management enthusiasts in their journey.
Left: GIF of successful Email and Password sign in, Right: GIF of successful