BEDiZEN

A full-stack project — from brand identity and UX/UI design to front-end development, and AI-directed back-end architecture, database design, and deployment.

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

BEDiZEN logo — geometric wordmark with red accent dot

The Problem: Bridging the Tech Gap

Small and medium-sized e-commerce businesses often lack the resources to compete with larger retailers offering immersive shopping experiences like virtual try-ons. This creates a significant disadvantage in customer engagement and conversion.

The challenge was to design, build, and deploy a complete web platform for BEDiZEN — a startup whose mission is to make Web Augmented Reality (WebAR) accessible, affordable, and easy to implement for smaller businesses.

My Process: From Concept to Deployment

1 — Brand Identity & Visual Strategy

The goal was to create a brand that felt both technologically advanced and approachable — not pretty for the sake of it, but functional and legible for a broad audience.

  • Market Research: Analyzed how existing AR services communicate innovation to identify a unique position for BEDiZEN: modern, minimal, and focused on the user experience.
  • Logo Design: Built from a customized geometric font, the logo conveys stability and forward movement. The red dot on the "i" acts as a focal point of energy and creativity.
  • Color Palette: Dark gray, white, and accent red — creating elegance and energy while maintaining high contrast and accessibility compliance.

2 — UX Research & UI Prototyping

Using Figma, I designed the complete user flow: from zoning and low-fidelity wireframes through to a functional high-fidelity prototype. The goal was to guide potential clients through BEDiZEN's core services (WebAR, 3D modeling) while demystifying the technology along the way.

Usability testing revealed two key issues in the first version: unclear button affordances and difficulty identifying current location within the site. These findings drove the iteration to version 2.0.

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

Based on testing feedback, I implemented a clearer navigation system and rebuilt the front-end using Tailwind CSS for a responsive, mobile-first architecture.

Key Improvements

  • Responsive Design: Mobile-first approach ensures a seamless experience across all devices.
  • Clear Wayfinding: Active states and breadcrumbs help users always know where they are.

3 — Full-Stack Development

BEDiZEN went beyond design — I built the complete technical stack from the ground up:

  • Front-End: Responsive website built with HTML, CSS (Tailwind), and JavaScript. Clean, semantic markup with accessibility in mind.
  • Back-End: Server-side logic with PHP handling form processing, content management, and business logic.
  • Database: MySQL database for managing client data, service catalog, and contact requests.
  • CMS Integration: WordPress integration for content management, allowing non-technical team members to update the site.
  • Hosting & Deployment: Configured and deployed on a dedicated hosting environment with domain management, SSL, and server optimization.

This full-stack approach gave me end-to-end ownership of the product — from the first wireframe to the live server.

Impact & Key Takeaways

  • End-to-End Ownership: This project proved I can handle the complete product lifecycle — research, design, development, and deployment — not just one piece of the puzzle.
  • Clear Value Proposition: The brand identity successfully communicates BEDiZEN's mission as an innovative yet accessible partner for small businesses.
  • Iterative Improvement: Usability testing between v1 and v2 was the turning point — what looked "clean" in design review wasn't working for real users, and the data showed it.
  • Technical Growth: Building the back-end and database from scratch deepened my understanding of how design decisions impact development and vice versa.

Brand Guidelines

The complete style and brand guidelines developed from the ground up 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

A selection of mockups showing the BEDiZEN brand in different real-world contexts.

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
>