Designing products around the people who use them.

Both products were part of the same transformation but served very different audiences. Moving an established product to a new UI is more than a visual redesign: users already had workflows, navigation patterns and expectations. Changing the interface without understanding how they actually worked could add friction, however clean the new design looked.

Balance modernisation with continuity.

For each product, I needed to understand who uses it and what they're trying to do, which workflows matter most, what already works, where the frustrations are, what must stay familiar, and how the experience fits the evolving design system.

I spoke directly with Travel Consultants to understand how they use HMP: their key tasks, the parts they rely on most, the information they need, where they hit friction, and what they'd need from the new UI.

Instead of starting with "What should the new UI look like?", I started with "How are people using the product today?"

I designed HMP around the consultant's task: information hierarchy, navigation, interaction patterns, content, system feedback, accessibility and speed. The goal wasn't just to look different, but to be more intuitive and consistent while staying familiar enough to keep people working.

Alongside the product, I created HMP's visual identity and logo. It had to sit within the American Express Global Business Travel ecosystem while giving HMP its own recognisable presence, and carry through to typography, hierarchy and component styling.

The new UI was a chance to bring more consistency through the evolving design system. I applied reusable components and patterns across HMP while respecting the specific needs of consultants.

I used prototypes to test approaches, show interaction behaviour, walk through flows and catch issues before development, so stakeholders and engineers shared one picture of the product.

I treated engineering as part of the design process, not a hand-off at the end. Working closely with the French development team made communication faster: we clarified requirements, discussed constraints early, resolved questions quickly and iterated more efficiently.

"His designs looked a lot better than the previous UI, with a real flare for a great user experience and a sharp look… I 100% would work with Erick again."Senior .NET Developer, Amex GBT

With stakeholders, I adapted the conversation to the audience: needs and workflows with users, business requirements with product, and behaviour and feasibility with engineers.

Marketplace Product Configuration (MPP CAT) moved to the new UI at the same time. Its users, Platform Operations, have different jobs from consultants, so I studied how they used the existing tool and designed for their tasks rather than copying HMP's patterns.

• Helped move HMP to the new UI, with design decisions grounded in direct research with Travel Consultants
• Connected the experience, interface and visual identity into one cohesive product
• Gave HMP its own identity and logo, beyond a redesign of screens
• Strengthened collaboration between design, product and engineering

1. Understand the workflow before redesigning. A UI transition can easily become a visual exercise. Research showed what people actually needed first.
2. Design the whole experience. UX, UI and visual identity work better together than as separate activities.
3. Collaboration speeds up delivery. Strong relationships with engineers surfaced design and technical questions earlier.
4. Design is a team sport. Users, product managers, engineers and stakeholders all shape the final experience.
5. A product can have its own identity. The HMP logo showed how product design extends beyond screens to how a product is recognised.

Understand the people. Understand the workflow. Design the experience. Shape the identity. Collaborate with engineering. Then make it scale.

• Slow. The search platform took too long to respond while a customer waited.
• Hard to trust. Accurate, real-time information was difficult to reach.
• Fragmented. CCPs jumped between several platforms to answer one question.

• Fast, accurate and reliable answers to CCP queries
• Less time spent searching, and more accurate answers for customers
• Predictive AI features: auto-complete, query suggestions and learning resources
• A tool that fits into existing workflows

I interviewed stakeholders to align on business goals, worked with CCPs to understand their workflows and pain points, and analysed usage data from the existing platform. Mapping a CCP's typical workday showed where each tool came in and which features mattered most.

I ran a workshop with designers, engineers, the project manager and stakeholders to capture early ideas, then built a high-fidelity Figma prototype. I presented the research, the pain points, the design and a live prototype walkthrough to stakeholders to win buy-in.

• Keyboard navigation with a logical tab order
• Sufficient contrast for text and interactive components
• ARIA labels and visible focus states for mouse-free use
• Readable font sizes and touch targets that meet minimum sizes

The redesign is projected to improve the accuracy of answers and the satisfaction and productivity of CCPs. I also mentored junior designers and helped secure investment for the AI roadmap to 2027.

"It was a pleasure working with Erick. I especially appreciated his collaboration with the engineering team. It had been a while since I'd experienced that level of teamwork."Head of Engineering, American Express

"Erick made outstanding contributions to our team at American Express. His collaboration was deeply appreciated, and he delivered excellent work."Director of UX, American Express

The Navy wanted to modernise recruitment with an AI tool that would:

• help people feel confident to apply
• encourage hesitant and more diverse applicants
• reduce drop-off with a clearer experience
• meet younger users' expectations of a modern service
• free up recruiters for complex questions

Research showed the barrier wasn't the form. It was how people saw the Navy. Many potential recruits:

• didn't understand what the Navy offers
• thought it was only for elite, combat-focused roles
• didn't know about the range of career paths
• were put off by the fear of going to war
• didn't feel the Navy was relevant or open to them

How might we make the Navy feel more inclusive, relatable and career-focused?

The answer had to be Gen Z-ready, supportive and inclusive.

I visited armed forces careers offices, and ran stakeholder interviews and workshops with Royal Navy officers, Great State and Wavemaker to align design and technical goals.

I mapped the journey from first awareness to application across five phases (inspire, educate, explore, refine, convert), tracking actions, touchpoints, feelings, pain points and opportunities at each step.

Chloe, 18, has just finished her A-levels and is weighing up university, apprenticeships and training. She's open to a military career but faces emotional and informational barriers: she thinks the Navy is for "a certain type of person" and is nervous about talking to a recruiter too soon.

"I didn't realise there were roles in medicine or tech, I thought it was just war stuff."Chloe, persona

Design opportunities from the empathy map:

• use mentor personas to make the chatbot feel human
• simplify role discovery with guided conversation and smart filters
• use a tone that's reassuring, inclusive and empowering
• give eligibility and fitness guidance up front
• show what to expect at each step, one step at a time

Four rounds of moderated usability testing with 40 participants in total, aged 17 to 28, tested the home feed, role finder, account creation and EOI form.

"If I wanted to ask a quick question, I don't know if I would want to set up my profile straight away."Participant 4, home feed

"It makes it look like a game, not serious like the RN."Participant 3, avatar test

Candidates choose a virtual mentor to talk to. I tested real Navy personnel against 3D avatars over two iterations. 90% felt the avatars didn't suit the Navy, and "RN Mentor" was the preferred name, so the final design uses real people.

The design went from sketches through four rounds of high-fidelity work, each shaped by testing.

• Tested the design against WCAG 2.1
• Keyboard navigation, colour contrast and screen reader support for core interactions
• Clear, readable fonts and enough spacing for touch and reading
• Worked with Great State to keep the final visual design accessible
• Inclusive, jargon-free tone and content for the chatbot

• Launched to the public in summer 2023, live on the Royal Navy careers site as the Royal Navy AI Virtual Guide
• Reduced reliance on live support chat by 70%
• Supports human-like conversations at scale for thousands of potential recruits
• Survey and usability findings directly shaped the assistant's tone, flow and content
• Helped reshape how people see Navy careers, beyond combat roles

"He was a key member of the team responsible for delivering the UX workstream of the Royal Navy virtual recruitment guide which launched to the public in summer 2023."Delivery Lead, Wavemaker UK

See it live at royalnavy.mod.uk/careers ↗

The site needed to:

• meet WCAG 2.1 AA
• handle sensitive content with respect
• balance visual storytelling with a great screen reader experience

I reviewed RNIB's own user studies and accessibility guidance, and spoke directly with blind and partially sighted people to understand the barriers they meet online.

• High-contrast colour palettes for people with low vision
• Clear, scalable type with a consistent heading hierarchy
• Keyboard navigation and screen reader optimisation
• Descriptive alt text and link text that makes sense on its own
• Minimal layouts that reduce cognitive load

I worked closely with the development team so these decisions survived the build.

1. Landing. A clear pink call to action, and a promise up front that the experience works with screen readers.
2. Loading. RNIB's sonic logo plays, so the brand is recognisable by sound as well as sight.
3. Categories and FAQs. People pick a topic and a question. Clear hover and focus states show what's selected.
4. Video answers. An accessible media player with captions, plus semantic HTML, descriptive links and alt text.
5. Navigation. Back keeps context for assistive technology users, Home keeps people oriented, and Replay lets them hear an answer again.
6. Thank you. The journey ends by thanking people for challenging stereotypes, with calls to action to support RNIB.

Every menu, button and form works by keyboard, with ARIA roles on dynamic parts like menus and sliders.

I designed every screen in light and dark mode, for desktop and mobile, and tested the colour contrast of each.

• Met the WCAG accessibility guidelines in full
• Positive feedback from the sight loss community on the accessibility features
• Raised awareness of the challenges of sight loss

Visit the campaign site ↗

Design a chat assistant that carries Seedlip's botanical look, gives trustworthy answers, and gives people ways to shop at any point in the conversation. It had to work on desktop and mobile and be usable with a screen reader or keyboard alone.

Elli greets people, answers questions about the brand, suggests recipes as swipeable cards and recommends a bottle with a direct "Buy now". Suggested replies keep the conversation moving, and every answer can be rated or traced to its source. Age reminders appear right in the conversation.

A concierge with a face. The header shows the concierge's avatar and status ("typing…") and a Seedlip playlist, so the chat feels like talking to a host.

Answers you can check. Every response has an (i) icon for its source and a share button. The assistant cites where information comes from instead of guessing.

Shopping without leaving the chat. The menu offers shop, saved cocktails, a gift finder, a store locator and community links, so a recommendation can turn into a purchase.

Rich answers. Product and recipe carousels, music, images and short videos show a drink instead of describing it. "Add to cart" goes straight to the shop to finish the purchase.

Accessible by default. Text-to-speech and speech-to-text for people with visual or motor impairments, alongside keyboard navigation, screen reader support, high contrast and scalable text.

Flexible on screen. On desktop, people can move the chat module around the page and hide the sidebar. The input grows up to six lines as they type.

The early wireframes, when the concierge was still called Renee. The structure held through to launch: entry point, quick replies, carousels, video and a menu of shopping actions.

I planned and reported a round of usability and accessibility testing that combined unmoderated sessions with moderated sessions with members of the public, including a visually impaired participant.

• Tasks: find a recipe, ask about a product, get a recommendation for an occasion, recover from an input error
• Accessibility checks: screen reader, keyboard-only navigation, alt text, WCAG colour contrast, error handling
• Post-test ratings on a 5-point scale for ease of use, learnability, finding information and look and feel

The evaluation found the concierge worked with screen readers and keyboard navigation, met contrast guidelines and gave clear error messages, with continued testing planned as it evolved.

Diageo's feedback on the first design was tough. Rather than polish it, we used it to push further on the visual design, rich media and accessibility, and the next iteration went beyond what stakeholders expected.

Elli was recognised by Diageo Global and featured as a key digital innovation in the drinks industry.

Read the feature: New digital innovations in drinks ↗

"The UI/UX and accessibility adaptation are really impeccable. What a great job you've done there!"Head of Innovation, Diageo

"It was our pleasure to be part of an amazing team delivering a one-of-a-kind experience. Great project, great work."Delivery Manager, Seedlip

• Patients often forget to log symptoms each day, so a simple, engaging interface matters
• Medication reminders are especially important for younger and older patients
• Real-time environmental data helps people avoid triggers
• Personal reports and insights encourage people to manage their asthma proactively

A guide beside the questions. A quarter of the screen goes to an AI avatar and three quarters to the quiz, so content stays readable while the guide stays present.

Four avatars to choose from, so more people see a guide they relate to.

Three languages. English, Spanish and French, across desktop and mobile.

• Better day-to-day asthma management
• Better medication adherence
• More awareness of environmental triggers
• Fewer and less severe asthma attacks

Many founders have never hired a research or UX studio. They know they need "a designer", but not what research adds or when to pay for it. The site needed to make three services (Research & Strategy, Brand Identity and UX/UI Design) feel concrete and affordable to start.

I built the palette around roles rather than decoration: teal for trust and research, purple for creative work, amber for action, and charcoal to keep it grounded and readable.

• Use cases instead of a service menu. Founders recognise their situation faster than they recognise a service name, so the page leads with scenarios they are in.
• Animated hero headlines. Rotating headlines in the hero show the range of problems the studio takes on, within the first few seconds of a visit.
• Mobile first. Founders often open a shared link on their phone, so navigation collapses into a hamburger menu and every section reads in one column.

I designed and built the site myself, iterating in the browser rather than handing off static mockups. Keeping HTML, CSS and JS in separate files makes it quick to add new use cases and work as the studio grows.