The Modern Cut is a responsive, high-fidelity interactive prototype created as part of SEG 3525 – User-Centered Design (Summer 2022) at the University of Ottawa.
The goal of this project was to design a service-based company website using HTML, CSS, and Bootstrap, while applying usability principles and visual communication concepts.
This was one of my first complete websites, built to learn web structure, accessibility, and user-focused design.
- Build a modern, easy-to-navigate website for a local barbershop.
- Apply Bootstrap’s grid system for responsive layout and structure.
- Implement usability features such as dropdown selections and color cues.
- Improve design based on peer feedback (color palette, form elements, clarity).
- Integrate a booking page using an open-source date picker (Flatpickr).
The website represents a barbershop business offering appointment scheduling and service listings.
It’s designed to be simple, intuitive, and mobile-friendly, allowing customers to:
- View available services and prices.
- Check opening hours and location.
- Book an appointment directly online.
Before starting, I had limited experience in web development.
To refresh my skills:
- Reviewed HTML basics through a short video tutorial.
- Followed a Bootstrap crash course to understand its grid and components.
- Used W3Schools and Flatpickr documentation for guidance.
- Used Bootstrap templates and customized them to fit the project theme.
- Implemented a calendar widget for appointment reservations using Flatpickr.
- Added color feedback (✅ green for success) to reinforce user actions.
- Service page built with Bootstrap’s grid system for a responsive layout.
- Booking form with dropdown menus to prevent user input errors.
- Color-coded confirmation (green = success) for visual clarity.
- Navigation bar providing smooth access across sections.
Based on peer feedback, I:
- Adjusted the color scheme for better visual appeal.
- Added a phone number field and clarified appointment durations.
- Simplified the reservation process for improved user experience.
- Maintained intuitive and consistent site structure.
- HTML5
- CSS3
- Bootstrap 5
- Flatpickr (calendar integration)
- GitHub Pages (hosting)
🔗 Website: https://jean232.github.io/theModernCut.github.io/
Through this project, I gained:
- A solid understanding of Bootstrap’s responsive grid system.
- Improved confidence in building interactive web forms.
- Awareness of usability heuristics and accessibility best practices.
- The importance of iterating based on user feedback to refine design.
Project supervised by Caroline Barrière, University of Ottawa — SEG 3525: User-Centered Design (Summer 2022).