GOL Design System
Experience Design | Design Systems
Project Overview
Role: Lead design, UX research,
testing, flows, demo, onboarding, training
Team: Myself & Mike R
Duration: Mar—Nov 2020
In today's remote work environment, our workflows need to evolve with industry standards to enhance design. A positive user experience starts with our individual and team processes.
Objective: Enhance the Gap Online Web team's creative workflow by implementing a new design system tailored to their goals.
Featured in Adobe’s “Meet the Makers” series
Where to start...
This project was one of my most challenging career experiences—designing for designers without a clear assignment. I identified a necessary change and gained management's support.
From day one, I faced challenges: where to start, to persuade, and how to define goals and measure success. The questions were endless, and the process was, but the lessons learned and the final results made it all worthwhileLet me share this journey with you.
Complexity
The system was originally designed for designers to enhance workflows and align teams for high-fidelity visuals and prototypes. However, as I progressed, it evolved into a more complex, requiring attention to stakeholders and their interactions with this new collaborative approach, presenting challenges to address.
Challenge One
Analyze stakeholder interactions with creativity to identify areas for improved collaboration, ensuring a seamless workflow and a low learning curve for a smooth transition.
Marketing kicks-off and approves all the work. Production is our PM that holds everyone accountable. Production also handles the relationship between design and development.
Design begins with wireframes, then copy provides all the text that lives in the creative. I call this “Creative” because we start from a blank canvas.
After approval, everything goes into translation before the final step: Development. WCD, or Web Content Development, builds everything on Gap.com.
The relationship between teams had been disconnected for years, complicating processes due toalignment. In reality, it is much more collaborative, as follows:
That middle intersection between all teams is what needs to be nearly flawless. For this reason, it has stayed the same for several years because the process that was established previously works. However, it has become outdated and ineffective.
Challenge Two
Find the areas in the current creative flow where we can improve the experience without breaking the workflow process. At first glance, it was obvious that we were long overdue for a refresh.
This process caused a lot of unnecessary work that took too much time away from designers and all stakeholders. Thus, problems were inevitable.
After lots of meetings and conversations had with the design team & stakeholders, I was able to recognize that the pain-points were common across teams. The most outstanding which I wanted to prioritize were the following:
-
Design file override
-
Time
-
Lack of collaboration
-
Visual discrepancies
-
Low-fidelity mocks
-
Review process
-
Jumping between tools
-
Miscommunication
-
Last minute changes
MY PROPOSAL
Introduce a new design tool that gives us the ability to collaborate & reduce the amount of steps it takes to go from start-to-finish.
Sounds like pointing out the obvious but the real question was: how?
By creating a design system to help designers adapt & work collaboratively with stakeholders at higher fidelity than ever before.
This, of course, introduced new challenges. But at this point, I had clear direction.
Solution
I proposed Adobe Xd as our solution due to its high-fidelity prototyping capabilities that align with Gap's creative team's needs. Its features, including live collaboration, stakeholder sharing, security, version control, and design systems, make it an ideal choice. To gain stakeholder trust I focused on three key points to demonstrate it as a sound business decision.
Adaptability
As an Adobe tool, it shares similar commands with other Creative Cloud apps, enabling designers to quickly learn it.
Budget and Cost
Gap, as an Adobe enterprise client, can use this tool free charge without needing extra licenses for anyone, including new hires.
Integration
Collaborative features allow stakeholders to adapt with minimal process changes, eliminating the need for new learning.
New Challenges
Taking time from designers to learn a new tool & adapt to a design system
Persuading stakeholders to buy into a new tool & move on from the long established process
This is where the fun begins!
I was prepared to propose a new user flow for designers and stakeholders the creative process. Although challenging, I believed this initiative would solve our issues and advance the Gap creative team into the future
With this new and improved user flow, our team can spend less time jumping between multiple tools or repetitive tasks that take too long. Instead, giving back designers time to be more creative and productive while our stakeholders can participate in the same tool as well.
Final Deliverables
Remember the how question from earlier? This is how. I built a design system in Adobe Xd specifically for the GOL design team to be able to learn the tool while also adapting to this new way of working.
GOL Design System
This design system is ever-evolving. With updates being made almost daily, this adapts to the needs of the designer, and also the stakeholders reviewing work at high-fidelity prototypes, and developers having access to specs and code to build with.
GOL Design System
Linking to System
Designers connect each new project to the cloud-based for the latest components and templates.
Working with Components
Designers connect each new project to the cloud-based system for the latest components and templates.
Live Updates
The system will be tested before updates, and users connected to any changed component will receive updates instantly. Updates are occasional, with major revisions happening quarterly, introducing new and improved versions each time.
With this new Design System, the team has taken back a significant amount of time to focus on business-crucial design objectives. Finally, all designers have consistent visuals and prototypes to show in reviews.
Improvements
The new design system has united the team by enabling seamless collaboration from start to finish, eliminating the need for tools and complex hand-off processes.
Review Links
The share link feature in Xd allows us to create and update links in seconds, while letting our stakeholders review the creative in their browser and tagging feedback directly on the design.
Review Links
The share link feature in Xd enables quick creation and updates, allowing stakeholders to review designs in their browser and tag feedback directly.
Insights & results
The system is still growing, but the results have been very positive. Over two to three months, our workflow improved significantly, allowing me to present the value of design systems to leadership and C-level stakeholders in e-commerce.
Time
Updates to creative for review previously took 3-5 hours—now they're completed in minutes, allowing the team to quickly adapt to business changes.
Collaboration
Increased by 75%+ and continues to grow among designers and all teams involved in the creative process.
Productivity
Improved significantly, with asset hand-off time reduced from 2-3 days to under one hour, enabling teams to work faster and focus on other projects.
Literally, it has made a world of a difference.
-Kelly T, Production
These are a few of many examples of what teammates from design, marketing and production had to say when I launched the system. Since then, this system continues to gain traction which has lead to more cross-functional collaboration with our UX and Systems teams. This is helping us align on brand consistency and have a more clear path for the future of the Gap creative team.
Recognition
Adobe recognized this objective, inviting me as a guest speaker in their “Meet the Makers” LinkedIn series, where I shared how I integrated Adobe Xd into our workflow.
Future Vision
This offers insight into the future of the Gap Online team. Some project elements were paused, reconsidered, or abandoned, but I successfully reached compromises where I initially expected different outcomes. As a result, the team is committed to our ongoing efforts, and the potential for enhanced collaboration and productivity drives me to improve our workflow daily.
Learnings & Takeaways
This project has fueled my passion for UX design through its continuous learning and complexity. Presenting over 50 times and engaging with stakeholders deepened my understanding of cross-functional teamwork. Despite facing push-back, perseverance led to valuable outcomes, highlighting the importance of aligning internal processes with customer focus. Ultimately, I was able to grow my knowledge and skills that leave me confident and excited for the next steps in my career.
*Due to NDA made with Gap Inc, I cannot provide exact numbers in data in regard to the research, business gain/loss, and or results that are still ongoing.
Full names are protected for privacy reasons.