☀︎ Summer 2024 ᝰ Visual Identity, Editorial ✐ Art Director, UI/UX Lead
34th Street Digital Rebrand
Identity, UI/UX, and Social Media @34th Street Magazine
Problem
34th Street Magazine is a Philadelphia-based arts and culture magazine that produces a monthly print issue. It has an existing digital presence through its website and Instagram, but these channels are largely disorganized, busy, and dated. As Editor-in-Chief Natalia Castillo comments, Street’s online identity is still stuck in the “2010 blog era.” Users are simply not engaging with the website outside of certain ‘viral’ articles.
Thus, key stakeholders at the company want a large-scale revamp of the brand’s digital presence from both a promotional-product and brand-identity angle.
Guiding QuestionHow might we curate an authentic, modern, and editorial digital identity that
promotes audience engagement?
Solution (Web)
01. Consolidated &
Simplified Homepage
The new Path@Penn homepage gives students a quick snapshot of their day-to-day academic life, with schedules, due dates, and announcements all in one place. This organized layout allows students to see what’s coming up and manage their time more effectively without digging through multiple pages.
02. Degree Planning
The redesigned degree planning section provides students with a clear, organized view of their academic progress, displaying core, major, and minor requirements at a glance. Visual progress indicators help students quickly assess their completion status across various curriculum requirements.
03. Course
Registration
Optimization
A special section is designated to each month’s issue, connecting Street’s digital product to its physical print product.
Users can explore this special issue in depth by navigating further to a new magazine page.
04. Reimagined Brand Identity
This is a website that screams Street, featuring its iconic teal color and updated typeface combinations.
Beyond that, bespoke icons were created for each Street-specific section and callout.
Users are able to make an immediate connection between the modern print product and the website.
05. Mobile Optimization
Users receive a funny pop-up after a certain number of visits to the website, encouraging audience engagement through newsletter subscriptions, donations, and overheards submissions.
Little callouts every few articles to check out different Street products or sections introduce readers to promoted, new, or overlooked content.
Of course, each pop-up or callout is written in Street lingo.
Web Process
01.
Stakeholder & User Interviews
key takeaways:
* doesnt look like our brand
we moved onto talking to actual users to confirm our hypothesis. We asked questions about their habits with watching TV and online shopping.
Key takeaways:
hard to find articles to read
short scroll, limited articles
no place for in-print articles
no subheads / specifications that draw interest
ugly visual design
super cluttered homepage with no white space and lots of ads
doesnt look like our. brand
primarily come with a viral article in mind or look at the feature. will glance at the scroll to see if anything pops out but not really use the section tabs. to find anything specific.
PROBLEMS:
Outdated design system
Path@Penn’s outdated design lacks cohesiveness and usability, making it difficult for students to navigate and find essential information.
Confusing organization/navigation
Repetitive links and an overwhelming number of menus and submenus disrupt user flow and could be consolidated for a smoother experience.
Stakeholder takeaways:
Editorial: g et more articles out there some never see the light of the home page
Business: doesn’t look like our brand, promote our products liek the magazine, newsletter, and donation events
02.
Double Diamond Analysis
To guide my problem-solving and solution development, I deployed the Double Diamond design model. This iterative framework, ensured a comprehensive user-centered approach while maintaining flexibility throughout the project.
03.
Design Iterations
show some pictures of old designs
Social Solution
01. Branded Template
Regular articles have a template style to them, cleaning up the feed while also maintaining some visual variation.
02. Special Editorial Posts
Special editorial sections like Ego of the Week and Overheards are presented differently and draw users in. Ego of the Week now includes an editorial photoshoot of the highlighted person, while Overheards has been converted to an editorial cartoon-series.
03. Print Promotion
Bespoke promotional graphics are made to promote each print event, alongside launch parties and gatherings that draw outside interest.
something about impact here
Reflection
Learnings
Working with 34th Street Magazine taught me how to balance creativity with brand consistency while adapting to different thematic challenges. I developed a deeper understanding of how visual identity shapes audience perception and honed my ability to collaborate across teams under tight deadlines.
Future Directions
Looking ahead, I hope to see how Street’s distinct voice can be further amplified through experimental typography and interactive digital storytelling. Integrating audience feedback could also enhance the magazine’s impact and engagement in future issues.
Experience
Serving as Design Editor for 34th Street Magazine was one of the most rewarding roles I’ve had. Collaborating closely with writers and design staff, I learned the art of translating stories into visuals that resonate. Seeing our work come together in print every month was deeply fulfilling and reminded me of why I love design.
Beyond that, I’ve also made some of my closest friends working here. I’m beyond grateful for my co-editor Sophia, my deputies: Katrina, Insia, Anish, Janine, and Emmi, all fifteen design newbies, and my editor-in-chief Natalia.
Thanks for checking out my project! If you’d like to see the nitty gritty of my design process, please reach out to me! I’m always happy to chat.