Jesse Curtis

CST 401 Capstone Lab
Instructor: Kevin Cahill
CSU Monterey Bay





Capstone Final Report

Interactive Infographic
Advisor: Pat Watson
12 May 2014







School of Information Technology and Communication Design
CST 401 Page 1 of 12
V.I.P. Interactive Infographic 5/12/2014
Table of contents

Executive Summary 2
Project Description 3-4
Solution Description 4-5
Methodology 5-6
Changes in Project 6
Project Deliverables 6
Budget 7
Timeline 8
Evaluation 8-9
Collaboration Statement 9
Final Documentation 10
Advisor Signoff Page 11


























CST 401 Page 2 of 12
V.I.P. Interactive Infographic 5/12/2014
Executive Summary
Naturipe Farms is a producer of organic and conventional berries. To differentiate
themselves from the competition, they have created their own unique berry varieties
that can be commercially sold to consumers. Naturipe’s mains goal is to create great
tasting fruit that can be enjoyed at the table.

Naturipe’s varietal improvement program is complex, it has multiple partners that work
in cooperation to develop a variety of berry varieties that retain specific attributes. The
information itself can be difficult to understand because information is coming from a
detailed science report. Naturipe wanted to streamline this information with a interactive
visual tool to engage their audience and build interest about berry varieties. I proposed
to create an interactive infographic that would be a graphic representation of all complex
information.

The end result was (1) interactive infographic in HTML5 format that can be embedded in
the current website. It contains information about the berry breeding process, from cross
pollinating to commercial release. All design elements were created with the Adobe
Creative Cloud; Illustrator, Photoshop, and Edge Animate. Throughout the process, the
designer improved essential skills in visual design, user interface design and project
management.

Testing of the interactive took place in a controlled environment with three individual
reviewers. Each reviewer provided feedback on UI design, visual design and their
overall opinion on the product. Feedback was then used to create revisions and then
reevaluated. All visual design followed strict design guidelines and brand messaging of
Naturipe Farms. The budget included software, hardware, labor, space and
transportations fees. Weekly meetings were arranged to review design and make
appropriate revisions. The final product was completed on April 18, 2014.


CST 401 Page 3 of 12
V.I.P. Interactive Infographic 5/12/2014
Problem Description
Naturipe Farms is a grower-owner producer of organic and conventional berries;
Strawberries, Blueberries, Blackberries, Raspberries. Their products are grown in
North/South America and Europe, and then distributed globally. To differentiate
themselves from the competition, they have created their own unique berry varieties.
Their breeding objectives include; fruit appearance, eating quality, enhance storage
potential, ease of production and harvest yield. Many factors go into creating a better
tasting berry that can be commercially sold and that consumers will enjoy.

Current market trends have shown that consumers are becoming more interested in
where their food comes from and how it is produced. Naturipe saw this as opportunity to
educate their consumers about the berry breeding process. Previously, all information
about Naturipe’s varietal improvement program has stayed within the company and their
partners. They expressed interested in expanding their website to include a “Varietal
Improvement Program” section that includes fun and educational information about
berry varieties to help engage their consumers.

All information relating to berry varieties and their breeding process had yet to become
public knowledge. The goal for Naturipe was to translate the complex information into
consumer copy, so that it can be easily understandable, educational and engaging at
the same time.

Target Audience:
Naturipe Farms general target audience is women ages 25-45, which have families and
shop at grocery stores. Naturipe’s goal was to engage their audience with useful
information presented in an engaging manor and provide them with more in-depth
information about berries.



CST 401 Page 4 of 12
V.I.P. Interactive Infographic 5/12/2014
Why it was worth solving:
This problem was worth solving because it was a chance for Naturipe to act early on
new market trends. More and more people are researching products before they are
purchasing. By providing this information to consumers, it has allowed Naturipe to stand
out from their competition.

Solution Description:
Naturipe expressed the need to “translate” complex information of their varietal
improvement program by utilizing an interactive visual tool and creating easy-to-
understand copy. I proposed to create an interactive infographic that will be an
interactive/animated design of the berry breeding process.

Infographics are a graphic representations that aim to present complex information
quickly and clearly with three parts – visual, content and knowledge of product. The final
deliverable of the project was an interactive infographic that condensed large amounts
of information but still delivered educational facts about the berry breeding process. By
adding interactive elements, it allowed the user to become involved in learning
experience.

The final product was a visually unique way to display important information that made
the learning experience fun and interactive. It allowed users to learn about berry
varieties and interact with the project. It also showed the consumer the process of
creating the sweet berries we all know and love.

Users were prompt to explore each section of the interactive by hovering over photos
and animated infographics would appear over corresponding images. This opened the
window for the user to explore and discover small interactive’s throughout the project
which stimulated the brain in the engaging learning environment. The easy-to-use
navigation buttons were used to go back and forth from each section and allowed the
user to navigate from beginning to end on their own.
CST 401 Page 5 of 12
V.I.P. Interactive Infographic 5/12/2014
Existing solutions:
There was little information available to the public about berry breeding programs. The
only existing solutions are science reports that are rarely available to the public. In many
cases, other berry growers were also lacking the ability to share information to their
audience. This created an opportunity to engage Naturipe’s consumers and educated
them at the same time.

Methodology:
Implementation Plan:
The design process included: Planning, Research, Designing, Revising, User Testing,
and final evaluation from the client. Software used: Illustrator CS6, Photoshop CS6,
Edge Animate CS6, and Microsoft Word. The final product is for WEB only, it will be
embedded into the current website.

Resources:
Resources (programs) used are as follows: Adobe Creative Cloud (Photoshop,
Illustrator and Edge Animate). There was access to Naturipes Photos (stock photos and
field photos) along with a presentation/documentation on their varietal improvement
program. Other resources included: back-up storage, like DVD and USB, for delivery of
files to client.

Expertise:
Over the years, I have attained skills and knowledge through school and work
experience. At Cal State Monterey Bay, the designer has gained skills in interactive and
digital design; along with programming and networking. Class taken at Cal State
Monterey bay: CST 201: Media Tools, CST 328: Digital Art & Design, CST 221:
Programming. CST 236: Computing for Digital Artist, CST 321: Multimedia 1, CST 421:
Multimedia 2, CST 307 Modeling & Environments, CST 436: Human Computer
Interaction, CST 373: Ethics in Communication & Technology, CST 361S: Tech Tutors,
CST 401 Page 6 of 12
V.I.P. Interactive Infographic 5/12/2014
CST 400: Senior Capstone Project, CST 496: Capstone Directed Study. Over the
course of the project, I improved my HTML5 coding skills and user-Interface design.

Changes:
Since the first proposal produced in December 2013, the solution has remained the
same but there were changes. Initial copy was too detailed and had to be revised so
that it could be easily understood by Naturipe’s target audience. Along with the copy,
the first few design versions had to be completely redesigned. The original plan was to
use parallax scrolling and vector illustrations, but that proved to be an ineffective way to
display information. The final product included vibrant images to draw the eye to explore
more on the page and reveled interactive elements that guided the user through the
berry breeding process.

Deliverables:
The final project consists of (1) interactive infographic in HTML5 format that can be
embedded in the current website. All deliverables are digital and have been delivered in
a USB drive to the client. They contain design documents – Illustrator, Photoshop and
Edge Animate Web Files that were used in the design process.










CST 401 Page 7 of 12
V.I.P. Interactive Infographic 5/12/2014
Budget

Software was used for the design process of the interactive infographic. Hardware was
used to store and back up all design files. Labor hours are included in the estimate and
reflects time invested into project. The hourly rate is based on an average amount a
designer makes. No equipment was needed for purchase. Space and Transportation
was based on the space needed to conduct user testing. It also includes miles that were
driven to driven to weekly meetings and to the user-testing location.

Budget Resources:
Adobe Software - adobe.com
Microsoft Office - microsoft.com
500 GB drive - amazon.com

CST 401 Page 8 of 12
V.I.P. Interactive Infographic 5/12/2014
Timeline:
CAPSTONE GANTT CHART



Evaluation
The final project required (2) user-testing sessions, with three individual reviewers. Each
reviewer was given instructions to navigate the interactive from start to end. No other
tasks were asked. The reviewer’s movements within the interactive were observed and
recorded. After the user-testing, individuals were asked of overall concept and design of
the product, their answers were recorded by myself.

Results:
The main purpose of user-testing was to observe users in a controlled environment to
see if they can navigate the interactive infographic with ease. They were able to move
from one section to another but lacked the knowledge of where to click first within the
sections. This new found problem had to be addressed because each section included
consecutive steps/images that needed to be viewed in order.

Revisions:
After reviewing results from the user testing. It was apparent that there need to be a
navigation menu included into the interactive. To stay with the simple but vibrant design
aesthetics, I choose to create a trigger. This trigger activates when the user enters into
CST 401 Page 9 of 12
V.I.P. Interactive Infographic 5/12/2014
a certain section. It will show a series of dots that create an “invisible path” and the user
is then subconsciously prompted to go to correct first step.

Final outcome:
The project successfully communicated Naturipe’s varietal improvement program and
created and engaging product that represented their brand. As the designer, I
established a timeline and planned accordingly to create a successful project. I applied
the following steps:
 Define project goals
 Properly measure time
 Analyzing the user testing results
 Apply user testing results to project
 Apply Naturipe’s design guidelines

Collaboration Statement:
People involved in V.I.P. interactive infographic are as follows:
 Kyla Garnett, Marketing Manager of Naturipe Farms – The main point of
contact and client for V.I.P. she provided information and insight into the
berry breeding process, supplied copy and content used for the project
 Pat Watson –A trusted advisor who guided me through project
management and the design process. He provided constructive criticism
that allowed me to revise my project and make it to the finish line.






CST 401 Page 10 of 12
V.I.P. Interactive Infographic 5/12/2014
Final Documentation:
Design Guidelines used to create final interactive infographic.



CST 401 Page 11 of 12
V.I.P. Interactive Infographic 5/12/2014