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 an era of remote work, our workflows must keep up with the industry and prepare for the future of design. I believe that in order to design a good experience for end users, that process begins in the way we work as individuals and as a team.
Objective: Improve the creative workflow for the Gap Online Web Design team and stakeholders by introducing a new design system that adapts to the team’s goals and needs.
Featured on Adobe’s “Meet the Makers” series (formerly known as Adobe Enterprise Live).
Where to start...
This project was one of the most challenging experiences I’ve had in my career…designing for designers…and then some. I was the lead designer that began this initiative without an assignment or even a project description. I saw an opportunity for change that was necessary and thankfully, management agreed.
The challenges began from the first day. Where to start? Who do I talk to? Who do I need to meet with to persuade them to buying into this initiative? What is the goal? What is the business benefit? How do we measure success? Or failure? Will it work? What if it doesn’t?
The questions are endless. The process, painful. But the learnings and final results…100% worth it.
Let me take you through this journey.
Complexity
This system’s main focus was initially meant for designers to improve their workflows and be aligned across teams to deliver high-fidelity visuals and prototypes. But as I began the process, it became a bigger and more complex project because I had to also focus on the stakeholders and how they would react and ultimately interact with this new way of collaborating.
This meant that I had more than one challenge to tackle.
Challenge One
Understanding the way stakeholders interact with creative. Then, finding the places where this system would enhance collaboration without breaking the flow. This would allow the learning curve to be low meaning we could transition smoothly.
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.
Once things are kicked off, designed, and approved, everything goes into translation before the final step: Development. WCD stands for Web Content Development and they build everything on Gap.com.
For a few years now, this had been the process relationship between teams. This felt disconnected to the point that it overcomplicated things because teams were not always aligned.
In reality, the relationship is far more collaborative which looks like this:
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
The tool I proposed to be our solution is Adobe Xd. With the industry shifting to higher fidelity prototyping, I believe that Xd was the best tool for a variety of reasons. The capabilities of the software are direct solutions to the way the creative team at Gap works. Live collaboration within the tool, link share with stakeholders for review & development with code and specs, security, version control, prototyping, slicing/hand-off, and the most important in this case, design systems.
These features made it easy to decide for me, but I knew that I needed to prove that this is a good business decision. Therefore, the next three key points helped me gain trust from stakeholders.
Adaptability
Because this is an Adobe tool, most commands that designers use are the same across Creative Cloud apps. This allows designers to learn the new tool quickly.
Budget and Cost
Gap is an Adobe enterprise client so this tool is available at no extra cost. No need to purchase extra licenses/seats for anyone, including new hires.
Integration
The collaborative features meet the needs of our stakeholders meaning that they do not have to learn anything new, only adapt to a slight shift in process.
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!
Now I was ready to propose a new user flow for designers and stakeholders involved in the creative process. This was no simple task, but I was confident that this initiative is the solution to our problems and a leap towards the future of the Gap creative team.
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
Because this system lives in the cloud, designers link every new project onto the system to have the most up-to-date components and templates they need to begin working.
Working with Components
Because this system lives in the cloud, designers link every new project onto the system to have the most up-to-date components and templates they need to begin working.
Live Updates
While the system would undergo tests before making updates directly to it, once a component changes, the users linked to it would receive these updates immediately.
Updates happen occasionally but the major edits occur quarterly with versions being new and improved 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 brought the team together more than ever before by allowing teams to collaborate from start to finish. No more need for multiple tools with multi-step processes to review or hand-off final deliverables.
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 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.
Insights & results
While this system is still growing, the outcome has been overwhelmingly positive. This wasn’t an immediate result, but over the course of two-three months, our workflow improved so much that I have been able to meet with leadership and C-level stakeholders within the company to show the value of working with design systems in the e-commerce side of the business.
Time
Updates to creative for rounds of review used to take 3-5 hours. Now, updates are done and ready for review within minutes. This has helped the team adapt to business changes rapidly.
Collaboration
Working this way has increased collaboration by 75% (and growing) between designers and all the teams involved in the creative process.
Productivity
The time it takes to finalize & hand-off assets has been reduced from two-three days to under one hour, allowing teams to deliver faster and get days back to work 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
Finally, this objective also gained attention from Adobe. I was invited to be a guest speaker in their “Meet the Makers” (formerly known as Enterprise Live) LinkedIn bi-weekly series where I got to highlight the work that went into this and how I have been able to implement Adobe Xd into our workflow.
Future Vision
This gives us a look into what the future of the Gap Online team will look like. There were parts of the project that had to be put on hold, revisited, and ultimately killed. Fortunately, I was able to meet people in the middle in many ways where I had planned for a different end-result. Because of this, the team has fully bought into continuing the hard work we’ve put in this far. The potential for improvement in collaboration and productivity is plenty of motivation to keep me striving for a better workflow everyday.
Learnings & Takeaways
With this specific project, the learning is never ending, which is a big reason I’m so passionate about UX design. This has been one of the most challenging projects in my career due to the uncertainty and complexity of the objective.
Once again, not being afraid to take risks and/or fail paid off in a big way. I presented 50+ times on this initiative with multiple follow-ups and check-ins to get stakeholders’ buy-in. I loved getting to know each team better by understanding the way they work and how we all bring our work to life cross-functionally.
I’d be lying if I said there was no push-back at all. There was, and plenty of it. However, this taught me that when perseverance is put in the right places, the outcomes are worth the uphill battle. I had to listen clearly to other teams’ needs to be able to provide a good solution for our issues. I also had to prove to leaders in the organization that while this is an internal shift, the ultimate focus is on the customer. Because I fully believe that in order to provide a good experience for the end user, that good experience begins in the way we work internally.
Lastly, I walk away with more knowledge and improved skills after taking on this challenge. This makes me both confident and excited for what’s next 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.