Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
Let’s take a look at the mockup of the form we’ll be building–a mobile food delivery checkout form for a restaurant called Tacos By Roscoe. I’m concentrating on getting just the first screen right, for gathering the user’s delivery information. I’ve included an error reporting screen as well.
Using the Project Files
The project file download is a .fig file. For instructions on importing into Figma, see Import Files Into Figma.
Further reading
- FontAwesome
- Designing for Cognitive Differences
- Cognitive Disabilities and the Web: Where Accessibility and Usability Meet?
- Checkout Usability: Auto-Detect ‘City’ and ‘State’ Inputs Based on the User’s Postal Code (60% of Sites Don’t)
- Form Field Usability: Consider Using Localized Input Masks for ‘Phone’ and Other Restricted Inputs (64% Don’t)
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up