---
title: "UI Design & UX Design - José DA COSTA"
description: "UI design and UX design, in my practice, is the **upstream discipline** of reasoning about user journeys, wireframes, and information architecture **before the first React component**. It is the compe"
locale: "en"
canonical: "https://portfolio.josedacosta.info/en/skills/ui-ux-design"
source: "https://portfolio.josedacosta.info/en/skills/ui-ux-design.md"
html_source: "https://portfolio.josedacosta.info/en/skills/ui-ux-design"
author: "José DA COSTA"
type: "skill"
slug: "ui-ux-design"
generated_at: "2026-04-26T21:15:07.854Z"
---

# UI Design & UX Design

Icon: 🎨

## My definition

UI design and UX design, in my practice, is the **upstream discipline** of reasoning about user journeys, wireframes, and information architecture **before the first React component**. It is the competency that lets a CTO push back on a poorly framed brief, produce a readable wireframe before code, and **decide when a design is shipped enough to deliver**.

### Context

I run this competency on **2 distinct phases**. **Discovery**: user interviews, journey mapping, paper then lightweight Figma wireframes validated in under 30 minutes by the responsible business owner. **Production**: minimal UI kit, design tokens, WCAG accessibility, ownership of front-end implementation. Foundations acquired at the **Master ESIEA** (UX, user journeys, information architecture), kept sharp through every successive product role from Pichet (internal-tooling wireframes, **80 interlocutors** adopting the tools with minimal training) through Magento Enterprise storefronts (3 cohesive responsive themes) to the solo accounting SaaS (6-role experience framed upstream).

### Relevance

In 2026, **generative AI has crossed onto UI**: the reference tool is **v0 by Vercel**, which turns a description into **production-ready React components** with shadcn/ui + Tailwind, database integrations, and deployment, claiming **more than 6 million developers** on the platform. Vercel details how to pair it with an existing design system in [AI-powered prototyping with design systems](https://vercel.com/blog/ai-powered-prototyping-with-design-systems). The cost of producing screens collapses, but **journey, information architecture, and accessibility decisions** remain human, and that is exactly where design value plays out in 2026.

## My evidence

### Wireframing the ESB internal tooling for the business directions

**Context:** On the Pichet ESB scope, I had to equip **roughly 80 daily interlocutors** coming from **12 business directions** (Finance, Accounting, HR, Marketing, Hospitality, Real Estate, Security, IT, etc.). These people were not technical users: they needed integration dashboards, flow visualisers, clear reporting tools - but with no deep technical training and a cognitive load already saturated by their day job.

**Action:** I refused to dive directly into Symfony code. Before every screen, I produced a **paper wireframe then a lightweight Figma version** that I had validated in 30 minutes by the responsible department head, asking 3 questions: **what are we trying to do** (user intent), **in what order** (the journey), **with what vocabulary** (business language, not tech). Once the wireframe was approved, I moved on to the Symfony controllers and the Twig + jQuery integration, but the journey was locked. For the most sensitive financial flows, I also produced **journey maps** documented on Confluence.

**Result:** **Roughly 80 interlocutors** adopted the tools with **minimal training**, average training time dropped from half a day to less than an hour, and the business directions later came back to the ESB team to scope 3 additional cross-functional tools without going through another evangelisation phase.

**Value added:** On this project I durably understood that **a readable wireframe is worth 3 iterations of code**. It is the reflex I now replay on every ACCENSEO engagement and on the accounting SaaS: sketch before opening Figma, validate the journey before the first line of React, and accept that **a blank A4 sheet and 10 minutes are often worth more than 2 hours in Figma**.

### Designing 3 coherent responsive storefronts for Fleurance Nature

**Context:** On the Fleurance Nature refit in 2017 at Smile, I had to redesign **3 storefronts** (Fleurance Nature France, International, Mincifine) with a **shared brand identity** but different local codes. The **graphic specifications** went through **7 versions in 2 months** as business edge cases surfaced (customer groups, multi-site promotions, category translations, review handling). On responsive, I had to hold mobile + tablet + desktop without multiplying themes.

**Action:** I laid down a **shared responsive grid** (mobile-first, breakpoints calibrated against existing analytics) and a **minimal UI kit** that factored the critical visual components (categories, product sheets, checkout funnel, navigation). For every storefront, I produced **responsive wireframes across 3 breakpoints**, validated visual mock-ups iteratively with the customer, wrote the **graphic specifications for the 3 distinct themes**, and then owned the **front-end implementation** on Magento. The WordPress blog plugged in via RSS was aligned visually on the same grid.

**Result:** **3 coherent storefronts** shipped to production across **8 environments**, shared visual identity preserved without per-store rewrites, and the **58-day post-launch warranty** handled in person without any major UX incident.

**Value added:** That UI/UX discipline is what now lets me **push back on a poorly framed brief** at ACCENSEO without depending on an external design agency. On the solo accounting SaaS I replayed the same mechanic to frame the experience for **6 distinct roles** (Admin, Collaborator, Consultant, Accountant, Accounting, Banking) before the first line of code - and that is exactly what saved me the post-delivery iteration weeks that an unframed scope would have cost.

## My self-critique

### Mastery level

Level **Confirmed**. Foundations acquired at the Master ESIEA (UX, user journeys, information architecture), maintained by every successive product role: ESB tooling wireframes (≈80 interlocutors adopting the tools with minimal training), 3 cohesive responsive themes on Magento Enterprise, 6-role experience framed upstream on the accounting SaaS. Capacity to write a journey map, sketch a readable wireframe, and challenge a brief. What still needs strengthening: **token-based design system** at scale and WCAG 2.2 AAA accessibility.

### Importance in my profile

Differentiator for a B2B SaaS scale-up CTO. Without it, the CTO is confined to the tech layer and delegates the entire product layer, which moves the role away from the board and the customers. It is what lets me push back on a poorly framed brief, produce a readable wireframe before the first React component, and decide *when a design is complete enough to ship*.

### Advice (for myself and others)

### My advice

*Sketch on paper before opening Figma* - a blank A4 and 10 minutes are often worth more than 2 hours in Figma. To others:

- never skip the **discovery** phase (interviews + journey map), even when the brief looks clear
- invest in a **token-based design system** from the second screen of a product
- test accessibility before visual polish - a beautiful but inaccessible site excludes at least **15% of users**

## My evolution in this skill

### Role in my professional project

UI/UX is **what makes my CTO decisions credible product-side**. In the 24-month plan, it lets me drive a product framing without depending solely on a PM, defend a design system in front of the board as a scalable investment, and challenge an external design agency on a precise brief. Without it, the role is confined to the technical layer and loses the product lever.

### Mid-term target level

By end of 2027, the observable goal is threefold: **ship for the next SaaS line a tokenized design system** (Figma + Tokens Studio), **pass a WCAG 2.2 AA accessibility audit** without major non-conformity, and **run an autonomous user discovery workshop**. The Confirmed-to-Senior shift is measured on these three deliverables.

### Current training

Daily design reviews with ACCENSEO alternants in **reverse mentoring** (they master Figma faster, I bring the information-architecture depth). Participation in internal design system workshops. Master in Software Engineering active.

### Future training

Possible accessibility deep-dive ([WCAG 2.2](https://www.w3.org/WAI/standards-guidelines/wcag/), advanced ARIA) planned 2026. Maven Design Systems program (Brad Frost or equivalent) targeted 2027 to formalize token practice. Possible ADA certification if the target role touches the public sector.

Interactive version with navigation: https://portfolio.josedacosta.info/en/skills/ui-ux-design