Challenge Summary
Our client is developing an interesting B2B application focused on the transportation industry, advertised buses in Tokyo to be more specific. The service supports the selection of routes of advertisement buses that can reach to the users of the target age group most effectively under certain parameters such as budget, demographics, and so on. It will help sales and marketing persons to seamlessly elaborate quotes based on AI-recommended routes that better suit the parameters, in a visual way.
Round 1
Submit your design for a checkpoint feedback.01. Optimal Route
03. View Master-Data
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your final design plus checkpoint feedback.01. Optimal Route
02. History
03. View Master-Data
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Challenge Objectives
- To create UI screens.
- To provide a seamless flow to complete user goals.
- Desktop web application.
Project Background
NTT Software Innovation Center (NTT SIC), an R&D laboratory of NTT Group, an IT & communication enterprise which provides service & solution in Japan and Global, is conducting a research on innovative software development approaches which collaborate with global crowdsourcing community like Topcoder. For that purpose, NTT SIC would like to develop a brand new business application with Topcoder.
Here’s several background information for this challenge.
- A Tokyo bus company provides a wrapping bus advertising service that has advertisements wrapped on buses traveling on a fixed route, aimed to work in Tokyo only.
- There are many routes for wrapping buses and their routes are complicated. Since each advertisement has different target age groups, it is difficult to select a route with the highest advertising effectiveness.
- A sales representative of a wrapping bus advertising service (wrapping bus advertising company) would like to use this application with the sponsor company's marketing team who's interested in the wrapping bus advertising service. We would be successful by presenting the most effective bus routes in an easy-to-understand manner. The marketing team will want to specify the age groups that they want to reach depending on the product/service of their marketing strategies.
- Since these buses are for public transportation, the total travel time of each bus are as short as 30 to 40 minutes. Therefore, the distribution of age groups of people who sees the bus (advertisement) differs significantly depending on the route. Also, the route could be complicated, and it is not normal for sales representatives to know the exact route of the wrapping bus.
Application Overview
- This application is used in face-to-face business negotiations, where the marketing staff and the sales staff interact to set the conditions or use the application recommendation results to choose which routes to buy.
- A sales representative who will be the primary operator of this application knows routes and cost details of each wrapping bus, so the input UX can be simple. On the other hand, since the recommendation results are shown mainly to the marketing staff that does not have domain knowledge, it is necessary for them to easily understand the meaning and settings of the conditions/information of recommended bus routes.
User Roles
- Advertisement agency staff of the wrapping bus (who will be the primary operator of the application).
- Sponsor company's marketing staff (who will be looking at the application).
- See Target Audience section below for more details.
Workflows
- Overall:
- Marketing staff who are considering to use wrapping bus for marking their products or services will want to have a business talk with the advertising agency’s sales staff selling wrapping buses.
- Based on the budget of the sponsor company and the target user’s age group, they would like to see the best effective routes that can reach the most people.
- In some cases, they will also want to specify specific route to buy. For example, sponsor might want to buy route that goes through the olympic stadium although that route has not been recommended by the most effective route calculation.
- The sales representative performs the operation of the app. Interact with the marketing staff while looking at the display of the app. They’ll change conditions while looking at the application (the target age group, budget, some specific routes they want to buy, etc.)
- Workflow 1:
- Marketing staff: Describe the target product and marketing concept of the advertisement, the target user, and the advertisement budget ceiling. Ex. "For 35-44 old, 7 million".
- Salesperson in charge: Set target user age group and advertisement budget upper limit to the conditions for the application and start route recommendation.
- Application: Display the route recommendation result. Shows the combination of bus routes and their number that most contact the target user's age group within the advertising budget upper limit, and the estimated number of target user contacts for each route
- Sales representative: Explain to the marketer the route recommendation results (bus routes mapped on the map, details of the number of contact target users for each route). Ex. "I recommend 3 routes for Route 3 and 1 route for Route 15 and 10 routes. It is estimated that Route 3 can contact this time from time to time for target 35 to 44 old from this Shibuya.
- Workflow 2:
- Marketing staff: Based on the recommendation results of the app and your own knowledge, explain the route you want to run - "I think around Tokyo Station"
- Sales representative: While showing the route on the map, confirm the route requested by the marketing person, and set it as the designated route. What marketing staff can indicate is a specific area name or station name, not a specific bus route. The sales representative shows a map near the area or station and selects a route that meets the marketing request - "There are several routes around Tokyo Station. How about Route 7, leaving from this Yaesu Exit to Toyosu? Advertising costs are 2 million."
- Sales representative: Set the target user's age group and advertising budget upper limit as a condition and start route selection.
- Application: Display recommended routes.
- Shows the combination of bus routes that include the specified route, and the number of bus routes that most contact the target user's age group within the advertising budget upper limit, and the estimated number of target user contacts for each route
- Sales representative: Explain to the marketer the route recommendation results (bus routes mapped on the map, details of the number of contact target users for each route). * highlight the specified route
- Workflow 3:
- Sales representative: Interview with the marketer and select the recommendation results (multiple) you want to check again from the recommendation results displayed so far.
- Application: Redisplay the selected route recommendation result. To make comparison easy by simplifying the operation of switching display for multiple selection results.
Screens/Features
Overall
- Considering the required features, propose seamless navigation that makes sense.
- All three workflows mentioned above should be covered by your design.
- See 01. Screen Flow Overview doc for guidance.
01. Optimal Route
- User should be able to enter the route data:
- Budget.
- Age range.
- Route ID (optional).
- The app should display map-based results.
- There is a total of 150 wrapping bus routes, approximately.
- On each route, 0 to 3 buses operate depending on the time zone.
- The advertising cost differs per bus route. FYI, timing doesn’t affect the pricing.
- Use the following map: https://maps.gsi.go.jp/#13/35.673125/139.728498/&base=pale&ls=pale&disp=1&vs=c1j0h0k0l0u0t0z0r0s0m0f1
- Map design is out of scope, it must look like the example provided above.
02. History
- User should be able to see a list of history results.
- User should be able to compare results (max 5).
03. View Master-Data
- User should be able to see the data details of a selected route.
- User should be able to breakdown the following rubrics.
- Bus Route.
- Population.
- Maximum Number of Buses Available.
Screen Specifications
- Desktop: 1280px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
Branding Guidelines
- Colors should be inline with the provided branding in the Color Scheme doc. We are open to suggestions to the shades you choose but the main colors should be the same tone as the proposed ones in the schema.
- We’re open to suggestions regarding typography systems that better suit the project goals.
- The client doesn’t have a logo yet for this app. It would be nice to see a good looking logo placeholder for the application.
Design Assets
Folder: https://drive.google.com/open?id=19ADkq2KF8obBCjAE-BRDm08XhTzK6hp-
- Screen Flow Overview: data and flow of the application.
- Data Definition: technical data definition for input and output of the algorithm that generates the routes.
- Wrap Sample: a visual representation of an actual wrapped bus.
- Bus Route Population: Sample map of Tokyo city with routes.
- Color Scheme: color usage guidelines.
Target Audience
- Advertisement agency staff:
- This user is the operator of this application, and shows the output and view to the Sponsor in a business meeting with them.
- This user is in charge of route selection and selling wrapping buses. This user would like to present the appropriate wrapping bus routes and its effects in an easy-to-understand manner in accordance with the desires and limitation of the sponsor’s marketing staff.
- This user has proposed multiple advertising of wrapping buses to many companies before, and they know about the bus routes and the distribution of demographics for main routes.
- Sponsor:
- This user is the customer of Advertisement agency staff. He looks at the application while agency staff operates and discuss the best advertisement routes.
- They collect information for planning marketing strategies for their products or services. They will like to know the effect of wrapping the bus advertisement.
- This user does not have experience of using wrapping bus as their marketing strategy and does not know the bus’s routes nor it’s demographic distribution.
- Since this user does live in Tokyo, they know about wrapping buses, and knows that wrapping buses that have an advertisement for young people do go through cities that are crowded with young peoples.
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- How well you implement the challenge requirements.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
Final Deliverables
- All original source files.
- Files should be created in Adobe Photoshop, Adobe XD or Sketch.
- Numbered/Ordered JPG screen files.
- Marvel Prototype
- We need you to upload your screens to Marvel App.
- Request a MarvelApp prototype from me using this link: https://tc-marvel-app.herokuapp.com/challenge/30098948
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- You MUST include your Marvel app URL as a text file in your final submission labeled “MarvelApp URL” (in your marvel app prototype, click on share and then copy the link).
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.