Smartwatch
Messenger App
Design a messaging experience that makes sending and receiving messages simple, fast, and accessible on a small screen.
Design for quick, focused interactions.
Unlike a smartphone, a smartwatch is often used while someone is moving, exercising, commuting, or doing something else. Design a focused messaging experience that prioritizes essential actions, readable information, and efficient interactions.
Client
A fictional technology startup developing a messaging application for wearable devices.
Objective
Help users read and respond to messages without needing to reach for their phone for every interaction.
User Flow
Map the messaging journey, decisions, alternate paths, and error recovery in FigJam.
UI/UX Style Guide
Complete the existing course style-guide template before designing final screens.
Prototype & Test
Build with Figma Make, test with five participants, revise, and test with five more.
Understand the user before designing.
Investigate existing smartwatch messaging experiences. Identify common usability problems and validate a meaningful user need before choosing a solution.
Research tasks
- Review Apple Watch or Wear OS messaging patterns.
- Ask users about when and why they message from a watch.
- Identify friction in reading, replying, and navigating.
- Write a problem statement and a “How might we…” question.
Example design question
How might we help smartwatch users reply to important messages with fewer steps and less visual attention?
Use your own research to establish the actual problem. Do not present example findings as research results.
Plan the experience in FigJam.
Use the existing course FigJam User Flow Template. Duplicate it and map the primary messaging journey before you design the interface.
Your flow should include
- Starting point and user goal.
- Screen sequence and user actions.
- Decision points and alternative response methods.
- Error and recovery paths.
- A clear successful outcome.
Example journey
Open message → Read message → Decide whether to reply → Choose input method → Send message → Confirm success.
Alternative: cancel and return to conversations. Recovery: explain a failed voice recognition or send action and offer a next step.
Deliverable: A labeled FigJam user flow and a short explanation of how it addresses your chosen user problem.
Build a consistent visual system.
Use the existing Student UI/UX Style Guide template provided in class. Duplicate and complete that template—do not replace it with a different one.
Use the actual Student UI/UX Style Guide template created for this course. Open the template, duplicate it, and complete its existing sections rather than substituting a different format.
Open the Student UI/UX Style Guide template in Figma →
Color & Contrast
Define backgrounds, text, primary actions, and status colors. Make sure the interface remains legible at watch size.
Primary
Secondary
Success
Warning
Error
Background
Typography & Spacing
Set a hierarchy for names, message text, timestamps, labels, and controls. Check type at realistic device scale.
Headline · Semibold
Body · Regular
Caption · Regular
Components
Define reusable buttons, conversation items, message bubbles, reply controls, and navigation.
Accessibility
- Readable text and sufficient contrast.
- Clear labels and predictable navigation.
- Controls easy to identify and activate.
- Alternatives to tiny-keyboard typing.
- Feedback for success and failure.
A grayscale review can help evaluate hierarchy, but does not by itself establish accessibility compliance.
Course asset: Insert actual screenshots from your existing style-guide template for Visual Research & Moodboard, Color & Contrast, Typography & Spacing, and Components. Keep the course template consistent with the one used in class.
Design every screen in the user journey.
Use your user flow and style guide to create a coherent screen board. Name your frames clearly and ensure each screen supports the task mapped in FigJam.
1. Conversation List
2. Message View
3. Reply Options
Listening…
Tap to stop
4. Voice Dictation
Message Sent
5. Confirmation
Couldn’t Send
Check connection and try again.
6. Error / Recovery
Deliverable: Flat screen designs in Figma Design that follow the user flow and apply the existing style guide.
Bring the experience to life with Figma Make.
After completing the user flow, style guide, and flat screens, use Figma Make to build an interactive prototype that demonstrates the primary messaging task.
Prepare
Finish your FigJam user flow, style guide, and Figma Design screens.
Prompt
Describe the user, task, screen sequence, visual system, and expected interactions.
Refine
Fix inconsistent visuals, confusing navigation, and broken interactions. Preview the full journey.
Replace this link or add your own prototype link when your project is ready. The prototype should include working navigation, meaningful responses to actions, and success and recovery states.
Test, revise, and test again.
Run two rounds of usability testing with five participants per round. Give each person a realistic task, observe their actions, and record what you learn.
Test the initial prototype
- Ask participants to read and reply to a message.
- Observe hesitation, errors, and confusion.
- Record comments and a consistent usability rating.
Test the revised prototype
- Prioritize and address the first round’s issues.
- Test with five participants in a second group.
- Compare results and identify remaining problems.
Report your findings
Document the tasks, observations, problems, changes made, ratings, and whether the revised design improved the experience. Report only testing you actually conducted; do not invent results.
Deliverables checklist
Organize your work so another person can understand the research, follow the design process, and test the prototype.
Research & Planning
- Research notes and user problem
- Primary user persona
- FigJam user flow with decisions and recovery
- Completed existing UI/UX Style Guide template
- Design rationale
Design & Validation
- Flat screens in Figma Design
- Interactive Figma Make prototype
- First test with five participants
- Revised screens and prototype
- Second test with five participants
- Summary of findings and iterations
- Google Doc with ChatGPT prompts and useful results
- Shareable project links with correct permissions
What makes a successful project?
Usability
Users can complete the messaging task efficiently and understand what to do next.
Visual Design
Color, typography, spacing, and components create a cohesive interface.
Interaction & Accessibility
The prototype responds appropriately and the design addresses real access needs.
Remember the process
Research → User Flow → UI/UX Style Guide → Flat Screens → Interactive Prototype → User Testing → Iteration.
Design for the smartwatch—not a miniature smartphone. Your goal is a focused, accessible messaging experience that helps people communicate with as little friction as possible.