No Limits Barbershop

Process:

This project was broken down into 6 phases and followed an agile approach. Each phase consisted of multiple key activities that lasted a minimum of one week, but were generally completed in two week sprints.

1. Discovery & Initial Consultation

2. Research & Planning

3. Design strategy & Concept development

4. High-Fidelity Design Development

5. Development & Implementation

6. Project Closure & Handoff

1. Discovery & Initial Consultation

This phase set the foundation for the No Limits Barbershop (NLB) website redesign by aligning business goals with user needs. The barbershop owners had previously worked with another contractor, but the rushed development and unresolved website glitches left them unsatisfied. Through an in-depth consultation, I identified their primary pain points, including the need for a smoother user experience, improved booking functionality, and a stronger brand presence.

Objective: Understand the client’s goals, target audience, and pain points with the current website.

Key Activities:

• Initial Meeting: Introduced my role as a Product Designer consultant and discussed the barbershop’s digital needs and branding goals.

• Needs Assessment: Explored the importance of a frictionless booking experience, potential alternatives to Booksy, and the value of integrated payment options.

• Content Audit: Reviewed the existing website to determine what content should be refined, replaced, or added—such as high-quality photography and a stronger brand identity with their signature black and purple theme.

• Timeline and Budget Discussion: Outlined a realistic project timeline, ensuring that development aligned with the barbershop’s operational needs.

By the end of this phase, we had a clear roadmap for the website redesign, addressing both business objectives and customer expectations.

Pain Points Diagram – Highlights the primary pain points of the previous website, ranked by severity.

Booking Experience Flow – Illustrates the current booking journey using Booksy, showing key steps and possible friction points.

2. Research & Planning

Objective: Gather insights and develop a clear plan for the redesign.

Key Activities:

• User Research: Gathered insights on how customers interacted with the website, their booking preferences, and pain points through informal interviews.

• Competitor Analysis: Analyzed industry competitors and alternative booking platforms (Booksy, Squire, Calendly) to identify best practices for a seamless booking and payment experience.

• Website Audit: Evaluated the current website’s design, functionality, and performance, uncovering issues such as slow transitions, poor photo quality, and a lack of intuitive booking flow.

• Project Scope Definition: Defined core project deliverables, including wireframes, high-fidelity prototypes, and accessibility improvements (WCAG 2.0 standards).

• Content Strategy Planning: Developed a strategy for incorporating high-quality photos, videos, and customer testimonials while ensuring a clear call to action for bookings.

• Wireframe Development: Created preliminary wireframes for desktop, tablet, and mobile versions, focusing on a user-friendly layout that encourages engagement and conversions.

This phase ensured that every design decision was backed by research, ultimately creating a highly functional and visually compelling website for No Limits Barbershop.

Vision Board – Played a crucial role in shaping the design direction for the website. It served as a collaborative tool to align the barbershop owners' vision with design and brand identity.

Feature Prioritization Matrix – Maps potential website features based on importance and implementation difficulty, helping guide decision-making.

Competitor Analysis Chart – Compares key booking platforms (Booksy, Squire, Calendly) against the NLB website (before redesign) across multiple criteria, helping identify areas for improvement.

Personas – I conducted interviews with both users and the barbers to gather comprehensive insights into their needs, challenges, and expectations. From these conversations, I developed two user personas—one representing a teen/high schooler and the other a young professional—to reflect the diverse client base. Additionally, insights from the barbers helped shape the service presentation, booking experience, and overall functionality of the website, ensuring it aligned with both business goals and customer needs.

3. Design Strategy & Concept Development

Objective: Establish the visual and functional design direction.

• Activities:

  • Mood Boards and Style Guides: Presented visual inspiration to guide the look and feel.

  • Design Concept Presentations: Shared initial design concepts for feedback and approval.

  • Feedback Iteration: Revised the concepts based on the clients feedback.

  • UX Design: Developed detailed wireframes and user flows to ensure usability.

  
  

  

3.5. Photoshoot Coordination

I ensured that the barbers received high-quality creative services, including photography and videography, by coordinating with professionals and providing direction on specific camera shots to capture the best visuals.

4. High-Fidelity Design Development

Objective: Finalize the website's visual design.

• Activities:

  • Create High-Fidelity Mockups: Developed pixel-perfect mockups of each page, showing detailed design elements.

  • Design Review Sessions: Presented the mockups to the client for feedback and made necessary revisions.

  • Interactive Prototyping: Built an interactive prototype to demonstrate key user interactions.

  • Final Design Sign-Off: Got formal approval from the clients on the design before proceeding to development.

Hero Section

Our Guarantee

Meet the Barbers

Services

Testimonials

Products

5. Development & Implementation

Objective: Bring the approved designs to life through development.

• Activities:

  • Front-End Development: Code the website’s front-end based on the approved mockups.

  • Back-End Development: Implement any necessary server-side functionality.

  • Content Migration and Integration: Move content from the old site to the new one, or upload new content.

  • SEO Optimization: Ensure on-page SEO elements are in place (meta tags, alt text, etc.).

  • Visual Quality Assurance (VQA) Testing: Conduct thorough testing for usability, functionality, and compatibility across devices and browsers.

  • Client Review & Feedback: Allow the client to review the site on a staging server and provide feedback.

6. Project Closure & Handoff

Objective: Officially close the project and equip the client with all necessary resources.

• Activities:

  • Project Review: Summarized the project outcomes, including what went well and areas for improvement.

  • Deliver Final Assets: Provided the client with all project files, design assets, and documentation.

  • Final Meeting: Conducted a wrap-up meeting to discuss the project, any future maintenance plans, and gather client feedback.

  • Ongoing Maintenance Plan (Optional): Offered ongoing support or a maintenance package for future updates.

This approach ensured clear communication, effective project management, and a successful outcome for the website redesign.

Results:

✅ Consistent Branding Across All Platforms – The website, social media, and in-shop experience now reflect a cohesive visual identity

✅ Professional & Polished Look – The new design exudes premium service, trust, and authenticity, appealing to both existing and new customers.

✅ SEO Optimization & Google Visibility – The shop ranks higher on search engines, leading to more organic traffic and new clients.

✅ Product Sales Integration – The website now features No Limits Barbershop-branded products, adding an additional revenue stream.