Case Study: Eros UI/UX Redesign

Eros Dating Site Redesign Preview

Introduction

Sometimes the first version of a product might not meet your expectations. Actually, most times it doesn’t just do it for you. The great advantage of this is that the idea is now materialised and the next step is improvement. Which is why I was excited when I was approached by my clients to redesign Eros, a dating site based in Nigeria. They had built their first version based on their initial research and needed it to look presentable and functional to their target audience, single people in Nigeria looking for love and relationships.

Process

I looked through the first version of Eros and the first thing that stuck out was the lengthy onboarding process. From a user’s point of view, I can imagine trying to join a dating site and seeing so many forms. It’s overwhelming and tedious. Meeting the love of your life shouldn’t lead to scrutinising background checks.

For an onboarding process, this was just too much! And this was just one sub-section of a section…

Asides that, I noticed there were little visual elements to make Eros attractive or even communicate what the site is meant for. So I had a discussion with them about a complete redesign of the platform, which meant an alternate approach to the interface and experience. Thankfully, they were open to the idea.

My approach to the onboarding experience was simple enough. I wanted irrelevant fields gone from the forms and focused on what was needed to onboard a user to Eros. Fields such as body type, religious/political beliefs, and occupation were not relevant because again, I don’t think anyone would be comfortable with those kinds of background checks. I also had to redesign the main page. The first version didn’t have the modern look for dating sites, which are meant to be inviting and prioritise meeting people. I adjusted the information architecture, arranging the content according to what was necessary and accessible.

First version of the Eros website. Visual elements missing and some sections hadn’t been fleshed out.

The next step was to create a small design library for components to maintain consistency across the board.

I made a typography hierarchy, using Montserrat as the typeface. I choose Montserrat for its modern and stylish look which also passes the readability test.

Eros typography hierarchy. In a parallel universe, my last name would be Sir Montserrat.

I chose a colour scheme that matches the brand identity. I chose a shade between purple and pink that will catch a user’s attention.

Colour palette redesigned after different iterations. Clients wanted colours that stood out yet stayed on brand

I also created input fields, dropdown menus, checkboxes, and radio buttons for forms.

Input fields and text area boxes for forms. They are presented in their different states depending on user activity.

Dropdown menus, checkboxes, and radio buttons. They are presented in their different states depending on user activity.

My final process was to get the visual elements done. Using the iconography library Radius Design System, I was able to set up the right icons needed for the platform. I then used my illustration skills to create images for different states and the homepage.

Iconography from Radius Design System

Outcome

After weeks of iterations, re-iterations, and re-re-iterations based on the clients’ feedback and communicating with their in-house developers, I got the final (re)designs done! Here are comparisons between the first version and redesigns.

First version of the onboarding process

Redesigned version of the Eros onboarding process

Comparison between first and redesigned versions of the Matches page and profile views. (From top to bottom: first version of Matches page, redesigned version, and profile views)

Comparison between empty state for Matches page. (From top to bottom: first and redesigned versions of empty state for Matches page)

New Match Alert! Alert window when Eros users find a match.

Preview of the Messages page. Interactions between Eros users is what makes the connections happen.

Previews of other redesigns made on the Eros website including the Search bar, Settings and Notifications pages. Users should also be able to report or block users who violate privacy policies.

Illustration for the landing page. Photos from Icons8

Empty state illustrations for Messages, Matches, and Interests.

Conclusion

Having creative freedom on this project gave me the opportunity to explore different ways to make a product that not only has a great user interface but also has a great user experience. Thinking about how the Eros members will navigate the site and potentially meet the love of their lives was my major focus and helped me understand the importance of crafting good experiences. I also learnt about how important design libraries and systems are and how flexible they can be when changes need to be made. Working on this alone also built my confidence to take on larger projects though it wouldn’t hurt to work with other people. I think it was Hydra that said two heads are better than one. Ok, I’m not sure about that but I think my point is understood.