Project phoenix and unifying the ecosystem — Part II
Time to rollup our sleeves and dig deeper
As expressed in the first part of this series from Project phoenix and the art of collaboration — Part I, Team Phoenix was tasked with an expansive problem to solve. With just a five week window to absorb, research, and produce a high-fidelity solution, they were presented with the challenge of designing “a delightful B2B website while maintaining consistency and coherence in 40 million pages owned by various business units and teams across the globe, each with slightly different contexts and objectives, while also serve the corporate level missions.”
In this post, learn how the Patternites and Digital Growth & Commerce (DGC) sponsoring team came together to collectively navigate a new path forward. Renvisioning how we might scale the adoption within a unifying framework across the IBM.com ecosystem, delivering a delightfully cohesive set of experiences.
What our adopters experience
IBM has always been at the forefront of many complex industries and today our designers work in areas ranging from quantum computing to consulting services. One one hand, IBM’s leadership in providing solutions across multiple industries is part of what has made us so successful, but it also demands a diversity of design approaches to meet the needs of domain-specific challenges. As creators from different business units coalesced around design standards and systems to represent their best-practices, it contributed to some confusion at a company-wide level about whose set of guidelines on UI / UX was really the authority. This pain point is what our team called the “Tier 1” challenge: adopters lacked a single gateway to find the single best resource for their task.
Once IBMers were looking in the right place, using the information available to them there wasn’t that simple either. Like most corporate design systems, there are a lot of principles, components, and rules to explain to adopters — so many that they are often too complex for their own good. As a result, even if two adopters referenced the same design system, they mightpick different assets to address the same problem, which still created inconsistency. The experience that our design systems felt more like rabbit holes than clear places for guidance was the second half of our problem, our “Tier 2” challenge.
Rapid build Tier 2 solutions
By the point we defined our Tiers 1 and 2 we had less than 2 weeks left to actually create a solution that fixed both tiers. Therefore based on all the previous research we did, we chose as a team to focus on Tier 2, considering as a top priority to solve how to deliver resources, and how to used them to maintain consistent centric web design.
Tier 2 is based on the IBM.com Library, which is IBM’s expressive design system for website design. We envision a future for this website where we provide guided delivery of our resources and an efficient way to browse documentation. Our first step was to analyze the current state of the Library and identified gaps and core features to add in our concept.
The following list shows the main improvements that we sought to include in our solution:
- Improve the homepage to clearly communicate the purpose of the site.
- Structure site navigation to fulfill this purpose and facilitate access to any information therein.
- Ensure the content model is consistent on every page of the site.
From this point on we begin to work on different ideas using low-fi wireframes. After a couple of iterations, team reviews, and headaches, we finally came up with a path forward. This was a huge step for us considering the late pivoting we did to define a new objective. Our Tier 2 solution focused on providing IBM.com Library visitors the design information, guidelines, and resources for designing websites. Furthermore, to actually solve the main problem, we added a guided section called Createin which we provide a step-by-step process to help designers create webpages by:
- Using the Universal Experiences to identify where in the user journey their visitors are so they can understand what they need.
- Recommend page templates that already exist from a curated collection.
- Show how the chosen templates the Library has accumulate to demonstrate the components in context.
- Start with half the work already done through provision of a Sketch template and other resources.
With this new IBM.com Library proposal we meant to have a single authoritative standard system for creating consistent, delightful experiences across IBM.com.
Gateway to the right place
Although the team focused on the Tier 2 solution and created a prototype to conduct tests with sponsors users, it was during our last preparation playback that we realized the importance and impact that Tier 1 could have on our existing solution. Our user testing results validated this fact.
Our solution was focused only on a small part of the entire IBM design ecosystem. Even though it was well focused on solving Tier 2, there was still a loose end:
How to get visitors to find the right site in the design ecosystem? And how will they find the IBM.com Library?
With less than a week to our Final Playback we made a very risky move and decided to add a solution proposal for Tier 1. Our main idea considered helping all those visitors who had no idea how to navigate through the entire design ecosystem. Thanks to all the previous work we did, we came to the conclusion that we should create a starting point where all new and existing visitors could find the right site in the design ecosystem, this is how we created New to Design.
New to Design is a section that lives in the main IBM Design website and has the purpose to provide visitors an authoritative directory to IBM’s ecosystem of design resources. This way visitors find a simple stepping stone — not a rabbit hole — that can get them started. We simplify the search of resources by asking visitors what they what to do. Do you want to build a product user interface? Do you want to build a webpage for IBM.com? Do you want to download design tools and applications? In addition, we provided other resources to promote better understanding of these resources such as common terms glossary and a case studies page for visitors to refer back to projects similar to their own.
It’s from this starting point (Tier 1) that we allowed visitors to get to any necessary design resource they are looking for including the IBM.com Library (Tier 2).
Organizational response
IBM is one of the largest tech companies in the world, and changes to our organization’s core work approach through such major changes to our design systems were certainly intimidating. As many designers will recognize, it’s more often easier to come up with the clever idea than it is to realize it at an enterprise-wide scale.
Our team gave a final, virtual Playback of our work to over a dozen business units and senior design executives at the conclusion of the Patterns Incubator program, bringing it to light for both the creators who would benefit most from our suggestions and for the leaders who could make it happen. Luckily, the due diligence of our research insights and extensive testing made a convincing argument to try something new with our approach to design systems. One of the main principles our organization has adopted through Enterprise Design Thinking is restless reinvention — an openness to iterate and progress even when it’s uncomfortable.
Since the conclusion of the Patterns program, efforts are starting up on our core internal teams to think seriously about wayfinding for our design resources. An emphasis on intelligently curating the design assets we deliver to adopters is also being turned into a new norm, which is a completely new concept to corporate design systems that we’re excited to bring to the fore.
Nigel Prentice, the Design Executive of Digital Growth & Commerce and member of the Sponsoring team, reiterated to us after our final Playback the organizational impact Team Phoenix had made:
I’m still beaming with pride with how much impact, and how much truth you uncovered over the last several weeks. This work will reverberate for months and years to come.
- Nigel Prentice, Design Executive of DGC
Learnings
There were so many things we learned from the Patterns Incubator project, that could be an entire Medium article in itself. But we’ll just leave you with the 4 biggest things we learned from this experience.
- Follow what the research says.
As you saw from our process, we were asked by our Incubator team to focus on redesigning one thing, but after talking with several users and stakeholders, all of the research was pointing towards a different problem space that we should be working on. We learned that while it is important to take into consideration what the business or your client is asking of you, it is just as important to follow what your users and the research is saying. Even if this causes you to take a sudden pivot in your work, it will most likely lead to a more impactful project and solution.
2. Embrace the pivots
It’s one thing to talk about changing project directions, but it’s another thing to actually do so. Pivoting a project can be stressful and time-consuming, and with so many things to consider (i.e., timeline, budget, limited resources, feasibility, etc.), it can be a decision easy to resist. However for Team Phoenix, we were encouraged to embrace these pivots head-on. The design thinking loop framework we were expected to follow showed us the value of finding new problems to solve and new ideas to explore, ultimately leading us to a project outcome that was unexpected, and just as worthwhile. Another factor that helped with our project pivots was the support from our Incubator team. Their encouragement allowed us to value pivots as an opportunity of growth rather than a problematic expansion, showing us the importance of putting our users’ needs first even when it requires a change in direction.
3. Don’t be afraid to create something aspirational.
When our team was ideating and designing, we kept limiting ourselves by thinking “We want to create something that will actually be implemented.” We kept getting bogged down with the minute details such as the conversations that were happening in meetings on whether this small feature was feasible or what the exact wording of a category should be. It wasn’t until the very last week of the program when we decided to create a concept that was aspirational. This concept ended up being the huge talking point in our Final Playback that caught everyone’s attention and began a discussion with the leaders of IBM Design on what needs to systematically change within the organization. While feasibility is important, creating something that is exciting and different will spark so much more conversation and lead to real and important change.
4. Building connections with your team is key to success.
During the short five weeks our team had together, we formed an incredible bond, even with having to work remotely. We spent most of our days on hours-long video calls together, usually collaborating, deciding what to do next and sharing thoughts and ideas. With all this time together, we really got to know one another and how each of us could best contribute to this project. It also naturally created an open space for anyone on the team to express how they were feeling, which often revealed we were feeling the same things. Together, we experienced confusion, frustration, doubt, helplessness, exhaustion, excitement, curiosity, breakthroughs, triumphs, and lots and lots of laughs. This transparency allowed us to validate each other and help us determine how to best move forward. Without building those connections and having that open communication, we wouldn’t have been anywhere as successful as we were.
Special thanks to the co-authors of this post including, Nigel Prentice, Wonil Suh, Jenny Sanchez, Oscar Dumlao, Mauricio Monroy Andrade, Delaney Rundell, Olivia Bowman, Stephanie Boyls, and William Ryan.
Jenny Price is the DesignOps Lead for the Digital Growth & Commerce Team at IBM Studios Astor based in the heart of New York City with team members co-located in Austin, Raleigh, Boston, and Bratislava .
The Digital Growth & Commerce design team drives innovation at IBM, one of the enterprise digital information technology leaders in the world, and creates the next generation IBM.com experiences to help users while driving business results. The Digital Growth & Commerce Team and F&O Support Experiences are led by Nigel Prentice, Design Director.
Please visit www.ibm.com/design for more information on Design at IBM.
The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
