UI/UX design (website and app)

Some links on this page are affiliate links: we may earn a commission at no extra cost to you. Our approach

UI/UX design answers two questions: where should my visitor go to get what they want, and is the path obvious when looking at it. Many sites invest in development and advertising before addressing these two questions, then are surprised to convert little. ## UX: logic before aesthetics A good UX journey starts from users' real intentions: what they are looking for, in what order, with what level of expertise. A well-structured quote form, order or booking converts better than an animated and confusing page. ## UI: a system, not isolated screens Isolated mock-ups age badly. A design system defines components once (buttons, fields, messages) and lets the team create new pages without breaking consistency. It also reduces development time and back-and-forth. ## Accessibility benefits everyone Sufficient contrast, text legible at small sizes, keyboard navigation: these rules help people with temporary or permanent limitations, and improve everyone's experience. They are also often required in public tenders.

When this guide is for you

• Your site gets traffic but few visitors fill in the form or buy
• You are launching an app or SaaS and need to show the screens before coding
• Your users call support with basic navigation questions
• You are preparing a redesign and want to avoid recoding everything while rethinking everything at the same time
• Your interface is not accessible on mobile and you are losing a large share of visitors

Step by step

1. User research — Analyse existing data (analytics, session recordings, support tickets), conduct interviews with 5 to 10 users and review competitor journeys.
2. Structure and journeys — Define the information architecture, main journeys and edge cases (error, refused payment, unverified account). A wireframe of each key screen is enough at this stage.
3. UI prototype and testing — Create high-fidelity mock-ups and an interactive prototype, then test it with 5 to 8 real users. Fix issues before handing over to development.
4. Design system — Build a library of reusable components (buttons, forms, cards, menus) with their states. A design system reduces back-and-forth with developers.
5. Development support — Stay available during implementation to check gaps between mock-up and code, and decide on needed adaptations when technical reality forces a change.

What it costs (in MAD)

Service	Indicative price	Good to know
UX audit of an existing site	8,000 – 20,000 MAD (≈ 730 – 1,800 €)	Journey, data analysis and prioritised recommendations
Showcase site mock-ups	10,000 – 25,000 MAD (≈ 900 – 2,300 €)	10 to 15 screens, mobile version included
UI/UX for an application	30,000 – 60,000 MAD (≈ 2,700 – 5,500 €)	Full journeys, prototype and design system
Design system only	15,000 – 40,000 MAD (≈ 1,400 – 3,700 €)	Components, documentation and developer-ready file
User testing	5,000 – 12,000 MAD (≈ 450 – 1,100 €)	5 to 8 participants, analysis and video report

Indicative ranges for the Moroccan market in 2026, excluding tax. Prices vary with scope and provider.

Mistakes to avoid

• Redesigning without looking at the data: a redesign without analysing real journeys often misses the real problems
• Designing only the desktop version and adapting mobile at the end, where screens break
• Neglecting empty states, errors and loading times, which are a large part of the real experience
• Testing with the internal team rather than real customers, who read things differently
• Delivering mock-ups without a design system: development rebuilds every button differently

Updated on 20 October 2026

Related guides

Version française: /services/branding-design/ui-ux-design/ · AR · NL