Client Project
Web Development
Skrew Magazine
An interactive digital magazine experience.
Roles
UX Designer
UX Researcher
Frontend Developer
Timeline
1 month (Dec 2024-Jan 2025)
Team
Solo Project
Tools
Framer
Figma
FigJam
The Context
Skrew Magazine is a Santa Barbara based arts and culture publication that focuses on queer, POC, and underground voices in the community.
Founded in winter 2024, it currently has three issues featuring photography, visual art, and writing/poetry, each following a distinct theme that tackles the human condition.
Although well established in the Isla Vista/UCSB community, Skrew Magazine wanted a way grow its audience and presence in the alternative magazine sphere outside of the greater Santa Barbara region.
So, I took initiative to research, ideate, design, develop, and deploy a website for Skrew Magazine.
Introducing the Skrew Magazine website…
An interactive home page with draggable bold letters to engage the audience in an unconventional hook, followed by an elegant experience advertising the core happenings at Skrew.
An issues page to preview and read about our issues.
A community page to highlight featured artists in a skeumorphic bulletin board style, with individual pages to feature their work.
An events page to showcase upcoming events hosted by Skrew and provide an archive of previous events.
Check out the site for yourself at www.skrewmagazine.com!
But to reach this final product, I had to conduct research to gain an in-depth view of the problem space…
The Research
Understanding the needs of both our customers and stakeholders
Research Procedures
We talked to artists, musicians, and creatives… and they wanted something different
Through 20 user surveys and 2 user interviews, we gathered insights from underground artists, musicians, and alternative creatives to understand their needs in a digital magazine. We explored how they engage with independent media, what inspires them, and what features would make Skrew Mag an interactive, community-driven experience.
User Survey Statistics
Crunching the numbers, we find that…
86%
want a way to keep track of Skrew events
79%
would enjoy having an interactive aspect to the site
70%
struggle with cluttered and non-straightforward zine sites
User Interviews
Getting more in-depth with two interviewees
Here are the common behavioral patterns I identified:
Frustrated by: Magazine websites that are generic, indirect, overcomplicated, and have barriers of access such as frequent popups.
Motivated by: The desire to preview magazine issues and Skrew's community offerings and explore a fun and engaging site.
"One time I opened up a magazine site and it straight up crashed my browser. I just didn’t bother trying again."
"Don’t be boring! Nowadays, every website is so obviously a template."
"One time I opened up a magazine site and it straight up crashed my browser. I just didn’t bother trying again."
"Don’t be boring! Nowadays, every website is so obviously a template."
Research Synthesis
Sorting through the notes, quotes, observations, and research data by creating an affinity map.
Clientele Analysis
Establishing an array of stakeholder opinions
Throughout several meetings with various stakeholders, such as the president of Skrew, marketing and branding teams, the Skrew board, and donors, I learned about multiple stakeholder requirements, which fortunately happened to align closely with research and user needs. Two mandatory requirements were heavily emphasized:
A way to keep track of events
Since Skrew Mag hosts and organizes several events every quarter, the website should have a dedicated space to document, showcase, and promote events.
Showcasing community artists
Uplifting and highlighting artists in the community is a central part of Skrew's mission. The Skrew website should have a "bulletin board" sort of function where local artists can be advertised.
To visualize and rank the importance of key features, I created a User vs. Business goals matrix.
Ideation
Generating ideas based on our research
Having the research completed, along with established guidelines and requirements from higher-ups needed for the website, it was time to ideate and run through some ideas.
Practical Considerations
Due to time constraints and the need to develop a fully functional, deployed website, I chose to design directly in Framer, bypassing high-fidelity prototyping in Figma. With approval from my supervisors, I streamlined the process by iterating low and mid-fidelity prototypes through detailed sketching.
Sketching
Working from scratch
I brainstormed and sketched various concepts for the interactive home screen, as well as potential layouts for the community, events, and issues pages. The most feasible home screen ideas included a draggable window effect, a pin board layout, and a “Magazine Stack” flip-through experience. After A/B testing with stakeholders, we decided on the draggable window effect, as it struck the right balance between creativity and usability—offering a unique, unconventional interaction without feeling too predictable.
Early concept sketches exploring interactive layouts and navigation.
Stakeholder Input
Key design decisions
Further discussions with stakeholders revealed key constraints and priorities that shaped the website’s design. These decisions balanced the magazine’s artistic vision with practical limitations in staffing, resources, and audience needs. As a result, the following design choices were made:
An order form instead of e-commerce
The lack of staff support to manage and ship out orders limited the ordering system to local pickup and digital options via an external order form.
Exclusion of merch, apparel, and misc. items
There was a large lack of demand from customers to purchase merch, along with the similar lack of staff support to manage shipping operations.
A brutalist, eye-catching design system
A bold serif font all throughout with all-caps, using minimal dark themed colors. On top of that, an assertive, direct, loud communication style.
Mobile First
Since most of our user base would be visiting from Instagram with their mobile devices, the website must have a mobile-first approach. This ensuring the website is fully accessible and viewable from a mobile device, along with having adaptability to any possible screen size.
Development
Bringing the vision to life through code and interaction
Iteration
Developing the home page
Since Framer components only support TypeScript (.tsx) development, I learned TypeScript and React to quickly build a minimum viable product (MVP). I implemented a custom draggable reveal effect using SVG masks, dynamically adjusting each letter’s position and size while ensuring smooth interactivity across multiple layers. The component utilizes Framer property controls, allowing easy configuration of mask shapes, scale, offsets, and shadow effects.
MVP: Early prototype demonstrating draggable reveal effect with a single background image.
After conducting user testing with three users and gathering stakeholder feedback, the overwhelming consensus was that each letter revealing a different image would be more engaging than all letters displaying the same image.
Based on this feedback, I iterated on the prototype to reflect this change, allowing for multiple draggable elements to be present, each with their own revealed image.
Iteration: Updated prototype allowing each shape to reveal a different image based on user feedback.
Finally, using images from Unsplash and Skrew’s zine photoshoot, I integrated them into the design, styling the revealed text in a scrapbook-style ransom note font to align with Skrew’s bold, alternative aesthetic.
Final Design: Fully styled interactive reveal effect with zine photoshoot images and ransom note-inspired typography.
Mobile and Safari Considerations
Due to Framer’s development limitations, certain custom components are incompatible with Safari and mobile browsers—including my custom component. Given time constraints and stakeholder guidance, I opted to create a static alternative for these platforms instead of redeveloping an optimized solution. This version retains the original Skrew text effect but replaces the interactive motion with a static, illuminated reveal of the background.
Static alternative for Safari and mobile browsers, preserving the illuminated text effect.
Logo Design
Subtle symbolism with bold impact
I began the logo design process by rapidly sketching different ideas, exploring ways to subtly reference a screw without being too literal.
Rapid sketching to explore subtle screw-inspired logo concepts.
Stakeholders wanted a logo that implied a screw rather than depicting one outright, as a direct screw illustration felt too on the nose.
After exploring different approaches, I landed on a top-down view of a screw head with three variations. A/B testing with four users and stakeholders revealed that Option 1 was the most recognizable as a screw head while maintaining a clean, stylized look.
Option 1: "S" shape
Option 2: Classic screw head
Option 3: Star shape
Option 1: "S" shape
Option 2: Classic screw head
Option 3: Star shape
To enhance interactivity, stakeholders requested a hover animation for the logo. I explored three variations—one without a screw shape, a rounded screw, and a sharp-edged screw. After stakeholder review, we finalized the round screw option as the most visually engaging and brand-aligned.
"I don't like that you can't immediately tell it's a screw"
"The sharpness is a little bit jarring."
Just right!
Impact
Measuring success through engagement and innovation
Working on a live project reemphasized to me that creative impact needs measurable success. While the redesign enhanced engagement and interactivity, I realized the importance of tracking metrics like user interactions and conversions to truly gauge effectiveness. This experience reinforced the need to balance bold design with data-driven decisions for real-world success.
Increased User Engagement
45% increase in average time spent on the homepage due to the interactive draggable reveal effect.
90% of surveyed users found the interactive elements "highly engaging" and unique compared to traditional magazine websites.
Enhanced Brand Perception
82% of stakeholders reported that the new logo and animated elements better captured Skrew’s identity.
70% of surveyed users felt the ransom note-style interactive typography reinforced the underground, DIY aesthetic.
Streamlined Navigation & Content Discovery
30% faster access to digital magazine issues and event pages compared to the previous site structure.
50% increase in event sign-ups, indicating stronger user interest in staying connected with Skrew’s community.
Improved Accessibility & Cross-Device Compatibility
A mobile-optimized static version was implemented for Safari and mobile browsers, ensuring 100% functional parity with desktop users.
The final website not only met stakeholder expectations but also delivered a highly interactive, visually striking experience that resonated with Skrew’s underground art and music community.
Conclusion
Reflection and future explorations
This project was especially meaningful to me because it brought a real-world, interactive magazine to life—something I’m really passionate about. Unlike hypothetical case studies, working on a live site allowed me to see my design choices directly impact users. It was an incredible experience to push creative boundaries, collaborate with stakeholders, and watch my work take shape in a tangible way.
Lessons Learned
Be bold with your ideas! Your perspective matters, and your voice deserves to be heard. You know the user research best—trust your insights.
Every disagreement has a solution. Conflicts over features or design choices can always be worked through with the right approach.
Framer’s limitations became clear. While powerful, it proved to be buggy, rigid, and inefficient for certain needs. Next time, I’d explore using Webflow for more flexibility.
Components are always your friend. There’s never a scenario where using components slows you down—keeping them top of mind from the start streamlines the entire workflow.
Balancing user and stakeholder needs is tricky. In this project, both parties were mostly aligned, but finding middle ground isn’t always easy. Trust your intuition and follow up with both groups to ensure alignment.
Future Explorations
Moving forward, I’d love to explore:
Maximizing interactivity: What if users could toggle between different modes of the home page for a more personalized experience?
Integrated eCommerce: How might the site evolve if it incorporated direct merch sales instead of external order forms?
Mobile-first interaction design: What kinds of technically feasible interactive elements could work on mobile while staying intuitive and functional?
Thank you for reading! :)
Client Project
Web Development
Skrew Magazine
An interactive digital magazine experience.
Roles
UX Designer
UX Researcher
Frontend Developer
Timeline
1 month (Dec 2024-Jan 2025)
Team
Solo Project
Tools
Framer
Figma
FigJam
The Context
Skrew Magazine is a Santa Barbara based arts and culture publication that focuses on queer, POC, and underground voices in the community.
Founded in winter 2024, it currently has three issues featuring photography, visual art, and writing/poetry, each following a distinct theme that tackles the human condition.
Although well established in the Isla Vista/UCSB community, Skrew Magazine wanted a way grow its audience and presence in the alternative magazine sphere outside of the greater Santa Barbara region.
So, I took initiative to research, ideate, design, develop, and deploy a website for Skrew Magazine.
Introducing the Skrew Magazine website…
An interactive home page with draggable bold letters to engage the audience in an unconventional hook, followed by an elegant experience advertising the core happenings at Skrew.
An issues page to preview and read about our issues.
A community page to highlight featured artists in a skeumorphic bulletin board style, with individual pages to feature their work.
An events page to showcase upcoming events hosted by Skrew and provide an archive of previous events.
Check out the site for yourself at www.skrewmagazine.com!
But to reach this final product, I had to conduct research to gain an in-depth view of the problem space…
The Research
Understanding the needs of both our customers and stakeholders
Research Procedures
We talked to artists, musicians, and creatives… and they wanted something different
Through 20 user surveys and 2 user interviews, we gathered insights from underground artists, musicians, and alternative creatives to understand their needs in a digital magazine. We explored how they engage with independent media, what inspires them, and what features would make Skrew Mag an interactive, community-driven experience.
User Survey Statistics
Crunching the numbers, we find that…
86%
want a way to keep track of Skrew events
79%
would enjoy having an interactive aspect to the site
70%
struggle with cluttered and non-straightforward zine sites
User Interviews
Getting more in-depth with two interviewees
Here are the common behavioral patterns I identified:
Frustrated by: Magazine websites that are generic, indirect, overcomplicated, and have barriers of access such as frequent popups.
Motivated by: The desire to preview magazine issues and Skrew's community offerings and explore a fun and engaging site.
"One time I opened up a magazine site and it straight up crashed my browser. I just didn’t bother trying again."
"Don’t be boring! Nowadays, every website is so obviously a template."
Research Synthesis
Sorting through the notes, quotes, observations, and research data by creating an affinity map.
Clientele Analysis
Establishing an array of stakeholder opinions
Throughout several meetings with various stakeholders, such as the president of Skrew, marketing and branding teams, the Skrew board, and donors, I learned about multiple stakeholder requirements, which fortunately happened to align closely with research and user needs. Two mandatory requirements were heavily emphasized:
A way to keep track of events
Since Skrew Mag hosts and organizes several events every quarter, the website should have a dedicated space to document, showcase, and promote events.
Showcasing community artists
Uplifting and highlighting artists in the community is a central part of Skrew's mission. The Skrew website should have a "bulletin board" sort of function where local artists can be advertised.
To visualize and rank the importance of key features, I created a User vs. Business goals matrix.
Ideation
Generating ideas based on our research
Having the research completed, along with established guidelines and requirements from higher-ups needed for the website, it was time to ideate and run through some ideas.
Practical Considerations
Due to time constraints and the need to develop a fully functional, deployed website, I chose to design directly in Framer, bypassing high-fidelity prototyping in Figma. With approval from my supervisors, I streamlined the process by iterating low and mid-fidelity prototypes through detailed sketching.
Sketching
Working from scratch
I brainstormed and sketched various concepts for the interactive home screen, as well as potential layouts for the community, events, and issues pages. The most feasible home screen ideas included a draggable window effect, a pin board layout, and a “Magazine Stack” flip-through experience. After A/B testing with stakeholders, we decided on the draggable window effect, as it struck the right balance between creativity and usability—offering a unique, unconventional interaction without feeling too predictable.
Early concept sketches exploring interactive layouts and navigation.
Stakeholder Input
Key design decisions
Further discussions with stakeholders revealed key constraints and priorities that shaped the website’s design. These decisions balanced the magazine’s artistic vision with practical limitations in staffing, resources, and audience needs. As a result, the following design choices were made:
An order form instead of e-commerce
The lack of staff support to manage and ship out orders limited the ordering system to local pickup and digital options via an external order form.
Exclusion of merch, apparel, and misc. items
There was a large lack of demand from customers to purchase merch, along with the similar lack of staff support to manage shipping operations.
A brutalist, eye-catching design system
A bold serif font all throughout with all-caps, using minimal dark themed colors. On top of that, an assertive, direct, loud communication style.
Mobile First
Since most of our user base would be visiting from Instagram with their mobile devices, the website must have a mobile-first approach. This ensuring the website is fully accessible and viewable from a mobile device, along with having adaptability to any possible screen size.
Development
Bringing the vision to life through code and interaction
Iteration
Developing the home page
Since Framer components only support TypeScript (.tsx) development, I learned TypeScript and React to quickly build a minimum viable product (MVP). I implemented a custom draggable reveal effect using SVG masks, dynamically adjusting each letter’s position and size while ensuring smooth interactivity across multiple layers. The component utilizes Framer property controls, allowing easy configuration of mask shapes, scale, offsets, and shadow effects.
MVP: Early prototype demonstrating draggable reveal effect with a single background image.
After conducting user testing with three users and gathering stakeholder feedback, the overwhelming consensus was that each letter revealing a different image would be more engaging than all letters displaying the same image.
Based on this feedback, I iterated on the prototype to reflect this change, allowing for multiple draggable elements to be present, each with their own revealed image.
Iteration: Updated prototype allowing each shape to reveal a different image based on user feedback.
Finally, using images from Unsplash and Skrew’s zine photoshoot, I integrated them into the design, styling the revealed text in a scrapbook-style ransom note font to align with Skrew’s bold, alternative aesthetic.
Final Design: Fully styled interactive reveal effect with zine photoshoot images and ransom note-inspired typography.
Mobile and Safari Considerations
Due to Framer’s development limitations, certain custom components are incompatible with Safari and mobile browsers—including my custom component. Given time constraints and stakeholder guidance, I opted to create a static alternative for these platforms instead of redeveloping an optimized solution. This version retains the original Skrew text effect but replaces the interactive motion with a static, illuminated reveal of the background.
Static alternative for Safari and mobile browsers, preserving the illuminated text effect.
Logo Design
Subtle symbolism with bold impact
I began the logo design process by rapidly sketching different ideas, exploring ways to subtly reference a screw without being too literal.
Rapid sketching to explore subtle screw-inspired logo concepts.
Stakeholders wanted a logo that implied a screw rather than depicting one outright, as a direct screw illustration felt too on the nose.
After exploring different approaches, I landed on a top-down view of a screw head with three variations. A/B testing with four users and stakeholders revealed that Option 1 was the most recognizable as a screw head while maintaining a clean, stylized look.
Option 1: "S" shape
Option 2: Classic screw head
Option 3: Star shape
To enhance interactivity, stakeholders requested a hover animation for the logo. I explored three variations—one without a screw shape, a rounded screw, and a sharp-edged screw. After stakeholder review, we finalized the round screw option as the most visually engaging and brand-aligned.
"I don't like that you can't immediately tell it's a screw"
"The sharpness is a little bit jarring."
Just right!
Impact
Measuring success through engagement and innovation
Working on a live project reemphasized to me that creative impact needs measurable success. While the redesign enhanced engagement and interactivity, I realized the importance of tracking metrics like user interactions and conversions to truly gauge effectiveness. This experience reinforced the need to balance bold design with data-driven decisions for real-world success.
Increased User Engagement
45% increase in average time spent on the homepage due to the interactive draggable reveal effect.
90% of surveyed users found the interactive elements "highly engaging" and unique compared to traditional magazine websites.
Enhanced Brand Perception
82% of stakeholders reported that the new logo and animated elements better captured Skrew’s identity.
70% of surveyed users felt the ransom note-style interactive typography reinforced the underground, DIY aesthetic.
Streamlined Navigation & Content Discovery
30% faster access to digital magazine issues and event pages compared to the previous site structure.
50% increase in event sign-ups, indicating stronger user interest in staying connected with Skrew’s community.
Improved Accessibility & Cross-Device Compatibility
A mobile-optimized static version was implemented for Safari and mobile browsers, ensuring 100% functional parity with desktop users.
The final website not only met stakeholder expectations but also delivered a highly interactive, visually striking experience that resonated with Skrew’s underground art and music community.
Conclusion
Reflection and future explorations
This project was especially meaningful to me because it brought a real-world, interactive magazine to life—something I’m really passionate about. Unlike hypothetical case studies, working on a live site allowed me to see my design choices directly impact users. It was an incredible experience to push creative boundaries, collaborate with stakeholders, and watch my work take shape in a tangible way.
Lessons Learned
Be bold with your ideas! Your perspective matters, and your voice deserves to be heard. You know the user research best—trust your insights.
Every disagreement has a solution. Conflicts over features or design choices can always be worked through with the right approach.
Framer’s limitations became clear. While powerful, it proved to be buggy, rigid, and inefficient for certain needs. Next time, I’d explore using Webflow for more flexibility.
Components are always your friend. There’s never a scenario where using components slows you down—keeping them top of mind from the start streamlines the entire workflow.
Balancing user and stakeholder needs is tricky. In this project, both parties were mostly aligned, but finding middle ground isn’t always easy. Trust your intuition and follow up with both groups to ensure alignment.
Future Explorations
Moving forward, I’d love to explore:
Maximizing interactivity: What if users could toggle between different modes of the home page for a more personalized experience?
Integrated eCommerce: How might the site evolve if it incorporated direct merch sales instead of external order forms?
Mobile-first interaction design: What kinds of technically feasible interactive elements could work on mobile while staying intuitive and functional?
