Oriel Website Redesign

//Website redesign for an anti-ad blocking startup

Role: UX/UI Designer. Collaborated with the Tech Lead.

Oriel provides a platform dedicated to publishers who wish to reengage ad-blocking audiences. Their service needed a new website design to better represent the ingenious features and benefits to publishers and encourage them to try out and be convinced by the innovative platform.

Steps

1 - Gathered business requirements

Oriel’s new website had a simple goal: better dive into the benefits of using their platform and better representing their features in a more visual way, while adjusting the website design for a more “tech” feeling. Oriel had already done their user research and we knew that their clients are large publishers confronted with a loss of ad revenue, on which many rely to continue operations, due to their readers’ increased use of ad-blockers. Oriel offered several tools within their platform that tackled the problem and it was crucial that the visitors would quickly learn the value of their tools.

2 - Ideation - created the wireframes and design

I created wireframes and user flows and after some feedback sessions, I started working on the desktop design and the illustrations - after other feedback sessions, we had a desktop version of the design with custom illustrations ready to be tested.

Front page wireframe

3 - Tested the design with first time users

It’s not exactly easy to convince CEOs of publications to take part in testing sessions, so I asked for the help of a few journalists I knew and asked them to click through an InVision prototype of the desktop version as if they just landed on the website after searching on Google “how to block ad-blockers on my site”. Most of them scrolled the entire front page, tried to get the report and were asking questions about the features before realizing there’s a Features page. They were asked to click on the pages they haven’t visited and give their opinion on them. According to their feedback, I made changes, went through another round of internal feedback and we had our desktop and mobile website versions ready to go.

4 - Prepared the design for development

With everything set and approved, I uploaded the designs, svg icons, illustrations, interactions and guides to Google Drive for Oriel’s development team. They had started the implementation, but stopped after business priorities shifted and the design has not yet been implemented.

One feature's page

oriel.io