The 2024 Design Tools Survey is live! Share your tools!

UX Challenges

Digital Prototype

Digital Prototype Digital Prototype

Scenario

You're a product designer for a new educational app (competitors are Skillshare and Udemy). You're designing the interface for going through multiple lessons in a course.

You're at the stage of the process where you need to start making a digital prototype to test what the final product will feel like: things like interaction, UI components, typography, and image quality.

Task

Make a high-fidelity digital prototype. This prototype should demonstrate the flow of watching several lessons in a row that all have video and text content. You can review your competitors to see what kinds of things would be on a page like this. You may want to start with a wireframe.

Extra Credit: Add some interactivity to the prototype so that people looking at it can get a feel for what it would be like to use this interface on the final product.

Tutorials

If you need help with this challenge, check out our hand-picked tutorial recommendations.

Perfect Your UX Design Process – A Guide to Prototype Design

toptal.com

7 Tips for Efficient Prototyping

uxdesign.cc

The Ultimate Guide to Prototyping

justinmind.com

Rapid Prototyping: Digital

youtube.com

Tools

Not sure which tools to use? Try one of these.

Figma

figma.com

HTML / CSS

developer.mozilla.org

Protopie

protopie.io

Share Your Results

When you finish the challenge, post your work on Twitter! Be sure to use the hashtag #uxtoolschallenges and tag our account @uxtoolsco. We'll keep an eye out and repost good examples on a regular basis.

We're also building a new community for designers where you'll be able to get even more feedback. See more details.

More Challenges

User Flow
Usability Test
Design System

 All Challenges

Download hi-res versions of the cards

Join 70k+ newsletter subscribers and get a PDF download of all the cards. You'll also stay up to date with weekly lessons and news.

    Email newsletter signup