Responsive design has been around for quite some time now. We started working on it thoroughly in early 2015 after we gained a number of requests from our customers and partners, and after it became clear that the search engines favourite websites that work on all devices.
First of all, we decided to focus on the most important parts of a dating website that required our attention. This is the list that we came up with:
1. Site navigation.
2. Search form and search results page.
3. Personal profile.
1) This is how we approached navigation.
The main menu — everything that has to do with the search options, site activities and communication — opens in the panel that slides out from the left side when you click the hamburger icon on the top left. When you no longer need it, you can hide the menu panel.
This panel shows how much money a user has on their internal account with the site and includes a one-click way to go to the ‘Replenish account’ page.
The left menu also shows whether a person has any active and running paid services on the site.
There is another menu in the desktop version that deals with user’s personal account and settings, user’s profile and the home page. It holds a customary position on the right-hand side of the site interface. All these menu items are repeated in the left menu so there is never any trouble accessing different site sections.
On smaller viewports, the right-hand menu disappears to be replaced with the search button. Settings, account and the logout option are accessible through the left-hand menu.
When one visits a dating website on a mobile device, scrolling may be tiresome. We have introduced the contextual menu on top of the pages that collects headers from all the blocks on any given page and lets you scroll through to the selected block in a fast and easy way. The menu is a slider that you can drag and tap on with a mouse or a finger.
When you start scrolling down, the header hides to give room to the content. When you start scrolling back up, it appears again along with the ‘Back to top’ button that lets you get to the top of the page in just one click.
We tested the sketches in a focus group comprised of our clients. The ideas received a positive response of almost 80%.
2) Our next step was to improve the one thing a dating site cannot do without — a way to browse through the site members and preview their photos and short bios. This is why we wanted to pay close attention to the design of the search results page.
We decided to go mobile first and begin with the phone screens. Before we could start positioning elements on the screen, we needed to compile a list of all the elements that will be used on the page. This is the list we came up with:
– Search form: gender, age, location.
– Switcher for the view mode from Gallery to List and back.
– List of members. For the gallery view: photo, name, age, location. For the list view: photo, name, age, location, rating, partner info (who the person is looking to meet), intro message, activity button.
– List sorting options: descending, ascending; pagination.
Below is one of the first outlines. On the very top comes the area with the search parameters, the filter:
The shortcomings become visible immediately:
– The parameters area may not fit into the screen if more parameters are added later, or if they are given longer names, for instance, after localisation.
– The parameters area is above the headline which disrupts the page hierarchy. What we can do here is move the parameters below the headline, but the first problem still persists.
We can assume that a person would not be changing the search parameters too often. Hence we can display them on demand. At the same time parameters should be easy to notice and access. We put all parameters into the popup block that appears upon click on the hamburger menu icon across from the headline:
After a heated discussion, we came up with the idea that the purpose of this menu might not be immediately clear to the site users. Turning it into a button with an explanatory text might make sense. Yes, it would take more space but it would be a bulletproof alternative in terms of visibility. We’d be able to get back to this button again in the future:
List view is for people who like to see a lot of information at once and who do not care about the big photos. The list view also lets users do something on the spot like add someone to friends (request friendship), add them to the list of favourites, send a message, and do other actions without having to go to the person’s profile page:
Then it was time to increase the screen size to fit tablet-size devices. To speed up the process we used placeholders. To the left, there was now space for the search form. To the right, it appeared best to display two photos in a row in the gallery view. Above the list we put some extra information about the search: a total number of users found, a total number of pages and the number of the page the user is currently on:
The list view remains roughly the same as in the mobile version, it only gets wider:
Next came the desktop screen.
Here we needed to examine in more detail the content of the panels. We also wanted to allocate space for standard-sized banners:
In the list view, we put all information in one row. If a site member had not posted an intro message nor had any rating yet, it would still be ok, and we could save up on space a little:
This is an alternative list view. It might look good on mobile devices thanks to individual backgrounds of every user block, but because every block height is so small, there are too many horizontal lines that create visual noise. That is why we went with the previous layout.
And this is what the result looked like. For clarity, we put all the screens/sizes together.
Then it was time for developers to start their part of the work. But it did not put an end to the designer’s involvement. The designer should always keep an eye on the process of implementing the design into HTML pages. We discuss any questions and issues with the team members.
We’re still midway in improving the search page. Not everything turned out as expected, there is a lot to be done yet, but we feel we’re going in the right direction.
The focus group estimated the changes positively as well, 89% of the people liked the changes.
3) We would also like to show you how a site member’s profile in the Dating Pro script followed the major design trends.
The ‘liquid’ layout dating back just 7-9 years may remind us of today’s adaptive websites; however, it could only squeeze up to a certain point. After that, you were supposed to use the horizontal scrollbar.
Next came the rectangular-shaped era of what we internally like to call metro-style. All elements had a fixed position on the page regardless of its width.
When we switched to the new platform back in 2014, we decided to keep that same look because it was clean and neat.
The new mobile-friendly theme required the next round of changes. We called the new theme ‘flatty’ which was a pet name for ‘flat’. It was Bootstrap based and partly inspired by Twitter.
This is the profile view that is still relevant for the Dating Pro software.
As with the search page, we are not stopping here and will continue the work to make the profile page more informative and usable.
We received a lot of comments about the new design, mostly praise, and are always ready to listen to constructive criticism as well. Our customers appreciated it, and we even won the Best Product Design at iDate 2017.
If you have any comments or new ideas on how we can make Dating Pro’s design better, feel free to email us firstname.lastname@example.org or simply come to our live chat.