My M Room PWA

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. In stead 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 initial feedback has been positive.

Keywords

Progressive Web Application

React JavaScript

Service design

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.

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 on Page:

02:45min

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.

Client

M Room

PWA design, production

Evermade

Data API production

Blockware

Project Manager

Joakim Larres

joakim

Project Manager

Joakim Larres

Hejssan!

My name is Joakim and I work as a Project Manager here at Evermade. It´s a bit like being a chef/waiter/dishwasher in a creative kitchen. You have pots and pans with mysterious ingredients brewing here and there. Sometimes the sauce boils over and sometimes the curtains catch fire but the end result is always delicious!

In my spare time I act as a peace negotiator between my three very active kids. And if I find the time I like to be outdoors. Any adventure will do, be it hiking, windsurfing, skiing, riding my motorcycle or just lounging at the summer cottage. Oh, and I recently climbed a mountain (like a real one, with snow on top). Bucket list, check!

Developer, Designer

Timo Sundvik

timo

Developer, Designer

Timo Sundvik

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.

Lead Designer

Samuli Lindberg

samuli

Lead Designer

Samuli Lindberg

I am a 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.

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

  • This field is for validation purposes and should be left unchanged.