High-Fidelity UI Design

Mister C Toronto
Website Redesign & Development
Overview
Mister C exudes the decadence and sophistication of the quintessential hotel lounge. Moody hues and artistic accents set the tone for an intimate evening by the fireplace, complemented by impeccable food, cocktails and service.
After internally evaluating the performance of our INK websites, I was tasked with the redesign & development of the Mister C website to improve its user experience and streamline backend processes for booking.
Timeline: 1 Month
Tools: Figma, Visual Studio Code
Technology Stack: HTML5, Bootstrap 5, SASS, Javascript
Team: Liam Keery (Design Lead & Developer), Mike Henry (Marketing Manager)
Stakeholder Interviews
During the discovery phase of my project, I conducted stakeholder interviews in order to get a better understanding of the problem with the current website, and what can be improved in the redesign. I opted to use stakeholder interviews as part of my initial research for a few reasons:
Floor Managers & Bar Staff have frontline interaction with guests & understand their needs & habits
Marketing Managers understand the brand, tone, & voice for all communications
I also analyzed user flow behaviour on Google Analytics to determine what content was most engaging to users and where drop-offs were occurring.
After conducting initial research, I was able to arrive at the following conclusions:
There was a lack of overall structure or layout in the original site. This caused confusion when navigating & made finding important information difficult.
Loading times & overall site latency were extremely poor. A longer period of waiting for the page to load most likely attributed to a high bounce rate, if the user was able to even reach the page before exiting prematurely. There was a ~95% drop-off rate before 1st interaction on the homepage.
In comparison to its competitors, the website had very little brand identity & uniqueness. Mister C is a luxury, upscale brand with a high net-worth clientele and the current website did not speak to that audience.
There was opportunity to automate our backend booking process. Setting up a new flow internally for booking requests within the new website was important to management since the process was fairly manual.
Viewing the menu & information about weekly programming was important to the end-user. The behavioural flows within Google Analytics uncovered a significant portion of pageviews were being allocated to the menu page and an individual programming page on the original site.

UI Design
Mister C is positioned as the quintessential hotel lounge, and it was important to communicate that visually in the redesign. To accomplish this, we opted for a single-page scroll website with curated sections to accurately portray the venue and its experience.
Mister C is one of few cocktail bars in Toronto that is open six nights a week. This was an important marketing aspect to include in the site, so we created a custom panel interaction that provides a glimpse into what one can expect each night. In addition, we also added an "Explore The Ambience" feature which offers six unique Spotify playlists, each tailored with specific songs that represent the sounds of each night.
Finally, we implemented an improved booking form that connected to our newsletter backend with automated acknowledgement replies to streamline the entire process, and provide customers with the comfort that they are being looked after.











































