Designing User-Centric Onboarding

This has been one of my favourite processes while working at Flexkeeping.  Flexkeeping is a hotel operation platform consisting of desktop and mobile app. It helps hotels and other properties to run their processes better. It optimizes and automates communication, task management, maintenance, housekeeping, audits, procedures compliance, guest services etc.

The objective & the process

The company shifted the business strategy to target smaller independent properties instead of bigger hotel chains, which required the product to digitalise the onboarding process and create smart editors that allow property owners to setup the software themselves all in efforts the  to be able to scale our business to serve bigger amount of smaller clients.

The objective was that the user needs to be able to sign up for the software themselves and we need to onboard them completely online. In order to achieve this, we created onboarding process, demo environment, set up process and  admin area with additional settings.

New functionalities were: sign up process, creating custom domain, email verification, demo environment, basic setup of the property, login in process and admin area for additional settings.

We started the research by interviewing the owners of small properties, to define the needs and problems of our potential users. For some cases the user personas hasn't changed from our main product, but there was an important new persona, the hotel owner.

‍

‍

We kept the objective to keep the process as fast and easy as possible, while still engaging the hotel manager, in our mind trough entire work process. After discussions with the development, we created the entire flow and information architecture of the process on the famous white board. This served as a holy grail for ​​​​​​​the next months while the product was being built. On the image there is just a very small portion of the entire process.

‍

‍

‍

‍

‍

We split the flow in smaller steps to be able to simultaneously plan design process and development.

For each piece we created the UX, tested it, made adjustments (possible testing again if needed) created UI, wrote the user story and flow and hand over to the development. Followed by testing, communicating and improving and of course fixing bugs :)

Below you can see a small portion of the sign up process, which had to be quick as possible, while still giving us the information we needed. We used this process to also start communicating brand promise.

‍

‍

‍

‍

‍

‍

3-step set up

The setup process was by far the most complicated to create, because we had to gather quite some information to be able to setup the domain for the new user, while trying to keep it simple and easy. In a product that has so many levels, different permissions based on user types, usages, it was a lovely challenge.

And this is how the process looked like :)

As this was before I introduced Whimsical, most of the UX part was done on white board and later in Sketch directly.

‍

‍

We narrowed down three essential information we need so the user can start using the app. It was setting up room names, including dragging them into different sectors, setting up codes, to be able to use tasks and inviting other users, with their email address.

‍

‍

The admin area

or how we called them Smart editors, was most focused on the UX, we had to figure out how to build editors that fit our database, while still making it user friendly. This area was until now only used by the internal team, so as it happens it was never designed to be user friendly.  We had to make them be able to handle huge amounts of data, for example 10.000 units, but also be user friendly for small hotel owners with 20 rooms. We solved this with basic visual editors on the main view, which was a bit more time consuming, since you had to add one item at the time, but quite simple. On the other hand we implemented CSV importer, which allowed more tech-savvy users to import big chunks of data with the help of old friend Excel.

‍

‍

As part of the process we also redesigned our login process, to match the visual style to the newly created onboarding process. The login process included all the classical parts like resetting a password, sending applicable emails, fail messages and options to login from different account in our case that was Booking.com and PMS platforms. Here is a sneak peak of the interface.

‍

‍

From  Designer to Product Owner

I loved the strategic thinking to define the product, conducting research and later on solving complex UX question. This was also the first part of the Flexkeeping software where I got the chance to modernize the visual style of the app and introduce UI changes, while still keeping the brand look and feel

. What I especially liked, was that I was so much involved in the process of crating this, that our CPO asked me to take the role of a Product Owner to lead the development of the product to the finish line. It was a great opportunity to be able to be involved in the entire process, including working with QA, talking with clients, receiving their feedback and really experiencing all my design ideas coming to life.  I was in charge of  a small team of 3 developers to plan sprints, define priorities, also testing and overall making sure that the deployments were as smooth as possible :)

‍