Summit Hotels & Resorts Website
HEURISTIC EVALUATION / DESIGN GUIDELINES / MOCKUP / PROTOTYPE / TESTING / BUG REPORTING
Summit Hotels & Resorts Website
HEURISTIC EVALUATION / DESIGN GUIDELINES / MOCKUP / PROTOTYPE / TESTING / BUG REPORTING
Project overview
The company
Summit Hotels and Resorts are midscale business and leisure hotels that uplift your spirits at the end of a long day. As its name connotes, Summit Hotels elevates the guest experience to new heights with its personable brand of service, energetic vibe, and the spirited environment - promising Enriching Moments with every stay.
The goal
Redesign the Summit Hotels and Resorts website to increase brand reputation and improve the customer experience.
Research
To start the research, I conducted a Heuristic Evaluation. This evaluation allows us to identify usability issues by following UX design principles. As a designer, we should regard heuristic evaluations as an inexpensive sanity test to easily identify potential problems based on feedback, data and usability principles.
Research findings:
Placing the contact information in this area encourages the user to call in order to book rather than using the booking application.
Description that appear only on mouse hover are inaccessible for users that rely on keyboards to navigate. Let’s be inclusive in website design and ensure that it is accessible via keyboards.
old website before the update
Mockup
Mockups are static, high-fidelity designs used as a representation of a final product.
Design solution based from heuristic evaluation:
Allow the user to select a hotel to limit the options. Placing the menu in standard places makes your site easier to use.
We can highlight the unique selling proposition or the tagline of the hotel in the hero banner area. Why they want to stay in the hotel.
Always keep the information on screen. Do not hide content behind hover. It’s downright neglect of touch-only device users.
https://www.summithotels.ph/
Hand-off Design to Developers
Using Zeplin as a designers I can quickly turn my designs into powerful specs and guidelines while developers can access all the resources they need in a single location.
Developers would have the ability to get the exact CSS or style to put in the website. This will give accurate values of sizes, color palette, padding, margins, position, fonts and download all the reusable components and images.
Zeplin Dashboard
Zeplin Styleguide
Design QA
After the developer upload the website to staging environment, I check every page to make sure that the front-end is same with the design as expected. I also send exact css code to the developer.