The Hotel Partners

Responsive Website designed and implemented for the companies in the Hospitality Industry

Project Details

 

Challenge:

The Hotel Partners Agency is a sales, marketing and support firm which is hyperfocused on manufacturer’s representation in the Hospitality Industry. 

A newly founded company needed a website to quickly show the potential partners who they are and what they offer. As the majority of startups, they were experiencing a shortage of time and resources. They've asked me if can make not only the UX/UI design, but bring it "live".  Without having web development skills, I've said: "I'll do my best!"


Company: The Hotel Partners

Role: UX/UI Design, Web Design + Hosting Connection

Web Design: Dina Korkmazova via Launchpad by Anima

Contribution

High-Fidelity Mockups

Prototyping

Usability Testing

Web Design

QA

Tools Used

Pen and Paper 

Sketch

Launchpad by Anima

the_hotel_partners_preview
Project Requirements

Being designed for a company just entering the market, this website had to show it's visitors ( both potential clients and manufacturers) who they are, what services do they offer, quick reasoning for why they are a good choice, links to existing partners and, of course, all the contact information- easy accessible. No need to mention that the website should be visually appealing ( as it offers luxury products to hotels), and responsive. 

Design, implementation, and connecting to the company web address- in under 2 weeks.

Process

If designing a landing page was not such a big challenge at that point, but making it "live" without enough experience in coding-was.

Looking for solutions, I thought of a tool, offered as a plugin to Sketch.

"Export responsive websites directly from Sketch. No need to code. 
Simply design and get your HTML & CSS ready to publish."

That was exactly what I needed, as there was no need for the back-end development for this project. 

launchpad_steps.png
UX/UI Design

 

Being provided with a logo, website copy, and the names of existing partners, I've sketched the layout of the site- catchy header, company description, how they can be useful to their clients, trust elements, call to action buttons, and the contact information on the top and the bottom of the page.

The color scheme was selected based on the logo colors- the website had to be elegant and bright at the same time.

Responsiveness of the symbols created in Sketch allowed me for making 3 basic variations of the layout- mobile, tablet, and desktop.

The current version of the website is available on thehotelpartners.com

Result
Web Design

 

After the concept mockups were approved by the client, I've started preparing them to convert into the fully functional website using Launchpad plugin- pins, stacks, and padding was applied to the existing symbols. When it came to the breakpoints, I've faced the unpleasant situation- those 3 designs I've prepared ( mobile, tablet, and desktop) were not enough to give that smooth transition on resizing the screen, that I was looking for. Some of the elements were not always visible, pictures tended to overlap text, picture gallery was not resizing correctly because of the masks, I've used. So, I ended up setting 7 breakpoints, instead of three. But this allowed me to cover all the screen sizes- from HD 1920px, till smallest mobile size- 320 px. 

The last thing to do was to connect it to the domain and run the testing across different devises and OS. Some minor adjustments and the project was complete.

Full hi-fi mockup is available on Sketch Cloud.
Artboards

© 2019 by Dina Korkmazova