Proposing a Better Design for a Hotels Digital Solutions Company
Proposing a Better Design for a Hotels Digital Solutions Company
Proposing a Better Design for a Hotels Digital Solutions Company
Proposing a Better Design for a Hotels Digital Solutions Company
Proposing a Better Design for a Hotels Digital Solutions Company
Hotels Comunication Landing Page
Hotels Comunication Landing Page
Hotels Comunication Landing Page
Hotels Comunication Landing Page
Hotels Comunication Landing Page
Tools
Figma
Miro
Adobe Photoshop
Notion
2 weeks
Time frame
UX/UI Designer
Role
Desktop, Tablet & Mobile
Platform
Introduction
Introduction
Established in 2023, DialZero is a company that develops transformative digital solutions that redefine customer experiences. Their platform simplifies daily operations for hoteliers and revolutionizes the way guests interact with hotels during their stay.
Established in 2023, DialZero is a company that develops transformative digital solutions that redefine customer experiences. Their platform simplifies daily operations for hoteliers and revolutionizes the way guests interact with hotels during their stay.
Problem
Problem
DialZero faces a significant problem, the current website has a very poor design and does not convert. Without an intuitive design, guests and hotel managers will not be able to understand the benefits of the DialZero platform.
DialZero faces a significant problem, the current website has a very poor design and does not convert. Without an intuitive design, guests and hotel managers will not be able to understand the benefits of the DialZero platform.
Goal
Goal
The objective was to create the visual UI design and layout for the company's website within a 1-week timeframe. This website will serve as a platform where clients can easily access detailed information about the services that the DialZero platform renders. The goal is to enhance guest satisfaction, reduce frustration, improve operational efficiency, and ultimately increase overall revenue.
The objective was to create the visual UI design and layout for the company's website within a 1-week timeframe. This website will serve as a platform where clients can easily access detailed information about the services that the DialZero platform renders. The goal is to enhance guest satisfaction, reduce frustration, improve operational efficiency, and ultimately increase overall revenue.
My role
My role
I was responsible for the competitor analysis, the creation of the avatar of the target audience based on the details provided by the client, wireframing, UI Design, and handoff. We also created a style guide to maintain consistency and effective communication with the development team.
I was responsible for the competitor analysis, the creation of the avatar of the target audience based on the details provided by the client, wireframing, UI Design, and handoff. We also created a style guide to maintain consistency and effective communication with the development team.
My process
My process
The structure and length of my process can very depending on at which point I join the team, the resources available, and deadlines. Because of the short timeframe, I focused only on the first 4 phases of my product design process.
The structure and length of my process can very depending on at which point I join the team, the resources available, and deadlines. Because of the short timeframe, I focused only on the first 4 phases of my product design process.
Discovery
Discovery
I started the project with an audit of the existing design to figure out the major UX issues and missing features that impact the overall user experience. I tested the platform and noted my thoughts about it.
I started the project with an audit of the existing design to figure out the major UX issues and missing features that impact the overall user experience. I tested the platform and noted my thoughts about it.
With the existing problems defined, I decided to go deeper and conduct online research to understand the target audience, what challenges hotel workers, and their quests in communication. Forums, blog posts, Facebook, and Reddit groups came to be great at finding actionable insights.
With the existing problems defined, I decided to go deeper and conduct online research to understand the target audience, what challenges hotel workers, and their quests in communication. Forums, blog posts, Facebook, and Reddit groups came to be great at finding actionable insights.
User research
User research
User persona
As you can see in my work process I always start any project with the target audience and competitor analysis part to make sure the problem we want to solve is a current one and if the design idea resonates with the end user.
We have identified two end users of this mobile app based on the information provided by the client. The hotel workers and guests. We included the most important data: demographics and psychographics to better understand the motives, frustrations, and desires of the users and address them further in the design.
User persona
As you can see in my work process I always start any project with the target audience and competitor analysis part to make sure the problem we want to solve is a current one and if the design idea resonates with the end user.
We have identified two end users of this mobile app based on the information provided by the client. The hotel workers and guests. We included the most important data: demographics and psychographics to better understand the motives, frustrations, and desires of the users and address them further in the design.
After analyzing the target users, I reached some conclusions::
Unified User Experience: Eva's challenge with inconsistent user interfaces and Fernando's need for seamless integration highlight the importance of creating a website with a unified and intuitive user experience. A consistent design across all features can enhance user satisfaction for both hotel guests and managers.
Comprehensive Integration Solutions: Recognizing Fernando's struggle with integration complexities, the website should prioritize comprehensive integration solutions that seamlessly connect with various hotel systems. This ensures a smooth operational flow for hotel managers.
Automation Across Functions: Eva's desire for real-time updates and Fernando's emphasis on automation point to the need for a website that automates various functions, such as room service requests, check-ins, and reservations. This automation enhances efficiency for both guests and hotel staff.
Transparent and Verified Reviews: Addressing Eva's concern about unreliable reviews, the website should incorporate a robust review system, ensuring transparency and authenticity. Verified guest reviews contribute to building trust among users in their decision-making process.
Advanced Analytics for Decision-Making: Considering Fernando's reliance on data-driven insights, the website should provide advanced analytics tools. This allows hotel managers to make informed decisions, optimize operations, and enhance the overall guest experience.
After analyzing the target users, I reached some conclusions::
Unified User Experience: Eva's challenge with inconsistent user interfaces and Fernando's need for seamless integration highlight the importance of creating a website with a unified and intuitive user experience. A consistent design across all features can enhance user satisfaction for both hotel guests and managers.
Comprehensive Integration Solutions: Recognizing Fernando's struggle with integration complexities, the website should prioritize comprehensive integration solutions that seamlessly connect with various hotel systems. This ensures a smooth operational flow for hotel managers.
Automation Across Functions: Eva's desire for real-time updates and Fernando's emphasis on automation point to the need for a website that automates various functions, such as room service requests, check-ins, and reservations. This automation enhances efficiency for both guests and hotel staff.
Transparent and Verified Reviews: Addressing Eva's concern about unreliable reviews, the website should incorporate a robust review system, ensuring transparency and authenticity. Verified guest reviews contribute to building trust among users in their decision-making process.
Advanced Analytics for Decision-Making: Considering Fernando's reliance on data-driven insights, the website should provide advanced analytics tools. This allows hotel managers to make informed decisions, optimize operations, and enhance the overall guest experience.
Competitor research
After I finished with the analysis of the target users, I started the competitor analysis. Competitor analysis allows us to analyze how other companies have approached the same problem, what their strengths are, and where we can do things better. We analyzed the sites by UI and UX at the top 1 direct competitor.
Competitor research
After I finished with the analysis of the target users, I started the competitor analysis. Competitor analysis allows us to analyze how other companies have approached the same problem, what their strengths are, and where we can do things better. We analyzed the sites by UI and UX at the top 1 direct competitor.
After performing the analysis of the competition, I reached the following conclusions:
UX Conclusions
Positive UX aspects include clear communication in the hero section, accessible chat support, well-placed CTAs, and a persistent navigation bar. Yet, attention-grabbing animations in the social proof and partner carousel may distract users. Addressing these concerns can elevate both visual appeal and user experience.
UX Conclusions
Positive UX aspects include clear communication in the hero section, accessible chat support, well-placed CTAs, and a persistent navigation bar. Yet, attention-grabbing animations in the social proof and partner carousel may distract users. Addressing these concerns can elevate both visual appeal and user experience.
UI Conclusions
The website boasts a clean, spacious design with a professional video background and effective button visibility. However, suboptimal line height for 15px text presents a potential readability issue.
UI Conclusions
The website boasts a clean, spacious design with a professional video background and effective button visibility. However, suboptimal line height for 15px text presents a potential readability issue.
Competitor mood board
High-Fidelity Wireframing
After getting a deeper understanding of the target audience and competitors I created a wireframe to visualize the site structure and the content part.
Thanks to wireframing we have identified the basic sections and structured them in a way that resonates with the end user.
High-Fidelity Wireframing
After getting a deeper understanding of the target audience and competitors I created a wireframe to visualize the site structure and the content part.
Thanks to wireframing we have identified the basic sections and structured them in a way that resonates with the end user.
UI Design
Before starting to design in hi-fi, I looked for inspiration on Dribbble, Behance, and Pinterest and created an inspirational mood board. It helped me avoid the creative block and saved a lot of time during the design process.
After several rounds of iterations, I came to this design.
UI Design
Before starting to design in hi-fi, I looked for inspiration on Dribbble, Behance, and Pinterest and created an inspirational mood board. It helped me avoid the creative block and saved a lot of time during the design process.
After several rounds of iterations, I came to this design.
We also developed tablet and phone versions to ensure accessibility, considering the significant number of users expected to access the site via mobile devices, according to data derived from our thorough target audience analysis.
We also developed tablet and phone versions to ensure accessibility, considering the significant number of users expected to access the site via mobile devices, according to data derived from our thorough target audience analysis.
Futures Section
- The features section helps highlight the main aspects of the product or service, making it easier for users to quickly grasp its key offerings.
- By having a features section, the landing page becomes a source of detailed information about the product or service, assisting users in making well-informed decisions.
- The organized presentation of features with visuals makes them stand out, making it more likely for users to engage with and remember the distinctive aspects of the product.
Futures Section
- The features section helps highlight the main aspects of the product or service, making it easier for users to quickly grasp its key offerings.
- By having a features section, the landing page becomes a source of detailed information about the product or service, assisting users in making well-informed decisions.
- The organized presentation of features with visuals makes them stand out, making it more likely for users to engage with and remember the distinctive aspects of the product.
CTA(call-to-action) Section
- The CTA section is strategically placed at the end of the landing page to capture user attention, encouraging users to take action, ultimately increasing conversions.
- Very clear and consistent CTA buttons “Start for Free” and “Contact Us”.
- Intuitive title and subtitle for the user to take action.
CTA(call-to-action) Section
- The CTA section is strategically placed at the end of the landing page to capture user attention, encouraging users to take action, ultimately increasing conversions.
- Very clear and consistent CTA buttons “Start for Free” and “Contact Us”.
- Intuitive title and subtitle for the user to take action.
Testimonials Section
- The carousel design for testimonials showcase numerous customer reviews. Its interactive nature offers easy navigation, preventing information overload while maintaining a visually appealing and organized display. This format inspires the most trust.
- Our testimonials section is skilfully designed to highlight the voices of our happy customers. By diving into this wealth of positive experiences, you'll find numerous reasons to gain confidence in our products and services.
Style guide
After confirming the final design we developed a style guide to maintain consistency throughout the project and subsequent projects. Also, a style guide facilitates more effective communication with the engineers.
I have included the typographic system, the color palette created based on MUI, the components used and the icons.
Style guide
After confirming the final design we developed a style guide to maintain consistency throughout the project and subsequent projects. Also, a style guide facilitates more effective communication with the engineers.
I have included the typographic system, the color palette created based on MUI, the components used and the icons.
Colors
Colors
Icons
Icons
Components
Components
Typography: Poppins & Roboto
Typography: Poppins & Roboto
Handoff
Finally, I have successfully organized the file in a highly intuitive manner. In addition to this, I have also included the final design along with the responsive version, providing detailed specifications of the sizes used.
To ensure complete understanding and seamless implementation, I have arranged a call with the developer. This call will serve as an opportunity to provide any additional details about the site that may be necessary for its implementation.
Handoff
Finally, I have successfully organized the file in a highly intuitive manner. In addition to this, I have also included the final design along with the responsive version, providing detailed specifications of the sizes used.
To ensure complete understanding and seamless implementation, I have arranged a call with the developer. This call will serve as an opportunity to provide any additional details about the site that may be necessary for its implementation.
UI Design
Before starting to design UI, I looked for inspiration on Dribbble, Behance, and Pinterest and created an inspirational mood board. It helped me avoid the creative block and saved a lot of time during the design process.
After several rounds of iterations, I came to this design.
We also developed tablet and phone versions to ensure accessibility, considering the significant number of users expected to access the site via mobile devices, according to data derived from our thorough target audience analysis.
