Hautr - World's first and only Map based interface for Salon/Spa service appointments!

Hautr is a platform which enables users to pre-book their salon visits so that they don’t have to wait for long hours to just to get a mere haircut done ( As a matter of fact any activity such as Waxing, Manicure, Pedicure, Beard Trimming and more ).

Boilerplate was handed over the whole project i.e Mobile Application, ERP for the Admin/Employee, Booking Manager ( For Salons to keep track of their Bookings and more ).

We started of with the designs of the Mobile Application. Which were designed in Adobe XD and exported to Zeplin so that the Mobile Development Team could have a better access to all the designs. The Design followed a minimalistic approach and tried to keep the application as simple to use as possible. The UX was the top most priority for this application as the more the user is confused as to what steps to take, the lesser is it likely for him to come back to the application. [[INSERT_IMAGES_HERE]]

As the client required the application to be developed for both the platforms – Android and iOS. We decided to use Flutter for the Development for the mobile application. As this application had extensive use of Google Maps, we were sceptical in the beginning as the Google Maps library was in Beta. But we knew that it wouldn’t be long for it to be in production, so we stuck with our gut feeling and chose Flutter as the platform to develop this application. The tricky part was that the UI was designed for Android in the beginning and the client requested the application to be multi-platform after the complete UI was designed. This created a lot of challenges during the mobile application development in respect to the transitions, animations, layout designs and more. [[INSERT_IMAGES_HERE]]

The toughest part with Flutter was to make sure that the application maintains the same consistency across various device sizes and device OS. We were amazed by the backward compatibility of Flutter. We tried to run the application on an Android 4.4 ( Kitkat Version ) device and it looked the exact same with all the functionalities. But of course, we decided to keep the min SDK for the Android version to be 21 ( Android 5.0 ) as the application due to it’s graphics and animations did lag quite in Android 4.4.

We decided to follow the guidelines of Stacked Cards for the Mobile Application. This would give the user the illusion of being on the same screen while doing several tasks making it easier to just go back to the Home Screen altogether.

The ERP for Hautr was tough task as this was a very intensive ERP. Some of their features include ( If we list them all, it would probably take 3 pages so we’ll stick to the major ones )

  • Multiple Departments ( Tech, Support, Business, Marketing, Mobile, Admin, Finance )

  • Message-Board ( To share information b/w departments )

  • Approval System for each change made by relevant department by Admin or the parent Department

  • Parsing an Excel Sheet to add various products for a salon

  • Adding/Editing/Removing Headquarters, Zones and Branch for each Brand

  • Adding/Removing Coupons ( Zone Specific, Product Specific, User Interaction Specific )

  • Transactions list and export options ( For Financing )

  • Details of Each User, Each Booking and more

Adding the Mobile Department in the ERP was a fairly simple task in the initial stages as that only required the user details, suspending/unsuspending user functionality but that was not enough as the Admin/Employee didn’t receive any valuable information about the user. Thus, we integrated Google Analytics in the Mobile Application and adding the relevant hooks to obtain the data in the ERP which gave the Admin/Employee, a in-depth review about user and his actions on the Mobile Application. This enabled us to track various user patterns which eventually would help improve the Mobile Application.

Adding Master control for the Admin without disrupting any other departments was a bit tricky to handle initially but the message-board approval system pretty much solved the issue as ever change would require Admin’s approval or the Parent Departments which would solve the problem of overlapping changes in the ERP. [[INSERT_IMAGES_HERE]]

There were a lot of iterations made for this ERP to perfect for all the all client requirements. There have been several UX changes proposed to the client, which might be added in the future updates which will enhance the Usability of the ERP.

The Booking Manager was developed in MERN stack as the modularity and easy of code that React offered was really helpful for such a complex application. The main component of this application was the Calendar View which was developed from scratch.

Developing the Calendar View to be dynamic i.e ability to adapt to as many chairs as possible with any value of time-slots was a complex task and was the most challenging part of this application. [[INSERT_IMAGES_HERE]]

Populating various Bookings on the calendar was the next task at hand and we thought we would probably just add bg colors for each cell but this didn’t work out as some cells didn’t require to be coloured completely. We finally decided to use divs, which for our surprise worked out just perfectly. [[INSERT_IMAGES_HERE]]

Keeping all the various Client Accounts on the same time was a tricky task as any booking made from the mobile application had to reflected in the Booking Manager with the same TimeZone ( IST – As the application is not open for International Market just yet ). We obviously couldn’t use the device time on each of the Client’s and hence we had to use the server time and then take the TimeZone on the user’s device and add or subtract the offset accordingly. This may sound like a pretty simple task theoretically but it did require a lot of work from our end to make this production ready.

The Booking Manager required a user-control module where admin could dynamically add or remove users as per his requirements. The users could be added by their email address and then they would receive an email with their respective password. This idea was eventually dropped as handling each user a separate login to make bookings remotely would cause a lot of conflict ( based on the market survey done ) and most Salons have one person who handles all the bookings so it deemed fit to have only one account for the Employees but the Admin still had user control to add more Admin ( Temporary Admins as the client describes them ) to take over the business operations while he’s not in operation and can be removed when the main admin resumes his duties at the Salon. [[INSERT_IMAGES_HERE]]

The Salons are also given an option to go offline/online based on their needs. They do have an opening and closing time but they were also provided with an option to give offline if and when they pleased to. This option too was added later on in the development based on the market survey done. The application will have much more additions in the future based on the user reception and probably many further versions for its platforms to make booking an appointment for a salon as easy as booking a cab. The application will be live soon and can be found Here.