j✦tɑ
Foster's Hollywood Design System
Digitalized Foster's Hollywood Brand for their Digital Assets maintaining brand consistency
CLIENT
Tribal Worldwide
DATE
2018
MY ROLE
Product design
Design systems
Stakeholder management
User research
WORK WITH
César Casado
Franchesco Minopoli
✦ CHALLENGE
Conect digital assets with business under a common language
Considering these factors, my role as a Product Designer was achieving a cohesive experience. A strong, scalable foundation was imperative so when we started the project at Tribal Worldwide, we defined as our primary goal to establish a coherent, unified Design System Language that extends across all products, platforms, and services—aimed at enhancing the customer experience by ensuring uniformity and flexibility for all the teams operating across these digital touchpoints, all the while preserving the brand identity.
Results & Key metrics
Shifting from a massive component catalog to focusing on intentional and scalable system architecture has made a real difference —we streamlined the development process, cut down on maintenance, and boosted consistency across platforms.
Develop a scalable system to develop current and future products
-33%
Time to market (reducing time for repetitive tasks)
1
Single source of Truth co-leaded by Design and Development
+1
Product Manager to ensure the delivery of value to business
+2
Product Designers to support new requirements
↓ PROCESS
Audit what's there to do the tactics and workshops to go for strategy
As we initiated our journey towards a new design system, we opted to start with a clean slate by developing a modern visual language.
After assessing the request, we evaluated the present status of the component across all platforms, conducting a comprehensive content audit for over 150 static html alongside 300 app screens riddled with an illogical amount of different modules. To avoid the risk of feeling overwhelmed the next stage of the designing process was prioritize the items based on usage and identifying actual categories of the system which may include visual language, UI elements, components and patterns as well as templates and layouts.
At this point, we engage closely with the developers to better understand how the components were implemented. One of the key differences between a design system and a visual language, pattern library, or rebrand, is the connection with development. It was crucial for our mission's success to begin collaboration with developers early on, since they will be also the ones using it every day!
Additionally, an unexpected bonus emerged during one of our workshops: we discovered developers who care about craft, systematic thinking, and UI. We initiated discussions around our shared interests, and they became supporters of the design system initiative, promoting it within their respective business areas.
↓ PROCESS
Transforming a undetailed RFP into the stakeholders buy-in
After completing the problem discovery phase, we suggested a comprehensive revamp of Foster's Hollywood's entire digital presence by creating a modular design system based on Atomic Design (the state-of-the-art at that time). Once we have the set list of the components prioritized, we can allocate the items to relevant sprints. Coming to a clear conclusion about priorities should be the end goal of the group deliberation and negotiation.
But convincing stakeholders about the advantages of building a design system from the ground up was a hassle, especially considering the colossal dimensions of the project along with the preliminary investment of time and resources required for fruitful results. Moreover, we had to bypass common development hurdles (due to project timming and complex logic) to expedite and simplify the formation of an array of new products while ensuring brand consistency and maintaining brand core values.
So we start by brought the design system idea to life by creating a wiki-website to explain why we needed a design system and demonstrate its benefits to the teams. This served as an effective medium for disseminating information amongst different teams, fostering a sense of enthusiasm for the project, and securing the previously discussed buy-ins from crucial stakeholders.
Made it real to foster a culture to encourage everyones contribution
Finally we began the journey establishing the product principles and visual language elements such as brand guidelines, corporate hues (adding user interface colors alongside the brand colors) and typography choices.
Simplifying brand decisions to make it manageable for development
The unique attributes of FH's digital identity were too complex to manage in product definition and development. We needed to juggle with 7 Headings and 5 Display styles combinations. This huge font pairings certainly didn't promote quick development so we had to do some kind-of 'Graceful Degradation' towards a reasonably logical and visually appealing version.
Having achieved a stable version of the core elements, our focus shifted to design specific first-need UI components based on feature requirements and on-going development projects.
With the growth of the design system, the risk of inconsistent documentation became apparent. A key objective of the design system is to minimize incoherences in the company's digital outputs so we aimed to trim the documentation to the bare minimum till we have the alpha. Once all the core components were designed, we will be able to create the necessary descriptions and detail the anatomy of the components (like margins, height, width).
Since our initial steps, we've been diligently working to complete the full scope of the project, concluding in a Single Source of Truth as the final outcome of the work done by the team. To keep track of our progress, we use a Kanban board and we operate in biweekly sprints, with very specific goals. All the additional issues and requests were aligned through status calls on a daily basis where we report on the previous day's tasks, outline our plan for the day, and identify potential blockers.
Every sprint cycle, a design critique was conducted to go through all the new and revised components one by one. The entire team participated in these calls because everyone somehow contributes. Some elements could be on their second or even third iteration due to new issues arised during development process.
