UX/UI Responsive Web Design: At the Waldorf — A Community Matter
Background
The Waldorf Hotel has been a landmark of Vancouver’s heritage for over 60+ years. Apart of it’s rich history has been attributed to the buildings multi-venue structure and its ability to give its customers a unique experience. One of the stand-alone features of The Waldorf Hotel is its strong Polynesian influences outlined and expressed through the decor of the interior design. Many people may not know this, but The Tiki Bar at the Waldorf Hotel that opened with the Hotel was the first Tiki Bar to open in all of Canada. The multi complex building consist of 3 night life venues, Tiki Bar, The Hideaway, and Tabu, all of which fall under the umbrella of the name “At the Waldorf”.
With its thriving history, the Waldorf hotel soon hit a bit of a dry spell with the shift of the generations. As time went on and troubles at the venue grew, the owners decided to sell the building in 2013. They directly took it to the press to tell them that the venue was coming to the end of an era. However, due to public outcry, the community was able to save the venue from being demolished. Soon after, the Hotel received a new ownership and the mission to rebuild the Waldorf’s reputation had began.
Our client, Fiona Samson, who was the director of marketing and manager of guest relations at the Waldorf came to us with a mission to revitalize the venues image to target a younger demographic while adhering to the rich history and familiarity of what the Waldorf was famous for. After initial interview with her we had to create a responsive web design (Mobile + Desktop) to help modernize the experience of “At the Waldorf”. The project goals that were introduced by the client were:
- To create aesthetic appeal that reflects both online and offline presence of “At the Waldorf”
- To differentiate from other tiki/cocktail venues in the city by highlighting additional services (large party/corporate bookings, concerts, live shows, hotel bookings, filming and photoshoots etc)
- To encourage community involvement in East Van while still being able to reach monthly target goals and budget
- To pay homage to the history of the Waldorf by highlighting the different stories told by the community
We began our discovery process by conducting a User Interface Gut test with our client. This tool helps us get a better understanding of how the layout of the site will be. We begin by showing the client 20 different screens while having them rate each screen on a basis of 1–6 with 6 being the highest value of the scoring system. This was key to understanding what our business goal was for the look and layout of the web design. After identifying the layout and look we wanted to work with, it was our job to move onto discovering what our user goals were.
In our efforts to discover our user’s motivations and frustrations, we conducted 2 surveys that generated 60 responses, 8 interviews, and a contextual inquiry. One of the surveys were delivered to locals in an effort to discover how they felt and experienced “At the Waldorf” and another had been delivered to an international scale to see how individuals interact with venue websites. Some of the key findings we had encountered from our research were:
How do you usually purchase tickets for events?
We discovered that our research demographic would usually purchase tickets through the companies website or through Facebook. This informed us about how we needed to structure our events page to allow users to make their way to a third party ticketing website to complete transactions. We also needed to show data to our client leading to possible conducting social media advertisements to generate leads.
Of the given venue names, which would you be drawn to go to?
The relevance of this question helped us structure how we needed to display the contents of how the titles were set displaying each venue name. Surprisingly we found out that many of our respondents didn’t choose to answer for “At the Waldorf”. With a confusing name this was something we knew our client needed to see.
We also visited the venue to see what the space was like and to see how the regulars felt about the venue. We discovered a lot after visiting the venue. Locals who went to “At the Waldorf” were saying thing such as “We didn’t know that it was open.” and “I enjoy the music because of how niche the audience is.” when we asked about how they felt about the venue. Some were even staying at the Hotel. Once we had collected all of the data we needed to proceed, we moved on to the analysis and planning phase.
After gathered all of the data we had collected, we compiled the information into an affinity diagram. An affinity diagram is a tool that gathers large amounts of qualitative data and groups them into their natural relationships or deeper level themes. The objective is to identify consistencies and patterns between all the data/ and develop key insights.
Some of the insights we found by creating an affinity diagram were:
- The Main attendees who go to “At the Waldorf” range from the mid 20’s to 40's
- Our user group enjoys the different atmosphere, drinks, decor, and the music played at “At the Waldorf.
- Our user’s preferred hearing about events through Facebook, word of mouth, or on Instagram.
- The demographical archetypes involved with the venue were hipsters, niche-hunters, as well as notable nostalgics.
From the data that we had gathered through our user research, we conducted an affinity diagram that helped us both identify a persona for our project, a design inception to give us a design direction, as well as a feature prioritization. I would like to introduce Nina Reyes, a semi-fictional persona developed from real user data.
Using the data that we had obtained from our clients gut test and interview, as well as insights from our survey, we were able to craft a design inception sheet, a design tool used to identify the “Why?” of the project. This allows designers to reach an emotional stand point in identifying the overall look and feel of the website. The “Why?” for our project was to re-establish the existing brand/reputation of “At the Waldorf” but also pave a way for the younger demographic.
Along with understanding the “Why?”, we were able to identify adjectives that would influence the designs shape, feel, mood, movement, colour, as well as space.
- Adjectives: Angular, Structured, Exaggerated, and Trendy
- Colours: Cool Tones, Blue, Green, Pinks, and Saturated Colours.
These specific qualities and words would build the basis of what was going to help build the design of the site and how I was going to build my design direction for the client.
After identifying our user persona, and our “Why?” we decided to look at our survey results to identify what our must have features were going to be. This was going to influence the choices of how we were going to place menu items across the entire website. We knew that we had to make Location prominent to our users as well as events and hours of the venue. Although the other features that received lesser responses were necessary, we placed in our nice to haves as focal points to place after we solidified where we were going to have the main responses displayed on the site.
We also conducted 5 card sorting sessions as a way to see what our user’s had to say about correlating each title into a navigation bar. This techniques involves us writing down all of the titles of the pages on to cards that we present to our users and have them sort out the options with the objective of creating a navigation for the website.
This is a visual representation of what we found from conducting a card sort.
Once we had identified the “Why?”, we moved on to creating 2 different design directions.
Art Direction #1: Blend the Trends
This design direction uses the youthfulness in neons and the pop of saturated colours through a dim backdrop. The font choice of Bebas Neue was used to resemble the structure of the prominent Tiki figure as well as the narrow feel of the venue. Using adjectives such as un expected, geometric, and trendy were used in the creation of this art direction.
Art Direction #2: Style in the Breeze
This direction focused on the vice city feel of highly saturated colouring. the focus was on using a lighter background with subtle accents. Whites with a font choice of Avenir Next were also used to balance the colouring and to give a modern twist to the platform. This gave direction a fresh summer look.
Our client was essentially pleased with the outcomes we had produced after showing her the directions. She liked the structure and pop of direction #1, but really also liked the font choice of direction #2. From the feedback we received from our client, we decided to merge the two designs together.
Chosen Direction: Blend the Trends
The Fonts:
We used Bebas Neue as our header font to capture the attention of our users and Avenir Next as the body font to ease out the legibility of long copies of information. After we established a design direction, we moved to creating a fresh new branding for “At the Waldorf”.
To blend the conceptual inspiration of neon into the art direction, I decided to take the branding into a whole new direction. I wanted to create something that caught the eye of its viewer as well as something that could reflect the night life feel. The final iteration was the new logo displayed above. This was also a logo that we introduced to our client who was pleased with the results.
We then moved on to doing a design studio session with all of the team members. This a tool we use to practice inclusive design, where we get every team member to design their mental model of what that specific screen would look like as well as explaining what they came up with.
- In the first step, we choose a screen to work on. We list out the problems of that screen and the changes to be made.
- We then time box for 2 minutes and begin sketching our ideas
- In the third step, we all present our ideas.
- As a fourth step, we then time box our open discussion on our designs and the reasons we made them for a further 5 mins. Everyone is given the opportunity to present & discuss their designs.
This essentially helps us develop a paper prototype through design and critical thinking.
We conducted 10 low fidelity tests with various users in our community, 5 mid-fidelity test with 1 iteration creating a total of 10 mid fi test, as well as conducting a total of 4 high fidelity test once we had a mobile version and a desktop version prepared.
The 3 main changes we made through our entire testing process were:
- Changes to the Home Page
- Restructuring the Venue Page
- Remodelling the About Us Page
Home Page
On the paper sketch we had a carousel as well as 3 clickable icons for the rooms. This was too busy and confusing for users so we ended up setting the venue image as the backdrop in the mid fi screen. When you click on icons of the room they change the backdrop.
Venue Page
One of the things we noticed through our user journey maps was that it took a while for people to realize that the Waldorf was a multi venue establishment.
This really sets it apart from many of the clubs out there and so its important to highlight the venues. There were great photos on the site but the 3 rooms weren’t really being showcased.This page would showcase each room and provide a gallery for people who are curious and who may want to book private events.
About Us Page
This about page explains the history behind the Waldorf. It was clear through our research that people didn’t know about the history. This was really cool because not a lot of clubs in Vancouver can say they’ve kept the same authentic decor they’ve had for 60 years.
Going back to a must have in the website stated by our client, we needed to display a section dedicated to the history, stories and press of “At the Waldorf”. The history part contains a timeline that follows the Waldorf through the decades. The stories section is a feature where people can share their memories regarding the Waldorf, which also speaks to the community building aspect. Press is a section for the many articles that have been written about the Waldorf, if users want to learn more.
To show how we finalized the restructuring of the contents, we created a new site map based on the changes we had made and all of the decisions made after testing.
This was the first time that I was given the opportunity to handle both the User Experience and the User Interfacing of a client project. The over all product was incredible and the the level that we were able to execute it at after the 3 week sprint we were given is a testament of what you’re able to accomplish while you place you’re self under pressure. This was my last project at RED and after going through the process 2 times over, it makes you feel more relaxed in your decision making. However, during the last project I was handling 2 competitions, and 2 client projects. So although life was hectic at the time, I was able to work with a brilliant team to deliver a product that will hopefully bring the community closer and have more people engaging with the historical “At the Waldorf” venues. Here is a link to our prototypes.
Desktop Prototype:
Mobile Prototype:
