Visuality

Simple responsive single-page React/Redux application, created for a real estate startup from NYC, allowing to easily guide people through apartment-seeking process and gathering their data in the end.
 

Problem to be solved

A NewYork based client approached us with a mission to create an application that would allow users to easily look for a perfect apartment in NYC. The main points that the app should meet was simplicity, gathering data in organised format to allow the product owner to contact gathered leads with a well-suited offer that in the future may be proposed automatically. Client also needed a slick design that would make the usage of the app intuitive and fast.

Implemented solution

After conducting remote MVP workshops we decided to simplify the idea into a responsive single page application done in React/Redux that would guide the person through the process of gathering flat requirements. The main focus was on showing the client the exact progress of this process and allowing to make changes easily when necessary. That is why single-page React app was a necessity here. At the last step of the process the user leaves contact data allowing fast contact with suitable offers. Of course we also supported the client with a simple admin panel that allows to browse through the queries fast.

Technologies used

React as JS library
Rails 5 API backend
Redux for state management (with redux-sagas for handling asynchroneous side-effects)
Redux Form for handling onboarding form data
webpack as module bundler
yarn for package management
babel for ES6
eslint for JS linting
CSS modules with Sass for component based styling
Redux DevTools for debugging
HMR (Hot Module Replacement) to speed up development process

As mentioned above we decided to go with React application that has a small but efficient ruby backend. The app was created with backend/frontend separation allowing to implement frontend changes easily and also made it possible to implement progressive web app or native mobile app very easily in the future. Thanks to that also the process itself can be amended easily when needed (in terms of specific questions or number of steps).

Results of implementation

The client received the full responsive design for onboarding app and landing page together with simple branding that can be used in any marketing materials. The app was developed fast and due to frontend/backend separation both parts were implemented simultaneously. After this short production cycle client was ready to launch and started gathering the leads which allowed him to give services to more people than before.

Final remarks

Although the project may seem small it was actually pretty interesting because chosen technology allowed us to create a powerful onboarding-like engine that makes it easy to gather data and use it to the clients advantage in the future, which also satisfied client’s UX concerns about the product. Because of the existing know-how there weren’t too much architectural debt. The whole app including landing page is mobile-ready so whenever client decides to go into this direction he will have again a very short production-cycle.

Being a tour operator means that you always struggle with both - organizing your trips and selling them but it is hard to do it simultaneously. Our client decided to resolve this problem and make a powerful tool in which one can organize, manage and sell events at the same time. 

General idea

Working with the Magello team was an amazing experience from the very beginning. Their knowledge about the travel market was exceptional and they knew exactly how the MVP version should look like. As we’d been working with many projects for this industry our team could easily imagine how this product should look like at the end. We just needed to create a specified roadmap and make some priorities regarding the most crucial features.

Product design

We started with sketching ideas for the tour operator interface and booking solution for the end user. As our notebook was getting thicker and thicker with more and more sophisticated images – our dev team started to create a backlog of features and dividing them into sprints. So we simply put spec, sketches and features list together and we had our first solid product idea to work with. The plan matched our main requirement for a product MVP – to be built and launched within 12-16 weeks maximum. So the work had started…

Brand Identity

As for every new project with global aspirations – the name is crucial. It must be short, sound alike in every language and the most important – the web domain must be available. We started looking for something simple and easy to remember and at the same time with strong associations to traveling. This is how we came up with Magello. It simply matched all our requirements. We moved to our favorite part – brand visualization. We kept it simple using modern fonts, neutral colors, and combinations of basic geometric shapes.

Trip organizer interface

This was the biggest challenge for our UX team. We needed to create an easy to use interface in which Magello clients would be spending hours every day on managing bookings, taking payments and generating documents. Our goal was to keep it simple and usable with the most intuitive on-boarding process. After several iterations, we finally got our perfect style guide. We could move on to the most important part - interface screens.

Adding and adjusting an offer

The first step for every trip organizer is to prepare an offer with the fully adjusted trip options. We knew that every trip is different and every client needs a different kind of options and selections. That’s why we put a lot of work on all interface parts which are responsible for managing a single trip with customizable payment plans, additional options, legal aspects, transportation and accommodation options. We believe that we’ve prepared a flexible solution for every kind of trip organizer.

Managing bookings

From our interviews with trip organizers and our experience with booking platforms, we knew that this would be the most popular section during the busy season. So we were trying to create a well-designed interface for booking and payments management – with all important interactive searches and filters. The most challenging part was the interface for assigning customers to selected transport and accommodation options. We came up with a fully interactive solution in which admin can drag and drop selected items – this was built to make admin work efficient and intuitive.

User interface

There would be no good system for travel business without a great online booking solution for their customers. This is where our experience with booking systems paid off. Our UX team started with sketching a lot of different wireframes to get to the best offers presentation, trip view, and booking flow. We were iterating a lot taking into consideration future user’s ideas and reported problems with current booking solutions. We decided to go with an intuitive and fully responsive design to make the process flow available for all devices.

Project monitoring & ongoing development

After having successfully launched the project we continued with project health monitoring and ongoing development of new features. We introduced a pre-production environment that allowed us to test new features with real data which was crucial for implementing some of them. We're proud to say that since the project launch till today we haven't encountered a single error or service malfunction. This is where quality in building an MVP pays off:)

An advanced web application that allows our clients to manage field workers. Our main goal was to redesign and simplify some of the processes in the existing application.

Workshop with the client

A client approached us with an existing project which, in their opinion, became slightly overcomplicated at some point. The previous company was just doing what they were told without any suggestions from their side. During the workshops in our office the product owner was amazed by our insights and suggestions based on our previous experience. Since the client was very well prepared, we managed to pinpoint the main issues of the current app and started working on a plan on how to implement the changes.

Planning the redesign works

Once the workshops were completed we got down to planning the actual work. We separated the functionalities in most need of revamping into new microfrontends. This allowed us to divide our work. We would keep maintaining the old application and implement a few quick wins to improve the UX. At the same time we would focus on developing the new microfrontends, free from the constraints of the previous designs. Once each new module was ready, it would be seamlessly incorporated into the user's path, replacing the obsolete parts of the old application.

Reimplementing the onboarding procedure

One of the most important pain-points of the client was the overcomplicated onboarding procedure. Our UX/UI team redesigned the entire process to make it simple, clean and intuitive. To implement the new onboarding, we moved away from the old Rails monolith application and implemented a Single Page Application in React. This allowed us to achieve a smooth wizard experience with live predictions of the fields based on the previous steps.

Creating a Progressive Web Application (PWA)

The second part of the application that had to be redesigned was the panel for field agents. Our client provided us with a detailed profile of this specific user. Together we established a set of requirements on its basis which included prioritizing mobile access and live notifications about any changes in the assignments. Instead of implementing a separate mobile application for both Android and IoS we opted to build this module as a Progressive Web App. This gave us all the benefits of the mobile app, such as installability and live push notifications, but would allow the app to evolve in the future to also accommodate the other user roles, according to the mobile first approach.
 

Interactions

The old application was entangled in a web of third-party providers to handle the accounts, payments and notifications. Some of the integrations stopped working, some were redundant. Our team’s task was to investigate and simplify those connections so that we could reduce the unnecessary costs for the client and improve the workflow with the applications that the client really used.