IFREI Well Working is a diagnostic tool created by Professor Mireia Las Heras at IESE's International Center for Work and Family. It assesses the quality of a working environment by measuring the impact of company policies, leadership style, and organisational culture on employee wellbeing, classifying the result across four levels: Toxic, Negative, Positive, and Well Working.

The project was delivered through a partnership between Cookie Box, where I worked as a Gamification and UX/UI Designer, and Taket, an external development studio that coded the live experience. My role was to design the full UI and interaction flow in Adobe XD, working from content and a diagnostic framework provided by the IESE research team.

The content was fixed: the questions, the scoring logic, and the four-level framework had all been defined by the IESE team. My job was to design an experience that made that content accessible and meaningful for any employee, regardless of their role or digital literacy.

The results screens presented a particular challenge. After completing the questionnaire, users needed to see immediately where their organisation sat on the spectrum, broken down across three dimensions: policies, leadership, and culture, with contextual comparisons to similar demographics. Presenting diagnostic data clearly without making the tool feel like a performance review required careful visual decisions throughout.

I designed the first version of the prototype in full, selected the visual language, colour palette, typography, and photography sourced from Unsplash, and connected all screens across the four conditional diagnostic paths. I validated it internally through testing sessions with colleagues, iterating on any screens where users were confused before presenting it to the client.

The client rejected it. Not the logic or the content structure, the entire look and feel. I had to start over.

The tool ran on mobile web, not a native app. The full prototype contained over 60 screens connected across four conditional paths, each reflecting a different diagnostic outcome based on the user's responses throughout the questionnaire.

The visual design balanced warmth and credibility. The IFREI red anchored the brand identity while extensive use of natural photography kept the experience from feeling clinical or corporate. Dark and light screen modes handled the contrast between the data-rich results screens and the more conversational question flow.

The tool ran on mobile web, not a native app. The full prototype contained over 60 screens connected across four conditional paths, each reflecting a different diagnostic outcome based on the user's responses throughout the questionnaire.

The visual design balanced warmth and credibility. The IFREI red anchored the brand identity while extensive use of natural photography kept the experience from feeling clinical or corporate. Dark and light screen modes handled the contrast between the data-rich results screens and the more conversational question flow.

Save transitions for high-fidelity prototypes
Animated transition screens looked great in action but added build time without providing useful feedback at the validation stage. A note to developers achieves the same result at a fraction of the cost.