MEDIA BUYINg

ITN Networks / Product UIUX Design / 2015-Current



Innovative Digital Platform that enables Media Buying and Selling to its Maximum Potential


This is a digital platform that allows TV advertisement spots to be bought and sold electronically. We are now living in a digital age but it seems like this industry is still lingering in the past. Most buyers still use pen and paper with excel sheets printed on them. They manually pick spots and negotiate with stations over the phone. By using this new digital platform, processes that previously took weeks could be completed in hours with better results guaranteed by the computer optimization.  


 
The diagram above displays the main structure of our team process. However each team is not limited only to the process under their team name. it is common that teams will participate and help each other in different areas as well.  My Role: As the main UIUX designer of this project, I was responsible for setting design directions of the User Experience through wireframes and flowcharts. I was also responsible for most of the UI Design and communication with developers through InVision prototypes.


The diagram above displays the main structure of our team process. However each team is not limited only to the steps under their team name.
It is common that teams will participate and help each other in different stages of the process as well. 
My Role: As the main UIUX designer of this project, I was responsible for setting design directions of the User Experience through wireframes and flowcharts.
I was also responsible for most of the UI Design and communication with developers through InVision prototypes.

 

Research & Brainstorm

 
Main Product Goals.jpg
Goal 1.jpg

1. Digitalizing the Process   The current media sale and purchase process is printing out numerous excel sheets, making marks and calculations using pen and paper, then making a deal over a phone call. Digitalization will not only improve the efficiency of this work process but also keep a record of every action taken for future reference as well.

Goal 2.jpg

2. Bringing it all together   Gathering all the advertisers, agencies, suppliers, and stations in one platform, will help users and organizations communicate with each other with minimal effort. It will also allow both sides to view the same information while communicating in order to keep both on the same page.  

Goal 3.jpg

3. Optimizing the Result   The optimizer will be able to guarantee the best results by utilizing all the data in the system, which is simply impossible for a human to achieve.

 
Understanding the Industry.jpg
Demand Side Supply Side.jpg
 

Ideation & Wireframe
 

 

This is the phase where I usually spend a large portion of my time. It is also the point, I usually need to return to whenever there are user experience issues found later in the process. It usually starts out with rough sketches and simple notes on my notebook.Once I get a general idea of what kind of experience the user needs, I start creating wireframes. The type of wireframes I create can be divided into two groups. One is thumbnail wireframes, where I focus more on the user journey. The wireframes at this point are generally simple and may end up quite different from the final screens.

 

Then I create a more detailed wireframe with a focus on the actual user interface. At this point, I like to use annotations. The annotations here are very important as it takes on the role of explaining information that is difficult to communicate by just looking at the image. During the early stage of the project, wireframes and annotations are one of the most common methods for communication with the developers. It is also common to go back to the UX Flow wireframes and make changes once I have a more concrete UI, as it often improves the experience even more. 

 

Design & Prototype

 

 
 
 
 

Once the UI Screens are fully designed, they are delivered to the developers with the UI Style Guide. Each member of the team has an InVision account which allows anyone to use Inspect mode from InVision. This allows them to see pixel measurement quick and easily. In many cases, this is good information for the developer to start coding. However, when it is not easy to communicate a specific interaction or process, an InVision prototype is created to make sure no details are lost. (View an example of the InVision Prototypes by clicking on the image left)

What is the Next Step?
We have launched the platform for Local Markets and we are now in the process of creating a platform for the National Market (United States). Currently we are only dealing with TV commercial spots, but we have plans to expand the platform to deal with mobile, web, radio and etc.