Victoria’s Secret is a renowned American lingerie and women’s apparel retailer, celebrated for its luxurious lingerie collections and is well-known for its annual fashion shows featuring top models known as the former “Victoria’s Secret Angels.” The company extends beyond lingerie to offer women’s sleepwear, loungewear, beauty products, clothing, and accessories.
Victoria’s Secret maintains a strong global presence, emphasizing glamour and sophistication while promoting a distinct feminine image through 3 main departments: Victoria’s Secret Lingerie, Victoria Secret Beauty and PINK.
The brand operates through physical stores and an online platform, showcasing its digital presence. Through its online presence (Web & App), Victoria’s Secret provides customers with a convenient and accessible way to explore and purchase a wide range of intimate apparel and related products.
An initiative to modernize Content Management System (CMS) components for the ecommerce website, collaborating with cross-functional teams to elevate branding, boost engagement, and redefine digital dynamics!
In the rapidly evolving digital landscape, our organization recognized the imperative to enhance the user experience (UX) of our website by modernizing Content Management System (CMS) components. Collaborating with cross-functional departments including creative, marketing, copywriters, front-end developers, and production teams, our objective was to address several critical challenges:
This project was undertaken for both business and customer-centric reasons.
- For the business, it aimed to :
- enhance agility in setting up and updating floorsets,
- boost personalization capabilities,
- achieve WCAG compliance for increased accessibility,
- initiate steps toward a fully responsive website as recommended by Google,
- improve site performance for speed and SEO optimization,
- accelerate the business: increase Average Order Spending (AOS), raise conversion rates and engagement, and elevate the display of branding content to maintain industry excellence.
- From the customer perspective, the project sought to deliver a smoother overall user experience by:
- implementing visible and consistent Calls to Action (CTAs) during scrolling,
- improving content consumption ease,
- removing shopping experience frictions mostly on Home and Landing pages,
- ensuring accessibility for all users,
- enhancing usability following Baymard’s guidelines and addressing audit flags.
My role: crafting a seamless experience through collaboration, and leadership in a digital landscape.
In my role, I spearheaded the UX discovery phase by conducting thorough research and guiding the identification process.
I played a key role in creating essential artifacts such as wireframes, user flows, and low and high-fidelity designs to ensure a comprehensive and effective user experience.
Leading workshops and worksessions involving over 50 stakeholders, I facilitated collaboration and alignment across diverse teams.
My responsibilities extended to seamless coordination with technical teams, including back-end, front-end, and content management system (CMS) teams.
Additionally, I actively partnered in the development of demos and proof of concepts (POCs).
Providing regular UX updates to key leaders and delivering a UX presentation to the digital platform (over 150 people), I ensured transparent communication and alignment with the broader organizational goals.
I promoted a culture of UX excellence in this continuous initiative, advancing it with both MVP and MVP+ goals, acting as a catalyst for ongoing improvements.
We engaged in weekly sprints for UX and Stakeholders, while our development team operated on 3-week sprints.
The SWAT team that the leadership nominated needed to:
- Consider implementing a unified setup for both Desktop and Mobile platforms.
- Ensure that data fields are dynamic, facilitating seamless translation for international users.
- Prioritize CMS components strategically, approaching the implementation in phases with the goal of achieving an MVP milestone.
Behind the Screens: Spotlight on Our Diverse User Base
Internal: users of the CMS encompass both brands, including Victoria’s Secret (VSL and VSB) and Pink.
- Admin (Offshore set-up team)
- Creative teams (Victoria’s Secret Lingerie, Victoria’s Secret beauty and PINK)
- Marketing team (inclusive of copywriters)
- Production team
- Front End, CMS Development Team
- International Team (the website being translated in multiple languages)
External: all users of the website Victoriassecret.com, navigating through both brands (VS and Pink).
Victoria’s Secret has historically targeted a wide age range, from late teens to women in their thirties and beyond. The brand caters to individuals looking for intimate apparel with a focus on elegance, sophistication, and a touch of glamour.
Meanwhile, PINK, a sub-brand of VS, targets a college-aged demographic (late teens and early twenties) looking for casual and comfortable intimates, apparel and accessories with a fun, fresh and youthful style.
Identified Pain Points & Challenges:
- From the Baymard Audit:
- Issues with Content larger than the viewport
- Main categories and/or important subcategories aren’t featured on the homepage at all
- Target areas and CTAs are too small and difficult to identify at scroll
- Some CTAs are missing from the components as the content is baked by creative teams.
- From my internal research while interviewing various stakeholders/users:
- The current components of the CMS make it challenging for the teams to set up in a smooth and optimum way components.
- Reusing the current components across the website poses difficulties, resulting in added workload and stress for various teams responsible for frequent content updates.
- The existing configuration is highlighting responsiveness issues. The Information architecture is not optimized in that way. It’s currently structured around a multi-channel approach that pulls various entry fields into one component instead of having a unified data structure.
- Creative teams have to bake the content within the images, which raises concerns about compliance with accessibility standards (WCAG) and also impacts SEO.
- With the content being baked within the images, the ecommerce website is also facing some performance issues.
A commitment to delivering solutions that not only meet functional requirements but also provide a delightful and meaningful experience for the end user.
Define
- Gather Requirements from various VPs and AVPs (Digital Platform, UX, Creative, Marketing, Production)
- Translate requirements into specific objectives, encompassing the desired feature set.
- Establish a timeline for MVP launch and MVP+ (defined roadmap based on Upcoming floorsets milestones)
Research & Discovery
- Collaborating with a digital producer, facilitate worksessions to lead and gather insights from all CMS stakeholders.
- Extract and emphasize usability guidelines from Baymard’s Audit
- Conduct competitive research and analysis, identifying patterns in how users form design expectations across various websites (Jakob’s Law).
- Define the target audience, predominantly mobile users (80%, 20% Desktop) with a minimum phone width of 375px (>1%), encompassing a mix of iPhones and Android devices.
- Each brand, including VS Lingerie, VS Beauty, and Pink, operates with independent working teams. Copywriters within these teams creating content without maintaining consistency.
Each brand, including VS Lingerie, VS Beauty, and Pink, operates with independent working teams. Copywriters within these teams creating content without maintaining consistency. - Conduct a comprehensive analysis to identify pain points thoroughly:
- Diverse Teams, Inconsistent Experiences:
The existing CMS components lacked standardization, resulting in disparate user experiences across various sections of the website. This inconsistency hindered brand cohesion and user engagement, demanding a unified and standardized approach. - Accessibility and Usability Gaps:
The website did not fully comply with Web Content Accessibility Guidelines (WCAG) nor some of the Baymard’s Usability Guidelines, impacting users with diverse needs. There were evident gaps in accessibility and usability, demanding a comprehensive overhaul to ensure inclusivity and an optimal user experience for all. - Performance Bottlenecks:
Site performance was suboptimal, affecting user satisfaction and search engine rankings. The outdated CMS components contributed to slow load times and hindered the website’s overall responsiveness, necessitating a performance-focused redesign. - SEO Optimization Opportunities:
The CMS components were not optimized for search engines, limiting the website’s visibility and reach. The project aimed to implement SEO best practices, improve content discoverability, and enhance the overall search engine ranking. - Inefficient Set Up and Internal Workflow:
The existing CMS setup and internal workflow were convoluted, leading to inefficiencies in content creation, management, and publication. Streamlining these processes was crucial to improve productivity and ensure a seamless content lifecycle.
- Diverse Teams, Inconsistent Experiences:
Ideation
- Establish the top three ratios applicable across all 3 channels.
- Identify and propose necessary modifications to current cues for optimizing dynamic text.
- Specify new copy guidelines, outlining the hierarchy of copy content and character range for optimal readability, especially for mobile-first users.
- Define a new hierarchy and styling for Calls to Action (CTAs).
- Collaborate on refreshing the branding.
- Document the work in progress for developers and any stakeholders or future partners.
Design
- Generate responsive wireframes and low-fidelity designs for VS Lingerie, VS Beauty brands and PINK while ensuring consistency.
- Lead weekly workshops with cross-functional leaders, involving Development, Copy, and Marketing team members, ranging from 50 to over 100 partners depending on the sessions.
- Successfully executed a rebranding initiative in collaboration with Creative and Art Directors for both brands.
- Thoroughly document and finalize the work in progress for developers, as well as any stakeholders or potential future partners.
Validate
- end development leads, which included demonstrations derived from a Proof of Concept (POC) and progress presentations.
- Executed User Acceptance Testing (UAT) with diligent oversight in collaboration with 30 active stakeholders and associates.
- Collaborated with Front-end Developers and CMS Partners to ensure the accuracy of the code based on the UX Handoff Checklist.
Our ultimate solution & its final deliverables
Our collaborative efforts spanned various departments—creative, marketing, copywriting, front-end development, and production teams—with a clear goal: addressing critical challenges in our digital presence. Addressing the challenges we faced required a holistic approach, involving collaboration across departments, adherence to industry standards, and a meticulous redesign of CMS components.
Consequently, I delivered a comprehensive collection of final components, ensuring full responsiveness from mobile to desktop, organized into three key themes:
CONTENT AREA:
- Two distinct font themes tailored for VS Lingerie and PINK, with additional branding flexibility for VS Beauty typography.
- Detailed typography specifications, including optional fields, spacing, size, line-height, and Library label.
- Structured typography hierarchy and spacing for lead-ins, headers 1, 2, and 3, a Punch field for sales and promotions, copy, legal disclaimers, and the CTA area.
- Prominent and consistent CTAs, including primary, secondary, and tertiary options.
COMPOSITION:
- A highly adaptable composition designed for both small and large screens.
IMAGE AREA:
- A comprehensive set of three ratios with accompanying guidelines illustrating their cohesive utilization across screens of varying sizes.
BEFORE (The content was baked into images without consistency. The content was not fitting within the viewport posing frictions and not respecting the Baymard’s usability guidelines) :
FINAL LIVE SOLUTION (Flexible and responsive Image Text Components with dynamic text, consistent hierarchy, 3 ratios and clear large CTAs within the user viewport):
Concluding insights and impact across the site
The ITCs are now integrated into content templatization, personalization, and automation across the site. A strengthened partnership between the CMS team and UX has empowered UX team leaders to act as consultants on various initiatives. Communication channels have been established between the creative and UX teams, with some creative members even taking classes from Baymard to ensure user-centric digital asset creation.
Looking ahead, the modernization of our CMS components, a crucial step in our responsive initiative, has sparked momentum for additional enhancement projects. This initiative has cultivated lasting relationships with cross-functional partners, laying a foundation of trust and respect across teams.
