Hard | Topcoder Skill Builder Competition | Figma | Doctor Appointments

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 Hard Skill Builder Challenge and the goal of this one is to design a tablet application to help doctors manage their appointments better.

Design Problem

Nowadays the schedule of doctors is very busy so we plan to help them, by creating an application where they will be able to see their agenda with upcoming appointments as well as details about the patients. At the same time doctors will be able to see any notifications and important messages on the dashboard. The user can also access other sections of the application such as patients area, calendar, departments and reports.

User Story

Harry Smith is a general practitioner owning a clinique. He has many appointments which are all on his agenda on the laptop but then, he has a separate application to look for the patient history and another system to check for emails and reminders. Because of all these systems being separated, he is losing too much time toggling between them and his focus is not the best.

Harry just discovered a new website, where he can have all these features in one. He can see on the dashboard the upcoming patients, and any messages or tasks and reminders he needs to take care of. Even more clicking on a patient will show him more details about that person such as his health problem list, lab tests, medications and allergies he had and as well the family history.


  • What matters to the doctor?
  • What’s the most important information for him/her?
  • Upcoming appointments
  • Notifications
  • Upcoming Patient (name, appointment time, disorder, consultation type, etc.)
  • Patient Details (show account data about a user, problem list, labs tests), famly history, notes. etc).

Required Screens:

  • Dashboard - this is where the doctor sees all the upcoming appointments
  • Patient Details - this screen will show the details for a specific patient

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

Device: desktop: 1366 x 786 px (laptop)

What Will You Learn?

Solving this problem, you will learn to:

  • Create components variants if needed.
  • Do advance prototyping (Smart animate, easing timing, etc)

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 1366 x 786 px artboard
  • 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.
  • 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. For this example we’d like the call button to have a few variants to show the: active state, disabled and hover to follow the design. Learn about components and variant series here.
  • Once all screens are done, add hotspots to create interaction between them. Use advanced prototyping features like “smart animate” for all the interactions in this application. To add hotspots and learn about different transitions when prototyping check this tutorial.
  • 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 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.


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 "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.


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