Client
Riosol Hotel
Type
Responsive mobile & web design
My Role
UX/UI designer, project manager
Team
Marketing associate, Reservation associate
Tools
Figma, Miro
Riosol Hotel
Supporting a small business in the midst of the pandemic.
Define
PROBLEM SPACE
Due to lockdowns and safety concerns from the coronavirus in 2020, the hospitality industry was heavily impacted, causing many small businesses to shut down permanently, and Peru saw a significant impact in its economy.
To understand the problem space, I conducted market reseach on how COVID-19 cases and government mandates affected the state of hotels. Some of those findings were:
75% in 2020
Inbound tourism in Peru dropped by 75% in 2020 due to the border and airspace closures. People weren’t allowed to travel long distances, even for work (Mincetur, 2020).
Red zone
Tarapoto, Peru, where Riosol Hotel is located, was classified a red zone in November 2020, meaning lockdown was extended to December 2020. With increasing Covid cases in January 2021, the owner of Risool Hotel grew concerned about the future of the hotel.
WHY IS THIS IMPORTANT?
Riosol Hotels reservations went from being 90%+ full before the pandemic to 0%.
For years, Riosol Hotel relied on corporate clients and tourists but people were concerned about staying in hotels, due to the high-risk factor of contracting Covid-19.
The hotel had to find a way to communicate with potential guests what their cleanliness policies were, inform people they were open, an make the reservations process easier for potential news customers to offset the decrease in revenue that past several months they were closed.
HOW DO I KNOW THIS IS A PROBLEM FOR CUSTOMERS?
After synthesizing findings from over 60+ customer survey responses and having 1:1 conversations with 5 employees to understand user pain points, 3 user problems were uncovered:
FOCUS
How might we simplify the reservations process for customers and address their concerns with staying in a hotel?
Ideate
Considering business constraints and user experience to find a sustainable & scalable solution
CLOUD-BASED WEB-DEVELOPMENT SERVICE
Finding a low-cost solution that can easily be adopted by the reservations team, yet meets the user goals.
Although the focus was on improving the customer experience, taking into account what was within the means of the business budget-wise and how easily the reservation’s team could learn how to follow this new process was just as important.
WIX ended up being the best solution for Riosol Hotels because it offers all the features they are looking for in a cloud-based service and is around $350 per year versus the cost of Hotelogix, a hotel management system that costs around $2,800 per year, not including the cost to hire a web developer. WIX also offers 24-hour support and marketing and customer manager capabilities for the Reservation's team to utilize.
CONTENT STRATEGY
Defining the MVP Using stakeholder and employee interviews to help me answer user questions and concerns.
To make sure this website launched on time, I opted to design for the MVP, which contained the homepage, rooms, restaurant & bar, contact, covid-19 protocol, and terms and conditions pages.
I opted for these pages as the MVP because the reservations team mentioned that guests regularly asked questions about the proximity of the hotel to the center of the city, they asked about covid-19 updates, terms & conditions, and also if the hotel had a restaurant because they were interested in room service to eat in their rooms because they were worried about contracting the coronavirus.
-
Homepage
-
Rooms
-
Restaurant & bar
-
Covid-19 updates
-
Frequently asked questions
-
Terms & conditions
-
Contact
.png)
Design
SKETCHES
Referring to FAQs & competitor websites to determine homepage content and layout.
After exploring competitor websites and referring to FAQs uncovered in stakeholder and Reservations Associate interviews I started off with a few sketches for my low-fidelity wireframes.
The homepage content was the most important, given CTA placement and content shown would determine conversions and answer any questions customers might have about the hotel.
ROOMS SECTION PLACEMENT
The main difference with the two version below are the placement of the room's section. I also made sure to have the CTA above the fold, both on the reservation bar and the navigation bar at the top.
Describe your image
Describe your image
Describe your image
DESIGN PATTERNS
Reusing elements and patterns from the homepage on the rest of the website for consistency.
Consistency: To ensure cohesiveness between each page, some patterns were reused throughout the website for similar pages. The Rooms and Restaurant pages were focused on the offerings of the hotel versus the FAQ and COVID-19 protocol page being tect heavy. With these two types of pages in mind, I made sure to reuse elements and layouts to increase efficiency.
Scalability: Given the MVP didn’t include additional pages that would be needed once the hotel could operate as it did before the pandemic, I made sure to think about a component library for the hotel, so any new designer could easily design new pages in the future.
LO-FI WIREFRAMES
Involving the stakeholder in lo-fi layout explorations.
This version of the rooms page was proposed by the stakeholder because it showed all rooms on one page, and when users clicked on a room, it would scrol down for them. I designed this to show the stakeholder the complications that would arise, such as the user needing to scroll back up, given the restrictions of WIX.
BRANDING & HI-FI DESIGNS
Providing creative direction and applying it to hi-fi wireframes.
Since the company did not currently have a brand guideline, I switched towards defining colors and imagery to ensure consistency across all screens and to take into account future property pages for Riosol Hotel.
BRANDING
Exploring colors and typography to align with the stakeholder's brand vision.
I started exploring options for the style guide to help create a brand identity for the hotel and support the CEO who wanted the branding to suggest a modern, sophisticated, and tropical look.
The stakeholder also wanted the original colors yellow and green to remain in the color palette, so I explored different shades that were not as intense but still aligned with the CEOs needs. And I opted for Sans Serif font because it gives off a modern feel. Then I created the mood board.
MOOD BOARD
Providing creative direction to the photographer for a cohesive brand image.
The mood board helped me communicate the company’s brand identity to the photographers the marketing associate and I interviewed because it shows the color palette and photo styles.
HI-FI DESIGNS
Using brand guidelines for the UI of the website.
These are the hi-fi wireframes. The homepage content included the CTAs where they are normally found on the site, a find a room bar in the hero because it is proven to improve conversions.I also thought back to a scholarly article I discovered when I conducted secondary research. The study uncovered the elements that guests take into account when choosing a hotel, which are the location, product offers and services, price, reputation, and quality.
That is why the homepage includes info on the hotel's proximity to the center of the city, a section dedicated to the rooms, amenities and services the hotel offers, and testimonials.
Once the high-fidelity wireframes were approved by the stakeholder, I transferred my designs to the WIX.
SETBACKS & ITERATIONS
Making last-minute changes to designs when migrating to WIX.
During the final stage of the design process, 2 weeks before the deadline, it was time to transfer my Figma hi-fi designs to WIX but I encountered issues with tech constraints, so I made changes to my original designs.
ITERATION
Width change from 1440px to 980px.
The high-fidelity wireframes I created had a width of 1440 pixels, but the width of a WIX website is fixed at 980 pixels to accommodate the majority of users and ensure compatibility with smart devices, like iPads and tablets. Designing outside of these pixel borders meant vital content for my user's browsing experience could be lost.
ITERATION
Constraints for site responsiveness
Incorporated full-width elements to make the site responsive for mobile, tablet, and desktop devices.
After designing the website on WIX, I checked its responsiveness on an iPad Pro, Macbook Pro 13" and 16", and an Intel desktop computer, but I noticed some of the elements were either missing from the site or had shifted, changing the layout and harming the user experience. Users were unable to view important hotel information and had to move the page around to access the outermost right and left parts of the page.
To solve these issues, I used full-width elements on the site and kept text boxes and images within the vertical grid lines to appear correctly on most screen sizes:
-
Strips & Columns
-
Wix apps
ITERATION
New reservation sear bar component design.
The Search Bar and Rooms List apps provided by WIX Hotels had limited customization capabilities, so the font did not align with the brand guidelines and the design and layout changed entirely. I show the changes below:
Testing
USABILITY TESTING
How effective were these iterations in solving common questions from a new user perspective?
After making iterations from the feedback gathered in design crit, I conducted 6 usability tests which led to two main discoveries.
Concerns with delivery time
Participants questioned how much longer delivery time would take when you set a deadline for the length of time the group order would remain open, and the time it would take for the Dasher to get to you.
No incentive to create your own group order
Participants were hesitant about creating their own neighborhood order because it requires more steps, but would consider joining a group order.
FINAL PROTOTYPE
View the final prototype for Riosol Hotel!
Learnings & Next Steps
LEARNINGS
Three most important learnings from this project
-
How to manage multiple deliverables simultaneously, delegating tasks, and working cross-functionally.
-
Learning to communicate the why behind decisions to stakeholders and how to gather information to help work through ambiguous situations.
NEXT STEPS
If I had more time, I would...
-
Accessibility: Focusing on color usage and font styles that are more inclusive.
-
Additional pages: Designing the activities and amenities pages for the website.
-
Marketing campaign: Organic and paid marketing campaigns to announce the launch of the website to drive traffic and identify impact.