Hi,
I´m Bernardo Santos
but friends call me Bê — Senior Product Designer & UX/UI Designer based in Lisbon
Senior Product Designer
Enterprise & data-rich products, design systems and accessibility. 5+ years in tech.
Carioca (ka·ree·aw·kuh)
Brewed in sunny Rio and now pouring creativity in (also sunny) Lisbon.
Project Driven
From crafting industrial designs to serving up drinks as a bar owner, I've always been fuelled by the desire to create something special.
Holistic Mindset
Comfortable zooming from strategy to pixels, connecting business goals, user needs, data, and design into one coherent experience.
Enthusiastic
Whether it's a new product, a new tool, or a new challenge, I approach it with the same excitement that got me into design.
Work
FIXO is a Portuguese platform that connects people with trusted professionals for home services and maintenance. I joined to improve the digital experience — better usability, clearer journeys, and a more scalable, consistent interface system across an evolving product.
About the project
FIXO was an evolving platform with multiple service flows, operational constraints, and growing business needs. The challenge was improving all of that while keeping the experience intuitive and trustworthy for a wide range of users.
The same service-detail flow — with its recurring-service option — across desktop and mobile.
Role & approach
My role spanned homepage strategy and conversion-focused improvements through to service flows and design-system consistency. A big part of it was refining how Design, Business, QA, and Development actually worked together — from sprint kick-off to sprint review — and keeping the process inside the right framework. I also took full ownership of the upgrades needed to comply with the European Accessibility Act, and raised awareness of it across the team.
Accessibility — from risk to conformity
In my first week I ran a heuristic accessibility pass over the live product and flagged a problem nobody had scoped: FIXO was not on track to meet the European Accessibility Act deadline, and the gap to EN 301 549 / WCAG 2.1 AA was wider than it looked. I raised it early, framed the legal and reputational risk against the timeline, and got accessibility onto the roadmap as a first-class workstream rather than a launch-day surprise.
To get a defensible baseline, I brokered a full external audit with Bliss. I seeded it with my own first-pass findings — captured from the visual design and the production HTML using WAVE, Silktide, and Figma's contrast tooling — so the engagement started from real defects rather than a blank page. Bliss's specialists then went deeper than design, auditing the rendered markup and behaviour: contrast and visible focus, keyboard operability and focus order, heading and landmark structure, names / roles / values, and how the product actually read in a screen reader.
From there I owned remediation end to end, supervising the fixes across four fronts so nothing fell between teams:
- Front end — I produced the accessibility handoff myself: a focus-order model, landmark and heading maps, and per-component annotations the engineers built against.
- Content — alternative text, link and button labelling, reading order and language, so the copy carried meaning to assistive technology.
- Code — semantic structure, ARIA names / roles / values and keyboard behaviour, verified against the audit in close pairing with development.
- QA — an accessibility checklist wired into the test process, so every screen was signed off against the same criteria before release.
The front-end handoff was prescriptive on purpose. I set one navigation rule — every interactive element reachable, the focused element always visible, ordered left → right, top → bottom, front → back unless annotated otherwise — then specified the hard cases explicitly: focus trapped inside modals until the user chooses to leave, focus that includes both the control and its label, and a focus path that runs through an entire multi-step questionnaire before reaching the service summary. Even the details were called out — the hero heading reads as a single phrase, with its full stop ignored by the screen reader.
Governance — keeping it conformant
The real deliverable wasn't a one-off fix, it was a way to stay conformant after I moved off the screens. I turned the audit into a governance layer: a shared annotation nomenclature — focus order, heading, landmark, hide, pointer, border — baked into the design-system handoff; the accessibility QA checklist promoted to a release gate; and explicit ownership split across design, content, code and QA. New work inherited the standard instead of re-discovering it each sprint.
By the end of the engagement I had supervised roughly 80% of the audit's findings to conformity — and, just as importantly, left behind the process that keeps the remaining points moving after handoff.
Process
The work meant finding friction points, simplifying navigation and communication, and creating more cohesive interaction patterns across the ecosystem. Part of it was also lining up business goals with usability improvements and laying scalable design foundations for future growth.
Homepage narrative — reasoning, section by section
The redesigned homepage is built as a deliberate top-to-bottom narrative — every section earns its place. It opens on a single, search-first promise ("A ajuda bate à porta" — help knocks at your door) so a visitor can act in one step instead of digging through a menu, then previews the service portfolio and makes the explicit case for choosing FIXO over its competitors. The middle of the page drives discovery — personalised recommendations and a Back-Office-editable highlight slot the business can repoint at any campaign, service or feature.
From there it shifts from discovery to commitment and growth: the Wallet and cashback loyalty mechanic, social proof at scale, a recruitment call-to-action for the supply side, a newsletter capture, and a footer that surfaces the whole FIXO ecosystem. Scroll the homepage below — the reasoning I transcribed from the design handoff tracks alongside each section on the right, and a numbered marker pins each section on the screen.
Outcome
A clearer, more structured digital experience — with better consistency, usability, and scalability across the platform.
Take away
FIXO was as much about process as pixels. A lot of the value came from tightening how the teams collaborated and from owning the accessibility side end to end, not just the interface work. Good design here meant making the whole operation run more smoothly, not only the screens.
Jogos Santa Casa is Portugal's national lottery and the operator behind Placard sports betting — a household name serving millions, and a social-cause institution whose profits fund public programmes. But its digital presence had frozen in time: a website untouched for roughly 15 years, an app stale for about 5, and a brand built for print with nothing ready for digital. I joined to help redesign the entire ecosystem — website, mobile web, and native app — across two phases, growing from the second designer on the team to the person who owned design governance and testing strategy.
The problem
The legacy products were fragmented and hard to maintain: inconsistent patterns across surfaces, unclear flows, no scalable system, and a visual language that ignored accessibility. Any redesign also had to respect the weight of the brand — millions of habitual users, strict regulation, and a broad, mixed-ability audience — so trust could not be traded for novelty. The work split into two phases: first prove a modern experience was possible and worth funding; then build and unify it for real.
Phase 1 — Proof of concept
I came in during discovery as the second designer and, over the phase, took it solo. Early on I ran competitor and benchmark analysis and mapped game-specific requirements, then wireframed the responsive website and app in Whimsical and built mid-fidelity prototypes in InVision, using a lexicon the client signed off on. I designed and ran Maze studies to validate the direction. For the final stretch I owned the phase alone — turning the validated flows into 300+ high-fidelity frames across desktop, mobile, and app, plus the specification document the team used to pitch for funding. I also began translating a print-first brand into a digital, accessible look & feel, adjusting colour and typography to meet contrast and legibility needs rather than inheriting the identity wholesale.
The prototype and documentation did their job: they secured executive buy-in and funded Phase 2 — the full build.
Phase 2 — Build, unify & govern
Phase 2 scaled the team to six and the ambition with it: integrate new games and features, correct issues found in Phase 1, adapt designs to real CMS and platform constraints, and — the headline — unify two previously separate products, the Lottery app and the Placard sports-betting app, into one coherent ecosystem. I moved from making screens to leading design and governing how the work got made.
My biggest contribution here was a governance model. With multiple senior stakeholders feeding in, feedback was constant and often contradictory; I designed the workflow the engagement ran on — defining touchpoints, deliverables, review gates, and feedback loops — so the team could absorb input without thrash. As the only person with continuity from Phase 1, I mentored the second designer and delegated screen production while I held the system and the standards.
Two calls shaped the build. I recommended a cascading rollout that started with the app, so design and development could align on a single surface before scaling patterns to web — cutting cross-platform rework. And when client-side restructuring caused delays, I redirected the team onto independent workstreams (the design system and screen design) so momentum never stalled while the client regrouped.
Testing & validation
I owned testing end to end. I designed the Maze studies, prototyped the flows in Figma, and — against budget pressure to run cheaper unmoderated sessions — argued for moderated testing, trading sample size for the depth needed to catch real failures. I moderated the sessions myself, then ran a thematic analysis and co-authored the report.
The results were nuanced. With six participants, the redesigned steps performed strongly in isolation — the account-registration step, for example, scored a perfect usability score with a 0% misclick rate and ~3s average on screen. But the expected-path data on one longer mission told a different story: completion dropped sharply after a specific step (only ~20% finished via the intended route), which pinpointed the one critical usability issue. That, plus a handful of minor ones, was resolved before handoff — exactly the kind of failure moderated testing exists to surface.
Outcomes
- Funded the build. The Phase 1 prototype secured executive buy-in for the full programme.
- Unified two products. Lottery and Placard sports betting became one coherent experience.
- Built a scalable design system structured for developer handoff and long-term consistency.
- De-risked the launch. Moderated testing validated the core direction and caught a critical issue before release.
- Grew the client's UX maturity over 18 months — which made every later decision smoother.
Reflection
The biggest lesson was organizational, not visual: in a high-governance, multi-stakeholder environment, the decision-making system matters as much as the design system — getting the workflow right was what let the design survive contact with the client. The role itself was a lesson in adaptability: I pivoted from second designer to sole designer to design lead and governance owner as the project demanded. If I ran it again I'd push for deeper testing with key segments earlier, and treat brand future-proofing as a day-one deliverable, not a mid-project repair.
Zomato — a global leader in food delivery and restaurant discovery — needed a full redesign of its Back Office to improve usability and efficiency for internal teams, merchants, and delivery partners. With a rebrand on the horizon, the challenge was to balance functionality and brand consistency without leaning on colour, aside from the iconic Zomato red.
About the project
The initiative covered both a desktop platform and a mobile app, serving three very different user groups:
- Zomato employees — full access to all system features for comprehensive management.
- Merchants — restricted to restaurant-specific tools, such as menu updates and order management.
- Delivery managers — focused access to delivery tracking and task management.
Highlights
- Faster task completion — reduced task time through optimised workflows.
- Enhanced operational efficiency — role-specific, customisable dashboards.
- Simplified multi-user management — seamless across all three profiles.
- Improved user engagement — boosted satisfaction through intuitive navigation.
- Future-proofed design — a scalable solution ready for the rebrand and future expansion.
Personas
Three personas anchored the work, one for each user group: Maria (Zomato employee), Manuel (merchant), and Tiago (delivery manager).
Scalable Back Office model
Back-office tools are the engine room — lots of data, lots of workflows, function over form. The tricky part at Zomato was serving three user types with different jobs and access levels. The architecture came down to three elements:
- User management & permissions — add, remove, and manage users with specific access levels; employees got full clearance, merchants and delivery managers only saw what they needed.
- Front vs. back operations — merchants controlled what customers see (menus, promotions, photos); internal users handled the invisible side (routes, logistics, revenue, partnerships).
- Optimised data presentation — sales performance, restaurant views, and delivery stats organised for quick reading, tailored per role.
Design challenges & solutions
Minimal palette. With little colour to work with, I leaned on typography, spacing, and Zomato red for key actions to keep the hierarchy clear.
Role-specific dashboards. Each group saw only what mattered to them, which cut clutter and surfaced the most relevant tasks.
Cross-platform. Built for both desktop and mobile, so people could work on the move.
Take away
The interesting challenge here was juggling three user groups at once. Merchants were the hardest — they wear a lot of hats and range widely in how comfortable they are with tech. Rolling them into a single persona made sense for a 10-week timeline, but I'd have liked to dig deeper into how they actually work.
The limited palette was a good constraint; it forced clarity. In-house testing helped, though testing with real merchants would have sharpened their side of things. Mostly, this project reminded me to prioritise honestly under a tight deadline — and to be clear-eyed about what's left to improve.
Pingo Doce, a top Portuguese supermarket, brought Mediterranean flavours to life with fresh, homemade meals. The mission: streamline ordering through self-service kiosks, making it easy to explore, customise, and order with ease.
About the project
As Lead Design, I led the effort to create a seamless and intuitive user experience for Pingo Doce's first digital kiosk. The goal was to keep the design aligned with the brand while offering a user-friendly interface for a quick, efficient ordering process. The project was developed in partnership with Fujitsu (hardware and development) and Monday (product design).
Highlights
- Average order time: reduced to ~1 minute per order — a threefold improvement over traditional ordering.
- Launch-day adoption: 104 orders processed through the kiosk on the first day, exceeding initial projections.
- Customer satisfaction: usability tests showed a 95% success rate for first-time users navigating the kiosk.
- Operational efficiency: the system handled a high volume of orders, with only minor adjustments post-launch.
- Engagement: customisable menu options were used in 80% of orders.
Research
The project began with market research and competitor analysis, focusing on similar services from McDonald's, Burger King, Ikea, and Pizza Hut. Unlike McDonald's, Pingo Doce users lacked prior familiarity with the menu, requiring significant adjustments to the menu structure and categories. We then defined customisation levels and best practices before moving into screen design.
Initially all items were meant to be customisable, but non-customisable options were later added. The customisation flow was designed to be intuitive, with four levels of choice, balancing user experience and system limitations. McDonald's kiosk layout served as the initial design reference for pixel size, resolution, and button dimensions.
The kiosk features 72 products, including four customisable options. Those items offer a selection of 35 ingredients, enabling countless combinations — a level of personalisation that sets the project apart, letting customers tailor meals to their tastes and dietary needs.
Wireframe
The approved direction featured a left-hand menu and a persistent cart displaying selected items. Each item is a clickable card with a photo, price, brief description, and an info button for additional details. Customisation used a breadcrumb navigation system with visual feedback, so users could track progress and see selected ingredients at a glance, with personalisation reachable right up to checkout. We ran guerrilla testing along the way, gathering real-time feedback and iterating quickly.
High fidelity
The team and I decided the new Pingo Doce brand book would be used for the first time as the look and feel, even though it contrasted with current advertising pieces. I based the UI on brand-activation and simplicity requirements — graphic elements (shapes, figures) appear only on screens where they serve a function, apart from the start and end screens. By the end: 6 steps from start to checkout (plus a "kiosk unavailable" state), 3 flows (10 steps shortest, 13 longest), and 9 versions.
User testing
Usability tests were moderated and in-person, performed on the real equipment, recorded and mapped with Maze. No critical failure was identified. Two issues came up: some micro-interactions (visual feedback) felt "sluggish", and the "log in with the Pingo Doce app" identification feature wasn't communicated clearly enough.
Final prototype
The version sent to development.
Handoff
For handoff I delivered a comprehensive style guide — 56 components with their variations and 15 pages of detailed instructions covering everything from file formats and image-size specs (to help developers and the marketing team produce consistent, high-quality photos) to component behaviours and micro-interactions. Clear guidelines ensured seamless implementation and a cohesive experience through development.
Take away
Designing Pingo Doce's self-service kiosk gave valuable insight into building user-friendly interfaces for complex systems. With 72 products and extensive customisation, the project underscored how much intuitive navigation and clear visual feedback matter to guide users through intricate flows.
It also revealed room to grow: deeper integration between the kiosk, kitchen operations, and overall service flow would meaningfully improve the experience. Expanding into service design and CX strategy would smooth interactions between kiosk, kitchen, and restaurant operations. And while guerrilla testing with employees gave actionable insight, broader user research could have refined performance further, especially for diverse user needs. Still, it laid a strong, scalable foundation with room for future CX-driven enhancements.
Launch day
Do you like Coffee?
10 grams of 90ºC water
With circular motion.
Try to keep the water levelled
Mini Tools
An experiment in vibe coding, and a couple of tools I actually use.
More an experiment than a product line. I gave myself one month and one rule: AI tools only (ChatGPT, Claude AI and Claude Code), then set out to see how far a pure agentic design-with-code flow could go: research, design decisions, branding and the build itself, all driven through conversation, with the code vibe-coded in Claude Code. The point wasn't only to ship; it was to push that workflow until it broke and learn exactly where, and why. The two tools below are the genuine, useful results: one I use every day, one rebuilt from real client work. Feel free to use them as you wish.
Ref.Ari
A reference manager for the things you actually want to find again. Paste a link or snap a photo of your screen, and Ref·Ari works out what it's looking at — a video, an article, a tool, a screenshot of a YouTube video — then names it, tags it, summarises why it matters, and files it into a library you can search just by describing what you're after.
It came from a personal pain point. I save references constantly — a tutorial, a Dribbble shot, a paragraph I'll want later — and they scatter across screenshots, open tabs and notes-to-self, never to be seen again. So I built the thing that catches them and keeps them in order.
The name is a play on words. "Ref" is short for reference; say "Ref·Ari" out loud and it lands on referee. So the mascot is exactly that — Ari, an 8-bit pixel referee who reviews every reference, blows the whistle, and waves it safely into the library (and pulls a yellow card when you try to save the same thing twice).
Drop in a link or a screenshot and Ari reviews, names, tags, and files it. Entirely vibe coded with Claude Code — no framework, no build step, one self-contained file. Mobile-first, dark mode. Bring your own API key; it runs in your browser, nothing is saved to a server, nothing is tracked.
Shipping's still in progress — it'll be live right here soon. Be patient, I'm a designer, not a dev :)
Data Viz
Side-kick
A dashboard review assistant. Give it a dashboard's context and charts, and it checks the KPI hierarchy, narrative flow, chart choices, and UX governance against data-viz best practices — then returns specific, severity-rated feedback.
It came out of a real project. On a data-heavy product I kept running the same review by hand: is the right metric up front? does this chart earn its place? I turned that checklist into a tool, used it, then made it public and open-source.
Give it your dashboard's context and charts, and it returns specific, severity-rated feedback. Entirely vibe coded with Claude Code — no framework, no build step, one self-contained file. Bring your own API key; it runs in your browser, nothing is saved to a server, nothing is tracked.
Shipping's still in progress — it'll be live right here soon. Be patient, I'm a designer, not a dev :)
Take Away
Ref.Ari started from a real annoyance: references scattered across Notion, Chrome tab groups and bookmarks I could never find again. I scoped it in conversation first: the concept (a wordplay on reference + referee), the mascot (Ari, an 8-bit pixel referee), and a strict dark, pixel-font identity. Then came the core loop (paste a link or snap a screenshot → the AI names, tags and summarises it → it files into a library you search just by describing it), built mobile-first as an installable app. From there the AI layer (page-metadata extraction, vision reading of screenshots, natural-language search), then a zero-cost backend (per-user sync + bring-your-own-key), and finally the personality pass: Ari's win and approval states, whistle-style sound cues, and a "Match Report" stats view. Every phase was a conversation, not a commit.
Data Viz Side-kick went the other way: it began as real client work. On a data-heavy product I kept running the same dashboard review by hand (is the right metric up front? does this chart earn its place?), so I turned that checklist into a tool and used it on the job. The exercise was to make it public: I rebuilt it from scratch as a single-file, frontend-only app, stripping out everything the NDA covers, under the same one-month, AI-only constraints. That produced a clean five-step flow (connect a key → describe the dashboard → list the charts or drop a screenshot → AI review → copy Figma-Make prompts), grounded in data-viz canon (Tufte, Few, Cairo), with bring-your-own-key and nothing stored. The last layer was an identity of its own, a brutalist look distinct from the client's, plus an open-source release.
A pure agentic flow is astonishingly fast from idea to working software, but it fights you on craft, and two pain points were constant. UI consistency was the first: every session happily re-interprets spacing, hierarchy and components, so the look drifts unless something holds it still. I held it still with one brand doc and a locked set of design tokens (the exact palette as CSS variables, a single type scale, icon characters instead of emojis) that the agent had to obey, and by converging the visual language on dedicated "style-testing" pages before letting it near the real screens. Image generation was the second: AI-made imagery came back generic, off-brand and different on every run, so I stopped fighting it. Ari was hand-built as pixel-art SVG sprites, and the Data Viz UI leans on type and shapes rather than pictures, side-stepping generated assets entirely.
The honest verdict isn't that I should have written tighter specs. Holding to AI tools only was the whole point of the exercise, not a slip. The lesson is subtler. The agentic flow accelerates huge stretches of the work, but on visual consistency it can quietly do the opposite. Run after run feels like progress in the right direction while the look keeps drifting and the tokens keep burning, and that false sense of momentum is the real trap: you think you're spending time well when you aren't. The thing I learned to watch for is exactly that moment. A couple of hours in Figma (or any design tool) settling the system and the screens would have beaten a dozen more prompts spent trying to talk a model into consistency several runs down the line.
Pause for a coffee?
12 grams of 90ºC water
gently mix with a spoon.
Leave it to extract for 3”30´
About
A Senior Product Designer
Carioca in Lisbon
I'm Bernardo — a Senior Product Designer with 5+ years turning complex systems into experiences people can actually use.
My work sits somewhere between product strategy, UX, and design systems. I'm comfortable talking KPIs with a product manager and kerning with a visual designer without changing who I am.
Before design, I built a cocktail bar from scratch. Operations, finances, service design, real constraints. It changed how I think about products permanently. It also confirmed that the best experiences — like a good Negroni — feel simple. The hard work stays invisible.
I've worked across healthcare, insurance, hospitality, gaming, and technology. Right now I'm into data-rich products, enterprise platforms, and the kind of problems that don't have an obvious answer.
Open to — Senior Product Design · Senior UX/UI Design · Design Strategy · Selected freelance
Too hot for a coffee?
1 glass of ice
until the shaker is super cold.
Strain to a glass with fresh ice. Enjoy :)