Give different content a clear place.
A corporate introduction, a transport project and a public notice serve different purposes. They need distinct entry points without making the website feel fragmented.
Selected work / 02UI/UX · Institutional websiteAgadir, Morocco
Agadir
Mobilité.
A city in motion.
A clearer digital presence.
A clearer digital presence.
Making urban mobility information easier to explore—through a website that connects the organization, its projects and the people it serves.
↓
01 / Overview
A public-facing website.
A lot to make clear.
Agadir Mobilité’s digital presence brings together company information, urban mobility projects, public announcements and practical contact details. The design needs to give these different types of content a coherent home.
My focus was the website’s UI/UX: establishing a clear hierarchy, shaping the page layouts and creating a consistent visual language across the experience.
- Discipline
- UI/UX & web design
- Context
- Urban mobility / Public information
- Designer
- Mustapha Id Boussdli
- Presentation
- Selected design screens
One recognizable system. Multiple levels of detail.
A concise homepage introduces the organization. Reusable sections then carry visitors into deeper pages, with consistent navigation, headings and calls to action.
02 / Structure
Start broad.
Then go deeper.
The page structure moves from a clear introduction to more specific information. Three design priorities guide the presentation.
Introduce the organization.
The opening combines Agadir imagery with a direct welcome, followed by an introduction to the company and its areas of action.
Make projects discoverable.
Project summaries create a first layer of information. Dedicated pages make room for descriptions, supporting imagery, maps and technical details.
Keep practical content visible.
Publications, institutional information and contact details belong within the same experience, with their own recognizable sections.
Public information.
Clear hierarchy.
One visual language.
03 / Visual language
A civic identity,
expressed digitally.
The supplied designs pair cyan and deep blue with white content areas and dark text. City photography anchors the website in Agadir, while recurring banners, section headings and buttons tie the pages together.
The presentation’s type specimen uses Sarabun across several weights and sizes. The hierarchy gives headlines, subheadings and longer passages distinct roles without introducing a different style for every page.
04 / The websiteThe system,
The system,
on screen.
From the first impression to the detail pages, a consistent structure makes room for different kinds of information.
04.1 / HomepageA recognizable
A recognizable
starting point.
The homepage combines a city-led introduction, company context and areas of action. Further down, publications and contact information connect the broader story to practical next steps.
04.2 / Content pagesDifferent stories.
Different stories.
The same system.
Route and news presentations show two different content needs: finding geographic information and following public updates. Shared navigation and section treatments keep both connected.
04.3 / Public informationMake the details
Make the details
worth reading.
The publication and project-detail layouts give dense information its own space. Clear headings, supporting media and document areas help separate the main message from the detail.
Network figures are reproduced from the supplied artwork; they are not measured outcomes of this design.
04.4 / Small screens
The same clarity.
A smaller canvas.
The mobile presentations bring routes, project updates and public information into a smaller canvas, with clear navigation and focused content.
05 / Reflection
Clarity is
the through line.
The presented work brings company information, mobility projects and public content into a consistent website language. Its strongest story is the relationship between content structure and visual consistency.
What the design demonstrates
Large introductions and detailed content pages can belong to the same system. Repeated navigation, controlled colour and a clear type hierarchy provide continuity as the content changes.
What comes next
A useful next evaluation would test navigation and content discovery with representative visitors, then review the mobile layouts and accessibility. This case study does not claim measured usability gains or business results.
Images include presentation mockups and illustrative interface content. The live website may have evolved since these designs.