UX/UI Design Brief</div>
Smartwatch Messenger App
Design a messaging experience that makes sending and receiving messages simple, fast, and accessible on a small screen.
User FlowUI/UX Style GuidePrototype</div>
● Alex10:09</div>
AlexRunning a few minutes late. See you soon!</div>
No problem! See you soon.</div>
🎙</div><div class="ctrl">☺</div><div class="ctrl primary">➤</div></div>
OverviewResearchUser FlowStyle GuideFlat ScreensPrototypeTestingDeliverables
The Challenge</div>
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.
01</div><h3>User Flow</h3><p>Map the messaging journey, decisions, alternate paths, and error recovery in FigJam.</p></div>
02</div><h3>UI/UX Style Guide</h3><p>Complete the existing course style-guide template before designing final screens.</p></div>
03</div><h3>Prototype & Test</h3><p>Build with Figma Make, test with five participants, revise, and test with five more.</p></div>
01 / Research & Analysis</div>
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.
Visual reference for the project structure. Create your own final screens and diagrams; do not submit the reference image as your design work.
02 / Information Architecture & User Flow</div>
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.
Open Messages</div><div class="arrow">↓</div>
Select Conversation</div><div class="arrow">↓</div>
Read Message</div><div class="arrow">↓</div>
Reply?</div><div class="arrow">↓</div>
Voice Dictation</div><div class="flow-step">Quick Reply</div><div class="flow-step">Emoji</div></div>
↓</div><div class="flow-step">Send Message</div><div class="arrow">↓</div>
Confirmation</div>
Error → Explain → Try Again</div>
Example flow graphic. Rebuild and adapt this in your course FigJam template, using the visual conventions demonstrated in class.
Deliverable: A labeled FigJam user flow and a short explanation of how it addresses your chosen user problem.
03 / UI/UX Style Guide</div>
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 →
Visual Research & Moodboard. Establish the visual direction for your smartwatch messenger.</figcaption> </figure> </div>
Color & Contrast. Define color roles and check legibility on a small screen.</figcaption> </figure> </div>
Typography & Spacing. Establish a readable type hierarchy and consistent spacing rules.</figcaption> </figure> </div>
Reusable Components. Document buttons, message bubbles, reply controls, and interface states.</figcaption> </figure> </div> </div>
Color & Contrast
Define backgrounds, text, primary actions, and status colors. Make sure the interface remains legible at watch size.
Primary</div><div class="swatch"><div class="dot" style="background:#6557e8"></div>Secondary</div><div class="swatch"><div class="dot" style="background:#27c76f"></div>Success</div><div class="swatch"><div class="dot" style="background:#ff9f1a"></div>Warning</div><div class="swatch"><div class="dot" style="background:#ff514b"></div>Error</div><div class="swatch"><div class="dot" style="background:#17191d"></div>Background</div></div>
Typography & Spacing
Set a hierarchy for names, message text, timestamps, labels, and controls. Check type at realistic device scale.
Aa</div><p>Headline · Semibold
Body · Regular
Caption · Regular</p>
Components
Define reusable buttons, conversation items, message bubbles, reply controls, and navigation.
Primary Action</div><div class="component dark">Secondary Action</div><div class="component light">Quick Reply</div>
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.
04 / Flat Screens in Figma Design</div>
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.
Messages10:09</div><div class="mini-row">Alex · NowRunning late…</div><div class="mini-row">Jordan · 5mSee you there!</div><div class="mini-row">Taylor · 12m👍</div></div>1. Conversation List</div>
‹ Alex10:09</div><div class="msg">AlexRunning a few minutes late. See you soon!</div><div class="mini-blue">No problem! See you soon.</div><div class="controls"><div class="ctrl">🎙</div><div class="ctrl">☺</div><div class="ctrl primary">➤</div></div></div>2. Message View</div>
Reply10:09</div><div class="mini-btn">🎙 Dictate</div><div class="mini-btn">☷ Quick Reply</div><div class="mini-btn">☺ Emoji</div><div class="mini-btn">× Cancel</div></div>3. Reply Options</div>
◉</div>Listening…<p style="font-size:9px;text-align:center">Tap to stop</p><div class="mini-btn" style="width:100%">Cancel</div></div>4. Voice Dictation</div>
✓</div>Message Sent<div class="mini-btn" style="width:100%">Done</div></div>5. Confirmation</div>
!</div>Couldn’t Send<p style="font-size:9px;text-align:center">Check connection and try again.</p><div class="mini-btn" style="width:100%">Try Again</div></div>6. Error / Recovery</div>
Deliverable: Flat screen designs in Figma Design that follow the user flow and apply the existing style guide.
05 / Interactive Prototype</div>
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.
01</div><h3>Prepare</h3><p>Finish your FigJam user flow, style guide, and Figma Design screens.</p></div>
02</div><h3>Prompt</h3><p>Describe the user, task, screen sequence, visual system, and expected interactions.</p></div>
03</div><h3>Refine</h3><p>Fix inconsistent visuals, confusing navigation, and broken interactions. Preview the full journey.</p></div>
Figma Make PrototypeBuild a working demonstration of the messaging journey.</div>Open Figma Make ↗</div>
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.
06 / Usability Testing</div>
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.
Round 1</div><h3>Test the initial prototype</h3><ul><li>Ask participants to read and reply to a message.</li><li>Observe hesitation, errors, and confusion.</li><li>Record comments and a consistent usability rating.</li></ul></div>
Round 2</div><h3>Test the revised prototype</h3><ul><li>Prioritize and address the first round’s issues.</li><li>Test with five participants in a second group.</li><li>Compare results and identify remaining problems.</li></ul></div>
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.
Final Submission</div>
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
Evaluation Criteria</div>
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.
Back to top ↑<p>Smartwatch Messenger App · UX/UI Design Brief. Replace template placeholders with actual course assets and verified tutorial links before publishing.</p></div>