Zeus
Role: UI Designer
Time Line: 8 months
Setting: One UX/UI
Overview
With over 150,000 employees, Grupo Salinas needed a solution to streamline communication and workflows, leading to the creation of Zeus—a robust app with over 100 modules. I contributed to enhancing the user interface for essential modules, including Red social, Zeus Chat (mobile and web), Tareas por hacer, Bitzeus, Zeus Web, and Live Stream. Additionally, I supported the development of a unified design system to ensure visual consistency across the app.
Problem Statement
As Zeus grew, some significant challenges emerged:
-
Lack of consolidated module information: Without a centralized list, it was difficult to know what modules existed or what functions they served. This led to redundant features and made it challenging to prioritize redesigns based on usage.
-
Inconsistent design: The absence of a cohesive design system resulted in a disjointed user experience across modules.
-
High number of modules: With so many features, many employees only used the app for essential functions like clocking in/out, overlooking other valuable features.
-
Limited customization for diverse user profiles: The app was largely built with corporate office staff in mind, leaving the needs of remote and field employees under-addressed.
UI modules I designed to address inconsistencies and improve user experience across the platform.
-
Chat zeus
-
Red social
-
Tareas por hacer
-
Zeus Web
-
Bitzeus
-
Live Stream
User & Audience
Zeus served a diverse group, ranging from 18 to 65 years old, with profiles tailored to corporate office employees, remote staff, and field teams.
Scope & Constraints
The work spanned eight months, organized into two-week sprints. Design priorities shifted based on input from POs and project leads, allowing us to focus on the most pressing needs.
Design system
In the Zeus project, I played a key role in establishing a unified design system from the ground up. Previously, Zeus lacked a consistent visual framework, resulting in inconsistencies across its modules. Using principles of Atomic Design and token design, my team and I developed a cohesive system that included brand colors, typography, iconography, and layout guidelines, ensuring visual consistency and enhancing the user experience. This approach not only provided modularity and scalability but also streamlined collaboration between designers and developers, enabling faster, more efficient implementation of features across the app while staying true to Zeus’s brand identity.
Designing a Unified Interface for Zeus
In the Zeus project, I was instrumental in implementing a cohesive design system that unified the visual language across all modules. This initiative addressed previous inconsistencies and created a seamless user experience by standardizing elements like colors, typography, icons, and layouts. The design system not only enhanced usability but also streamlined development, enabling quicker, more consistent updates across the platform. Below are highlights of key modules where this design system made a transformative impact.
Process & Methodology
Phase 1: Review of Existing Prototypes and Project Scope
Each project began with an in-depth review of the existing prototypes. This initial assessment helped me understand the design elements in place and pinpoint where I could contribute without duplicating previous work.
Phase 2: Collaboration with Product Owners on Priorities
I then met with Product Owners to review upcoming user stories and determine priority features. This phase ensured I focused on immediate design requirements to keep development moving smoothly, while also researching other products to gather ideas for UI improvements.
Phase 3: Design Refinements and Functionality Exploration
With the core requirements addressed, I collaborated with POs to brainstorm additional design improvements and functionalities. One key focus was aligning iOS and Android designs, where there were often noticeable differences, to create a seamless experience across platforms.
Phase 4: UI Design and System Integration
Once the project’s needs and goals were clear, I moved on to creating screens that aligned with our design system, incorporating any new components as needed. After creating the screens, the Product Owner presented them to the product lead and stakeholders for feedback.
Phase 5: Documentation for Development Handoff
Following design approval, I prepared documentation to facilitate a smooth handoff to the development team, reducing any risk of misinterpretation and ensuring efficient implementation.
Outcomes & Lessons Learned
This project yielded valuable outcomes:
-
Comprehensive Module List: I developed a central module list for “Zeus” providing a clear reference of functionalities and helping to prevent redundant features.
-
Cross-Functional Collaboration: I enhanced my skills in collaborating with the development team, adapting designs to technical requirements and timelines.
-
Design System Development: I contributed to creating a unified design system, helping standardize the visual language across all Zeus modules.
-
Adaptability and Flexibility: Working closely with Product Owners taught me to refine user stories and adjust to evolving priorities, while learning not to hold onto designs too tightly, as features might shift over time.
-
Overall, my work led to the development of a new “Tasks” module, a refreshed corporate chat and social network, segmented communication groups, and a more visually consistent experience across Zeus. These improvements helped make Zeus more user-friendly and functional for the diverse employee base of Grupo Salinas.