Case Study: Eros UI/UX Redesign

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.

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.

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.

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.

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

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.

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
David Alagoa

David Alagoa

In one sentence: I write for the sake of writing.