KAZU Interactive

Infographic

Client: Mik Benedek, General Manager of 90.3 KAZU

Designer: Miranda Squires
Advisor: Patrick Watson
Communication Design, Interactive Media
School of Computing & Design

Table of Contents

CST 401

Abstract.. 3
Executive Summary. 4
Problem Description..... 8
Solution Description. 10
Methodology. 12
Changes... 17
Deliverables... 18
Budget .... 19
Evaluation.... 20
Collaboration Statement .. 21
Final Documentation.. 22
Final Faculty Advisor Sign Off

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

Abstract
Miranda Squires is an Information Technology & Communication Design
student with an emphasis in Interactive Media. Squires undergraduate
Capstone project, the KAZU Interactive Infographic is supervised by faculty
advisor and professor, Patrick Watson. Her client is Mik Benedek, the General
Manager of 90.3 KAZU, Monterey Peninsulas National Public Radio affiliate
station, a community service of California State University, Monterey Bay.
In order to meet the needs of her client she created an interactive
information graphic of 90.3 KAZUs current business model and answers
frequently asked questions about their annual fundraising drives.
The following document demonstrates the strategic steps and
professional project management shown by Miranda Squires.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

Executive Summary
This Capstone project was created to be a digital media tool to educate
users about KAZU radio station, in order to motivate them to continue or begin
supporting public radio. The project is for the local National Public Radio
station in Seaside, CA, KAZU 90.3, who provides National Public Radio, Public
Radio International, American Public Media and local programming to
listeners in Monterey, Santa Cruz, Salinas, and Scotts Valley.
KAZU is a member-funded, nonprofit radio station owned by California
State University, Monterey Bays University Corporation. Although the station
has over 60,000 listeners each week, their demographic is mostly made up of
retirees, older adults and business people. Therefore, it is in the best interest of
the company and the public radio business to reach younger adults to increase
interest and encourage its continuance in the future.
The client, General Manager, Mik Benedek, needed a product that would
thank members for donating, educate listeners on why supporting the station is
so important, list the benefits of making a financial contribution, and indicate
what the money raised through listener donations funds. All of these elements
needed to be included in one media piece without overwhelming members with
information they already know.
Squires proposed to create an interactive media piece that would be
delivered via the KAZU website in order to incorporate all of the information
Benedek wanted to be displayed to educate the public about KAZU radio. Her
idea stemmed from the rise in popularity of infographics and the ease of
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

learning they provide through a series of visual keys, audio, and animations.
Squires was aware that this type of product has the capacity to combine a
variety of digital design elements and the data in one enjoyable, cohesive media
piece.
The primary audience is made up of current members who continue to
make monthly and annual contributions to the station. Other audiences include
listeners of the station who have not donated, any visitors of the website, and
students.
The methodology for this project was to research current infographics
that exist on the web, collect the pertinent data that needed to be included,
create icons, sketch storyboards, make digital mock-ups of the animation,
begin animating, choose what elements would incorporate interactivity,
implement the interactivity, and finally, have both peers and professionals test
and evaluate the product.
During the creation of this interactive media piece, Adobe Audition was
used to edit and mix audio; Photoshop was used to manipulate, recolor, and
resize photos; Illustrator was used to create graphics and the layout for the
digital mock-ups; Edge Animate was used to animate elements onto the screen;
and HTML5, CSS3, and JQUERY were used for creating interactive buttons
and hovers. A sufficient amount of computer processing power was also
necessary which meant a laptop was inefficient, and the designer has to use a
school computer for most of the project.
Changes implemented during production included the addition of next
buttons, excluding back buttons for simplicity and to create a consistent
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

storyline, the addition of a table of contents at the beginning and end of the
interactive for convenient navigation purposes, increased mouse hover
accuracy, the addition of audio and interactive functionality that allows for the
audio to be played and paused, as well as, volume control, and the addition of
photos instead of graphic icons for elegancy.
This animated infographic will be delivered via KAZUs website at
www.kazu.org. Any visitor of the site will be able to view it, which means it will
be open to anyone who has Internet access.
The budget for this project was estimated at around $8,000 dollars. The
rationale behind this is due to research conducted about digital animators, who
make approximately $30 dollars an hour, but for this project the rate was
increased by ten dollars because of the complexity of interactive elements. Also,
the use of the Adobe Creative Suite costs either $20 dollars a month for a
monthly subscription, or it ranges around $500 dollars per individual software
program. Since four different Adobe software programs were used, individual
purchase would be too expensive therefore a monthly subscription would have
to be purchased for a year.
For usability testing, first, the designer needed to find out if the
interactive is an effective and successful product for its intended purpose. This
means aesthetics, and functionality must be evaluated.
This evaluation was conducted through a series of steps: one, look at
digital mock-ups of the product; two, view primitive versions of the animation
without interactive elements; and three, test a semi-final version of the product
for functionality and efficiency of visual aesthetics.
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

The users that participated in testing included peers, employees of the

station, technology professionals, and KAZUs public radio consultant.
During the creation of this product the designer was in collaboration
with her client, Mik Benedek, who provided timely consultation on the content
and structure of the project. Greg Harbert, the Technical Director for the CSU
Monterey Bay World Theater provided guidance regarding visual aesthetics
and functionality. A few peers helped to analyze the importance of certain
elements and animations. Public radio consultant, Mike Wallace, helped to
determine the important data and research to be included. Barbara Beckmeyer
with the Center for Academic Technologies provided resources via Lynda.com
where the product could be optimized using tutorial videos and advice from
professional Edge Animate users.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

Problem Description
Ira Glass of National Public Radios This American Life interviews
listeners who spend more money on coffee daily rather than contributing to
their local radio station that they listen to multiple hours a day for free. The
main issue with this is that since KAZU 90.3 is a non-profit, member-funded
station this lack of motivation to donate can negatively affect the business. This
is why educating listeners about the importance of supporting public radio, and
KAZUs business model would be a beneficial strategy.
Annual fundraising drives equip KAZU with the biggest financial supply
during the year, and listener donations account for more than fifty percent of
KAZUs annual revenue. It is extremely important that people know that these
donation drives and becoming a financial supporter of public radio are not only
beneficial to the station itself, but also to other members because they get to
continue listening to enjoyable programming and contributors will feel
invaluable because they help to keep KAZU on the air.
In the past, public radio stations have implemented fundraising strategies
such as: on air hosts of the pledge drive offering a variety incentives, personal
testimonies from listeners and interviews highlighting the irregularity in getting
news, information, and enjoyment from a resource for free and not being willing
to make a generous donation to that resource to uphold its reputation as the
leading provider for news and information in Monterey.
Therefore, currently, there is no creative or technology based solution that
has been conceptualized for this issue and there is evidence that an effective and
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

successful solution has not been invented and the stated needs of the client
cannot be met using traditional strategies.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

10

Solution Description
The solution proposed is to create an interactive information graphic
that incorporates a series of visuals and animations that can be played and
paused using buttons and mouse-overs for manipulation of data and audio.
The information graphic solves the problem of listeners not knowing the
importance of supporting public radio, and KAZUs business model.
It includes the history of KAZU, their main sources of revenue, ways to
donate to the station, different levels of membership, what the money raised
funds, and a special thank you to all current listeners and supporters.
This product combines visually captivating aesthetics, data, animation,
and interactive elements activated by a user's click in order to allow for a fully
engaged user-experience.
The main goal is to generate increased public interest especially in
younger individuals and students of the university, as well as, answer
frequently asked questions regarding KAZUs annual fundraising drives. All of
this will be included in hopes of alleviating the common inquiries and known
abhorrence of public radio fundraising drives.
This solution will be successful and effective because data visualization
has become such a catalyst for new media as oppose to stagnant bar graphs,
flow charts, and scatter plots to display information. This creative, technology
based solution has been conceptualized to benefit KAZUs business model. As
of now, the needs of the client have been met and the interactive will be

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

11

published online at www.kazu.org on Monday May 18 for people to use and

enjoy.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

12

Methodology
In order to make an infographic one has to know how to tell a story while
integrating copious amounts of data and information. The key in creating a
successful product of this caliber is to fully conceptualize it before any digital
design progress is made.
Below are the tools used and a list of steps showing how the project was
executed. The steps are one, research; two, data collection; three,
conceptualization; four, symbols and icons; five, storyboard; six, digital mockups; seven, first revision; eight, second revision; nine, animation and
interactivity; and ten, usability testing.
The tools used in the making of this interactive media piece include:
Adobe Audition was used to edit and mix audio; Photoshop was used to
manipulate, recolor, and resize photos; Illustrator was used to create graphics
and the layout for the digital mock-ups; Edge Animate was used to animate
elements onto the screen; and HTML5, CSS3, and JQUERY were used for
creating interactive buttons and hovers. A sufficient amount of computer
processing power was also necessary which meant a laptop was inefficient, and
the designer has to use a school computer for most of the project.
The designer is brand new to Adobe Edge Animate, HTML5, CSS3,
and JQUERY, so this project was a huge stepping stone.
Step one: Research, September 2014

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

13

The designer researched current digital infographics online using Google

and Vimeo in September. In doing this she began brainstorming about what
types of elements were most useful in an infographic such as: numeric values
and minimal text, what colors seem most visually appealing and eye-catching
such as: blue and red, as well as, observing having interactive buttons the user
can click on is more engaging than just watching an animation on the screen.
Step Two: Data Collection, October 2014
The designer collected all of the data from her client that needed to be
included in the infographic.
The client, designer, employees of the station and a public radio
consultant for fundraising met together a few times in October to confirm the
most necessary and effective content.
This involved, organizing meetings, planning discussion topics, doing
research beforehand on what people want to learn about such as: fund
allocation, membership benefits, history, ways to donate, etc.
During these meetings the positives and negatives of including or
excluding certain financial information was analyzed and the calculation of
figures that would represent the business were confirmed.
Step three: Conceptualization, November 2014
The designer printed out one hundred infographic concepts using Google
images that she found to be visually pleasing or communicated effectively. She
met with her faculty advisor and he helped her narrow those one hundred
concepts down to about five that she would begin drawing inspiration from.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

14

The goal in doing this was to put an emphasis on the importance of

creating a consistent theme and concept for her infographic which was very
helpful in the final execution of this product.
Step four: Symbols, November 2014
A series of symbols and icons were created to represent different
elements of the data that would be included in the infographic.
Symbols ranged from the earth, car radios, and people to a phone, mail, a
computer, etc.
Although these symbols were not included in the final product they were
an important part of the process in creating a successful product that
intertwined many different design strategies.
Step five: Storyboard, November 2014
The first storyboard was sketched and the main theme and concept were
confirmed by the client. The designer was approved to begin creating digital
mockups.
Step six: Digital Mock-ups, December 2014
During the process of creating digital mockups using Adobe Illustrator,
the designer was overwhelmed by the content and began to second guess her
design.
She set up a meeting with the client to show him her progress and they
decided that the mock-ups were not adequate.
After the designer and client analyzed these mock-ups they decided to go
back to the drawing board and began brainstorming other ideas about the
concept and theme. A revision of the storyboards was made, and the client
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

15

approved the designer to begin making a second version of the digital mockups.
Step seven: Revision #1, January-February 2015
When the designer came back to the client, he was relatively happy with
the design. The designer did not feel confident about the product, so she
proposed that it may be best to create a third design, compare the two
revisions, and choose which one to execute. The client was on board with this.
Also, through a series of peer evaluation of revision #1 it was analyzed
and discussed that the symbols currently being used did not serve the right
purpose and using photographs would be a more successful and pleasing
approach.
Step eight: Revision #2, March-April 2015
At this point, with the advice from her peers and approval from her
client, the designer took about 250 pictures that would be narrowed down to
about 20 to be included in the infographic. Some of these photos were
manipulated and edited using Adobe Photoshop.
The third revision was made, and more storyboards and digital mock-ups
were created.
This time the concept seemed more simplistic and effective. It also made
room for increased creative freedom and user control with the possible
interactive elements.
Though the interactivity and animation had not been implemented yet,
the client and designer chose the ways in which they wanted the user to be able
to interact with the infographic.
90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

16

Step nine: Animation/Interactivity, April 2015

Animation and interactivity was added to the design which cannot be
documented, but it was executed using Adobe Edge Animate for the animations,
HTML5 CSS3 and JQUERY were used to implement interactivity such as:
clicking on buttons to watch information animate onto the screen, as well as,
play and pause audio, and hover over images to view more information about
the subject of the photo.
Adobe Audition was used to edit the audio recorded by Miranda Squires
such as: thank you statements from each employee, a few programming
snippets, and the clients choice for a music bed.
Step ten: Usability Testing, April-May 2015
Although there was constant client and peer evaluation during the
process that helped conceptualize the final look and feel of the product, final
usability testing for visual aesthetics, errors, and functionality was done.
Please see the attached documents that confirming both peers and
professionals tested, analyzed, and criticized my product.
This testing was conducted in a timely, professional, and receptive
manner.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

17

Changes
When originally proposing the creation of this project originally tracking
Google analytics and gathering website traffic data was going to be a part of the
testing and evaluation, but due to not acquiring a sufficient amount of data for
proper analysis, this was not executed.
For simplification purposes the designer ended up not creating graphs
that could be manipulated by user input.
The addition of back and next buttons which was proposed by
collaborator Mike Wallace, public radio consultant, was applied to the
information graphic; although, later it was decided to exclude the back buttons
to create a more consistent, mellifluous storyline.
The addition of a table of contents at the beginning and end of the
interactive for convenient navigation purposes was also implemented, and
increased mouse-over accuracy was employed due to suggestions from peers.
The addition of audio that plays throughout and play when an image is
clicked on, as well as, the audio having interactive functionality that allows for
the audio to be played and paused, and for the user to have volume control.
The addition of photos instead of graphic icons which was a suggestion
also made by peers was employed for elegancy and conventionality.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

18

Deliverables
This animated infographic will be online on KAZUs website at
www.kazu.org. Any visitor of the site will be able to view it, which means it will
be open to anyone who has Internet access.
The designer has also spoken to a public relations representative that
works with other public radio stations in the U.S. and if all goes as planned, and
with modification the designer may be able to sell this or a product like this to
other stations who express interest in a digital marketing strategy such as this.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

19

Budget
Item

Adobe Creative Suite

Labor (200+ hours)

Hypothetical Price

$20/mo. for cloud or

$40/hr.

$4-500 for each

Actual Price

Free

Free

Rationale
In order to justify my budget, I did a little research on how much the
average salary of a digital media designer makes and according the Google and
the U.S. Bureau of Labor Statistics, the average digital media designer, and
digital animators included, is approximately $30 an hour. Since my animation
is also interactive and I am hoping to sell it to other stations, as well, with their
personal trademarks and logos, I believe that the price should be a bit higher
than the average.
As for the Adobe Creative Suite, I get it for free because I am a student,
but the cost for a monthly subscription is $20 dollars monthly to have all of
these programs through the cloud, but if I wanted to personally own each
program it would actually cost about $400 to $500 per software program I
selected, which for this project would be about 5 programs, which gets
expensive quickly.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

20

Testing and Evaluation

For functionality testing, first, the designer needed to find out if the
interactive is an effective and successful product for its intended purpose. This
means aesthetics, and functionality must be evaluated.
Usability testing was conducted, and the users that participated
included a couple of my peers, employees of the station, technology
professionals, and KAZUs public radio consultant.
The stages of testing were to one, look at digital mock-ups of the
product; two, view primitive versions of the animation without interactive
elements; and three, test a semi-final version of the product for functionality
and efficiency of visual aesthetics.
Proposed changes to my project as a result of testing included: the
inclusion of back and next buttons, a table of contents, making it possible to
pause the audio, adding volume control, correcting hovering issues, correcting
some of the information such as: grammar, spelling and word choice, and
adding directions for button clicking and playing audio.
All of the suggested changes were implemented except for the addition
of back buttons. Due to simplicity because there was menu for precise
navigation in the front and the back it was determined that the story element
of going through each page of the infographic was important to keep intact.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

21

Collaboration Statement
Mik Benedek provided timely consultation on the content and structure
of the project. We had monthly meetings to analyze of the product, make
progress updates, and evaluate prototypes and final versions of the animation
along with interactive elements and directions.
Greg Harbert the Technical Director for the CSU Monterey bay World
Theater provided guidance regarding visual aesthetics and functionality. He
proposed that I have more versatile navigation, and responded positively to the
graphics created for this product.
My peers added in input regarding functionality, as well. These
individuals helped to analyze the importance of certain elements and
animations which is when it was determined that the storyline was important
enough that back buttons could be excluded.
Public radio consultant, Mike Wallace, helped to determine the
important data and research that was included in the product.
Barbara Beckmeyer provided resources via Lynda.com where the
product could be optimized using tutorial videos and advice from professional
Edge Animate users.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015

CST 401

22

Final Documentation
The following are detailed design documents that show the thought
process during the creation of this interactive.

90.3 KAZU
KAZU Interactive Infographic

May 14, 2015