UI/UX - lesson 7 | HackIndia Skills

Key point

Proof beats polish

Your submission should prove that a user can understand and use the app. Do not only say what the app does. Show the screens and states that make it usable.

What to submit

Pick at least 3 working screens or flows from your project. A flow can be login to dashboard, search to results, or add item to confirmation.

Each chosen screen should show the design work from this track: hierarchy, spacing, readable type, contrast, empty or error states, and clear UI copy.

Your to-do

Check your screens

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Open the app on your phone or a narrow browser width.
Check that the main action is easy to find without explaining it.
Check that text is readable at normal zoom.
Trigger one empty state and one error state if your app has them.
Fix unclear button labels like Submit, OK, or Click here.

0 of 5 done

Example

README proof section

Add a small section like this to your public repo README. It helps judges, mentors, and recruiters review your work fast.

## Interface design proof

Project: Campus Lost and Found

Working screens / flows:
1. Home to item details
   - Clear main action: "Report found item"
   - Cards use consistent spacing and readable titles

2. Search results
   - Empty state shown when no item matches
   - Empty copy: "No items found. Try a different keyword or category."

3. Report item form
   - Error state shown for missing photo
   - Error copy: "Add a photo so others can identify the item."

Design checks:
- Main headings are larger than body text
- Buttons have visible contrast against the background
- Form labels are clear without placeholder-only text
- Screens work on mobile width

Screenshots:
- /docs/screens/home.png
- /docs/screens/search-empty.png
- /docs/screens/report-error.png

Tip

Use AI carefully

You can ask ChatGPT, Gemini, or Claude to review your README and screenshot notes. Paste only public details. Ask it to find missing proof, vague labels, and unclear error copy.

Do not accept generic praise. Check if its suggestions match your real screens. If it mentions a screen or feature you do not have, remove it.

Common mistake

Common submission miss

Many teams submit a GitHub link and a demo video, but no design proof. The reviewer then has to guess what improved.

Make it obvious. Name the 3 screens. Mention the empty and error states. Add screenshots in a docs/screens folder or include them in your README.

Your to-do

Final submission check

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Push your latest code to a public repository.
Add screenshots or a short screen recording that shows the 3 screens or flows.
Update the README with the interface design proof section.
Test the public repo link in an incognito window.
Submit the HackIndia project with the repo link and a short design summary.

0 of 5 done

Your to-do

Do this now

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose the 3 screens or flows you will show.
Take one screenshot of each screen or important state.
Create a docs/screens folder in your repo.
Paste the README proof section and edit it for your project.
Write a 2 sentence design summary for your HackIndia submission.

0 of 5 done

Submit your designed project

Proof beats polish

What to submit

Check your screens

README proof section

Use AI carefully

Common submission miss

Final submission check

Do this now

Quick check