Digital Hairstyle Simulations Wep App

  • Front-End
  • UI/UX
  • Back-End
Screenshot case study's website

OVERVIEW

About Hairstyles Studio

Traditionally, when we want to change our hairstyle, we are either forced to let our stylist make a decision for us or we are forced to explain to our stylist what we would like to be done in our hair when we don't even know what our options are. The reality is that many of us do not get the hairstyle we wanted before hitting our stylist's chair. And again, we are forced to just to wait a few months or sometimes even years until our hair grows back so that we can fix it or try a new hairstyle.

After people and hair experts were interviewed in the US and in the UK, we found it was not just our client having this problem. This is the motivation that let to the creation of Hairstyles Studio. Our cient's aim is to help you find what hairstyle and hair color fits you and what doesn't.

This web app was developed to generate realistic hairstyle simulations and help users decide what hairstyle fits them the best before they get it in real life. It included modules to log in, register, reset passwords, activate accounts, and manage hairstyle simulations. Other features included in this web app are AI algorithms to recognize faces in pictures and simulate hairstyles, admin and user dashboards, payment methods with Stripe and Paypal, automated emails for marketing, and a dynamic catalog of images from all the internet.

Info

PROJECT BRIEF

The Working Challenge

BRIEF
Website Screenshot

The challenge was to develop a responsive web application that allows users to simulate how they will see with a different hairstyle. Users needed to choose any hairstyle they wanted, including hairstyles of images from the internet and their mobile libraries. It was also required to allow users to upload pictures and selfies into their hairstyle history. Moreover, users were automatically notified of the status of their simulations by email.

  1. Develop and design an intuitive, responsive, and functional interface
  2. Implement the back-end in node.js and manage a structural database in Firebase
  3. Create advanced facial recognition algorithms to generate realistic hairstyle simulations automatically

SOLUTION

Our Working Process

PROCESS

UI Design and planification

We focused on building interfaces that users will find highly usable and efficient. We aimed to develop a simple interface with an invisible feel.

Graphic scheme of a new website

Back end development and database integration

Since the deadline for this project was tight, Firebase was chosen to create a realtime database that allowed data to be synchronized across all devices.

Programming code

Integration of the facial recognition algorithm

The system developed for facial recognization is capable of scanning images and not only recognizing the main features of human faces but also their angle and inclination. Images are then uploaded to a queue to be simulated later on.

Screenshots of a beautifull website

Final details and revisions

All generated simulations are highly realistic, and an admin dashboard was created to manage all jobs.

Programming code
doodle doodle

PROJECT

Screenshots

Loading...
Home page screenshot

Home Page

Graphic design, HTML, CSS
Website screenshot

Front-End & Design

Digital Branding
Website screenshot

Front-End II Design

Digital Branding
Website screenshot

UI Design and Database Integration

HTML, PHP, CSS, JS
Website screenshot

Dashboard - Simulation Queue

HTML, NODE.JS, CSS, JS
Website screenshot

User Dashboard

HTML, NODE.JS, CSS, JS
Website screenshot

Blog

HTML, CSS, JS
Website screenshot

Order History

HTML, PHP, CSS, JS
Website screenshot

Dynamic Search Catalog

HTML, PHP, CSS, JS
Home page screenshot

Register/Login

HTML, NODE.JS, CSS, JS
Website screenshot

Pricing Page

HTML, PHP, CSS, JS
Website screenshot

Payment Page

HTML, Stripe, Paypal, CSS, JS
Website screenshot

Subscription Page

HTML, NODE.JS, CSS, JS
Website screenshot

Simulation Queue - Admin Dashboard

REACT, API Integrations
Website screenshot

Admin Dashboard

REACT, API Integrations
Website screenshot

Uploading of Images

NODE.JS, HTML, CSS
Website screenshot

Facial Recognition

NODE.JS, HTML, JS
Website screenshot

Client/Partner Dashboard

NODE.JS, HTML, CSS

Let Us Turn Your Ideas into a Profitable Web and Mobile App

Schedule a FREE Assessment