**TASK:**
Design an analytics dashboard for tracking user engagement metrics

**CONTEXT:**
- For product managers at B2B SaaS company
- Need to monitor daily active users, feature adoption, retention
- Used daily for decision-making and team reporting

**ELEMENTS:**
- Header: Company logo, date range selector, export button
- Key metrics cards: DAU, MAU, Retention Rate, Feature Adoption
- Trend chart: User engagement over time (line graph)
- Feature breakdown: Table showing top 10 features by usage
- User segments: Pie chart showing user distribution

**BEHAVIOR:**
- Metric cards show comparison vs previous period (+/-%)
- Chart: Hover shows exact values, click to drill down
- Table: Sortable columns, row click opens detail view
- Date selector: Updates all data on change

**CONSTRAINTS:**

**TASK:**
Create 4-step onboarding flow for SaaS project management tool

**CONTEXT:**
- First-time users after signup (free trial activated)
- Goal: Get to first project created in under 2 minutes
- Reduce abandonment (currently 40% drop-off)

**ELEMENTS:**
Step 1: Welcome screen
- Welcome message, value proposition
- "Let's get started" button
- Progress indicator (1 of 4)

Step 2: Create workspace
- Workspace name input
- Team size selector (dropdown)
- Industry selector (optional)

Step 3: Invite team
- Email invite inputs (3 visible, "Add more" option)
- Skip button (can do later)

Step 4: Create first project
- Project name input
- Template selector (Software, Marketing, Design)
- "Create Project" button

**BEHAVIOR:**
- Steps appear sequentially (no back button - forward only)
- Each step validates before allowing next
- Skip available after Step 2
- Completion triggers confetti animation + dashboard

**CONSTRAINTS:**
- Mobile-first responsive (320px to 1440px)
- Must complete in under 2 minutes (show time estimate)
- Accessible (keyboard navigation, screen reader support)
- Match existing brand: Figma library [Import: Brand-Components]

**TASK:**
Design interactive product customization interface for custom laptop builder

**CONTEXT:**
- E-commerce site selling configurable laptops
- Users select: Processor, RAM, Storage, Display, Accessories
- Each choice affects price (show real-time total)
- Increase average order value from $1,200 to $1,500

**ELEMENTS:**
Left panel (60%): 3D product visualization
- Rotatable laptop render
- Updates as user selects options

Right panel (40%): Configuration options
- Processor selector (dropdown: i5, i7, i9)
- RAM selector (buttons: 8GB, 16GB, 32GB, 64GB)
- Storage selector (256GB, 512GB, 1TB, 2TB SSD)
- Display selector (FHD, QHD, 4K)
- Add-ons checkboxes (Mouse, Keyboard, Bag, Warranty)

Bottom bar: Sticky price summary
- Base price + upgrades breakdown
- Total (large, prominent)
- "Add to Cart" button

**BEHAVIOR:**
- Selecting option: Highlights choice, updates price, refreshes 3D model
- Hover on options: Show feature comparison tooltip
- Upgrade suggestions: "Most popular" badge, "+$200 = 2x performance"
- Add to Cart: Validate all required selections, slide-in cart preview

**CONSTRAINTS:**

**TASK:**
Create transaction detail screen for mobile banking app

**CONTEXT:**
- Users reviewing past purchases/deposits
- Need to: See details, categorize, split, dispute, export
- Financial app requiring trust and clarity

**ELEMENTS:**
Header: Transaction merchant + amount
- Merchant name and logo
- Transaction amount (large, prominent)
- Date and time

Transaction details card:
- Payment method (Visa •••• 1234)
- Category (Groceries, Travel, Entertainment)
- Location (map thumbnail + address)
- Reference number

Actions section:
- Recategorize (button)
- Split transaction (for shared expenses)
- Download receipt (if available)
- Report issue/dispute

Related section:
- Similar transactions from this merchant
- Spending in this category (chart)

**BEHAVIOR:**
- Tap category: Open category selector (sheet modal)
- Tap split: Show split interface (multiple people)
- Tap dispute: Multi-step form (reason, evidence)
- Tap map: Expand to full-screen map view
- Pull-down to close screen

**CONSTRAINTS:**

**TASK:**
Design powerful admin data table for user management

**CONTEXT:**
- SaaS admin managing 1,000-10,000 users
- Tasks: View, search, filter, edit, export, bulk actions
- Power user tool (complex OK if powerful)

**ELEMENTS:**
Header:
- Page title "Users"
- Search bar (real-time filter)
- Filter button (opens filter panel)
- Export button (CSV/Excel)
- "Invite User" primary action

Table columns:
- Checkbox (select all/individual)
- Avatar + Name (sortable)
- Email (sortable)
- Role (sortable dropdown filter)
- Status (Active/Inactive badge)
- Last Active (sortable, relative time)
- Actions (overflow menu: Edit, Deactivate, Delete)

Bulk actions bar (appears when items selected):
- "X users selected"
- Change role (dropdown)
- Deactivate/Activate (toggle)
- Delete (with confirmation)

Pagination:
- Rows per page selector (25, 50, 100)
- Page numbers + prev/next

**BEHAVIOR:**
- Column headers: Click to sort (asc/desc indicator)
- Row click: Opens user detail sidebar
- Checkbox: Multi-select with shift-click range
- Actions menu: Hover to show, click outside to close
- Bulk delete: Requires confirmation modal with count
- Search: Debounced (300ms), highlight matches

**CONSTRAINTS:**

**TASK:**
Design video conferencing interface for team meetings

**CONTEXT:**
- Virtual meetings for distributed teams (2-20 participants)
- Features: Screen share, chat, reactions, recording
- Competing with Zoom, Meet, Teams (differentiate)

**ELEMENTS:**
Main area: Video grid
- Active speaker highlighted (larger)
- Grid view (up to 16 visible)
- Gallery/Speaker toggle

Top bar:
- Meeting title
- Timer (elapsed time)
- Participant count
- Recording indicator (if active)

Bottom control bar:
- Mic (mute/unmute, settings)
- Camera (on/off, settings)
- Screen share (start/stop)
- Reactions (emoji picker)
- Chat (toggle sidebar)
- Participants (toggle sidebar)
- End call (red, prominent)

Sidebar (togglable):
- Tabs: Chat, Participants, Settings
- Chat: Messages, send input
- Participants: List, mute all, spotlight

**BEHAVIOR:**
- Hover video tile: Show participant name, pin option
- Click participant: Opens detail modal (kick, mute, spotlight)
- Screen share: Takes over main area, videos minimize
- Reactions: Float up from sender's video
- Chat message: Desktop notification if sidebar closed
- Network quality indicator: Green/yellow/red dot

**CONSTRAINTS:**

**TASK:**
Create patient portal dashboard for healthcare system

**CONTEXT:**
- Patients managing appointments, records, prescriptions
- Age range: 25-75 (wide accessibility requirements)
- Regulatory: HIPAA compliant (audit logs, security)

**ELEMENTS:**
Header:
- Patient name + photo
- Health summary score (custom metric)
- Notifications bell

Dashboard cards:
1. Upcoming appointments
   - Next 3 appointments (date, doctor, type)
   - "Schedule appointment" button

2. Medications
   - Active prescriptions (name, dosage, refill date)
   - "Request refill" quick action

3. Test results
   - Recent lab results (name, date, status)
   - View/download reports

4. Messages
   - Unread messages from providers
   - "Send message" link

5. Health records
   - Medical history summary
   - Download complete record (PDF)

Quick actions sidebar:
- Upload document
- Pay bill
- Update insurance
- Emergency contacts

**BEHAVIOR:**
- Appointment card: Click to reschedule/cancel
- Medication refill: One-click request (confirmation required)
- Test results: Expandable cards show details
- Messages: Thread view, compose new
- All actions logged (audit trail for HIPAA)

**CONSTRAINTS:**

**TASK:**
Design content calendar for social media management

**CONTEXT:**
- Marketing teams scheduling posts across platforms
- Manage: Twitter, Instagram, LinkedIn, Facebook
- Need: Draft, schedule, collaborate, analyze

**ELEMENTS:**
Header:
- Month/week view toggle
- Platform filters (show/hide Twitter, Instagram, etc.)
- Create post (primary action)

Calendar grid:
- Days of month/week (columns)
- Time slots (rows if week view)
- Color-coded posts by platform
- Post preview cards (image thumbnail, caption snippet)

Post card (on calendar):
- Platform icon + color
- Scheduled time
- Post preview (image + first line)
- Status (Draft, Scheduled, Published)
- Actions menu (Edit, Duplicate, Delete)

Side panel (selected post):
- Full post preview
- Platform selector (multi-select)
- Caption editor (character count per platform)
- Media uploader
- Schedule date/time picker
- Approval workflow (if team)

**BEHAVIOR:**
- Drag post card: Reschedule to different day/time
- Click post: Opens side panel editor
- Create post: Modal or side panel (compose interface)
- Hover post: Quick actions (edit, delete, publish now)
- Filter platforms: Hide/show relevant posts
- Multi-select: Bulk actions (delete, reschedule)

**CONSTRAINTS:**

**TASK:**
Create video course player for online learning platform

**CONTEXT:**
- Students watching video lectures with exercises
- Features: Video, transcript, notes, resources, Q&A
- Increase completion rates from 30% to 50%

**ELEMENTS:**
Main video player (60%):
- Video with standard controls
- Playback speed selector
- Quality selector (Auto, 720p, 1080p)
- Fullscreen mode
- Picture-in-picture

Sidebar (40%):
- Tabs: Transcript, Notes, Resources, Discussions

Transcript tab:
- Auto-scrolling text (highlights current)
- Click timestamp: Jump to that point
- Search within transcript

Notes tab:
- Add note (timestamp-linked)
- Personal notes list
- Export notes

Resources tab:
- Downloadable files (PDFs, code)
- External links

Discussions tab:
- Q&A threads
- Ask question button

Bottom progress bar:
- Course sections (chapters)
- Current video indicator
- Completion percentage

**BEHAVIOR:**
- Video end: Auto-advance to next lesson (5-second countdown)
- Transcript click: Video jumps, text highlights
- Note creation: Pauses video, captures timestamp
- Mark complete: Unlocks next video, updates progress
- Speed shortcuts: 1, 1.5, 2x keys
- Keyboard shortcuts: Space (play/pause), J/K (rewind/forward)

**CONSTRAINTS:**

**TASK:**
Design property detail page for real estate marketplace

**CONTEXT:**
- Homebuyers researching properties before contact
- Need: Photos, details, map, mortgage calculator, contact agent
- High-value decision (detailed information critical)

**ELEMENTS:**
Hero image gallery:
- Full-width photo carousel
- 5-20 property photos
- Thumbnail navigation
- Fullscreen mode

Property overview:
- Price (large, prominent)
- Address
- Beds, Baths, Sq Ft
- Property type (Single Family, Condo, etc.)
- Year built, lot size

Details section:
- Full description
- Features list (Garage, Pool, Updated Kitchen)
- School district and ratings
- HOA fees (if applicable)

Interactive map:
- Property location
- Nearby amenities (schools, parks, transit)
- Neighborhood boundary

Mortgage calculator:
- Price, down payment, interest rate inputs
- Monthly payment estimate
- Amortization schedule link

Agent contact card:
- Agent photo, name, rating
- Phone, email
- "Schedule showing" button
- "Send message" button

**BEHAVIOR:**
- Photo carousel: Swipe/arrow navigate, click to fullscreen
- Map: Zoom, pan, toggle amenity filters
- Calculator: Real-time updates as inputs change
- Schedule showing: Opens calendar modal
- Favorite button: Save to account
- Share button: Generate shareable link

**CONSTRAINTS:**

**TASK:**
Design restaurant reservation booking interface

**CONTEXT:**
- Diners booking tables at restaurant (web + mobile)
- Need: Date, time, party size, special requests
- Reduce no-shows, maximize table utilization

**ELEMENTS:**
Header:
- Restaurant name, cuisine, rating
- Hero image (restaurant photo)

Booking form:
- Party size selector (1-12 guests)
- Date picker (calendar)
- Time slot selector (available times shown)
- Special requests textarea (optional)
- Contact info (name, phone, email)

Availability display:
- Available time slots (green)
- Limited availability (yellow, "Only 2 tables left")
- Unavailable (gray, disabled)

Confirmation step:
- Booking summary (date, time, party size)
- Restaurant details (address, phone)
- Cancellation policy
- "Confirm Reservation" button

Success state:
- Confirmation number
- Add to calendar button
- Directions link
- "Manage reservation" link

**BEHAVIOR:**
- Date/party size change: Refresh available times
- Time select: Highlights choice, enables next
- Confirm reservation: Submit, show loading, redirect success
- Email confirmation sent automatically
- SMS reminder 24 hours before (opt-in)

**CONSTRAINTS:**

**TASK:**
Create workout tracking interface for fitness app

**CONTEXT:**
- Users logging exercises during gym sessions
- Track: Sets, reps, weight, rest periods
- Progress photos, body measurements, personal records

**ELEMENTS:**
Active workout screen:
- Current exercise name (large text)
- Set counter (Set 1 of 3)
- Previous performance (last time: 3x10 @ 135lbs)

Input controls:
- Reps stepper (+/- buttons)
- Weight input (number pad)
- "Complete set" button (large, primary)
- Rest timer (starts on complete, countdown)

Exercise list (collapsible):
- Remaining exercises (draggable to reorder)
- Checkmark completed
- Tap to jump to exercise

Workout summary (after completion):
- Total time
- Exercises completed
- Personal records (new PR badge)
- Progress photo (optional)
- Notes field
- "Finish workout" button

**BEHAVIOR:**
- Complete set: Logs data, starts rest timer, advances to next
- Rest timer end: Notification, vibration (ready for next set)
- Swipe right: Skip exercise
- Long press exercise: Quick actions (notes, substitute)
- End workout: Show summary, save to history

**CONSTRAINTS:**

**TASK:**
Design Kanban-style deal pipeline for CRM

**CONTEXT:**
- Sales team managing 100-500 active deals
- Stages: Lead, Qualified, Proposal, Negotiation, Closed
- Visual progress tracking, forecast revenue

**ELEMENTS:**
Pipeline board:
- 5 columns (one per stage)
- Deal cards (draggable between columns)

Deal card:
- Company name + logo
- Deal value
- Contact person
- Probability percentage
- Days in stage
- Next action (call, demo, proposal due)

Column header:
- Stage name
- Deal count
- Total value in stage
- + Add deal button

Filters/views (top bar):
- My deals / Team deals / All deals
- Filter by: Owner, value, industry, close date
- Search deals

Deal detail (side panel on click):
- Full deal information
- Activity timeline
- Related contacts
- Files and notes
- Edit fields inline

**BEHAVIOR:**
- Drag deal card: Move between stages, updates probabilities
- Click deal: Opens detail panel
- Click column +: Quick add modal
- Hover card: Shows quick actions (edit, delete, convert)
- Filters update view real-time
- Forecast total updates automatically

**CONSTRAINTS:**

**TASK:**
Create hands-free cooking interface for recipe app

**CONTEXT:**
- Users cooking in kitchen with messy hands
- Need: Step-by-step, timers, voice control
- Prevent phone/screen touching while cooking

**ELEMENTS:**
Full-screen current step:
- Step number (e.g., "Step 3 of 8")
- Step instruction (large, readable text)
- Relevant image/video (if available)
- Ingredients for this step only

Navigation:
- Previous step (left arrow)
- Next step (right arrow)
- Voice control indicator ("Say 'next'")

Active timers:
- Timer cards (if step has timing)
- Countdown display
- Pause/resume buttons

Shopping mode toggle:
- Ingredient checklist
- Check off as you gather

Controls:
- Text size adjuster
- Voice control on/off
- Exit cooking mode

**BEHAVIOR:**
- Voice commands: "Next step", "Previous step", "Set timer 10 minutes"
- Gesture: Swipe left/right to navigate (touchless alternative)
- Timer done: Alert sound, vibration, on-screen flash
- Auto-advance: Optional after timer completion
- Screen stays on (prevent lock during cooking)

**CONSTRAINTS:**

**TASK:**
Design inventory tracking dashboard for warehouse

**CONTEXT:**
- Warehouse managers monitoring 1,000-10,000 SKUs
- Alert on: Low stock, overstock, expired products
- Integrate: Barcode scanning, reorder automation

**ELEMENTS:**
Overview metrics (top):
- Total SKU count
- In stock / Low stock / Out of stock counts
- Total inventory value
- Orders pending fulfillment

Alerts section:
- Critical: Out of stock (red)
- Warning: Low stock (yellow)
- Info: Overstock, approaching expiration

Inventory table:
- Product name + SKU
- Quantity on hand
- Reorder point
- Unit cost, total value
- Location (warehouse zone)
- Last updated
- Actions (adjust, reorder, transfer)

Quick actions:
- Scan barcode (opens camera)
- Manual adjustment
- Generate reorder list
- Export inventory report

Charts:
- Stock levels over time (trend)
- Top products by value
- Reorder frequency

**BEHAVIOR:**
- Click alert: Filter table to affected items
- Scan barcode: Auto-lookup product, adjust quantity
- Reorder point hit: Automatic PO generation (if enabled)
- Table sort: Click column headers
- Export: PDF or CSV options
- Real-time updates (other users' changes appear live)

**CONSTRAINTS:**

**TASK:**
Create subscription management interface for SaaS billing

**CONTEXT:**
- Customers managing their subscription plans
- Actions: Upgrade, downgrade, pause, cancel, update payment
- Reduce involuntary churn from payment failures

**ELEMENTS:**
Current plan card:
- Plan name (Starter, Pro, Enterprise)
- Price per month
- Features included (checkmarks)
- Usage stats (e.g., "5 of 10 users")
- Next billing date
- "Upgrade plan" button

Plan comparison:
- 3 plan tiers side-by-side
- Feature comparison table
- Highlight differences
- "Select plan" buttons

Billing history:
- Invoice list (date, amount, status)
- Download invoice PDF
- Payment method on file

Payment settings:
- Card on file (last 4 digits)
- Update card button
- Billing address
- Auto-retry failed payments toggle

Account usage:
- Current period usage (API calls, storage, etc.)
- Overage warnings (if applicable)
- Usage charts

Cancellation flow:
- "Cancel subscription" link (small, bottom)
- Confirmation modal (reasons, save attempts)

**BEHAVIOR:**
- Upgrade: Show price diff, pro-rated credit
- Downgrade: Effective next billing cycle (keep current until)
- Update payment: Stripe/PayPal modal integration
- Cancel: Multi-step with retention offers
- Invoice click: PDF download or open in new tab

**CONSTRAINTS:**

**TASK:**
Design job application submission interface

**CONTEXT:**
- Job seekers applying to company positions
- Upload: Resume, cover letter, portfolio
- Pre-screening questions, availability, references

**ELEMENTS:**
Job posting header:
- Job title
- Department, location
- Salary range (if applicable)
- Application deadline

Multi-step form:
Step 1: Personal info
- Full name, email, phone
- LinkedIn profile (optional)
- Location, work authorization

Step 2: Experience
- Upload resume (PDF, DOCX)
- Years of experience
- Current position/company

Step 3: Cover letter
- Upload file OR write in textarea
- Character count

Step 4: Screening questions
- Custom questions per role
- Text inputs, dropdowns, checkboxes

Step 5: References
- 2-3 reference contacts
- Name, relationship, contact info

Step 6: Review and submit

Progress indicator:
- Shows current step (Step 2 of 6)
- Can jump back to previous steps

**BEHAVIOR:**
- Save draft: Auto-save every 30 seconds
- Previous button: Return to earlier step
- Next validation: Required fields before advancing
- File upload: Drag-drop or browse, show preview
- Submit: Confirmation modal, then success page
- Email confirmation sent upon submission

**CONSTRAINTS:**

**TASK:**
Create event registration and ticket purchase flow

**CONTEXT:**
- Users buying tickets for conference/concert/event
- Ticket types: General, VIP, Group discounts
- Add-ons: Workshops, merchandise, parking

**ELEMENTS:**
Event details header:
- Event name, date, venue
- Featured image/video
- Brief description
- Share buttons

Ticket selector:
- Ticket types (cards or table)
- Each type: Name, price, availability, description
- Quantity selectors
- Subtotal updates live

Add-ons section:
- Optional purchases (checkboxes)
- Workshop sessions (time slot selection)
- Merchandise (sizes, quantities)
- Parking pass

Attendee information:
- Primary attendee (name, email, phone)
- Additional attendees (if group tickets)

Payment:
- Billing information
- Payment method (cards, PayPal, Apple Pay)
- Promo code input
- Order total breakdown

Confirmation:
- Order summary
- QR code tickets (downloadable)
- Add to calendar
- Email confirmation

**BEHAVIOR:**
- Quantity change: Update subtotal immediately
- Promo code: Validate, apply discount, show savings
- Payment processing: Loading state, handle errors
- Success: Redirect to tickets page, send email
- Mobile wallet: Add tickets to Apple Wallet / Google Pay

**CONSTRAINTS:**

**TASK:**
Design donation landing page for non-profit fundraising

**CONTEXT:**
- Non-profit raising funds for specific cause/campaign
- Donation amounts: One-time or monthly recurring
- Goal: Increase average donation from $50 to $75

**ELEMENTS:**
Hero section:
- Campaign title
- Powerful image/video
- Brief emotional story
- Donation CTA button

Impact section:
- "Your $X makes this possible" examples
- Visual representation of impact
- Donor testimonials

Donation form:
- Suggested amounts ($25, $50, $100, Custom)
- One-time vs Monthly toggle
- Donor information (name, email)
- Tribute option ("In honor of..." checkbox)
- Company match (employer matching checkbox)

Progress visualization:
- Fundraising goal ($50,000)
- Amount raised so far (thermometer or bar)
- Donor count
- Time remaining (if deadline)

Social proof:
- Recent donors (first name + amount)
- Top donors leaderboard (optional)

Trust signals:
- Charity rating (GuideStar, Charity Navigator)
- Tax-deductible notice
- Secure payment badges

Recurring benefits:
- "Become a monthly donor" highlighted
- Benefits of recurring (sustained impact)

**BEHAVIOR:**
- Amount select: Highlight choice, update summary
- Custom amount: Validate minimum ($5)
- Monthly toggle: Emphasize impact (12x your donation)
- Submit: Process payment, redirect thank you page
- Thank you: Social sharing ("I donated, you can too!")

**CONSTRAINTS:**

**TASK:**
Create trip planning interface for travel app

**CONTEXT:**
- Travelers organizing multi-day trips
- Features: Flights, hotels, activities, reservations
- Collaborative planning for group trips

**ELEMENTS:**
Trip overview:
- Trip name ("Tokyo 2026")
- Dates (March 15-22)
- Travelers (names, avatars)
- Budget tracker

Timeline view (default):
- Day-by-day cards
- Each day: Date, planned activities
- Time slots (morning, afternoon, evening)

Activity cards:
- Type (flight, hotel, restaurant, attraction)
- Time
- Location (address, map link)
- Booking confirmation number
- Notes
- Attachments (tickets, confirmations)

Map view:
- All locations plotted
- Color-coded by day
- Route between locations

Add activity button:
- Search for: Flights, hotels, restaurants, activities
- Manual entry option
- Import from email (confirmation parsing)

Collaboration:
- Share trip link
- Real-time updates (other travelers' changes)
- Comments on activities
- Vote on options ("Should we do this?")

**BEHAVIOR:**
- Drag activity: Reorder within day or move to different day
- Click activity: Expand details, edit
- Add from search: Autocomplete, integration with APIs
- Budget updates: As activities added/changed
- Map sync: Reflects timeline changes
- Export: PDF itinerary, calendar file

**CONSTRAINTS:**

**TASK:**
Design article editing interface for help/support documentation

**CONTEXT:**
- Support teams writing help articles
- Need: Rich text, images, videos, code blocks, tables
- Multi-language support, versioning, approval workflow

**ELEMENTS:**
Editor toolbar:
- Text formatting (bold, italic, heading levels)
- Insert: Image, video, code block, table, callout
- Undo/redo
- Preview toggle

Writing area:
- WYSIWYG editor (what you see is what you get)
- Markdown shortcut support
- Live preview (side-by-side or toggle)

Metadata sidebar:
- Article title
- Category selector
- Tags
- SEO slug (auto-generates from title)
- Author
- Published/draft status

Settings section:
- Visibility (public, internal, specific products)
- Languages (translate to...)
- Related articles
- Feedback widget enable

Version history:
- List of revisions (date, author, changes)
- Restore previous version
- Compare versions (diff view)

Workflow:
- Save draft
- Submit for review (if workflow enabled)
- Publish (immediately or schedule)

Preview:
- Mobile and desktop preview
- See as customer would

**BEHAVIOR:**
- Auto-save: Every 10 seconds
- Image upload: Drag-drop or paste, auto-optimize
- Code blocks: Syntax highlighting by language
- Internal links: Autocomplete to other articles
- Publish: Requires confirmation, updates live site
- Analytics: View article performance (views, helpful votes)

**CONSTRAINTS:**

**TASK:**
Design user settings page

**CONTEXT:**
[Standard context...]

**CONSTRAINTS:**