Back to projects
mobile app - back-office

Molitor

Allowing the VIP clients of the famous parisian hotel to manage their entire stay with a mobile app.

CASE STUDY

5 min read

a 3d iphone mockup of a Molitor app screen

I. Context & Problem statement

General informations

The project took place during summer 2019. I had the opportunity to work with Studiolabs, a digital studio that entrusted me to be the Lead Designer of the project. I was thrilled to work on this product because Molitor is an iconic hotel which is well-known in France

image showing the Molitor hotel and its outside swimming pool

The company

Molitor is an hotel based in the 16th arrondissement of Paris. Molitor first opened in 1929, for 60 years it was Paris most popular swimming baths, known for its two swimming pools and its avant-garde atmosphere. Nowadays, the place has evolved to become one of the most iconic and famous hotel in the capital.  With 124 rooms and suites, a spa, 2 restaurants, and an art gallery, Molitor went through the ages by always keeping an authentic and prestigious image.

The brief

Molitor wanted to develop an app that allow its members to discover the wide range of services and events they offering. Users can see the different services grouped into categories, see the events and also the restaurants that Molitor has inside its Hotel. We also had to create a back-office that would allow Molitor’s team to manage the services, the events, the users and also ratings and comments given by the clients of the hotel.

The challenges

The main stake of the project was to create an intuitive way for the user to find what he was looking for. Indeed, as Molitor has a wide range of services, the searching process for the user could rapidly become laborious and frustrating. We also had to ensure that the booking process for a service was clear and logical, the information architecture had to be pertinent in order to make the user confident with the choices he makes. Moreover, we had to make sure that the information provided in the app was also editable in the back-office (number of places available, slots, eventual cost of the service etc…)

II. Solution

Functional Analysis & Wireframes

To get the project started, the product manager made a functional analysis with the client to define the needs for the product. This analysis allows us to divide the different functionalities into ¬ę stories ¬Ľ. Each of them corresponding to an action the user can make in the app.
For example : ¬ę How to register for an event ? ¬Ľ

This segmentation in ¬ę stories ¬Ľ allows :

  • a coherence between the functional analysis and the screens created
  • a better repartition of the work between the designers
  • an easy way to control the work done for the product manager
  • every team member to have a concrete view of the project progress
graphic showing the functional analysis process for the Molitor project
Graphic showing how the functional analysis is used to define the wireframes we have to design for the product.

Once the stories were defined, we started to create the wireframes. The goal was to show the navigation, the information architecture and the position of each element in the app. This step was very tricky in term of UX because we had to deal with all the specificities of each type of service, which can have different features based on their type. At the end of the wireframes step, we had about 150 screens from the app and the back-office prototype.

image showing some wireframes screens created for Molitor app

Graphic charter

Molitor already have a graphic charter applied on their website and for their global communication. We used it for the project, by using its color palette and fonts.

image showing the graphic charter of Molitor
graphic charter of molitor

UI Explorations

To set up the global style of the UI, the designer i was working with, and me, designed some proposals screens in order to let the client choose which style he prefers. It allows him to have several alternatives for the visual design of his product.

a wireframe designed for the Molitor app and used for the design exploration
Wireframe
a ui screen for the Molitor app created for the design exploration phase
UI Exploration 1
a ui screen for the Molitor app created for the design exploration phase
UI Exploration 2
a ui screen for the Molitor app created for the design exploration phase
UI Exploration 3
a ui screen for the Molitor app created for the design exploration phase
UI Exploration 4

Design System

After he selected the version he liked the most (Exploration n¬į2), i started a design system using Sketch. The main challenge for this phase was to develop the design system by making it as flexible as possible, because the components could have many states and variations due to the large number of services in the app. Moreover, we had to take into consideration the future improvements made on the product (addition of new features) so the design system has to be easily editable and reusable.

image showing some components of the design system made for Molitor
preview of some of the design system's components

UI Design

Now that we had our design system and the general guidelines, we started designing the interfaces, once again by using the division into ¬ę stories ¬Ľ, to enhance our workflows.Thanks to the work made during the wireframes step; we gain a lot of time on the UI Design.

  • Splash Screen
  • Login Screen
  • Menu
ui screen designed for Molitor app, showing the splash screen of the app
ui screen designed for Molitor app, showing the login screen of the app
ui screen designed for Molitor app, showing the menu of the app
  • Profile screen
  • Notifications preferences
  • Services preferences
ui screen designed for Molitor app, showing the user profile
ui screen designed for Molitor app, showing the notifications preferences for the user
ui screen designed for Molitor app, showing the service preferences for the user
  • Services list
  • Event list
  • News list
ui screen designed for Molitor app, showing a list of services
ui screen designed for Molitor app, showing a list of events
ui screen designed for Molitor app, showing a list of news
  • Service detail
  • Event detail
  • News detail
ui screen designed for Molitor app, showing a service
ui screen designed for Molitor app, showing an event
ui screen designed for Molitor app, showing a news

Design -> Development

Once the UI had been validated by the client, i have setup the interfaces and the design system on Zeplin, to facilitate the relay between design and development teams. During the development phase, i had to ensure that the product was in coherence with the interfaces we designed.This step, was very instructive for me because i could see how the developers handle the interfaces and what kinds of problems they face during their work. On that basis, we modified some components to ensure that the developers could work as efficiently as possible

graphic showing process between design and development stages during molitor project

III. Synthesis

Next steps

The application is now available for the members of the ¬ę Club Molitor ¬Ľ. The team is gathering some users feedback in order to iterate again to improve the product. As i‚Äôm writing this, our next tasks will be to improve the ¬ę News ¬Ľ part of the app and to create the booking process for the restaurants, which was provided by a third party service so far.

Learnings

Personally, i learned a lot thanks to this project. I realized the importance of the information architecture particularly into a booking process. I also learned to challenge ideas and assumptions, to see the limits and the benefits of each of them. Thanks to Molitor, i also discovered the value of a well-designed back-office allowing the administrators to have a general overview of their business and also to manage services  & guests.

Huge thanks to Studiolabs and Molitor for their trust !
&
Thanks for reading ūüĎć

Next projects

mobile app - back-office

iZclean

A mobile app allowing users to have their vehicles washed anywhere, at anytime.

a 3d iphone mockup of a iZclean app screen
mobile app - UX/UI Redesign

Blablafoot

Blablafoot is an application allowing users to take part into debates around subjects related to Football.

a 3d iphone mockup of a Blablafoot app screen