Translating insight into a design

Starting from my user story:

As a busy person, I rarely watching NET TV programs on television, I want no left behind to watch NET TV programs. So that I want to watch NET TV programs through  website.

It can be said that I rarely watch TV, so I stream more often than watching TV shows on Television. NET TV is my favorite TV channel in Indonesia. They always give good shows on Indonesian television. ZULU is a web streaming created by NET TV to display its programs. This is the right step for someone who rarely watches NET TV programs to be able to watch it again on the web streaming service.

But, when I first opened the ZULU are many that make me confused.

The Challenge

As a UI/UX designer, I decided to challenge myself by redesigning the ZULU homepage.

My design process:

  1. Analyze current information architecture
  2. User interview & card sorting
  3. Revise information architecture
  4. Create wireframes &  UI

Current Information Architecture

Information Architecture (IA) is a structuring content of the websites, web and mobile applications. That allows us to understand where we are as users and where the information we want is a relation to our position.

To better understand current IA from ZULU homepage. I mapped out their current content by section in homepage.

current homepage and Information Architecture (IA)

User Interview & Card Sorting

I have interviewed 5 users and analyzed result in sorting based on how many sections that are often selected by users from top to bottom.

I asked a few questions to a user with objectives to know how user feel when opening the homepage and observing their behaviors.

Users will determine whether or not your product succeeds, their input in the design makes it much more likely to succeed at launch.

How to conduct a card sorting session?

Step 1: Firstly I will give a brief to a user for starting. Tell a user about this website and each of section on the homepage.

Step 2: I ask for choose and sort the section selected by user on ZULU homepage from top to bottom.

example: users conduct a card sorting

Revised Information Architecture

After I interviewed user and analyzed the result. So, what I did remove from the current homepage? And why?



When a user first visits the homepage and never watch anything program on the website, so why do you know similar titles for me? Except I have visited the website, log in and watched NET programs, so the homepage shows up the section (similar titles for you).



This section has a few clips from part of an episode in NET TV programs. The question is why display this section but user have the first purpose to watch episode programs when open this website? And also NET TV already have a youtube channel to upload update video anything about NET TV programs.

Revised IA

New Information Architecture (IA) after revised


After I analyzed and understanding, I continue to explore layout with making rough draft wireframe based on new Information Architecture (IA).

Final Design

I try to explore the interface still using the dark theme and more negative space around an object to give the point of view to a user clearly when open the homepage.

current homepage (left) and new redesign homepage (right)


If we want users to like our software, we should design it to behave like a like able person: respectful, generous and helpful.

— Alan Cooper

I try to feel like a user when trying to solve problems on this website. Contributing to a better experience and making a user feel comfortable like at home. The design isn’t finished until somebody is using it and need to be prepared to iterate and reiterate this designs over and over again.

Thank you for reading this! don’t be hesitate to give any feedback. I hope you enjoyed the read and learned something new.

Thank you Renee Lin for inspired me to create my first article 😊

Zulu Homepage: Analysis and Redesign was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link—-819cc2aaeee0—4


Please enter your comment!
Please enter your name here