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
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.
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
