Easy | Topcoder Skill Builder Competition | Figma | Ad Manager

Key Information

Register
Submit
Competition Timeline

Timezone:Etc/UTC

Registration

Starts

Aug 31, 2021

11:16

Ends

Sep 30, 2021

12:20

Submission

Starts

Aug 31, 2021

11:22

Ends

Sep 30, 2021

12:26

Screening

Starts

Sep 30, 2021

12:26

Ends

Oct 05, 2021

07:09

Review

Starts

Oct 05, 2021

07:12

Ends

Oct 26, 2021

23:44

Winners Announced

Oct 28, 2021

09:07

Challenge Summary

Welcome to our Topcoder Skill Builder "Figma" Competition!

We are excited to kick-off our plans to help everyone skill up, have fun, and earn more money through Topcoder challenges. The Skill Builder challenges have 3 problems: Easy, Medium, and Hard. Each problem has steps to get you started with Figma and learn as you go.

This is the Easy Skill Builder Challenge and the goal of this one is to design a mobile ad manager application.

##This is your chance to build your design and figma skills.

Design Problem

We are looking to design a premium Ad Manager mobile application that gathers all the critical Ad features from different sources like Google Ads, Facebook Ads, Instagram Ads, Youtube Ads, and more.

This mobile Ad Manager application will help sales and marketing managers track their ads in a single app, plan their next digital campaign by quickly understanding costs, target audience, and possibly launch a campaign creator from their mobile dashboard.

Realize this needs to be a mobile utility application. The application would be processing this data and making recommendations on the next steps, based on budget constraints or suggested budgets (based on existing Ad stats, trends, etc. and the goals you would have imputed). This would not be useful if you have to go and do all the analysis manually on your phone.

To get an idea of the data, you can check out this spreadsheet.

Glossary

Impressions = refers to the views an ad has been seen

Engagement = this tells us how many people have interacted with our ads

CTR = Click-Through Rate is a report which shows how many people from those who view the ads, click them

User Story

John has a website to sell t-shirts with unique designs, but he doesn’t have a lot of sales now. To be more successful he is running several ad campaigns on: Facebook, Google, Youtube, LinkedIn and Quora in several countries. He would like to see which of these performed better over the past 2 months so he knows which one to focus more in the future.

John opens our application and on his dashboard he sees general stats about these and how many impressions/views are overall, as well as how they performed in the past couple of weeks.

He sees that the Facebook campaign is performing the best so far with 34% engagement rate from all the campaigns so he checks it in more detail. On the details page, the information is displayed for each targeted country as well as overall. General stats as Engagement, Impressions, CTR and Total cost, help him make for a more clear opinion about this campaign. The application also recommends a couple of things automatically to improve his ads performance.

Consider:

  • How many impressions per Ad
  • Clicks per Ad
  • Views
  • Audience (region, age, gender, interest)
  • Avg cost per click
  • Avg total cost of X campaign
  • Users can turn on/off campaigns, increase budget (add money), set up their target-audience preferences.
  • This mobile app should feel like a premium utility/quick view application.

Required Screens:

  • Dashboard - this is where the user sees everything at a high level about his campaigns
  • Campaign Details - the user gets on this page by clicking on one of the campaigns from the dashboard

We have prepared some wireframes to help you get started and apply the Figma features listed below. You can be creative with the layout as long as you incorporate the learning elements.

Device: Mobile: 750 x 1334px (Note: create your design at 375 x 667px and export at 2X)

What Will You Learn?

Solving this problem, you will learn to:

  • Define styles (colors, text, effects) and reuse them across the application
  • Design charts in Figma, especially donut and pie chart
  • Layer management
  • Simple prototyping
  • Share links for the project and prototype

Note: in this challenge it is mandatory to apply ALL the steps below and use those elements in your design - this is one of the judging criterias .

What You Need to Do?

Step by step guidance on the above topics related to the problem :

  • Create a 750 x 1334px / 375 x 667px artboard
  • Create a grid for design guidance like explained in this video
  • Define styles and use them to keep the consistency across the application. such as:
  • --Color style (primary, secondary, tertiary colors, etc.): once you decide on the overall color palette of your application, you can create your color styles as explained in this tutorial. Once you name your colors, it’s faster and easier to reuse them across the application.
  • --Typography style (Heading, subheading, body, etc): when creating the typography styles, you should first think about the hierarchy you wish to have in the application from Heading 1 to Heading 6, paragraphs style, etc. Sometimes like for this simple application, you might not need to define all headings but can focus on defining a couple for page title, containers titles, regular paragraph, small paragraph, etc. You can check here a short explanation how typography styles should be defined.
  • --Effect style (drop shadow, inners shadow, etc): these effects are particularly useful for buttons who would have a drop shadow or form elements which might have inner shadows, etc. Learn more on how to create layer effects from this tutorial.
  • Mind your layers management and naming convention. Make sure layers are grouped and named like this.
  • For your dashboard, to create the engagement donut chart, is time to visualize numeric data into a graphic chart using figma features. Learn about creating graphs and charts with these tutorials: donut and pie chart, arch graphs and area charts. Once the donut/pie shape is created, to add color, all you have to do is add an angular gradient to it.
  • Once all screens are done, add hotspots to create interaction between them. To add hotspots and play with the prototype check this link.
  • To share the link and prototype to be viewed by the customer you should watch this tutorial on how to do that. Note: when creating the prototype, select Iphone 8 from the available frames. If your submission is designed at 750x1334px, you should scale the entire screen/artboard at half using the Figma scale feature. That is because Iphone 8 frame for prototype in Figma has 375 x 667px size.
  • To share the project link with any developer for Handoff (similar to what Marvel has), you should press the Share button on the toolbar, change sharing settings to “Anyone with the link can view” and press the Copy Link then. Read more details here.

If you wish to watch other Figma tutorials (optional) check this list we’ve put together.

Judging Criteria

Your submission will be judged based on the following criterias:

  • Completeness of your submission (all elements under What You Will Learn should be included and all steps followed)
  • How well are the elements to be learned applied in your design
  • How modern and sharp your design looks
  • Creativity of your design

Stock Artwork

  • Stock artwork is allowed as per Topcoder rules.
  • Note: you are not allowed to use charts, graphs or other GUI KITs from the internet. All the work should be created by you.

Submission Deliverables

Create an archive with all 3 items below:

An archive called Source.zip file to include:

  • All original source files created in Figma etc.

An archive called Submission.zip file to include:

  • All your design files in PNG or JPG format
  • Your declaration files to include the Figma project link, the prototype link and any notes about fonts usage, photo and icon declaration

Create a JPG preview file of 1024 x 1024 px

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

ELIGIBLE EVENTS:

2022 Topcoder(R) Open

CHALLENGE LINKS:

Screening Scorecard

SUBMISSION FORMAT:

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "Submission.zip" file.
  3. Place all of your source files into a "Source.zip" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.

Screening:

All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

CHALLENGE LINKS:

Questions? ‌

CHALLENGE DISCUSSION

SOURCE FILES:

You must include all source files with your submission.

SUBMISSION LIMIT:

Unlimited

SHARE:

ID: 30203990