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.
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.
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
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.
- How many impressions per Ad
- Clicks per Ad
- 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.
- 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.
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 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.
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.