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 web designer 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.
A rushed version release
When I was first brought into Quilly, there was a deadline for a website relaunch that was quickly approaching. When meeting with the CEO, my first task was to completely overhaul the existing Quilly website. The original website was limited to only ~4 pages and was built on ReadyMag. The original design inspiration chosen my the CEO was Rhode Beauty's website, so the design utilized lots of rounded edged containers and a clean design.
Previous website images:
Prior released redesign:
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.
The rushed version release was never meant to be long term, and it definitely showed in the design of the website. In order to connect with the intended user group, we needed to completely redesign the website to feel more engaging, and feel more intentional.
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 website 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."
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.
The main issue users had was the aesthetics of the website as a whole.
Developing branding, structure, and strategy
Visual Rebranding and Component Library
We 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
Restructuring the site's Architecture
I ran open and hybrid card sorting exercises with 6 users to validate new IA groupings. This led to a simplified navigation:
•
“Merch” - users are able to sign up for mailing lists for when new merchandise from the Quilly website is released
•
“Podcasts” - users could easily select a media form to listen/watch Quilly’s XOXO Quilly Girl episodes on either Spotify or Youtube in a more organized fashion
•
“FAQ” - users are able to review commonly asked questions before sending an email to Quilly Support, while also learning about the company’s mission
•
“Diaries” - users can view updated page including newly posted blog pages
•
“Support” - users are able to view resources provided by Quilly to help support women feel safe and have access to all resources they can
•
“Contact” - users are now able to view multiple forms to contact support at Quilly if needed
Other pages' components
How it worked
The redesigned brand tested better with users who described it as 'playful and engaging,' echoing the team’s mission.
Home Page
Redesigned the home page with updated branding components, implementing a borderless cell design. Enhanced user experience through new animations and interactive features, all validated through comprehensive testing.
The main point we received in feedback was that the site felt boring and users weren't sure what the site was promoting. To combat this, the final iteraiton had a more fleshed out dedicated product section that featured the product more prominently.
The new homepage included many new animations and different interactivity points which increased the average time spent on the screen. User testing also confirmed that users were more aware of the product that Quilly was promoting and stated they were more willing to read in-depth about the services provided by Quilly due to the newly aesthetically pleasing website.
Merch page
Although the merch line is still not available for Quilly, we wanted to find a more visually appealing way to inform the users. Because of this, we changed the image to an illustration to better match the new brand identity that came with this redesign.
Podcast page
Blog page
The blog page is a page I considered to be one of the most important. The podcasts are statistically the largest traffic generator from the promotion across several social media platforms. Some key changes that were made were the addition of the 'Hot Blogs' section, the load more option, and the upload format for publishing a new episode.
The 'Hot Blogs' section was added to promote some of the more popular reads to allow users to brows faster by popularity. After user testing, it showed that users were more likely to click into a podcast episode with the load more button. When asked to explain their reasoning, 92% stated that it was because it piqued their interest.
To optimize the podcast episode upload process, while also not requiring another CMS collection which would have costed extra money, I created a component that would have simple input fields that even non-technical teammates would be able to manage.
This significantly reduced the previous miscommunication when publishing a new podcast and allowed the marketing team to also upload episodes simultaneously with the social media regarding the episodes.
Resources Page
Contact Page
FAQ Page
About Us Page
A new edition to the site was the about page. We wanted the page to feel
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
