The Super Bock Group (SBG) is one of the leading beverage companies in Portugal, with a growing presence in international markets such as the USA and China.
The company sought to improve the consistency and efficiency of its applications, which had been developed using different technologies and lacked a centralized structure. The goal was to create a unified digital ecosystem that would simplify work for employees and development teams.
The plan included defining interface design rules, developing visual themes and UI components for web and mobile applications, and establishing a collaborative design system.
In addition, technical workshops were held, and a digital factory was set up with pre-developed code and accelerators to speed up application creation and maintenance. Through this strategy, SBG achieved greater visual and usability consistency, reduced development and maintenance costs, and strengthened collaboration among teams and partners.
The Discovery and Understanding phase involved in-depth analysis and workshops with The Super Bock Group to identify challenges and opportunities. Remote interviews using the Contextual Inquiry methodology helped observe users performing real tasks, revealing problems, needs, and expectations.
We conducted demos and heuristic evaluations to assess the interface of SBG applications against established usability principles. Ideation workshops with stakeholders and developers shared findings, highlighting frequent tasks and user needs. This user experience research approach ensured a deep understanding of context, users, and their expectations, guiding the design process effectively.
Conducted remote sessions observing users, uncovering real problems, expectations, and workflow inefficiencies.
Evaluated application interfaces against usability principles to identify inconsistencies and improvement opportunities.
Engaged stakeholders and developers to align on key tasks, needs, and user-centered solutions.
During the UX phase, we created 20 low-fidelity wireframe templates and responsive layouts, ensuring all essential components were included to meet SBG’s current and future application needs. We conducted two UX Writing workshops with key stakeholders and developers to define and validate the company’s Tone and Voice principles, fostering consistency and best practices.
Additionally, we developed a UX Writing Standards Guide to support teams in creating cohesive content across all applications, maintaining alignment with SBG’s design system and reinforcing a unified digital identity.
Designed 20 responsive wireframes to define essential components and ensure scalability for future apps.
Collaborated with stakeholders to define Tone and Voice principles, creating a guide ensuring clear, consistent content across all applications.
In the UI phase, we developed high-fidelity screens applying colors, typography, iconography, and style standards to create a consistent brand experience across all applications. A comprehensive UI Style Guide was established, detailing layouts, component behaviors, and design principles to ensure visual coherence and usability.
Additionally, a style library was created to document all interface elements and components, allowing teams to maintain consistency across pages and applications. This approach provided a unified brand identity while preserving the best user experience practices throughout Super Bock’s digital ecosystem.
Applied brand colors, typography, and icons to create consistent, user-centered interfaces across applications.
Defined guidelines for layouts, components, and behaviors to ensure visual consistency and seamless UX. Documented all interface elements and components to support teams in maintaining uniform design standards.
We provided a complete solution to enhance SBG’s digital ecosystem, including a Design System, centralized App Store, governance model, and practical application through development and refactoring of key apps. This approach ensures consistency, efficiency, and maintainability, while empowering teams to create high-quality, user-centered applications across the organization.
We based our work on creating a solution that allows to reduce development costs and to guarantee the quality of interface. The DS have all design principles, documentation, components and screen templates, UI assets and resources.
We designed and implemented the new access portal to the applications of the SBG application suite, with the purpose of facilitating the search and access to the internal applications of the SBG.
We wanted to ensure that, after delivering the Design System, this would be maintained and updated. So, we helped SBG to define the processes that control Design System decision making, inputs, improvements, and workflows.
Demonstration of the practical application of DS through the development and refactoring of 4 applications.
We carried out a set of training sessions focused on the main steps of the process, in order to increase awareness and UX/UI maturity at DS and to promote knowledge about UX/UI processes and methodologies
In the final phase of the project, we delivered a comprehensive solution that combined high-fidelity screens, a robust Design System, and a centralized App Store for all SBG applications. The Design System includes principles, documentation, reusable components, templates, and UI assets, ensuring quality, consistency, and reduced development costs.
We supported SBG in defining governance processes to maintain and update the system over time. Additionally, we demonstrated its practical application by developing and refactoring four apps, and conducted training sessions to strengthen team knowledge and UX/UI maturity. The result is a cohesive, scalable, and user-centered digital ecosystem ready for future growth.
Reach out to explore tailored solutions for your business challenges.
Hi Interactive Corp. 1030 Salem Road Union, NJ 07083
Alcântara-Rio Bloco A, nº36 – 2º Dto, R. Cozinha Económica 1300-149 Lisboa
info@hi-interactive.com
+351 213 630 796