MOO WebTech
Algorithms & Mobilepracticebeginner

L28 — Mobile App Interface pt.2 (Practice)

We take the Figma mockup from L27 and turn it into a clickable prototype — then show it to a classmate and get real feedback. Guided practice session.

80 min10.03.2026L28

Goals

  • Add a second screen to the Figma design from L27
  • Connect the two screens with a clickable link (Figma Prototype)
  • Present the prototype to a partner and collect feedback
  • Apply at least one improvement based on that feedback

We build on the app idea from L27. If you didn't finish L27's Task 2, use the homework tracker idea as a starting point — it's simple and everyone understands it.

Warm-up

Open Figma and your L27 file. Spend 3 minutes checking:

  • Is the top app bar on every screen the same height and colour?
  • Are all card rectangles the same width?
  • Is the text inside buttons large enough to read easily?
  • Does the FAB look like a circle (not a rectangle)?

Fix any obvious visual inconsistencies before we move on. These small polish steps are real designer habits.

Steps

Step 1 — Design the second screen (Detail screen)

When the user taps on a card on the home screen, they should see a detail screen with more information about that item.

Press F and create a second Android Small frame next to your first one. Name it Detail Screen (double-click the frame name in the layers panel).

Your detail screen needs:

  1. A top bar with a back arrow (←) on the left and the item's name as the title
  2. An image area — a large rectangle taking up the top third of the screen (this will later hold a photo)
  3. A title label — the item's name, large font (24+)
  4. A description — 2–3 lines of placeholder text (use "Lorem ipsum" or make up real text)
  5. An action button at the bottom — e.g. "Mark done", "Add to cart", or "Water now"
💡 Hint
You don't need a FAB on a detail screen — the user already tapped on an item. The single action button at the bottom is enough. Make it fill the width minus some padding on each side (e.g. width 300, centered).

Step 2 — Connect the screens in Prototype mode

Figma has a "Prototype" tab (top right panel, next to "Design"). Here you can draw arrows between frames to simulate navigation.

  1. Click the Prototype tab on the right
  2. On your Home Screen, click on one of your cards (the rectangle)
  3. A blue circle appears on the right edge of the selected element — drag it to the Detail Screen frame
  4. A connection arrow appears. Set: Trigger = On click, Action = Navigate to, Destination = Detail Screen
  5. Press the ▶ "Present" button in the top-right corner of Figma

A browser popup shows your app. Click the card → the Detail Screen appears. Click the back arrow → it should go back (connect it to the Home Screen the same way).

💡 Hint
To connect the back arrow, select only the arrow shape (not the whole top bar). Drag its blue circle to the Home Screen frame. Set Trigger = On click. Now the back arrow is tappable in the prototype.

Step 3 — Test with a partner ("hallway test")

Swap laptops or share your Figma Present link with a partner. Ask them to use your prototype without any explanation. Watch silently. Note:

  • Did they tap the right card right away?
  • Did they find the back arrow without help?
  • Did they pause or look confused anywhere?
  • Did anything surprise them (good or bad)?

Then swap — you test their prototype the same way.

Write down two observations about your partner's design and two observations about your own.

💡 Hint
A good observation is specific: "My partner didn't see the FAB because it blends with the background colour." A bad observation is vague: "It was confusing." Always say what was confusing and why.

Step 4 — Apply one improvement

Based on your observations, make one change to your own prototype. Examples:

  • Make the FAB a more visible colour
  • Increase the font size of the card title
  • Add a label to the back arrow so it says "← Back" instead of just an arrow
  • Change the action button to a more specific name ("Water the cactus" instead of just "Action")

After the change, test again with the same partner. Did the problem disappear?

Step 5 — Export and submit

Go to File → Export frames (or select each frame and press Ctrl+Shift+E). Export both screens as PNG at 1x.

Submit the two PNG files and a short written note (3–5 sentences):

  • What is your app about?
  • What change did you make in Step 4?
  • Did the usability problem go away after the change?

Bonus Tasks

Bonus 1 — Third screen: Settings or Profile

Add a third frame for the Settings or Profile page of your app. Connect it from the bottom navigation bar icon. The screen should have:

  • A user avatar (large circle with initials or an emoji in the center)
  • Name and email labels
  • A list of 3–4 settings items (toggles or arrows)

Connect it bidirectionally: home nav bar ↔ profile screen.

Bonus 2 — Colour theme

Pick a consistent colour palette using coolors.co:

  1. Go to coolors.co and press Space until you find a palette you like
  2. Lock your favourite colours and regenerate the rest
  3. Apply the palette to your mockup: primary colour for the top bar and action button, light grey for backgrounds, dark for text

Export the palette as a PNG and include it with your submission. Note whether the contrast meets the "readable text" rule from L27.

Bonus 3 — Share a live link

In Figma, click Share → Anyone with the link can view. Copy the link and share it in the class chat. When classmates open it in Figma, they see your exact design without downloading anything. If you click "Present" in the shared link, the prototype is directly runnable.