Revolutionizing barbershop visits

Our journey with M Room began in 2018. We set out on a mission to make barbershop visits more convenient than ever, and so, My M Room was born. Instead of creating a native app, we chose to utilize the emerging Progressive Web App technology and the opportunities that it offers. The service was soft-launched in Finland in January 2019, and feedback has been positive.

Closing the gap between customer and a sleek haircut

M Room was the first to introduce a subscription-based, walk-in only model to the Finnish barbershop scene. The business model has proven successful, but the growing customer base requires new improvements to the customer flow. The customers needed to have tools for seeing the wait times in all their nearby barbershops on-the-go and be able to queue from the comfort of their own home, office or gym. Our solution? A progressive web application that revolutionizes the customers’ waiting experience.

From user research, we found out that M Room customers are very active people who like to use their time wisely. Working, exercising, shopping as well as relaxing are daily routines for them. The tight-knit cooperation with customers continued when the idea and prototype were tested with M Room clients. Direct and valuable feedback from end-users was a crucial part of validating the concept, design and technology choices.

Concept

My M Room is a Progressive Web App, which allows for rapid development for the rapidly developing client. Customers are able to find open slots and compare the length of the queue in nearby barbershops. The service tells when to arrive at the shop to get in the hot seat within approximately 1-15 minutes.

The queue time estimation -algorithm has been improving daily since the launch using real data. The end goal is to achieve an exact service time for each customer.

Technology

My M Room is a single-page, progressive web application (SPA, PWA) built using the React JavaScript library, with Redux for state management. With a progressive web app we’re able to deliver a native-like experience through a web browser. We can easily update the app without having to submit new versions to app stores and wait for their approval. Not having to maintain multiple versions of the app ensures rapid development.

However, PWA is still a developing technology and especially with Apple iOS devices we had to find a lot of creative solutions to fill the gaps. On Android, the app supports the latest PWA technologies including push notifications and long-term offline caching. We decided to use React to create a solid foundation for the future. A lot of care was placed on making the UI feel smooth and responsive, using native apps as inspiration.

The React PWA interacts with M Room’s custom backend’s API. As such, the app requires an online connection to function, but all the assets are offline cached with the service worker. The API was specified and built as part of this project to cover the app’s needs.

Design

Our goal was to make the barbershop visits more convenient than ever, and for that, the app needed to be easy to use and lightweight. Even though the PWA technology is still developing, we didn’t want to cut any corners, but instead deliver an experience similar to a native app.

We streamlined the structure of the app, while giving the user multiple ways to find a suitable barbershop. Smooth interactions guide the user through a focused user interface, with content matched to the tone of M Room. M Room’s visual style is realized in a consistent UI that ties in with the brand.

Results

Time is money for both M Room and its customers, so we created a concept that changes the whole waiting experience and helps M Room to spread traffic more evenly between barbershops. My M Room was soft launched in Finland in January 2019. After two months the numbers look very promising and the feedback has been positive from both iOS and Android users.

The average number of page views per day is around 10,000. During busy hours, the app has evened out the flow of customers throughout the different barbershops, which has ensured that people get serviced faster and the staff are under less pressure. We are getting roughly 500 queueing events from the app per day, while also actively promoting that people go directly to the barbershops with no queues – bypassing the app queue function all together.

Avg. number of users queueing each day:

~500

Bounce rate:

35%

Average Time on Page: