Dash: Product Documentation by Mazhar Bagasrawala

DASH

Product Documentation

An industry project with Session Games at the Centre For Digital Media Client: Ian Verchere, Session Games Team Mentor: Robyn Sussel Product Manager: Mazhar Bagasrawala Developers: Steven Sun, Jennifer Wu UI Designer: Shawn Deng UX Designer: Yi Li Interaction Designer: Annie Shen

Table of Contents Project Overview About The Client The Client Brief Project Vision Objectives for the Project: Scope: Product Roadmap Plan: Dependencies: Marketing Dashboard Factors for Success: What are the dashboard design best practices? Project Structure Targeted Users: Stakeholders: Team Roles & Responsibilities: Availability: Blog: User Research Stakeholder interview: Literature Research: Key findings: User Persona Use case analysis User Needs: The KPI’s KPI Hunting Final KPI’s Measures & Indicators Data Visualisation Benchmark for Data Visualisation 1

What is Data Visualisation? The main reasons we visualise data: Visualising The 10 Charts Version 1 Version 2 Version 3 Final Feature List: Visual Identity Logo Typography Colour Palette with ApexCharts Design Guideline Design Specifications Component Extra Layer of Information Iconography Button Responsive Grid and Layout Dark Mode Design Handover Technical Documentation Quickstart Frontend Architecture Frontend Folder Structure Backend Architecture Backend Folder Structure Database Diagram KPI Calculation Dash Backend Web API: Index Methods 1. DAU 2

2. MAU 3. Sticky Factor 4. Total Impression 5. Impression Chart Ⅰ 6. Impression Chart Ⅱ 7. Impression Chart Ⅲ 8. Total eCPM 9.1. eCPM Chart Ⅰ 9.2. eCPM Chart Ⅱ 9.3. eCPM Chart Ⅲ 10. Geo-Metrics Glossary Promo Video Script The Video Learnings Fin.

Project Overview

About The Client Session Games is a production company specializing in creating, delivering, and operating original games for console and mobile. Its Vancouver-based team is uniquely experienced, driven by its passion for quality games. Session is growing a portfolio of profitable titles; for itself, and its selected partners like Red Bull and many more.

The Client Brief Session Games discovered a new way for brands to advertise within their games, in a manner that doesn’t disrupt a players experience. They incorporate endemic and non-endemic brands within the mobile games through strategic product placements, campaigns, customized promotions and in-game events. Session reached out to the CDM & Team Dash with an industry project to create a performance report for these brand partners that summarises their advertising outcomes. The task would involve identifying the relevant KPI’s for these brands, pulling relevant data from the Session Games server, and creating a presentation layer (dashboard) for these KPI’s.

Project Vision

Objectives for the Project: 1) Identify the KPI’s: relevant to the brands that advertise in Session Games’ games. These KPI’s would be portrayed on the dashboard. 2) Data Visualisation: support the hard data on the dashboard with appropriate visual depictions in the form of graphs, charts etc. to provide a better understanding of the statistics. 3) Develop a functional application via MySQL (Database), Django (Backend server), and Vue (Frontend framework) 4) Scoping realistically within the timeframe (from a build perspective) 5) Designing & developing an intuitive and delightful interface for the dashboard.

Scope: Within the 13-week timeframe of the project (January 7th - April 1st), TeamDash at the Centre for Digital Media (CDM) will deliver to Session Games a single-page dashboard application. This dashboard will present the most important KPI’s as mutually agreed upon in a structured user interface, supported by appropriate data visualizations. TeamDash will work in agile sprints, making weekly product increments with frequent client updates.

Product Roadmap

Plan: The plan listed below involved rapid iterations, interfacing with the client, and appropriate revisions and modifications as necessary within the scope of the project.

Sprint #

Tasks

Understanding the brief (& with the client) Establishing processes

Identifying users Set up a database Design research Create Unity plugin

Identifying KPI’s Testing Unity plugin User persona Brainstorm product specifications

Finalizing KPI’s Finalizing product specifications User flow

Data visualization research Wireframe UI elements

Chart confirmation Interface design Develop initial model for frontend

Interface design Test user interface

Design handoff to tech Frontend elaboration for dev KPI backend logic

Interaction design

Design & dev continues

Completion Final testing

Revision Delivery

Dependencies: - Receiving information & content from Session Games in a timely manner - Receiving sign-offs from Session Games on assets created to progress with the Plan - Our mentor’s requirements with reference to our course learning objectives - Budget approvals from the Centre for Digital Media

Marketing Dashboard Factors for Success: Catered: A marketing dashboard should be catered rather than customisable, such that it caters to the exact needs of the person it was designed for.

Mobile-friendly: There aren’t many marketers left who only work from the office. It’s important to have access to real-time insights whether you’re at work, at a conference, or doing a little after-hours catch up from home. Don’t invest in a marketing dashboard that isn’t mobile optimized — either through a native app (which is typically preferable), or at least a mobile web interface.

Scalable: Scalable means the dashboard can expand as your data projects grow. It also means the dashboard will easily accommodate the user’s requirements and needs. It should offer flexibility for custom integration and out-of-the-box compatibility with essential systems such as your marketing automation.

What are the dashboard design best practices?

1. Provide relevant info in about 5 sec Your dashboard should be able to answer your most frequently asked business questions at a glance

2. Display information in a logical layout Display the most significant insights on the top, trends in the middle, and granular details in the bottom.

3. Have only 5–9 visualisations More than that just translates into clutter and visual noise that distracts the user from the intended purpose.

4. Use the right data visualisation Select the appropriate type of data visualisation according to which type of info you are trying to convey.

Project Structure

Targeted Users: The primary end user of this dashboard will be representatives from the brands advertising within Session Games’ games. This could be a CMO (Chief Marketing Officer) from such company or even another relevant executive. A secondary user of the dashboard would be the accounts in-charge at Session, who would log in to the dashboard to update cost or other values that are required to generate certain KPI’s.

Stakeholders: At Session Games, Ian Verchere will be our point of contact and responsible for the project overall. At the Centre for Digital Media, our team’s mentor Robyn Sussel will oversee Team Dash’s process and progress and help us in every way to achieve our client’s expectation, while learning simultaneously. The administrative department will be responsible for internal team expenses.

Team Roles & Responsibilities: Robyn Sussel: Team Mentor (robynsussel@gmail.com) Mentor, Educator and Advisor in strategy, communications & digital media. Mazhar Bagasrawala: Product Management (mazhar_b@thecdm.ca) Establish steps and processes; plan sprint cycles and champion positive morale for the team to achieve the client’s desirable outcome in a timely fashion. Ensuring that the design solution meets the need of the product goals. Help the team to create a delightful and highly functional product for the clients and their users. Steven Sun: Software Development (Hong_Sun@thecdm.ca) He is a software developer on the team. Along with Jennifer, he will design and implement a solution to Session Games' data fragmentation and presentation problem. They intend to extricate structured data from unstructured content, automate data 10

classification, and deliver a user-friendly dashboard product based on design specifications. Jennifer Wu: Software Development (jennifer.sy.wu@gmail.com) She is a software developer on the team. Along with Steven, they will design and implement a solution to Session’s data fragmentation and presentation problem. They aim to extract structured data from unstructured content, automate data classification, and deliver a user-friendly dashboard based on design specifications. They will communicate with each other, as well as our non-technical team members to discuss product requirements and technical design. Shawn Deng: Graphic & Interface Design (shawn_deng@thecdm.ca) He is the graphic and interface designer on the team. He will create a delightful and meaningful design to showcase the final deliverable and make it legit and good-looking. In the meantime, he will incorporate what Annie and Yi have to offer into the dashboard interface design. He will be monitoring the design system and pay close attention to design styles, visualization options and user experience to make sure the team is up to the hilt in design. Annie Shen: Interaction & Motion Design (Chen_Shen@thecdm.ca) The artist of Team Dash. In this project, she will create the interaction design and motion graphic design for the product. By building, promoting and toning up, she can reinforce the program and add an additional creative voice to the project. Collaborating with the designers, she’ll help to make the dashboard prettier, adding motion graphic & user interaction while keeping it useful and meaningful. Yi Li: UX Design & Data Specialist (Li_Yi@thecdm.ca) She will work as a User experience designer and data specialist in the project. she will be in charge of choosing the proper charts to show data, and how to use data to tell a story. For the dashboard, she will try to improve the readability and make it easier to use.

Availability: Team Dash will work on a daily basis through weekdays and will be available to respond to any queries between 10:30 am and 5:00 pm. Mazhar is the primary person of contact for most requirements, however, one may reach out to another respective team member for any other specific request. An example could be reaching out to Steven regarding a specific technical requirement.

Blog: As part of our commitment to a constant, clear and effective documentation of our progress through the project, we maintained a weekly blog. Here’s a link to it, and a screenshot below. It’s full of progress updates, experiences, team photos and more!

User Research

Who is the target user?

The dashboard aims to help the CMO at a large company monitor the KPI of their ad investment in Session Game so as to achieve better marketing perform. Session Games also can use the dashboard information to improve their games and ad spaces in order to earn more revenue from the Ad. Technically, both CMO and session game are the users of the dashboard, but as Session Games (stakeholder) hopes the dashboard to place CMO’s needs in the first place and for this stage we don’t need to develop interface for Session Game, we decide to regard CMO as our main user and conduct user research on them.

User research

The purpose of user research: As our dashboard is designed to help CMO achieve better marketing performance of the ad within Session Games, our research goal is to figure out how CMO is going to use the dashboard by looking at 5Ws: Which kind of information CMO want to get from the dashboard? When and where will they use it? Who will see the dashboard besides CMO? Why CMO will use it? What’s their motivation? The methods we implemented: In order to answer the questions above in limited time (less than 2 weeks), the user research methods we implemented are the stakeholder interview and literature research. We couldn’t reach out to real users (CMO) because of the time and resource restriction. However, the good news is that since our stakeholder is very familiar with CMO, the stakeholder interview and literature research give us a lot of valuable insights.

Stakeholder interview: We asked Session game how they communicate with CMO, what kind of data CMO is most interested, when and where the communication happens, and any other information they know about CMO.

Literature Research: In order to know more about CMO’s work and motivation, we search for literature about CMO online. The search words are “ what skills are required for CMO” “ how to become CMO” “ what experience should I gain to be CMO” “ CMO with data” “the average age of CMO” “ the average salary of CMO” “ CMO’s career path”. From the literature, we can form a general understanding of CMO’s responsibility, motivation and also some aspects of their personality.

Key findings:

1. Age: 50 years old ●

“The average age of a CMO is 5 2, and the average tenure of a CMO is 4 .1 years,the shortest of all the C-suite titles examined. CMOs in the life sciences and professional services sectors have the oldest average age (5 4); CMOs in the consumer sector have the youngest average age (5 0).Mar 9, 2017” https://www.marketingprofs.com/charts/2017/31713/the-average-age-and-tenure-of-c-suite-executi ves

As most CMO invest in session game are from the consumer sectors, we assume the average of CMO is around 50 years old.

2. Gender: 57% male, 42%female ●

“Women held almost 42 percent of CMO posts in the Winmo study, not far from the 45 percent of top marketers among members of the Association of National Advertisers, the group reported earlier this year. https://adage.com/article/cmo-strategy/cmo-tenures-grow-longer-study/315994/

3. Motivation: High career prospects; competitive work environment

●

“To get ahead of the competition, ‘CMOs must deliver above-market growth’s by facilitating exemplary customer experience and organizational alignment, making the CMO role more dynamic and exciting than ever before.”

●

“53% of business executives said polled by the Global marketing center said that their current CMO could one day become CEO”

https://www.getsmarter.com/blog/career-advice/become-chief-marketing-officer-cmo/

4. Education and work experience: business bachelor, MBA, more than 10 years in marketing plus several years in leadership. ●

●

A bachelor’s degree in a business or marketing-related subject is usually required to begin your ascent up the ranks to CMO.As a marketing or business professional wanting to move up to CMO, you can improve your prospects by enrolling in a Masters in Marketing, or better, an MBA program with a specialization in Marketing. Most CMOs have approximately 10 years of well-rounded marketing or business development experience in positions of increasing responsibility, as well as three to five years of experience in a leadership role.

5. Salary ： The average salary is around 145,000 CAD https://www.payscale.com/research/CA/Job=Chief_Marketing_Officer_(CMO)/Salary

6. Skills: Strategic planning, Data analysis, Communication, understand products ● ●

●

“Preparing an overall marketing strategy that incorporates growth and sales strategies. Developing and informing overall business strategy” “Use data to predict business trends and customer behaviour Presenting technical reports based on the collection, analysis and interpretation of data.Contributing to important business decisions by constructing significant research questions” “Both marketing and executive leadership involve communication. The CMO will need to be able to communicate effectively with both the target

https://yscouts.com/executive/10-common-chief-marketing-officer-skills/

7. Working conditions: busy, many meetings and travels,

“Have a very high level of job-required social interaction. They frequently talk to customers and coworkers.” “ more than 50 hours per week” https://apps.il-work-net.com/cis/clusters/OccupationDetails/100370?parentId=111400&section=conditions&s ectionTitle=Working%20Conditions

User Persona Based on the key findings above , we produced the following persona:

Use case analysis The persona provides us a vivid CMO user model. From the model, we try to link the dashboard and the CMO’s daily life together and predict the use cases.

Based on the user cases and user persona above, we inferred that the product should be easy to use (easy logic to use), key information at a glance (don’t need too many clicks to find a data), because CMOs are very busy and also heavy user of data.

User Needs: Understanding our end user in more depth allowed us to discover their needs, and design functions and features accordingly:

The need to present results to others: After the research we realize CMO needs to communicate their marketing result a lot among company officers. It’s one of the KPI of their work. So we would like to create a presentation mode to make the present of the dashboard look more professional and readable.

The need to access the dashboard from anywhere at anytime: CMO’s schedule is very intensive and he/she takes main responsibility for marketing result. They need to check the marketing performance frequently. The checking happens in different locations, office, on transit, in coffee bar, in client’s office, which means CMO might use the dashboard on variable devices. The Session Game also hopes this dashboard could be used both on computer and on mobile. So we takes it one step further by creating a responsive dashboard.

The need to share statistics digitally: We find out that information in dashboard is communicated sometimes by mail, or needs to be recorded in marketing documation. It would be nice to have a export function to make the process more easy.

The need to view data from a slice of time: For marketing, CMO needs to check the performance by dates frequently, in order to decrease the search time, we design a date picker which can control all charts.

The KPI’s

KPI Hunting A large goal of this project was to identify the correct metrics (KPI’s) which can be used to demonstrate value, track performance and share results of the in-game ad space that Session Games offers to its clients. This task, albeit difficult, proved to be an excellent opportunity to dive into dashboards currently out there, and also make a cohesive online research of KPI’s within the marketing and gaming environment. We analysed the above mentioned dashboards and found some inspiration for possible metrics, however the key discovery was made when we performed a stakeholder interview with Session team members Mike & Edison- their data specialist. Here’s what our final KPI list looked like: Green metrics being approved and finalised.

Final KPI’s We ended up with 6 final KPI’s that would be represented by 10 charts: 1) Avg. Stickiness 2) Avg. DAU 3) Avg. MAU 4) Impressions (a) Total (b) By Ad Space 20

5) eCPM (a) Total (b) By Value (c) By Ad Space 6) Geo-Metrics (a) Map (b) Percentage

Measures & Indicators Our team also categorize these kpis into two types: measures and indicators. Measures are the pure numbers that provide insight into the scale of the ad exposure; Indicators are qualitative statistics that provide insight on the value of ads.

Data Visualisation

Benchmark for Data Visualisation

What is Data Visualisation? Data visualization is the process of taking a data set and visualizing it in a way that can be easily understood. Sometimes called data viz, data visualization can be something as simple as a bar chart generated from an Excel file, or as complex as an interactive multimedia experience. The best data visualizations are beautiful, informative, and responsive.

The main reasons we visualise data: ● ● ● ● ● ●

Digest large amounts of data at scale Compare and contrast Spot trends and patterns Reveal questions that would otherwise be missed Broad overview with drill-down capabilities Easier, faster, comprehensive data

Visualising The 10 Charts Based on the needs and data type of different metrics, we chose the most suitable charts for each metric. For example, to compare the impressions between different ad spaces, we used a bar chart. This is because bar charts make it easy for comparison between different samples.

Version 1

After doing research upon the functions of different charts , we decided to choose appropriate type for data by considering the CMO’s needs. For some data like DAU/MAU/ECPM, the CMO cares more about the tendency rather than the day to day

comparison, so we choose line charts. But for some data like Impression count by ad space/eCPM of ad space, we chose bar charts to amplify the difference as the CMO needs to clearly see the difference so as to choose better ad space to invest. Beside the needs of the CMO, we also took the traits of the data type into account, for example, the total impression count is a cumulative data, so we choose area chart instead of line chart. Also, in order to show users by location, we used a map chart to provide intuitive data.

Version 2

Based on the wireframe we designed in the first version and considering tech requirements, we iterated on the charts by using what APEX, an open-source platform provided. We also added colour code in different charts to provide insights on the logic behind numbers and graphics. For DAU, MAU and stickiness factor, we use line chart to show the general trend and add colours to offer a sense of the total amount of active users. We put the number in the top left corner with a more conspicuous size to make the information more clear. For impression count and eCPM, we designed 3 types of charts for each metric which are: a line/area chart for total number, a column chart in which the metric is sorted by q value and a bar chart which shows comparison data between different ad spaces. Users can interact with all these charts to see detailed information. The line chart and the area chart show the total number of impression counts and eCPM, which provide CMO a more intuitive idea of the amount and the trend of that metric. By breaking down into different q values and ad spaces, CMO can compare their benefits from different factors. In addition, the bar chart is designed that it can be scrolled down and allow CMO to check all the ad spaces they have invested.

For Geo-metric statistics, we used a world map to show the numbers of users from different countries and a pie chart which indicates the portion of each country. In this case, colours work as an unique indicator. The darker the colour on the map is, the more active player there are in the country.

Version 3

The third version came to fix some potential problems of version 2. First of all, we pivoted the colour pallette and chose to use different shades of blue for all the charts in order to avoid positive /negative implications and to offer a more clean and neat outlook. We also took off the chart about impression count (sorted by value), as we found out it was not as useful as others. Instead, we replace it with an extra information card, which we will describe further in the “Design Specification” section. 25

Final Feature List: Over the course of a few interviews between the clients and our team and based on the bandwidth of our development team, the feature list is as follows: Developed 1) Responsiveness 2) Date-Picker (Calendar) 3) Quick Access to Data (Buttons) 4) Component Date-Picker (Dropdown) 5) Notification Center 6) Presentation Mode Designed concepts: 1) Export Feature (to PDF) 2) Dark Mode 3) Profile section 4) View Multiple Game results (using sidebar)

Visual Identity Dash is a modern customized marketing dashboard, with that in mind, we aimed to create a simple but effective logo that connects the brand with what it does, and what it stands for.

Logo

The logo is formed by two parts, the shape, and the typeface. The shape, which shown as three column charts in various sizes, representing the essence of an analytic dashboard.

Didact Gothic is the typeface we use, a sans-serif font designed to present each letter in the form most often used in elementary classrooms. This makes it suitable for literacy efforts, and also has a sense of modern and technology. It has more than 35% use cases in the U.S, so it is also widely recognized. So far, we have four use cases for this logo, and we hope to keep the logo identical, clean and useful.

Typography Other than Didact Gothic, the font used in the logo, we have a universal typeface for the entire product, Roboto. Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types, so it is perfect for readability on different screens. As it is also widely used around the world, it fits the affordance and people can relate more when they look at the font. There are majorly three typefaces of Roboto we use, regular, medium and bold.

Colour Palette There are three primary colours dash uses.

To indicate the volume of data, there are five blue colours, ranging from the lightest to the darkest, shown below. In this case, the primary blue will always be the medium colour, to make sure the spectrum is working properly.

with ApexCharts ApexCharts is an open-source platform that provides modern & Interactive charts to our dashboard, to visualize the metrics we customized for Session Games. To check the logic behind each graph, please see the visualization guideline.

ApexCharts scales gracefully in desktops, tablets as well as mobiles, so it fits our need to make CMOs reading experience better on different layouts for different screen sizes. With the built-in interactive feature, users can zoom, pan, scroll through data, toggle datasets visibility in multiple series, show informative tooltips when hovering over data points.

Each of these options helps to communicate data more effectively. In addition to providing a pleasing appearance to charts shown on the dashboard, ApexCharts gives high performance too, with nice-looking animations and personalizable colour palettes and many more.

For more information related to ApexCharts, please visit apexcharts.com

Design Guideline

Card-based design The card-based component is most commonly used in dashboard design, to make each part of data stand out while having a consistent hierarchy, relationship so that the whole system will make much sense. Meanwhile, instead of having sharp edges for every card on the dashboard, our design is learning from Google Material Design, where cards have rounded corners, providing a better shadow, layout, and overall feeling.

Breaking in space By implementing the card-based design, our layout gives breaks to each section, creating space to avoid overwhelming information consumption. So, in this case, the whole design is more minimal, it’s focused on the key metrics that our clients would be looking for, and it has better usage of the space provided.

Responsive Design As one of the main points of our users is that CMOs they use or check their data on the go, so the responsiveness provides the dashboard with the ability to automatically resize, hide, shrink, or enlarge, to make it look good on all devices. Our idea is that the users are able to access their data from desktops, tablets, and phones.

Clean look with well-matched colours To best visualize the data, our main goal is to keep the interface clean, while we can still use colour choices to make the graphs pop out. We use white and grey to create a clean interface, which gives a sense of minimalistic. We are also careful regarding colour choices, so the palette should be looking neat as it matches the whole dashboard.

Simple but powerful It is our goal to provide a minimal and customized tool that brings the data the clients need to live. We have a strict selection when it comes to features on the dashboard. Only what makes the dashboard powerful and meaningful, should we implement to the design and front-end. The data-picker comes first as our end users do care about data from different time range and at different time slice. Search bar enables the users to get to details on demand, fast and accurate. Notification centre is where all the system-generated reports and account message come in, and we do not want users to be bothered unless they click to open. We also envision an exporting tool where users can either export the dashboard as a file, to make it to a report ultimately or enter a presenter mode so that they can showcase the data with less distraction.

Design Specifications To match with the guidelines mentioned above, also to create a readable, responsive and reliable dashboard, dash uses these specifications in particular. We make use of the Vuesax package (MIT License) in support of our front-end Vue.js framework. In the documentation, we list out the frequently used components, and in-depth documentation can be found on the Vuesax website.

Component

The card-based component is most commonly used in dashboard design, to make each part of data stand out while having a consistent hierarchy, relationship so that the whole system will make much sense. Meanwhile, instead of having sharp edges for every card on the dashboard, our design is learning from Google Material Design, where cards have rounded corners, providing a better shadow, layout, and overall feeling. The card that dash is using, has a corner radius of 8, and it fits layouts when resizes based on the screen. 33

In general, when all cards are set for a target layout, the dashboard will look like this:

Extra Layer of Information We created a space for putting another layer of information, shown in blue. It is a special space to allow Session Games to advertise to their own advertisers. This card brings more information to the CMOs, it is a human connection, rather than only data and cold metrics. This card also gives Session Games the opportunity to reinforce the value of their own games using information about its users in a subtle and unobtrusive way. Hence the idea behind this extra feature, is to provide confidence, and build more connections between Session and its clients.

To make the card stand out, and not let the users mis-recognize it, we use our particular blue colour match with our card based design. This blue card is placed based on how the other cards are located. For now, it sits on the same line with impressions, allowing users to notice this bite of information at a glance, and not to confuse with other impression metrics. Moreover, this card has more than one line, meaning that we can pre-set messages Session needs, and whenever a user refreshes the dashboard, or change the time range and slice, the card and its message on it, will also be changed simultaneously. 35

Iconography Dash uses icons of the selection from Iconfont, and it comes with codes so that all icons can be easily used on front-end development. Following is what dash currently uses for icons:

Iconfont package will be available upon final handover. For more information related to Iconfont, please visit iconfont.cn

Button Dash is using two colours of the button, each has three stages, normal, pressed and disabled, shown as follows:

Although the use cases are not defined, we recommend using blue as the primary choice for buttons.

Responsive Grid and Layout The responsive layout is dynamic, dash follows the responsive design system, and the whole layout works on different sizes of screen, from desktop HD to a phone size. Our design concept follows the widely-used industry grid system, making use of available components for rows, columns, and viewports as provided by Vuesax. Our grid system follows the standard 12-column convention. We also make use of definitions of Vuesax sizing directives for large, medium, and small viewports. 37

Dark Mode To create a better look at night for the screen experience, we also provide with the design for dark mode. In this section, some design specifications have to change accordingly.

(Layout)

(New colour choices and change in buttons)

Design Handover The final design document is in Adobe Experience Design file. Adobe XD is part of Adobe Creative Cloud, but it is FREE of charge. The clickable prototype, using the same file, is online as well. https://xd.adobe.com/view/c1f15c04-10ae-48b4-5649-92f49443820a-b7c0/

This file works like a template, so it can be edited on future update requests. It also includes the layers mentioned above, different colours, typefaces, and icons. 40

Technical Documentation The document specifies the technical decisions made during the creation of the product and outlines the structure of the source code to enable further work on codebase as well as expanding the features and functionality of the dashboard. It will also include a diagram of the database required for the site to use. It is assumed that the reader of this document has knowledge of HTML, CSS, JavaScript, MySQL, and Python.

Quickstart The frontend of this project is located at http://127.0.0.1:8000/ or http://localhost:8000/ (if you are on a newer version of MacOS). To start the server, run npm run serve from frontend/. You must have NPM installed. If this is your first time, you also need to run npm install to get all the node dependencies. The backend server of this project is located at http://127.0.0.1:8000/ or http://localhost:8000/ (if you are on a newer version of MacOS). Activate the virtual environment by running source ~/.virtualenvs/djangodev/bin/activate. Deactivate by running deactivate. If this is your first time, you may need to create the virtual environment via: python3 -m venv ~/.virtualenvs/djangodev, followed by pip3 install -r requirements.txt. Once your virtualenv has been started, run the Django server with python3 manage.py runserver. Notice that the frontend of the server is hooked up to the backend via settings.py.

Frontend Architecture

It will be helpful to go through the Vue.js, Vue Router, and Vuex tutorials in depth to understand the framework. ApexCharts, Google Charts, V-Calendar documentation should be referenced when updating components for debugging purposes. Tailwind CSS and Vuesax UI-Kit are styling utilities we used during prototyping. The documentation should only be referenced when during styling.

Frontend Folder Structure frontend │ vue.config.js │ themeConfig.js │ tailwind.js │ postcss.config.js │ package.json │ babel.config.js │ .browserslistrc │ .eslintrc.js │ .gitignore │

// design palette

└───public │ │ favicon.ico │ │ index.html // mountpoint │ └───src // main │ App.vue │ eventBus.js │ globalComponents.js │ main.js │ router.js └───assets // styling and graphics │ └───css │ │ │ main.css │ │ │ iconfont.css │ │ │ └───fonts │ │ │ ... │ │ │ └───images │ │ │ ... │ │ │ └───scss │ │ │ ... │ │ │ └───utils │ │ ... │ └───components // all of the KPI components │ │ ... │ └───layouts │ └───components // all of the utility components │ │ │ ... │ │ │ └───full-page │ │ │ ... │ │ │ └───main │ │ │ ... 43

│ │ │ │ ... └───store // Vuex state management │ │ actions.js │ │ getters.js │ │ mutations.js │ │ state.js │ │ store.js │ │ ... │ └───views // Information pages └───pages │ │ ... │ │ gameData.js │ Home.vue // Game page │ Page2.vue Note that the game pages can be made dynamic by making a call to the database in order to retrieve the brand ID and the game ID. Please reference the API document for that information.

Backend Architecture

It will be helpful to go through the Django tutorials in depth to understand the framework. Its documentation should be referenced when updating components for debugging purposes. Also, note the INSTALLED_APPS setting at the top of the file. That holds the names of all Django applications that are activated in this Django instance. Apps can be used in multiple projects, and you can package and distribute them for use by others in their projects. By default, INSTALLED_APPS contains the following apps, all of which come with Django: django.contrib.admin – The admin site. You’ll use it shortly. django.contrib.auth – An authentication system. django.contrib.contenttypes – A framework for content types. django.contrib.sessions – A session framework. django.contrib.messages – A messaging framework. django.contrib.staticfiles – A framework for managing static files. These applications are included by us as a convenience for the common case.

Backend Folder Structure App └─── migrations // model migrations └─── static/app // static assets └─── templates │ __init__.py │ admin.py │ apps.py │ models.py // model │ urls.py // url dispatcher │ utils.py // custom utility class │ views.py // view

Database Diagram The diagram shows the database. The database for this project is simplified and simply contains nine tables. // For Logging game events from game through unity api ImpressionLog PlayerLoginLog

// For customize the dynamic content on the dashboard Impression Game Brand Spending // For data cache purpose, should calculate and update once a day on server from ImpressionLog, PlayerLoginLog table DauMau Impressionbydate Ecpmbydate 47

KPI Calculation ADAU = Average Unique Daily Active Users Example: Day1 Player Login History: A, B, C DAU1 = 3 Day2 Player Login History: D, E, F, E, F DAU2 = 3 Day3 Player Login History: C, D, E, A, C DAU3 = 4 ADAU for last 3 days: (DAU1+DAU2+DAU3) /3 = 3.33 AMAU = Average Unique Active Users over a 30-day window Example: Feb Day1 Player Login History: A, B, C MAU1 = 3 Feb Day2 Player Login History: D, E, F, A, B MAU2 = 3 Feb Day3 Player Login History: A, B, D, E, F, G MAU3 = 1 MAU for FEB = MAU1 + MAU2 +MAU3 + MAU4… + MAU30 AMAU for last 3 days: ( ∑MAUlast30daysfromday1 + ∑MAUlast30daysfromday2 + ∑MAUlast30daysfromday3) / 3 AStickyFactor = ADAU/ AMAU Impression Count = is a term that refers to the point in which an ad is viewed once by a visitor into a count eCPM = Spending/ (Impression Count * Impression value) * 1000 49

Dash Backend Web API:

Index 1. DAU 2. MAU 3. Sticky 4. Total Impression 5. Impression Chart Ⅰ 6. Impression Chart Ⅱ 7. Impression Chart Ⅲ 8. Total eCPM 9. eCPM Chart Ⅰ 10. eCPM Chart Ⅱ 11. eCPM Chart Ⅲ 12. Geo

Conventions Status Codes

Methods 1. DAU Request Method

URL

GET

api/dau/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/dau/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "ADAU":58, "2019-02-22":14, "2019-02-23":65, "2019-02-24":44, "2019-02-25":33, "2019-02-26":96, "2019-02-27":96 }

400

Bad Request

404

Not Found

2. MAU Request Method

URL

GET

api/mau/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/mau/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "AMAU": 1303, "2019-02-22": 1304, "2019-02-23": 1345, "2019-02-24": 1337, "2019-02-25": 1260, "2019-02-26": 1300, "2019-02-27": 1270 }

400

Bad Request

404

Not Found

3. Sticky Factor Request Method

URL

GET

api/sticky/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/sticky/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "ASticky": 4.6, "2019-02-22": 1.1, "2019-02-23": 5.1, "2019-02-24": 3.5, "2019-02-25": 2.6, "2019-02-26": 7.6, "2019-02-27": 7.6 }

400

Bad Request

404

Not Found

4. Total Impression Request Method

URL

GET

api/impression0/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/impression0/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "ImpressionTotal": 242317 }

400

Bad Request

404

Not Found

5. Impression Chart Ⅰ Request Method

URL

GET

api/impression1/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/impression1/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "2019-02-22":1661, "2019-02-23":6076, "2019-02-24":6298, "2019-02-25":4366, "2019-02-26":7722, "2019-02-27":7722 }

400

Bad Request

404

Not Found

6. Impression Chart Ⅱ Request Method

URL

GET

api/impression2/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/impression2/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "1.5":1666, "2.5":2534, "3.5":4323, "4.5":3124 }

400

Bad Request

404

Not Found

7. Impression Chart Ⅲ Request Method

URL

GET

api/impression3/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/impression3/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "Second Event": 4999, "Fourth Event": 2333, "Third Event": 2111, "First Event": 1888, "Fifth Event": 1000 }

400

Bad Request

404

Not Found

8. Total eCPM Request Method

URL

GET

api/ecpm0/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/ecpm0/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "EcpmTotal": 366.73 }

400

Bad Request

404

Not Found

9.1. eCPM Chart Ⅰ Request Method

URL

GET

api/ecpm1/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/ecpm1/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "2019-02-23": 1106.00, "2019-02-24": 1840.00, "2019-02-25": 1106.00, "2019-02-27": 1081.82 }

400

Bad Request

404

Not Found

9.2. eCPM Chart Ⅱ Request Method

URL

GET

api/ecpm2/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/ecpm2/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "1.5": 6666.67, "2.5": 1600.00, "3.5": 2619.00, "4.5": 1111.11 }

400

Bad Request

404

Not Found

9.3. eCPM Chart Ⅲ Request Method

URL

GET

api/ecpm3/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/ecpm3/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "First Event": 6666.67, "Second Event": 2619.00, "Third Event": 1600.00, "Fourth Event": 1333.33, "Fifth Event": 1000.00 }

400

Bad Request

404

Not Found

10. Geo-Metrics Request Method

URL

GET

api/geo/<day_second>/<last_days>/<brand_id>/<game_id>

GET

api/geo/<day_first>/<day_second>/<brand_id>/<game_id>

Type

Params

Values

Example

URL_PARAM URL_PARAM URL_PARAM URL_PARAM URL_PARAM

<day_first> <day_second> <brand_id> <game_id> <last_days>

string string number number number

2019-02-22 2019-02-27 2 2 7

Response Status

Response

200

An example response is:{ "Canada":22331, "United States":13424 }

400

Bad Request

404

Not Found

Glossary Conventions ● ● ● ● ● ●

Client - Client application. Status - HTTP status code of response. All the possible responses are listed under ‘Responses’ for each method. Only one of them is issued per request server. All response are in JSON format. All request parameters are mandatory unless explicitly marked as [optional] The type of values accepted for a request parameter are shown the the values column like this [10|<any number>] .The | symbol means OR. If the parameter is [optional], the default value is shown in blue bold text, as 10 is written in [10|<any number>].

Status Codes All status codes are standard HTTP status codes. The below ones are used in this API. 2XX S uccess of some kind 4XX E rror occurred in client’s part 5XX E rror occurred in server’s part Status Code

Description

200

201

Created

202

Accepted (Request accepted, and queued for execution)

400

Bad request

401

Authentication failure

403

Forbidden

404

Resource not found

405

Method Not Allowed

409

Conflict

412

Precondition Failed

413

Request Entity Too Large

500

Internal Server Error

501

Not Implemented

503

Service Unavailable

Promo Video As an additional deliverable for the Session Games team, we decided to create a narrative-based Promo Video to explain the problem that this dashboard solves, how it helps the user i.e. the CMO, what it can do and how it creates value for every involved stakeholder.

Script Here is the script that was written for the video: 1-Meet Arya, the Chief Marketing Officer at a large Sports company. 2-The annual board meeting is in a week and her team recently invested in a completely new ad space: within mobile games by Vancouver-based company Session Games. 3- Unlike regular ads, these ads are harder to track and have their own, unique set of metrics, which regular tools can’t analyse. 4- That’s why Session Games provided her with DASH: A marketing dashboard designed specifically for data from ingame advertising. 5- Dash empowers Arya to analyse, present, and share ad results with ease. (opens Dash) 6- (opens presentation mode) 7- Arya: “As you can see, we spent 10 coins per 1000 impressions within the snowboarding game.” (Shows eCPM of the ad space and users profiles) 8- CEO: “Let’s review the impressions made over the winter holidays?”

9- Arya: “Of course!” (opens date picker, finds range) “Here you go!” (presents results) （fade out and fade in) 10- Arya: “That’s it for today! I’m sending you the results by mail, and you may review it as convenient.” (exports pdf/shares link) 11- CEO(smiling): “Great work Arya, and excellent presentation!” 12- Just like Arya, your team can use Dash to get maximum value from advertising in mobile games. 13- Use DASH, and make each impression count.

The Video The video can be viewed here. It is included in the handoff package. 66

Our Learnings: Having worked together in Project Room 1 over the period of the last 4 months, each and every member of our team has taken away many learnings. Some of these came in the form of challenges that we had to overcome, some directly from our mentor and a large amount from our clients at Session Games. A lot went well in our team, and some of these points are listed below: - Trust we placed in one another to own our respective domains of expertise. - Clear and quick communication to work effectively as a unit. - Taking timely guidance from our mentor whenever required. - Completing 360 retrospectives of unique formats every sprint, and consciously working to be more productive in the following sprint. - Successful application of agile methodology in our workflows. - Great team bonding sessions to lunch and even a trip to Harrison Hot Springs with SFU. - Cross-cultural and language learning was stimulated. - Our client was satisfied with our deliverables, and we even exceeded their expectations with the video we made. Some things could have been done better: - We could have pushed ourselves even harder in the idea stage to create yet more value and impact. - Toward the end, we reduced our team bonding sessions, which could have been useful in keeping the energies high at that late stage. - Once a while each of us slipped up on punctuality, which is something we should surely address going forward.

Fin. 67