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 to see the wait times in all their nearby barbershops on the go and be able to queue from the comfort of their own homes, offices, or gyms. 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 can filter barbershops based on their location, find open slots, and compare the queue length in the 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 realtime 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.
In the year 2018, PWA is still a developing technology. Especially with Apple iOS devices, we had to find a lot of creative solutions to fill the gaps. On Android, the app supported the latest PWA technologies including push notifications and long-term offline caching from the start. We used 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 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.
Over the years, the application has been partly rewritten with TypeScript.
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:
02:45 min
