🛎️ Edrian's Louvre: A Hotel Management System Redesign 🛎️

Jibrael Yap

Frontend Engineer

UX Designer

Figma

.NET

Need a designer? I got you.

Who doesn't appreciate aesthetically pleasing things? Enter Edrian's Louvre, a hotel nestled in my city, which recently assembled a team to update it's management system. This system was envisioned to track operations, streamline processes, and elevate the efficiency of daily hotel management tasks.

Coincidentally, the figure leading the project happened to be a friend. Already midway in development, he reached out, expressing the team's urgent need for a frontend developer with a eye for design to refine and enhance various elements of the application. Excited for the opportunity to contribute to Edrian's Louvre's success and gain valuable experience, I gladly accepted the challenge.

In my capacity, I assumed the crucial role of designing the application and collaborating on its development, striving to unlock the full potential of the final product. By infusing creativity, innovation, and attention to detail into the project, my aim was to deliver a solution that would not only meet but exceed the expectations of the hotel and its users.

Problem 🤔

The current system urgently requires optimizations to streamline processes and task completion. Its lack of clear steps in executing tasks could hinder operations and cause confusion to

Additionally, the system lacks an aesthetically pleasing and structured user interface. Integration of new frontend designs with the existing backend system at this mid-stage of development may also present as a technical challenges.

Solution 💡

Offer a solution that unifies all modules to streamline processes and provides a user-friendly interface to guide users. Ensure that the design is cohesive and consistent throughout the application to enhance the user experience when interacting with it.

Research 🛣

The Current System (so far)

The system manages hotel room bookings, guest details, stay durations, fees, and food & beverage expenses. Guests settle bookings at the reception, and their overall bill includes all costs. Ratings and reviews of their stay are welcomed and also recorded.

The tasks are divided between two user roles: Clerks and Cashiers. Clerks manage guest bookings and accommodations, while Cashiers handle financial transactions.

The current solution is a desktop application developed using the .NET framework in Microsoft Visual Studio, with a locally stored database using IBM DB2.

Work Points

After analyzing the application and its features, along with a run through of the project scope and limits to the changes I can make together with the team, I've enumerated two major tasks that I'll be handling in further developing the application.

Major Work Point 1 : The User Interface

compilation of screen layouts of the current version

Major Work Point 2: Steps to Completing a Task

screenshot of opening pages in application

Competitive Search

To gain insight into the typical structure and appearance of management systems, I conducted a competitive search and drew inspiration from various management systems albeit testing, or reviewing case studies. I focused on studying the layouts of these dashboards and how information is organized, making full use of the diverse features a system could offer.

Additionally, I considered the existing system utilized by the hotel to guide my design approach, emphasizing the execution of major tasks while leveraging the feature capabilities of Visual Studio.

Opportunities

Consistent visual hierarchy

Engaging user interface

Streamlining task completion

Distinguishable signifiers

Vigilance

Too many elements

Uniformity of page layouts

Exclusive design

Journey Map

To have a better overall experience to the major processes of the application, I created a user journey map. It allowed me to get an idea as to how the employees at the front desk would go about their duties and identify opportunities for the design.

Iteration 🔁

Defining the problem

Using all the information I've gathered so far, I created a prompt that will help me during the brainstorming session.

What solutions can I implement to the application without making any drastic changes that could hinder development but also designing the the interface in a way that's structured efficiently and easy to use?

Brainstorming

With that in mind, I jotted down a bunch of ideas as to how I could seamlessly integrate these features and additions that could coincide with what is already present and yet to be added.

Development and Integration 👨‍💻

Information Architecture

I then arranged how the pages and components would be grouped and communicate with one another. The goal in mind is to encapsulate pages into a single frame to avoid users from traversing window to window to not only speed up processes but also avoid confusion.

Colors

The solution centers on a darker shade of brown named Banyan Tree, drawn from the hotel's image, evoking warmth and earthiness. This choice aims to establish a cozy and calming environment for users navigating the system, while also infusing sophistication to bring an element of elegance and professional appeal.

The Banyan Tree color is complemented by light and dark brown tints to ensure a cohesive and visually pleasing design experience.

Font

I chose "Be Vietnam Pro" as the font for this project as it exudes professionalism, complementing the vibes evoked from the color scheme ensuring a polished look for the application.

It's modern aesthetic and high readability guarantees that users will easily consume the contents being presented and befitting to the project's system revamping theme.

Wireframes

For my first experience with Microsoft Visual Studio, I dedicated time to explore its features to understand its full potential.

I crafted the user interface using available options while ensuring seamless coordination with backend developers to implement changes sensibly. The primary goal was to optimize existing elements, streamlining development and enhancing user interaction for a smoother experience.

Integration and System Testing

After completing the backend development, I integrated the interface design, marking the end of the project's development phase. Our team conducted system testing with the hotel employees and owner to identify and address any issues.

As I focused on the frontend, I summarized key feedback from the testing regarding the UI in a sticky note activity. This helped me prioritize areas for improvement and address any concerns or positive feedback effectively.

Results and Conclusions

After all the issues were addressed, the application was deployed and started running as the system the hotel will use for its day-to-day activities. The system can track hotel room availability, guest details, stay costs, room service orders, payments, and guest reviews.

The integration of the user interface encountered minimal issues during testing. I developed an inclusive design for the system that enhanced user experience, making interaction with the application more enjoyable and manageable. This design also ensured that tasks could be completed with ease, minimizing any potential confusion or difficulties.

Major Design Iterations 🔁

👇 Iteration No.1 : The UI Overhaul

My primary focus in the project was to spice up the frontend of the application. Despite being unfamiliar with Microsoft Visual Studio's features, I proactively learned and adapted to work with the limited options available, striving to produce the best outcome possible. Through determination and effective communication within the team, I successfully delivered a makeover to the interface tailored to the hotel's daily operations.

👇 Iteration No.2 : Reforming the Information Architecture

To fully optimize the system capabilities, I made use of the platform's "Panel" features so that I could create a dashboard where all tasks could be done in one window hence avoiding any unnecessary loading times.

Final Design ✨

Product Successes 👏

The implementation of the new system resulted in notable successes for the hotel. Employees swiftly embraced the user-friendly interface, facilitating a seamless transition and ensuring efficient use. This adoption, coupled with a productivity surge of over 70%, streamlined task completion. The simplified application design enhanced record-keeping processes, empowering the hotel to manage data effortlessly.

Consequently, staff could redirect their focus towards essential tasks beyond system interactions, optimizing operational performance.

The team has since then handed off to the hotel and although I didn't get no money, I was given honey (chips).

Takeaways 📣

"When life gives you lemons, you make lemonade" basically sums up the experience I had working on this project. Joining the project midway through its development posed challenges as I needed to quickly grasp numerous details and had limited scope for suggesting changes.

Despite these constraints, I committed to learning what I could under the circumstances to make a significant contribution to the project's success. In addition to leveraging my ability to learning-on-the-fly, effective communication with the team played a pivotal role in preventing misunderstandings and errors that could have materialize in the final product.

Despite not being present at the starting line, with sheer determination and amazing communication, we crossed the finish line together with flying colors.

Like this project

Posted Jun 6, 2024

Recruited to revamp a system's look mid-project for better user experience. My mission: frontend magic!

Likes

Views