BEDiZEN

My capstone project for the CCI Campus Alsace Web UX/UI Designer certification. I designed the brand and the site, coded it, and set up the WordPress hosting myself.

Role: UX/UI Designer, Front-End Developer, Branding
Tools: Figma, Illustrator, HTML/CSS, Tailwind CSS, PHP, MySQL, WordPress
Year: 2026

BEDiZEN logo, geometric wordmark with red accent dot

The Result

BEDiZEN is my own project and my capstone for the CCI Campus Alsace Web UX/UI Designer certification. The site is live.

I created the brand, designed the site in Figma, and wrote the code myself. I built version 1 by hand in HTML and CSS. I started version 2 alone in Tailwind CSS and used AI assistance in VS Code for specific parts only. I also set up the WordPress site and the hosting.

The concept: a WebAR studio that gives small e-commerce businesses virtual try-ons, a feature usually reserved for large retailers.

Visit the Live Site →

How I Got There

1 - Brand Identity & Visual Strategy

The brand had to read as tech and still feel approachable. Legibility came before decoration.

  • Market Research: Analyzed how existing AR services communicate innovation to find a position for BEDiZEN: modern, minimal, and easy to understand.
  • Logo Design: Built from a customized geometric font, the logo reads as stable and forward-leaning. The red dot on the "i" is the focal point.
  • Color Palette: Dark gray, white, and an accent red, chosen for high contrast and accessibility.

2 - UX Research & UI Prototyping

I designed the full user flow in Figma, from zoning and wireframes to a clickable prototype. The flow walks visitors through the core services (WebAR, 3D modeling) and explains the technology in plain terms.

Usability testing on version 1 found two problems: buttons did not look clickable, and users could not tell where they were on the site. Version 2 fixes both.

Version 1.0: The MVP

Initial Concept
BEDiZEN website version 1, minimal layout with large whitespace

Design Decisions

Prioritized clean aesthetics with large whitespace and minimal navigation.

Usability Issues Found

  • Users struggled to identify clickable buttons.
  • Difficulty understanding current location within the site.

Version 2.0: Enhanced UX

Current Version
BEDiZEN website version 2, improved navigation and responsive layout

What Changed

I rebuilt the navigation and the front-end in Tailwind CSS, mobile-first. I wrote most of it myself and used AI assistance in VS Code for specific parts.

Key Improvements

  • Responsive Design: Mobile-first layout that adapts to every screen size.
  • Clear Wayfinding: Active states and breadcrumbs help users always know where they are.

3 - Development

I handled the full stack, from the front-end code to the live server.

  • Front-End: I coded it myself. Version 1 in hand-written HTML and CSS. Version 2 in Tailwind CSS and JavaScript, with AI assistance in VS Code for specific parts. Semantic markup, built with accessibility in mind.
  • Back-End: I wrote the first PHP by hand. Later I used GitHub Copilot in VS Code to work faster.
  • WordPress: I installed WordPress and added plugins for security, SEO, WooCommerce, contact forms, and caching.
  • Hosting & Deployment: I set up the hosting on O2switch and edited the server files over FTP with FileZilla. I tuned caching and load speed through the O2switch settings.

4 - Motion & Social Production

I produced two short videos that show the BEDiZEN experience. One is landscape, for YouTube. One is vertical, for Instagram and TikTok feeds.

La Réalité Augmentée native pour l'e-commerce

Landscape format, for YouTube and other horizontal placements.

L'Expérience Try-On en un Clic

De la simple navigation à l'immersion totale : un aperçu vertical pensé pour les réseaux sociaux.

Key Takeaways

  • Testing beat taste: Version 1 looked clean in review. Users still could not find the buttons. Testing showed it, and version 2 fixed it.
  • Design and code together: Coding my own designs showed me which design choices cost time in development.
  • One message, two formats: The same product story had to work in a landscape video and a vertical one.

Brand Guidelines

The full brand guidelines I wrote for BEDiZEN:

BEDiZEN brand guidelines, cover page Brand guidelines, table of contents Brand guidelines, brand overview Brand guidelines, mission statement Brand guidelines, logo specifications Brand guidelines, logo clear space Brand guidelines, color palette Brand guidelines, typography system Brand guidelines, typography usage Brand guidelines, iconography Brand guidelines, photography style Brand guidelines, imagery guidelines Brand guidelines, layout grid Brand guidelines, business card design Brand guidelines, stationery system Brand guidelines, digital applications Brand guidelines, social media templates Brand guidelines, merchandise design Brand guidelines, brand voice Brand guidelines, tone of voice examples Brand guidelines, web design system Brand guidelines, UI components Brand guidelines, responsive design Brand guidelines, accessibility standards Brand guidelines, motion guidelines Brand guidelines, presentation templates Brand guidelines, environmental design Brand guidelines, signage system Brand guidelines, brand do's and don'ts Brand guidelines, implementation checklist Brand guidelines, contact information Brand guidelines, back cover
1 / 32

Project Gallery

Mockups of the BEDiZEN brand in use.

BEDiZEN promotional flyer design featuring brand colors and AR imagery
BEDiZEN business cards showing front and back design
BEDiZEN logo embroidered on a black cap
BEDiZEN mobile interface showing AR product viewer
BEDiZEN branding on a Meta Quest VR headset
BEDiZEN logo on a modern building facade at night
>