The Gap Inc. CMS Implementation was a key corporate initiative to deliver all content on the Gap, Old Navy, Athleta, and Banana Republic sites from a Content Management System (CMS). By developing a Wireframe system for this project, I was able to make significant improvements to the development time, reliability, and quality of the Content Templates being created, which led to improved experiences for dozens of users internally, and millions of users globally.
Background
Gap Inc. is a global clothing conglomerate, based in San Francisco, California, with annual revenues at ~$15B. They own and operate the Gap, Old Navy, Athleta, and Banana Republic brands, and their cross-brand e-commerce platform serves tens of millions of customers per month (~31M in July 2023). Although the site was highly usable, customer experiences were rigid, and the resources required for any update to the site was enormous. The majority of sales came from brick-and-mortar locations, but due to the unexpected shift towards e-commerce during the COVID-19 pandemic, a division-wide initiative to quickly implement a CMS on the platform was launched in October 2020. It was a key corporate initiative to modernize the platform, provide customers with dynamic experiences, and ultimately make the organization more efficient. The long term objective of the CMS was to deliver all content on web, app, store, social, and email platforms, but the initial goal was to deliver all Marketing content for web (the cross-brand e-commerce platform).
I joined the Gap Inc. UX team in October 2021, as the sole internal designer for the CMS. As a UX Designer on this project, I was responsible for the successful development of Content Templates. These templates would allow brand producers to launch live Marketing content on the site, without developer involvement, and would lead to a reduction in lead times from weeks to minutes. In order to make this possible I would work between the Brand Creative and the Developers to ensure that content is designed and developed as intended. Soon after onboarding onto the project, I saw the project was in trouble. Missed milestones led to shifting deadlines and a ballooning budget. Frustration grew among stakeholders due to unclear solutions. Leadership started making cuts and changes to minimize losses. Through discovery, I found that the UX wireframes were the most important artifact in the development process. I made the decision to design a new wireframe system that corrected issues for all users throughout the process, and guaranteed a higher quality of developed templates.
Once completed, significant improvements were made to the development time, reliability of, and quality of the templates and content being created. The project moved forward replacing ambiguity and frustration, with predictability and ease.
Discovery
When I joined the project in October 2021, an agency handled all UX duties. To onboard, I shadowed their team and familiarized myself with scope and status. To support this I mapped the project team, and documented the UX specific process.
Project in Crisis
Soon after joining the project, stakeholders began opening up about issues they were dealing with. In general, there was a lot of frustration around process, resources, and quality. Deadlines were being missed, and the experience wasn’t meeting brand or user expectations. Beyond that there wasn’t a clear solution, or path forward.
I knew I was just a small part of a giant organization, and couldn’t change the way the project was being organized and resourced. I presumed there was a way to adjust the UX approach to fill in the gaps, but wouldn’t know unless I dug into the issues more deeply. To start, I decided to spend more time with stakeholders, gaining insights into their issues, their impact, and how they related to (or could be affected by) our processes. The issues fell into three main themes: 1) unapproved content, 2) inconsistency, and 3) poor authoring experiences.
Issue 1: Unapproved Content
These issues were related to content being developed by design teams that did not match the templates that were published, or published templates that did not match the design intent. One of the key reasons can be seen below.
Issue 2: Inconsistency
Below you can see a few examples of the inconsistent experiences across published templates. This was due to many underlying factors, but generally, there was a lack of knowledge or documentation around the developed templates, and existing components, design system, extensions, foundational UI, technologies, etc.
Issue 3: Poor Authoring Experiences
The final theme around the issues related to making the authoring experience unclear, time consuming, and tedious.
Impact
These issues created many smaller challenges, such as:
-
re-designing all seasonal creative,
-
re-authoring seasonal campaigns,
-
priority production updates (styles, components, templates), and
-
updating documentation (wireframes, comps)
Most importantly, the unapproved content templates would have to go back through development for each issue. It was difficult to determine when a Content Template would be completed. This had the cascading and compounding effect of delaying the project indefinitely. Originally planned to be completed by April 2023, there was now no end date projected.
Defining Success
I used three key metrics to define success on this project: the amount of sprints required to develop a single Content Template, the number of hours spent in cross-functional question and answer sessions per week, and the number of hours per week my manager and I scheduled for “office hours” with designers and producers. In my mind, these would be a direct reflection of a successful wireframe.
Solution
Wireframe System (Figma)
🔗 Standard
Addressing “Unapproved Content”
Addressing “Inconsistency”
Addressing “Poor Authoring Experiences”
Foundational Improvements
Results
After working through initial drafts with my manager, and testing with key stakeholders, I tried the wireframe system with three content types that were newly being developed (Spotlight, Spotlight Video, and PDP Marketing Tile). The results proved out my assumptions, and validated that the wireframe system would help keep development on track.
Success
These results were shared at a Project Working Committee meeting where all stakeholders meet to review project scope, and align on next steps. After learning of the new wireframe system and the effect it had on development, an updated future outlook was agreed upon. By 2024, we would be able to have all four brands on CMS for Web, instead of only Athleta and Old Navy. This was a significant increase in the momentum of the project, and would bring the project completion date years closer. A major win!
Reflections
What went well:
-
This perfectly illustrated the importance of design, and the necessity for design to drive and define complex projects
-
It validated for me that regardless of the circumstances present, design could help solve major business issues, along with user issues
-
Any successful project requires trust and confidence between collaborators, and they are earned not given. But if you prove yourself, you can completely change the trajectory of any initiative
What could have gone better:
-
I went too far forward in designing without testing, which ended up requiring me to overhaul my designs before launching
-
This was my first role as a UX designer, and I was dealing with a lot of “imposter syndrome”; looking back I wish I had inserted myself earlier
-
Accessibility was an area where there could have been major improvements
Overall, this project was as much of a success as I could have hoped for. It also was my first experience with UX in a brand-centric, corporate environment, and it was hugely illuminating.