Medium | Topcoder Skill Builder Competition | Figma | Restaurant Orders Management

Key Information

Competition Timeline




Aug 31, 2021



Sep 30, 2021




Aug 31, 2021



Sep 30, 2021




Sep 30, 2021



Oct 05, 2021




Oct 05, 2021



Oct 26, 2021


Winners Announced

Oct 28, 2021


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 Medium Skill Builder Challenge and the goal of this one is to design a tablet application to help restaurants owners and employees to manage their orders.

Design Problem

We are in a global pandemic, and restaurants are struggling to stay in business and manage everything online. Many restaurants have launched websites and new mobile apps to make it easier for customers to order and do curbside pickup. This challenge is not about the customer side, but about the restaurant and employee experience within the restaurant. As these orders arrive, employees and cooks need to quickly understand their order and package up the food for curbside pickup.

We are looking for you to design 2 Responsive Tablet and mobile screens that shows current online orders and allows an employee to manage the customer's order digitally when they arrive at the restaurant.

User Story

Rebecca is a restaurant owner and she has 5 employees. Due to the covid pandemic she launched her business online too. There are many things needed to manage like accepting orders, sending the orders to kitchen staff, checking the current ingredients stocks, etc. which can be overwhelming at times.

She recently discovered an application which helps her manage everything. With this application she can see overall stats of incoming orders, and how many are in progress, ready to pick-up, completed etc. and then she sees the details for each of these orders. For each order, she can see the recipe name, the person who ordered and phone number, the number of portions, etc.. By tapping a specific order, she can see even more details.


  • What matters to the employee?
  • What information might be useful for the employee in a hectic environment?
  • Orders pending
  • Time of the order
  • Time of pickup
  • Order details (Name, what was ordered, customizations, notes from the customer, etc.)

Required Screens:

  • Dashboard (tablet and mobile) - this is where the user sees all the orders coming in
  • Order Details (tablet and mobile) - this screen will show the details of the order

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.


  • tablet size: 1536 x 2048px (responsive) Note: create your design at 768 x 1024px and export at 2X
  • mobile size: 750 x 1334px (responsive) Note: create your design at 375 x 667px and export at 2X

Note: the tablet design sould be responsive so we can go into the source file and adjust the size manually to mobile size and all elements should fit in place well.

What Will You Learn?

Solving this problem, you will learn to:

  • Create components
  • Define constraints (responsive design and auto-resize component)
  • Export assets

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 landscape artboard for ipad (768x1024 px (height x width) )
  • Learn about auto layout and constraints to make your design responsive and adjust well from tablet size to mobile and for better component creation. Here are a few tutorials: constraints, auto layout and card component with auto layout tutorial.
    Note: The tablet design sould be responsive so we can go into the source file and adjust the size manually to mobile size and all elements should fit in place well. Adjust to the mobile screen of 375 x 667px.
  • When creating a master component, consider that you will re-use the component/instance to make your design consistent, responsive and easy to edit in a later time such as button, header, navigation, cards, icons, etc. Learn about components and variant series here.
  • Assets, especially icons, need to have standard and consistent sizes. Make sure to set them up from scratch in the proper way. They should be exported or inspected/downloaded easily by developers with consistent size and proper name. You can wrap them using frames to create a consistent size bounding box or container. Check this tutorial to learn about all of these things.
  • After you created all components you need, export them in a folder and make sure they have the correct name as shown here.
  • 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 of the prototype you should watch this tutorial

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 file to include:

  • All original source files created in Figma etc.

An archive called 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.


2022 Topcoder(R) Open


Screening Scorecard


Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" 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.


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.


Questions? ‌



You must include all source files with your submission.




ID: 30203991