Redesign the Okezone

A process behind the redesign.


The new design of Okezone is live & kicking and I just want to share the process behind Okezone that we’ve been working on 5 months (well, give or take). Which was a great experience to work with everyone that involved (Developers, Audience, BOD, Sales, Marketing and 3rd party developer).

So here we go. First, let me introduce you with the old look of Okezone’s welcome page :

It’s too long to scroll almost like infinite scroll!

We had collecting data of the visitors of Okezone for a while and it really helped us to do design mockups & UX.

Also read an interview from the CEO in Daily Social : Aiming to Build Better Engagement with Users, Okezone Launches a Brand New Design

Level 1. Collecting and share ideas.

Before we present all the design to the BOD, lots of ideas pouring from the designer’s heart and mind. Roy Simangunsong (our CEO) also gave a lot of ideas and suggestions. One important thing that he told that the design must be simple, clean, perfect on functionality and beautiful when meets the eye.

Also, we believe, with good user experience, the visitor will stay on Okezone much longer, visit often and feels comfortable to read the news.
And as for me, as a front-end developer need to brace the design to make it works and good on functionality. “Can you do that?” “Is it possible to implement” “Does it gonna breaks up?” That was some questions that my team need to answer. :D
And as we planned this web need to go adaptive on every devices (except for small devices), we need to think what’s look like on tablet, the glitch that we’ll gonna have and the concern to load the front-end stuff light.

So, here is what the designers come up with. A bold design works. Which was amazed me by its simplicity.

These front page designs iterate so many times and lot of questions, suggestions, what ifs, if only, etc before we show it to the BOD. And yes, they’ve pick number 3 with some revisions to be the front page of Okezone. That’s more iteration! But we were happy.

Wait, how about another channel?

Well mostly the process was the same like the front page. We have a thematic design. If you go to the News, Bola, Sports and Economy, you will see the the theme are just the same. While Techno, Autos, Travel and Food has the big photo and masonry layout. Last but not least, the Lifestyle and Celebrity channel has their own theme too. Here’s some of them.


The design still iterate until the development phase. See the difference at live version.


Level 2. A Front-end Warm Hall

We had the design mockup, and now it’s time to get this work on browser! First, we’re using customized Bootstrap by Twitter and got rid some unuseful code to make it lighter. We decided to use Bootstrap because we think it’s suitable for our design needs. We need to work our own framework in near future. *crossing finger*

As a person who ignore the details early on work, I don’t want to get lost in ‘1px to the left/right/top/bottom’ because it hurts my productivity on early stage of converting the design. Just functionality first, the details can follow later. I meant every word.

A board with a full of post-it to-do list

If you see the yellow color post-it on the HTML section in that photo, then you know it quickly that the design (Okezone front page and all its channel) is currently on HTML progress.

And then we tested in browsers. (Someone asked about Internet Explorer). We don’t support IE 8 and early version of IE 9. You need the very latest version of IE 9 t0 see the Okezone latest design. Why? Why not? Microsoft plans to kill the older version of Internet Explorer anyway. And the visitor who use IE 8 and 9 are so tiny in numbers.

Level 2a. Scrubbing the design on browser before hand it over to developers.

I told you before about the work on details, right? Now it’s time to get scrub by designers. This is the time, when your lead designer can see a 1px difference on 5 feet from your monitor (“…”). We were also iterates more on this level.

Thanks to Google Sheets, the collaborations between designers and front-end developers can’t be more simple and easier. We share file on Dropbox and talk through Hipchat. Oh God, how I love cloud technology.

When i passed this level, I’ve never been more happier when i woke up every morning and when i go to sleep. hahaha.

Level 3. Give it to developers and iterate more!

After the design goes to developer team, we didn’t stop to do iteration of all design. I think we still did the iteration until a week before launch. The victims for example are the navigation, header section and the thematic background.

I almost falling apart with iteration because i thought that we will had a never ending loop. But for a simplicity, I force myself to solve the problem and make us satisfied with the design.

“How can we make this better?” Ask the CEO

We worked everyday to see the ideal of the design. The speed somehow feels like you’re in hyperdrive on Han Solo’s Millennium Falcon but for me it didn’t feel like a job. We’re all excited and in good spirit to make a better design for Okezone. And finally we iterated!

Take it To The Next Level : Continuous Improvement

The end it’s just a beginning. We don’t stop right here. We will keep looking to visitor’s behavior when using Okezone and keep changing.

So, visit Okezone now and #experiencethezone!

Thank you so much for reading. If you like it, please recommend and share ☺
Show your support

Clapping shows how much you appreciated Syarifah Riefandania’s story.