__MAIN_TEXT__

Page 1

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.   

                         

3


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.                           

4


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.                       

5


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

1

Understanding the brief (& with the client) Establishing processes 

2

Identifying users Set up a database  Design research  Create Unity plugin 

3

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

4

Finalizing KPI’s Finalizing product specifications  User flow 

5

Data visualization research Wireframe  UI elements 

6

Chart confirmation Interface design  Develop initial model for frontend 

7

Interface design Test user interface 

6


8

Design handoff to tech Frontend elaboration for dev  KPI backend logic 

9

Interaction design

10

Design & dev continues

11

Completion Final testing 

12

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 

         

7


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.       

8


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.       

         

9


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.   

11


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!   

      12 


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.   

13


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  

14


“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,  

15


“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: 

16


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. 

17


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.  

18


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.   

 

19


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.   

   

21


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.   

22


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 

23


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. 

24


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) 

             

26


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.    

27


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.  

28 


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.  

29


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.  

30


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.    

31


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.  

32


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:    

34


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     

36


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)   

38


(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/   

 

39


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. 

 

41


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

42


└───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.                             

44


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.     

45


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                                   

 

46


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 


48


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

50


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

51


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

52


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

53


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

54


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

55


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

56


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

57


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

58


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

59


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

60


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

61


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

62


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

OK

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

63


412

Precondition Failed

413

Request Entity Too Large

500

Internal Server Error

501

Not Implemented

503

Service Unavailable

                                                  64 


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?”   

65


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 

Profile for Mazhar Bagasrawala

Dash: Product Documentation  

Dash: Product Documentation  

Advertisement