User Interface Design
Gayborhood provides resources for the LGBTQ community and their welcoming businesses. For both the Gayborhood website and mobile apps, they needed to revamp their interface and improve the user experience. The two main challenges in this project included improving the search and discovery and bringing the interactions and touchpoints up-to-date.
My first experience with Gayborhood.com brought back vintage Yahoo! vibes with a ton of links, banners, and ads. There were a lot of choices but where would one start? Using the old search feature did not help either as there were many options and filters once you landed on the search results page. I looked at the analytics of the current site to see where visitors were going and started a competitive analysis of what other popular sites were doing to solve their discovery problems.
Observing what sites like Yelp, Compass, Airbnb, TripAdvisor and others were doing, I created some quick wireframes based off each of these sites to find common touchpoints on the homepage. A recurring theme that most of the companies were doing was adding a big search bar in the middle of the hero section with a few category and featured listing links. Gayborhood makes money through banner ads and business paying to be sponsored or featured on the homepage. Even though we didn't get a chance to build a proper ad montization tool (or any montization tool at the rate), there was still an opportunity to increase revenue and make the pages easier to navigate.
Improving the navigation required looking at the current sitemap and seeing if there were any ways to reduce the number of categories. To a new visitor (and us as well) a lot of the names looked repetitive. For example, what is the difference between the "Food and Dining", "Food and Drink", and "Restaurant & Dining" categories? Not much of a difference really. So after discovering this and talking to the team, we were able to bring the 22 categories down to 6 main categories.
I took the same approach using the competitive analysis methodology for the remaining pages of the site looking at what others were doing adding the business owners and user feedback of what they thought were missing on the pages. I asked questions like, what was important for their business that we could provide on the business pages? Which layouts were the easiest to navigate?
I used a lot of the mobile designs from the website for the iOS & Android app. But for the rest of the screens, I created wires and ultimately components for the UI library. Though we wanted to keep both the mobile and app experience similar, we wanted visitors to download app to get the entire Gaybordhood experience. Overall, designing a modern and clearn interface and improving the information architecture increased both visitor engagement and the number of businesses added to the platform.