Designing the website to promote Quilly's social app and provide necessary resources for young women
How to Design strategically for our target Demographic
Overview
Quilly began their entire redesign of both website and mobile application in early 2025 with the vision of reaching larger audiences and the right demographic of viewers.
The goal of this redesign was to improve the interactivity of the website, increasing the amount of viewers to sign up for the waitlist to download the beta mobile application.
My Role
UX/UI Designer and Developer
User Research, Interaction, Visual Design, Prototyping, Website Building
February 2025 - Ongoing
Background
Quilly is a female founded platform to connect college women through campus events, community building, and social content.
The goal of this redesign was to improve the interactivity of the website, increasing the amount of viewers to sign up for the waitlist to download the beta mobile application. With ambitions to scale across campuses and attract brand partnerships, the team knew they needed more than a visual facelift.
I am the lead designer for website at Quilly.
I joined Quilly as a UX/UI Designer early 2025 alongside a large team of ~8 entry level design interns. I support the design team across all aspects mainly with their website, but also as a consultant for the mobile application's design.
At Quilly, I have grown as a designer and also as a leader, below are some achievements I have accomplished this past year.
•
Implemented a new website structure. I advocated for a switch from ReadyMag to Framer to increase collaboration between other designers.
•
Improved interactivity and responsiveness across the site. The redesign on Framer allowed for more responsive designs and easier implementations of customized code to include animations and other microanimations.
•
Built out 2 CMS collections to optimize updates. This helped the team (including the non technical team members) upload new content faster. Once the collections were structured, I was able to design page templates to format uploads as well as components that auto-format once content is published.
•
Established a design system. This has helped the design team maintain consistency throughout their designs on Figma and later on when designs are implemented on Framer.
•
Mentored and onboarded newly hired designers. This has helped Quilly's new hires catch up with the existing structure of everything and allowed for them to learn how to design optimally for their designs to be handed off to software engineers.
The Problem
College women—the platform’s core audience—weren’t connecting with the existing site. The experience felt outdated, slow, and lacked emotional clarity. Meanwhile, the internal team struggled with a rigid backend and no CMS, making content updates a chore and brand consistency nearly impossible.
If Quilly wanted to become a go-to hub for Gen Z women, they needed a platform that felt as dynamic and authentic as the audience they served.
Understanding the users' needs
Stakeholder Interviews
To ground our approach, I conducted interviews with the founder and two team leads.
Key takeaways:
•
Content bottlenecks from the design team due slow content upload process
•
Need for a brand presence that feels mature, trustworthy, and empowering
User Interviews
I conducted 8 in-depth interviews with college women across three universities. The questions mainly focused on their community engagement, digital browsing habits, and emotional connection to female-led platforms.
Themes uncovered:
•
A desire for fast, mobile-optimized browsing
•
Preference for modern aesthetics that reflect Gen Z tastes
•
Importance of authenticity and emotional resonance in content
Users wanted a platform that reflected their digital behavior: mobile-first, visually clean, and emotionally authentic.
Legacy Site Testing
Because there was a live site, I tested Quilly’s existing ReadyMag site with 15 users to identify friction points.
Top frustrations:
•
"It's slow and doesn't work well on my phone."
•
"I can’t tell what’s clickable."
•
"I don’t know what this site's purpose is."
Previous website images:
Determining and defining research-based priorities
With user and stakeholder input synthesized, I defined the following problem statements:
1.
Users can’t trust or engage with a platform that feels outdated or unintuitive.
2.
Lack of CMS makes content static and time-consuming to manage.
3.
Existing visual design lacks maturity and fails to emotionally connect with users.
We translated these into UX priorities and a design strategy backed by data.
Developing branding, structure, and strategy
Visual Rebranding and Component Library
I redesigned Quilly’s visual identity by:
•
Introducing a brighter color palette with high-contrast accents and thicker stroke borders
•
Replacing typography with more legible and accessible font sizes and weights
•
Used a cell-based format for sections similar to Rhode Beauty’s website but also incorperating neubrutalism design aspects
Updated Brand Elements
New Home Page Components
Other pages' components
How it worked
•
78% of users in testing described the new design as “more professional” and “cleaner”
•
Task completion improved by 27% after UI and structural changes
The redesigned brand tested better with users who described it as 'playful and engaging,' echoing the team’s mission.
Platform Migration to Framer
Based on internal team interviews and user needs, I advocated to rebuild the site in Framer rather than ReadyMag.
This supported:
•
CMS-based editing for non-developers
•
Faster load times and responsive layouts across mobile and desktop screens
•
Streamlined handoffs and consistent design tokens
•
Component libraries with variants to ensure consistency throughout website
•
Micro-interactions added across all screens to bring user enjoyment
Measuring the impact from the users
Over 30 days post-launch, we measured the following improvements through user testing and Framer's built-in analytics:
•
41% increase in homepage click-through rate
•
25% increase in non-developers uploading content
•
37% increase in session duration
•
64% decrease in page load time (3.7s → 1.3s)
•
80% decrease in Quilly's team content update time
Videos of the website:
How did the new software impact the team?
Once I had structured the website on Framer and built out the design system, I wanted to also measure the impact on the design team's members. None of the design interns at the time had any experience with Framer or Figma autolayout, so to help get them become accustomed, I did these things to help:
•
Included instructions for both CMS collection input and component fields
•
Held several virtual meetings to give tutorials about Figma and Framer
•
Recorded multiple tutorials for the design team to reference when using the design systems
•
Recorded tutorials for non-technical members for uploading content and media
Media Upload formats
Video Tutorials
Reflection
This project demonstrated the value of merging UX research with design and development. By advocating for research-led decisions, I was able to create a platform that felt relevant, scalable, and emotionally resonant for its users.
Being able to take ownership of such a large-scale project was amazing and also a great learning opportunity. I was able to take on a leadership role, while also getting my hands dirty with the iterations and usability testing.
Next Steps
•
Expand research beyond college demographic and moving out of only UC Berkeley
•
Implement long-term tracking for contributor engagement
•
Refine IA based on evolving content categories
•
Introduce A/B testing for homepage layout in next release to promote mobile application more prominently