Skip to content

Commit

Permalink
project plan almost done. need one picture from lok
Browse files Browse the repository at this point in the history
  • Loading branch information
pezmanlou committed Apr 15, 2012
1 parent 2fa3756 commit 831bf83
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 89 deletions.
Binary file modified project-plan/project-plan.pdf
Binary file not shown.
118 changes: 29 additions & 89 deletions project-plan/project-plan.tex
Expand Up @@ -43,128 +43,67 @@
\end{titlepage}

\tableofcontents

\newpage

%\listoffigures

%\newpage

\section{Executive Summary}


Over three decades ago, a professor at Wayne State University took on a challenge that Cadillac deemed unsolvable. That professor was Jim Anderson. His computer-generated dot maps gave Cadillac's marketing department a competitive advantage by allowing them to easily visualize dealership locations across the nation. Jim began using the power of computers to analyze these networks of dealerships and started a company that specialized in the planning and management of these networks. Thus, Urban Science was born.\\


Urban Science is now an international company, headquartered in Detroit, Michigan. They assist nearly every original equipment manufacturer (OEM) in over 60 countries. We designed a web application to show OEMs monthly performance data on vehicle sales, lead management, and service for their primary market area. OEMs use this performance data to adjust spending to maximize their market potential. The appeal of our web application is its ease of use, and visual appeal.\\


In today's world, the display of information is an evolving art. Yesterday's solution was clipart and spreadsheets, but that is no longer enough. We require a more engaging approach to delivering a point. The modern solution is an information graphic or infographic. An infographic is a graphical display that quickly conveys data that would otherwise require a lengthy explanation. Modern infographics use clever design schemes and cartoon characters to keep the viewer interested while showing relationships in the data.\\


Our web application uses a brand new flavor of infographic that is designed to update dynamically. It uses information directly from Urban Science to generate graphics that reflect the most up-to-date monthly data. The web application also provides the ability to view previous months to allow OEMs to refrence historical data.\\

\newpage

\section{Functional Specifications}


The purpose of our infographics generator is to creatively display information on the iPad. It simplistically conveys performance data to the manager of a dealership or original equipment manufacturer (OEM). The main page allows users to select an infographic by swiping through a menu. Each infographic communicates with a database to ensure it is being displayed with the most current data available. Users have the ability to change the month of the data being displayed by swiping their fingers across the infographic. They can also tap on any of the data to see a detailed description of the data and a trend chart to show how it has changed over the last six months.




\subsection {Web Application}
- uses local storage


\subsubsection {Main Menu}
- has lazy suzan style interface
-

\subsubsection {Infographic Display Page}
- has navigation buttons
- has infographic


\subsection {Web Backend}
- has database
- outputs json



features:
- infographics
- months
- menu
- dynamicness


The web application is focus of project is to create a new and creative experience for the KPI data. The user interface will be very simple, allowing for on the fly use by those giving presentations or demonstrating the product to clients. When a client sees this unique display of information they will assuredly choose Urban Science to help them with their strategy.\\



\newpage
The purpose of our infographics generator is to creatively display information on the iPad. It simplistically conveys performance data to the manager of a dealership or original equipment manufacturer (OEM). The main page allows users to select an infographic by swiping through a menu. Each infographic communicates with a database to ensure it is being displayed with the most current data available. Users have the ability to change the month of the data being displayed by swiping their fingers across the infographic. They can also tap on any of the data to see a detailed description of the data and a trend chart to show how it has changed over the last six months.\\

\section{Design Specifications}

\subsection{Overview}
% TODO replace default graph

The general interface is based on a Lazy Susan style menu. A user can swipe the screen to rotate the icons, and just touch on any one of them to select a category. The program will trigger the infographics generator depending on the category that was selected. The infographics generator will then grab the preloaded data from the xml file and display with a default graph. Then user can select different style of infographic to display the information as they need.\\


\includegraphics[width=1\textwidth]{images/Capstone_-_Use_Case_Diagram.png}\\

The menu interface is based on a Lazy Susan. A user can swipe their finger across the screen to rotate the icons, and touch any one of them to select a category. Selecting an icon will trigger the infographics generator using the category that was selected. The infographics generator then grabs the preloaded data from local storage and displays it as part of an infographic. The user can then select different infographics to display the other information.\\

\subsection{System Architecture}

The infographic application is comprised of two major components: a web application and a database. Safari displays the menu screen. When an infographic is selected, data will be pulled from the database and kept in local storage so it can be used to generate the infographic.\\

\includegraphics[width=1\textwidth]{images/Capstone_-_System_Architecture_Diagram.png}\\

\includegraphics[width=.9\textwidth]{images/Capstone_-_System_Architecture_Diagram.png}\\
\newpage
\subsection {Main Menu}
This image shows the swiping action that is used to rotate the icons. Below it is a screenshot of the main menu. The menu is displayed in a lazy Suzan style to allow the user to scroll through the icons. The corresponding infographic display page is shown when the icon is clicked.\\

\includegraphics[width=.4\textwidth]{images/switcheroo.png}\\

\includegraphics[width=1\textwidth]{images/main-menu.png}\\

\newpage
\subsection{Infographic Page}

This is how the display page looks for the sales infographic. The current month is displayed at the top right next to the menu button. The menu button navigates back to the menu screen. Swiping left and right increases and decreases the month. Tapping a KPI data brings up additional information.\\

\includegraphics[width=1\textwidth]{images/labels.png}\\


\newpage
\subsection{Drill Down Display}
\includegraphics[width=.6\textwidth]{images/fun.png}\\

The drill down display is shown when a KPI data is tapped. It is a box that appears in the center of the screen with a description of the KPI data and a trend chart which shows the data for the last 6 months.\\

\includegraphics[width=1\textwidth]{images/fun.png}\\
\newpage
\subsection {Web Backend}

The user connects to the web backend via Safari. As the page loads, a script runs to automatically retrieve and store data from the database into temporary local storage. If there is newer data it will update the local storage when the user refreshes the page. This data is used by the infographics generator to update values in the infographic.\\


\section{Technical Specifications}

The infographics generator produces infographics suitable for display on the iPad 2 using the Safari browser.\\

The Index.html page in our webapp contains the infographic selector menu. The infographic selector menu is used to browse all available infographics. The infographics available to choose from include: Sales, Service, and Lead Management. The selector interface has three icons, each representing an infographic, arranged in a horizontally elongated ellipse. A swipe in the left direction causes the icons to rotate clockwise following the elliptical path. Likewise, the icons rotate counter clockwise when swiped in the right direction. By swiping, the user feels that they are causing the invisible lazy suzan to rotate. Upon tapping the front most icon, Safari navigates to the corresponding infographic's page.\\


The infographic display page contains a floating image called the header. The header spans the width of the page and remains at the top of the page when the user scrolls. The header has a button on the left hand side which, if tapping, navigates back to the infographic selector menu. The right side of the header has text displaying the month and year of the data being displayed. The infographic is located immediately beneath the header and spans the entire width of the page. If the infographic is swiped left, the next month's data is displayed. If swiped right, the previous month's data is displayed. If no data exists for the month attempting to be displayed, the current date is not changed.\\


Each infographic displays multiple key performance indicators (KPI) data. The data is obtained from a Microsoft SQL database. The server hosting the infographics generator uses an ASP.NET script (KPI\_Handler.ashx) to query the database for all available KPI data, serializes the data, and returns the data to the client device in JavaScript Object Notation (JSON). The client device then parses this data using a JavaScript function (found in Scripts/KPILocalStorage.js) and adds the data to local storage.\\


An infographic element is a visual representation of KPI data, responsible for displaying one or more KPI data. An infographic is comprised of multiple infographic elements. Each infographic element is drawn on an HTML5 canvas using JavaScript functions found in one of the three infographic drawing files (draw-sales.js, draw-service.js, draw-lead.js) or the common element file (elements.js). The common element file is used to centralize the generic JavaScript functions that are used to draw the elements in the infographics. The infographic specific files call functions from the common element file and have their own JavaScript functions to draw the infographic. They also calls functions to retrieve specific KPI values from local storage.\\


A drill down display is shown in the center of the screen if an infographic element is tapped. The drill down display gives an brief description of the KPI that was tapped and shows a trend chart of the KPI over the last 6 months (ending in the current month) or the maximum number of months available, whichever number is smaller.\\



\newpage

\section{Schedule}

\subsection{Week 1 (January 9, 2012)}
Expand Down Expand Up @@ -282,47 +221,48 @@ \subsection{Week 13 (April 9, 2012)}
\begin{itemize}
\item Updated project plan to reflect most recent version of webapp
\item Discovered origin of grey background in jQuery css file
\item Filmed video
\end{itemize}

\subsection{Week 14 (April 16, 2012)}
\begin{itemize}
\item Has not occured
\item Edited video
\item Wrote user manual
\item Fixed elevator
\end{itemize}

\subsection{Week 15 (April 23, 2012)}
\begin{itemize}
\item TODO: clean up code
\item TODO: write documentation for functions
\item TODO: project video
\item TODO: rename /webapp/images/avg\$.png because of potential problems with having a dollar sign in the filename
\item Set up for design day
\item Presented at design day
\end{itemize}

\subsection{Milestone: Projet Video}
\begin{itemize}
\item Has not occured
\item Filmed using Dr. D's new camera
\item Filmed video in capstone lab
\end{itemize}

\subsection{Milestone: All Deliverables}
\begin{itemize}
\item Has not occured
\item Successfully submitted
\end{itemize}

\subsection{Milestone: Design Day}
\begin{itemize}
\item Has not occured
\item Great success!
\end{itemize}




\section{Remaining tasks}
\begin{itemize}
\item clean up code
\item write documentation for functions
\item project video
\item rename /webapp/images/Avg\$.png because of potential problems with having a dollar sign in the filename
\item make close rate a percentage
\end{itemize}
%\section{Remaining tasks}
%\begin{itemize}
%\item clean up code
%\item write documentation for functions
%\item project video
%\item rename /webapp/images/Avg\$.png because of potential problems with having a dollar sign in the filename
%\end{itemize}


\end{document}

0 comments on commit 831bf83

Please sign in to comment.