Over the last year, I have been working on a new UX design project for GayChat.io with my team. This project was mostly done in-house, but we did collaborate with the client to make sure that our designs were aligned with their goals.
The primary goal of this project was to create a more modern, user-friendly, easy-to-use version of the current web site. The secondary goal was to help improve the conversion rate of users who visit the website through organic search results.
The first step we took was to conduct usability tests. We conducted these tests by having users complete tasks within the current application, then reviewing their behavior and recording how long it took them to accomplish each task.
After doing some research into what other similar applications were doing well and poorly, as well as reading up on behavioral psychology techniques, we decided to use a few different techniques for improving the overall experience of the site:
1. Introducing a “new user” flow and providing guidance (guides) throughout the application, similar to what BBW Fuckbook did for their new lead capture form.
2. Making the signup process more straightforward and informative
3. Improving navigation to increase usability
4. Redesigning the default chat room so that it provides better functionality while still giving users the option to customize their rooms
5. Integrating social media sharing features into all areas of the application
6. Implementing a responsive design to ensure a consistent experience regardless of the device being used
7. Creating a modern, cleaner look and feel across all pages, including the landing page, profile pages, and chat rooms.
Sketching The Redesign
Once we had gathered enough information from our testing sessions, we began sketching out ideas for the site’s redesign. However, before creating any mockups, we wanted to test one last time to see if there were any major changes in performance or behavior that would impact our design decisions.
After completing another round of testing, we moved forward and created a series of wireframes. We ended up using Sketch for the most part because it allows for a lot of flexibility in terms of exporting assets for use in production, as well as the ability to easily share files.
After finishing the wireframes, it was time to start designing! For this project, I focused primarily on the home page and the chat rooms themselves. Both of these are very important parts of the application since they provide the main way for users to interact with the application.
In order to keep the project moving along quickly, I worked with my partner, Alex, to develop a style guide which outlined our color scheme, fonts, and general aesthetic. We also used this document to provide direction to the developers during the development phase.
For the homepage, we decided to show off the core feature of the application by allowing users to search for people based on location and interest. The idea for the rest of the page was to provide quick access to the most common functions while keeping the content minimal and the design clean.
Search Feature Improvements
Although the current application already included a search function, it wasn’t presented in a particularly useful way. We decided to highlight the search bar at the top of the screen and move it down below where the messaging center currently resided. We also decided to change the icons for the various search options so they were more clear and concise.
In addition to making the search features more accessible, we added a couple of buttons below the search bar that allowed users to go directly to a city-specific map or view all locations. These buttons would be helpful for users who prefer to browse local profiles rather than searching.
New Messaging Interface
We also made the messaging interface more streamlined by removing the old notifications panel and combining them with the messages section. Now, when you receive a message, there will be a small indicator on your profile page, and you can also click the button next to your username to see all of your unread messages. There is also an indicator located above the search bars for those who want to quickly see whether someone has messaged them without having to navigate back to the home page.
As we continued to work on the design, we started to realize that there were some issues with the layout of the current chat rooms. In the past, the chat rooms were not only hard to find, but also quite confusing to use. Our goal for the redesign was to make these rooms easier to use and more intuitive.
First, we simplified the menu for the chat rooms. Instead of having a huge list of rooms, we decided to just display the popular rooms on the home page. At the bottom of the page, we added a quick link to take users directly to the signup page if they didn’t know how to get started.
Second, we reorganized the chat rooms so that they displayed in a grid format. Since the chat rooms were previously arranged alphabetically, users would often miss out on seeing some of the more active rooms. By displaying them in a grid format, we could organize the rooms based on popularity.
Lastly, we redesigned the default chat room to be more functional and user friendly. We removed the fixed background image and replaced it with a large header photo. On mobile devices, the header would be cropped to fit the screen, but on larger screens, the user would be able to scroll through the photos and choose one to use for their room.
I’m extremely proud of how everything turned out! I think the new design looks much more modern and user-friendly, and it really helps set the tone for the entire product.