Back to Worked Examples
UX/UI Design Term 1

Wireframe to Prototype

Design Brief

Create a mobile app wireframe for a "Study Timer" app. The app should allow students to set a study duration, display a countdown timer, and show a completion message. Then explain how you would develop this into a prototype.

Step-by-Step Solution

1

Identify the user requirements

Before sketching, list what the user needs to do with the app.

User Requirements:

  • • Set a study duration (e.g., 25, 45, 60 minutes)
  • • Start the timer
  • • See the remaining time counting down
  • • Pause or cancel the timer if needed
  • • See a completion notification when time is up
2

Sketch low-fidelity wireframes

Create simple sketches showing the basic layout and elements. Focus on structure, not visual design.

Screen 1: Set Timer

[App Title]
Timer Display
25m
45m
60m
START

Screen 2: Running

23:45
Time remaining
PAUSE
CANCEL

Screen 3: Complete

✓
Great work!
You studied for 25 minutes
NEW SESSION

Key Point: Wireframes use boxes, lines, and simple shapes. They don't need colors, real images, or polished design - just enough to show the layout and functionality.

3

Define the user flow

Show how screens connect and how users navigate through the app.

Set Timer → tap START → Running → timer ends → Complete → tap NEW SESSION → Set Timer

Alternative path: From "Running" screen, user can tap CANCEL to return to "Set Timer" screen.

4

Add annotations

Explain what each element does and any interactive behaviors.

  • Duration buttons: Tapping selects that duration and highlights the button
  • Timer display: Shows countdown in MM:SS format, updates every second
  • Start button: Disabled until a duration is selected
  • Pause button: Toggles between PAUSE and RESUME states
  • Completion screen: Plays a sound/vibration to alert user
5

Develop into a prototype

A prototype adds interactivity so users can click/tap through the screens.

To create a prototype:

  1. Create higher-fidelity versions of each screen (add colors, proper fonts, icons)
  2. Use a tool like Figma, Adobe XD, or Canva to build the screens
  3. Add "hotspots" - clickable areas that link screens together
  4. Set up transitions (e.g., slide left when moving to next screen)
  5. Add a preview/presentation mode so users can interact with it

Prototype vs Wireframe: A wireframe is static (a drawing), while a prototype is interactive (users can tap buttons and navigate between screens).

Quality Checklist

  • ✓ All required functionality is represented
  • ✓ User flow is logical and complete
  • ✓ Each element is labeled or annotated
  • ✓ Layout is consistent across screens
  • ✓ Navigation is clear (user always knows where they are)

Common Mistakes to Avoid

  • ✗ Spending too much time on visual design in wireframes - keep them simple
  • ✗ Forgetting error states (what if user taps START without selecting a time?)
  • ✗ Not showing how users navigate back or between screens
  • ✗ Creating a prototype without testing it with real users