Matjaž Muhič
UX/UI Designer
Made with

Designing The New Viberate Homepage

A small step forward.

Introduction

This project was created in-house while working at Viberate d.o.o. It started as a personal project during some downtime between Christmas Holidays. It ended surpassing the small one week project it was meant to be.

The whole point of this project was to increase engagement and user retention on the homepage, as well as to increase the value for each user with personalized recommendations.

You can visit the site here



"Hey, I've got a quick
project for you"

- my Boss

The final wireframe before proceeding to the visual design stage
The final wireframe before proceeding to the visual design stage

Wireframes

I begin all my project with hand-drawn wireframes, which I then translate into digital wireframes using Sketch for easier presentation. 

The pen & paper technique helps to quickly generate ideas and explore my options. This is why I normally stick to low fidelity wireframes, as I don't see any benefits in increased fidelity at this stage.

After creating my first wireframe a discussion took place with my co-workers on how to improve the layout. All in all, as this was supposed to be a one week project, about 4 iterations were made to the wireframes before proceeding to the visual design.

Usability Testing

Before the visual design was put in developers hands one last usability check was needed. This was actually the first time I did this, and I have to say it was one of the most eye-opening experiences as a designer. Actually seeing people using your product in front of you. Mind = Blown.

What was tested

We tested high fidelity designs with the help of inVision, most of the testing was focused on discovery and user understanding of the new design. 

All in all 6 random testers were selected from a neighboring company, which did not exactly reflect our user base, but for the purpose of finding crucial usability mistakes, this was okay given the small amount of time.

Tasks

Users were given a couple of specific tasks

  1. Log into account
  2. Select a video and play it
  3. Rate an artist
  4. Promote artist
  5. Review the page: What stands out?

Conclusion

It was discovered through testing that some elements are not as obvious to the users as they were to me, thus some drastic changes were made. This reflected most in the complete redesign of the artist spotlight section.

Final Homepage Redesign
Final Homepage Redesign

UI Design

After the user tests were finalized, I applied my finding to the new design (on the left). The visuals were all based on the previous version of Viberate, so I was not allowed to experiment too much.

This means I followed a dark design style using the existing brand colors.

I'm really proud of how the artist spotlight section turned out both visually and functionally. This enables the users to find a new artist every 60 seconds. These artists are fed in from the Viberate database and include artists based on users taste, which is determined at the signup stage.


Designing The New Viberate Homepage

Final words

All things considered, this was a fun project. I really enjoyed the user testing part, since this was the first time I did anything like it. It really opened my eyes and made me realize how often are we as designers blinded by our expertise.

I learned that it's never safe to assume you know your users and that it's my job to actually get to know them.