Madame X
Product: Responsive Website
Duration: 1 month
Role: UX Designer
Purpose: Redesign the website of a local bar to improve the responsiveness and information architecture.
Key Focus Areas:
User Experience Design
Responsive Design
Project Overview: Madame X is a local bar that has an outdated site with a poor mobile experience. This project was intended to redesign the website and improve the overall user experience.
Background
Madame X is a local bar in the West Village of New York. It brands it self as the “sexiest” bar in New York offering $15 dollar cocktails, DJ nights, and an event space for all to rent and host their own party. While Madame X has recently received a renovation, the website has not received the same attention. Their current responsive website is in need of an updated look and feel to make key information easier to find, while also improving the mobile experience.
Goal: To improve the responsiveness of Madame X’s desktop and mobile experience and enable patrons to find the information they are looking for, while also modernizing the brand of the website.
Research
To conduct my research, I conducted primary and secondary research to understand my potential users
Primary Research: Virtual Interviews (3 interviewees)
Secondary Research: Competitive Analysis (5 vendors)
Key Takeaways
100%
Interviewees stated that they are looking for a menu with prior to dining or drinking at an establishment
100%
Interviewees stated photos are the number one thing to help convince them to go to an establishment
100%
Interviewees mentioned phones are their primary device to research bars and restaurants
Revise
After conducting my research I was able to identify what parts of Madame X’s should be prioritized for potential patrons. To improve the user experience, I began by updating the sitemap to reorganize the information to make key information the most accessible.
Current Site Map
A lot of the information on the current website had several pages and a lot of duplicative content
Proposed Future Site Map
The updated site has a lot of the useless and duplicative content removed and reduce to pages with content that is essential to a potential patron.
Updated Site: The website will allow patrons to discover Madame X’s drink menu and book events at their venue .
Design
After defining scope of the project and leveraging the feedback from the user interviews, I conducted multiple rounds of design starting from low to high fidelity with rounds of user testing in between iterations.
Low Fidelity
My design phase started with low fidelity wireframes of key screens I wanted to use for my prototype on mobile and desktop. After developing low fidelity wireframes, I conducting some quick user testing to gather thoughts on the overall usability.
High Fidelity
The feedback from my low fidelity wireframes allowed me to develop the high fidelity wireframes with a clear direction.
Home Page
Drinks Page
Upcoming Events
Event Inquiries
Branding
The branding for Madame X is essentially the same, however, I really strived to clean up the current look and feel to make its more sleek. The same colors were used, but new fonts were selected and the over all visual noise was reduced.
Old Page
New Page
Testing
After completing my high-fidelity designs, I was able to develop a prototype to test certain user flows that I believed were key to users. I conducted user testing with the flows below to validate if the flows and UI of Madame X were easily usable.
Feedback & Results:
100% were able to find a specific cocktail off of the Speciality Cocktail menu
100% of testers were able to successfully submit an event inquiries
1/3 testers wanted to see some drinks directly on the home page, instead of having to get all the way to the home page
Old Page
New Page
Final Reflections
Key Takeaways
Identify Key Content: Depending on the user persona, they will have a different perspective on what information is the most important to convey/find, however each perspective is important.
Imagery is key: Users have made is very clear that photos are the number one thing they want to see as they are researching a restaurant or bar.
Lessons Learned
Site Map v. Information Architecture: Understanding the difference between a site map that identifies where information exist versus a information architecture that shows where data exist and moves on the backend.
Consistency is key: While designing I needed to resist the urge to try out varying components on the same page. Ultimately the design looked better when I followed similar design patterns across pages.
Next Steps
Work with Madame X management to see if the new look and feel is of interest to them!