GrandOne 2019: Paras mobiilipalvelu, Innovatiivisin digitaalinen palvelu, Paras toteutus, Paras uuden teknologian käyttö, Paras design, Paras UX-design, Paras palvelumuotoilu

My M Room:
better barbershop experience with PWA

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 increasing 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 revolutionises the customers’ waiting experience.

How to use the service

Go to my.mroom.com on your mobile browser
Use the app in browser or add it to your home screen.

my.mroom.com

Insights from customers

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 was tested with M Room clients. Direct and valuable feedback from end-users was 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 realised 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.

Avg. number of users queueing each day:

~500

Average bounce rate:

35%

Average time spent on page:

02:45min

How to use the service

Go to my.mroom.com on your mobile browser
Use the app in browser or add it to your home screen.

my.mroom.com

Client

M Room

PWA design, production

Evermade

Data API production

Blockware

A project in mind?
We'll get back to you in 24 hours.