BRIXapp - Mobile
BRIX is a SaaS platform and social intranet designed to revolutionize communication and operations within the construction industry.
As the UX Lead, I spearheaded the development of the BRIX Mobile App for Coffrages Synergy, with scalability to other construction companies in mind.
BRIX empowers frontline workers—field workers, office staff, and factory employees—by equipping them with the tools they need to stay connected, informed, and engaged.
Client : Coffrages Synergy
Deadline: 2 yrs
Role : UX Lead
PMM: Scrum
Innovation group
We approached BRIX using the Scrum framework, ensuring a flexible and iterative development process:
The project was broken down into epics, user stories, activities, and tasks organized in a backlog.
Each phase of the project followed a defined deadline, with sprint reviews and retrospectives conducted to track progress and identify areas for improvement.
MVP Development: The project roadmap spanned 2 years and included 4 MVP releases, allowing for rapid iteration and user feedback integration.
The Challenges
Unique Industry Obstacles :
-
Disconnected Workforce: With teams dispersed across multiple sites, workers often felt isolated from company updates and each other.
-
Low Tech Literacy: Many frontline workers had limited experience with digital tools, making adoption a significant hurdle.
-
Harsh Working Conditions: Environmental factors like bright sunlight, dirty hands, and the need for gloves affected how users interacted with mobile devices.
-
Safety and Compliance: Ensuring all employees received critical safety updates and training was a persistent challenge.
-
Multilingualism: For every module, we needed to consider that our users primarily spoke different languages—French, English, and Spanish—requiring careful adaptation for clear communication and usability.
My Approach : Curiosity & Empathy-Driven Research
To tackle these challenges, I immersed myself in the users' environment:
-
Field Observations: Spent time on construction sites to understand daily routines and pain points.
-
User Interviews: Conducted interviews with field workers, office staff, and factory employees to gather diverse perspectives.
-
Regular Stakeholder Meetings: Engaged in consistent meetings with stakeholders to align on goals, gather feedback, and ensure the product met business and user needs.
Design Solutions : Simplifying the Complex
Intuitive Navigation: Designed a clean, simple interface with large icons and clear labels to accommodate users with low-tech literacy.
Glove-Friendly Interactions: Larger touch targets and swipe gestures were implemented, which are suitable for workers wearing gloves.
High Contrast UI: Choose color schemes and font sizes that enhance readability in bright outdoor conditions.
Offline Access: Enabled content caching so users could access essential information without reliable internet connections.
Features Tailored to Users' Needs
Interactive Newsfeed: Allowed employees to read, like, comment, save, and post updates, fostering a sense of community.
Real-Time Chat: Facilitated direct communication between workers and managers, breaking down hierarchical barriers.
Micro-Training Modules: Provided short, engaging video content with quizzes to promote continuous learning, gamified with points and badges.
Operational Tools: Integrated timesheets, leave requests, pay stub access, and clock-in/out features to streamline administrative tasks.
Push Notifications: Delivered important updates, emergency alerts, and required training reminders directly to users.
Design system development
We built the BRIX design system from the ground up, specifically tailored to integrate seamlessly with the Vue.js framework. Over a span of two years, we meticulously developed and continuously refined the system to ensure it was both flexible and scalable.
Component Design: Every element was crafted to be responsive and functional, allowing for smooth integration within the Vue.js environment.
System Evolution: As BRIX evolved, the design system was dynamically updated to accommodate new features and functionalities, maintaining consistency across various platforms and supporting a reusable component library.
Collaboration and Development
Cross-Functional Teamwork
Agile Practices: Worked within a Scrum framework, participating in daily stand-ups, sprint planning, and retrospectives.
Tools and Communication: Utilized collaborative tools like Figma for design, DevsAzure for sprints, and Coda for documentation to ensure transparency and alignment.
Developer Partnership: Maintained open lines of communication with developers, conducting regular technical reviews to address feasibility and constraints.
Iterative Design Process
-
Feedback Loops: After each design iteration, I conducted usability tests with actual users, gathering insights to refine the app.
-
Before-and-After Comparisons: Documented changes to demonstrate how user feedback directly influenced improvements.
-
Adaptability: Remained flexible to pivot designs based on evolving user needs and business goals.
Just a little part of our research & discovery :)
Upon completing our research, we developed personas and user flows to answer the essential question, "Who are we designing for?"
These tools provided valuable insights into users' expectations, concerns, and motivations, allowing us to fine-tune our design strategy.
To create this product, we started by aligning business objectives with user goals and then developed a primary architectural plan. This plan was refined through the "HMW" statements, which aimed to address user needs while considering the tasks and technology required.
These "How Might We?" statements were specifically tailored to meet the needs of the Bella persona, with a focus on achieving business goals:
-
How might we assist Bella in discovering retro-style ideas based on her preferences?
-
How might we enhance Bella's experience of buying and selling second-hand clothing to make it more accessible and user-friendly?
-
In her search for sustainable brands, how might we enable Bella to easily grasp this value through the information architecture?
From Sketches to Final Prototypes:
A Collaborative Journey
The design process for BRIX was far from linear—it was an ongoing, dynamic collaboration. We kicked things off with paper sketches, brainstorming ideas with the product owner, and refining the core features together. These early drafts sparked discussions that led to rapid iterations, honing in on the key functionalities.
Next, we transformed these sketches into wireframes, perfect for usability testing and also for presenting to the team for feedback. This sparked another round of iterations, ensuring the flow and interactions made sense. With each version, we refined the user experience, ultimately moving toward high-fidelity prototypes.
The high-fidelity prototypes were then shared with stakeholders, where we further fine-tuned the design based on their input. We didn’t stop there—technical reviews were held to evaluate feasibility, alongside time and cost estimations, which prompted a few more tweaks.
Measurable Outcomes
Quantifiable Success
-
Increased Engagement: Post-launch surveys indicated a 65% increase in employee engagement with company communications.
-
Enhanced Training Completion: Micro-training module completion rates rose by 40%, improving overall safety compliance.
-
Operational Efficiency: Time spent on administrative tasks decreased by 30%, allowing employees to focus more on their primary duties.
-
User Adoption: Achieved a 90% adoption rate among employees within the first three months.
Key Learnings: Beyond the Design
Soft Skills and Personal Growth
-
Empathy and Communication: Developed deeper empathy by actively listening to users, which enhanced my ability to create user-centric designs.
-
Collaboration: Strengthened cross-functional teamwork skills, learning to navigate different perspectives and expertise.
-
Adaptability: Learned to thrive amidst the unpredictability of a startup environment, embracing change as an opportunity for growth.
Overcoming Challenges
-
Cultural Inclusivity: Addressed language barriers by designing multilingual support and considering cultural nuances in content.
-
Technological Constraints: Found creative solutions for users with limited device capabilities, ensuring the app was lightweight and efficient.
Future Enhancements
-
Advanced Analytics: Plan to integrate analytics for managers to track training progress and engagement metrics.
-
Voice Commands: Exploring voice-activated features to further assist workers who have limited hands-on interaction time.
-
Expanded Integrations: Looking to integrate with more third-party tools to enhance operational efficiency.
