My M Room: Progressive Web App
Progressive Web Application
User experience design
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 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.
If you aren’t an M Room customer, you can use the Register option to create a new account for instant access to the app.
Testing the queue
Browse and interact with the live app as much as you want. However, please don’t join any of the real barbershop’s queue only for testing purposes. To try out ordering and the queue, while logged in please open the link https://my.mroom.com/barbershop/70 in your browser, to try ordering in the “EVERMADE TESTI” barbershop.
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.
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.
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.
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.
Time is money for both the customers and for M Room, so we created a concept which changes the whole waiting experience and helps M Room to spread traffic more evenly between the shops.
My M Room was soft launched in Finland in January 2019. After only two weeks the numbers look very promising and the initial feedback has been positive from both iOS and Android users.
Average daily unique users:
Average time spent on page:
PWA design, production
Data API production
I’m a web designer/developer hybrid that’s had a passion for creating websites for well over 10 years. In school my favorite subjects were math and arts. Luckily, some vice president came up with the internet and I got to combine them in a hobby, which then became my profession.
My main motivations are to always push myself, and help my clients create something that makes them proud and adds value to their business.
Other than making websites, I kill time by playing games and making music. Is cycling a pastime or a method of transportation? Maybe both.
I am restless creative mind and I get excited really easily. I laugh a lot and loud — even during client meetings and workshops. I like workshopping with clients.
When diving into new project I want to wrap my head around the whole thing and understand the client. I want to really solve problems and not just do some sugar coated layouts.
Within all this web stuff I also have experience in illustrating, all the print stuff and creating visual identities for companies and events.
I try to get off-line as much as possible. The best ideas are more likely to hit me while reading a book instead of surfing through those so-called inspirational sites. In my off-line life I also enjoy graffiti, Finnish archipelago and spending my money dining in restaurants.
I love humans! And human interaction. And problems. And solving them together.
Inside of me there is a little hippie, who loves nature. My freetime is spent either blown by the wind while kitesurfing, riding powder in the mountains (hills) or just wondering around forests.