Keeping it weird…and usable.

UX/UI Responsive Web Design for venue House of Yes. 2018.

UX/UI Responsive Web Design for venue House of Yes. 2018.

House of Yes approached Mango Concept with a clear problem: their website was a mess. Years of band-aiding had left their website a functional disaster, with lacking responsiveness, an undefined sitemap, and a load of readability issues. It was such a problem that the average visitor learned to not even bother, and would instead find event details through one of their 3rd party networks.

House of Yes boasts a vibrant culture, but they also aim for inclusion at every stop. The difficulty their new and returning visitors were having with the website was costing them the chance to effectively grow and nurture their community. As the lead for this project, I worked with them to redefine their vision and bring it online.

hoy-outside

Exterior of House of Yes. The venue is a safe space of expression, open to saying yes to anything with consent. 

Discover

Research and insight into the problem

House of Yes suffered from a bevy of usability issues, but I wanted to get more specific than that. I clarified the pain points of the site through a Heuristic Evaluation, followed by general user testing to accomplish simple goals such as “find an upcoming concert and buy a ticket”. The Heuristic Evaluation brought to light the more technical problems we were facing, but also shed some light on areas we may actually be able to keep, turning off our instant critique of loud graphics. The user testing confirmed my suspicions of difficulty accomplishing tasks, but also provided some insight on how best to arrange these elements in a hierarchy that the average user expects.

Stepping aside, I pulled together a list of competitors to examine the web presence of a number of different clubs, venues, and similar sex-positive spaces. I took a deep dive into the pleasure points for inspiration, and equally the pain points for areas of opportunity.

Define

Synthesis of research and identifying focus areas

The competition for HoY had smooth, sleek sites with great architecture for finding what I wanted in test scenarios. All that they really lacked were truly unique elements. The stylish hero videos, the minimal aesthetics, and the general exclusiveness vibes we saw from many competitors didn’t match HoY’s mission for unique personality and inclusiveness. For this mission, I found focus in conveying HoY’s weird and wonderful aesthetic.

hoy-inside-party

Interior. Believe it or not, this is an average night. Wild and weird is vital to the House of Yes image.

Design

Ideation and brainstorming solutions

Being weird was a great start, but I couldn’t forget the users’ needs. They had to find quick, easy access to events and other venue offerings. Plus, HoY is part community, and I wanted users to have reason to return to their digital playground just like they do to their one in Bushwick.

When discussing with HoY about their needed pages, I learned that they take hundreds of photos at each of their events, and their quality was nothing short of great. I capitalized on this content opportunity to create a page for the visitors: a photo blog for the goal of reliving your last memorable night and (hopefully) finding a picture of you from the event.

hoy-gallery

HoY Gallery. Here visitors can relive memories and find a few canding images of them and their friends. 

Initial sketches were focused on structure and areas for visual flair, having considered all required content and then working towards style. With my wireframes quickly approved, I moved into visual design, when I paired with HoY’s frequent designer to create loud, vibrant animations and assets for predesignated areas. These really brought the work to life. With final designs approved, we looked ahead to development.

hoy-specs

Original specs for the HoY homepage, both desktop and mobile, starting with the aesthetic and pushing immediately into the value proposition: events.

Deliver

Finalizing the solution and overseeing development

As a PM, and not just the designer, I now had to switch gears and focus on overseeing my developer and acting as the contact between them and the client. We set a deadline together and began our process. I monitored along the way, providing any needed design updates or product decisions. After some QA and stakeholder testing, we pushed it live, and the new House of Yes website lives on: weird and wonderful.

hoy-animation

The hero animation, bringing their bright, delightfully suggestive image to their digital presence. 

Retrospective

Looking back and looking ahead

My outline details the meat of the process, but there were plenty of other scraps along the way. Dealing with a client in another industry, one with hours that hardly overlap with your own (more than a few 2AM emails), can be difficult with pushing past deadlines and finding time for meetings. I know I learned a lot about the importance of working to meet your client’s needs and assisting them to the point that they won’t feel encumbered by the process. They were thankfully wonderful people to work with, and helped improved my process moving forward. I personally loved working on this project, as it was highly creative, and linked to my passion for music.

House of Yes

Team credits

Designer & PM — Zach Dorsett
Developer — Vic Lam
Developer — Paris Mastorakos
Assets — Hannah MacDonald

See the website at www.houseofyes.com

Copyright © 2019 Zach Dorsett