Lab: UX Sprint
Polish Your AI Interface

Transform your functional Earth Observation prototype into a polished, user-friendly application through peer review, heuristic evaluation, and CSS refinement techniques.

📅 Tuesday, June 16, 2026

📍 ISU, Strasbourg

⏱️ 14:00 - 16:00 (2h)

🔧 Hands-on Lab

Lab Overview

From Functional to Delightful

Your prototype works. The AI answers questions, the map displays data. But does it feel good to use? This lab bridges the gap between "it works" and "I love using it."

🎯

Session Goal: By 16:00, your project should have a consistent visual identity, smooth interactions, clear error handling, and a layout that works on both desktop and mobile screens.

We will follow a structured sprint process:

Audit (30 min): peer-review each other's projects using a heuristic checklist
Learn (40 min): CSS polish techniques, typography, color systems, and responsive design
Build (40 min): apply improvements to your own project, commit, and push

Research shows that perceived usability strongly influences user trust in AI systems.¹ Users who encounter polished interfaces rate AI recommendations as more credible, even when the underlying model is identical.

🎯 Sprint Focus

Today's Sprint: Apply to Your Project

Apply today's UX principles directly to your project. Think about how your specific users will interact with your dashboard.

🛰

Insurance Track

NDVI/soil moisture thresholds for automated payouts

🍇

CubeSat Track

Localized Alsace monitoring dashboard

🏭

ESG Track

EU Green New Deal compliance monitoring

💡

Your Own Idea

Apply today's concepts to your custom project

Lab Overview

The UX Audit Checklist

Before you start polishing, you need to know what to fix. We will use a structured evaluation based on Jakob Nielsen's 10 Usability Heuristics,² adapted for AI-powered geospatial applications.

Category	What to Evaluate	Check
Clarity	Is the app's purpose clear within 5 seconds?	⬜
Trust	Are AI sources and confidence shown?	⬜
Feedback	Are loading states and spinners present?	⬜
Error Handling	What happens when the API fails?	⬜
Map Usability	Zoom, pan, legend, markers readable?	⬜
Responsive	Layout works on mobile / tablet?	⬜
Consistency	Fonts, colors, spacing coherent?	⬜
Accessibility	Color contrast, keyboard navigation?	⬜

⚠️

You will print (or digitally fill) this checklist during the Peer Review exercise. Be honest and constructive; your partner's project depends on your feedback.

UX Audit Exercise

Step 1: Peer Review

Swap projects with another student or team. Fresh eyes catch what yours cannot. You have become blind to your own interface's quirks because you built it.

🔄 How to Swap

Pair up with someone working on a different project
Share your screen or deploy your app to a temporary URL (e.g., localhost or GitHub Pages)
Give your partner zero instructions about how to use your app
Watch silently as they explore; note where they hesitate

📋 Rules of Engagement

Be specific: "The submit button is hard to find" beats "the UI is confusing"
Be constructive: suggest a fix alongside each issue
Prioritize: mark issues as High / Medium / Low impact
Celebrate wins: note what works well, too

UX Audit Exercise

The 5-Second Test

Show your partner's app for exactly 5 seconds, then hide it. Ask them three questions:

1️⃣

What does this app do?

Tests if the purpose is immediately clear

2️⃣

What would you click first?

Tests visual hierarchy and affordances

3️⃣

Who is this for?

Tests whether the audience is communicated

💡

The 5-second test was popularized by Usability Hub (now Lyssna). It measures first impressions, which research shows are formed in as little as 50 milliseconds and correlate strongly with overall satisfaction.³

UX Audit Exercise

Heuristic Evaluation Walkthrough

Now spend 10 minutes systematically walking through your partner's app. For each item, write notes using the feedback form on the next slide.

🎯 Is the purpose clear?

Look for a headline, tagline, or onboarding message that explains what the app does. If you had to guess, that is a problem.

🤖 Can AI responses be trusted?

Are sources cited? Is there a confidence indicator? Can users verify the AI's claims? Unsourced AI text erodes trust.⁴

⏳ Are loading states handled?

Click "Send" and wait. Do you see a spinner, a skeleton screen, or nothing? Silence feels broken.

❌ Is there error handling?

Disconnect your network and try again. Does the app crash, or does it show a helpful error message with a retry button?

🗺️ Is the map usable?

Can you zoom, pan, and understand the legend? Are markers labeled? Does it work on touch devices?

📱 Does the layout adapt?

Resize the browser window to 375px wide. Does the chat overlap the map? Do buttons stack properly?

UX Audit Exercise

UX Audit Feedback Form

Use this template to document your findings. Fill one form per project you review.

Reviewer Name

Project Reviewed

5-Second Test: What did you think the app does?

Overall Clarity (1-5)

⭐ ⭐ ⭐ ⭐ ⭐

Top 3 Issues (ranked by severity)

What works well? (list at least 2 positives)

Knowledge Check

Quiz: UX Heuristics

🧠 According to Nielsen's heuristics, which principle is violated when an AI chatbot gives no indication it is processing a request?

Polish Techniques

CSS Micro-Animations

Subtle motion makes interfaces feel alive and responsive. The key word is subtle: animations should guide attention, not distract. Keep durations between 200ms and 500ms for UI elements.⁵

                        CSS
/* Smooth chat message entry */
.message {
  animation: fadeInUp 0.3s ease-out;
  transition: all 0.3s ease;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Button hover lift */
.btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Loading skeleton pulse */
.skeleton {
  background: linear-gradient(90deg, #1a1f36 25%, #252b45 50%, #1a1f36 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
                    

⚡

Always use transform and opacity for animations. These properties are GPU-accelerated and do not trigger layout recalculation. Animating width, height, or top causes jank.

Polish Techniques

Typography System

A consistent type scale creates visual rhythm and hierarchy. Define your sizes as CSS custom properties so every component references the same scale.

                        CSS
:root {
  /* Type scale (1.25 ratio, "Major Third") */
  --text-xs:    0.75rem;    /* 12px - labels, captions */
  --text-sm:    0.875rem;   /* 14px - secondary text */
  --text-base:  1rem;       /* 16px - body text */
  --text-lg:    1.25rem;    /* 20px - subheadings */
  --text-xl:    1.563rem;   /* 25px - section titles */
  --text-2xl:   1.953rem;   /* 31px - page titles */
  --text-3xl:   2.441rem;   /* 39px - hero headings */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-bold:   700;
  --font-black:  800;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.8;
}
                    

📐

Rule of Thumb: Use no more than 3 font sizes per screen. A heading, body text, and a label or caption. More than that creates visual noise.

Polish Techniques

Color System: 3 Ready-Made Palettes

Pick one palette and apply it consistently. Each palette includes a primary accent, a secondary, a background, and semantic colors for success, warning, and error states.

🌿 Palette 1: "Earth Observer" (default)

Core

#050a18

#0d1224

#10b981

#34d399

#f9fafb

🌊 Palette 2: "Ocean Sentinel"

Core

#0a1628

#111d35

#0ea5e9

#38bdf8

#f0f9ff

🔥 Palette 3: "Fire Watch"

Core

#18090a

#241214

#f97316

#fb923c

#fff7ed

🎨

Each palette follows the 60-30-10 rule: 60% dark background, 30% secondary/surface, 10% accent. Apply your accent to buttons, links, active states, and badges only.

Polish Techniques

Chat UI Polish

Your AI chat panel is the primary interaction surface. Make it feel like a polished messaging app with message bubbles, timestamps, and a typing indicator.

                        CSS
/* User message bubble */
.msg-user {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding: 0.75rem 1.1rem;
  max-width: 75%;
  align-self: flex-end;
  animation: fadeInUp 0.3s ease-out;
}

/* AI response bubble */
.msg-ai {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #f1f5f9;
  border-radius: 18px 18px 18px 4px;
  padding: 0.75rem 1.1rem;
  max-width: 85%;
  align-self: flex-start;
}

/* Timestamp */
.msg-time {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.3);
  margin-top: 0.25rem;
}

/* Typing indicator dots */
.typing-dots span {
  width: 6px; height: 6px;
  background: #9ca3af;
  border-radius: 50%;
  display: inline-block;
  animation: typingBounce 1.4s infinite both;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}
                    

Polish Techniques

Map UI Polish

The Leaflet map is a core component of your EO application. Default Leaflet styles look generic. Custom markers, styled popups, and layer controls make your map feel intentional.

                        CSS
/* Custom dark-themed Leaflet popup */
.leaflet-popup-content-wrapper {
  background: #0d1224;
  color: #f9fafb;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  font-family: 'Outfit', sans-serif;
}

.leaflet-popup-tip {
  background: #0d1224;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Custom layer control */
.leaflet-control-layers {
  background: rgba(13,18,36,0.95);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #f9fafb;
  backdrop-filter: blur(10px);
}
                    

                        JavaScript
// Custom SVG marker with your accent color
const customIcon = L.divIcon({
  className: 'custom-marker',
  html: `<svg width="24" height="36" viewBox="0 0 24 36">
    <path d="M12 0C5.4 0 0 5.4 0 12c0 9 12 24 12 24
    s12-15 12-24C24 5.4 18.6 0 12 0z" fill="#10b981"/>
    <circle cx="12" cy="12" r="5" fill="#fff"/>
  </svg>`,
  iconSize: [24, 36],
  iconAnchor: [12, 36],
  popupAnchor: [0, -36]
});
                    

Polish Techniques

Responsive Design

Your app will be demoed on a projector, a laptop, and possibly a phone. Use CSS media queries and flexible layouts to handle all screen sizes.

                        CSS
/* Mobile-first base layout */
.app-layout {
  display: grid;
  grid-template-columns: 1fr;  /* single column on mobile */
  grid-template-rows: 1fr 300px;
  height: 100vh;
}

/* Tablet: side-by-side at 768px */
@media (min-width: 768px) {
  .app-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
}

/* Desktop: chat panel is narrower */
@media (min-width: 1200px) {
  .app-layout {
    grid-template-columns: 1fr 380px;
  }
}

/* Hide non-essential elements on small screens */
@media (max-width: 480px) {
  .sidebar,
  .layer-panel { display: none; }

  .chat-input { font-size: 16px; } /* prevents iOS zoom */
}
                    

📱

iOS Tip: Setting font-size: 16px on input fields prevents Safari from auto-zooming the viewport when the user taps an input. This is one of the most common mobile UX bugs.

Knowledge Check

Quiz: CSS Performance

🧠 Which CSS property should you avoid animating because it triggers expensive layout recalculations?

Build Sprint

Sprint: Apply UX Improvements

You have 40 minutes. Use your peer review feedback and the polish techniques from this session. Prioritize the highest-impact changes first.

🥇 High Priority (do first)

Add a loading spinner / skeleton for AI responses
Add basic error handling with retry button
Fix the most critical layout issue from your audit

🥈 Medium Priority

Apply a consistent color palette via CSS variables
Style chat bubbles with proper border-radius
Add hover states to interactive elements

🥉 Nice to Have (if time permits)

Custom Leaflet popups and markers
Typing indicator animation
Responsive layout with media queries

⏰

Time check: Set a personal timer. Spend 15 minutes on high priority, 15 on medium, and 10 on nice-to-have. Do not rabbit-hole on one feature.

Build Sprint

Commit and Push

Before leaving this session, save your work. Use descriptive commit messages that reflect UX changes.

                        Terminal
# Stage all UX changes
git add .

# Commit with a descriptive message
git commit -m "feat(ui): add chat bubbles, loading states, and responsive layout

- Added fadeInUp animation for chat messages
- Implemented skeleton loading for AI responses
- Styled Leaflet popups with dark theme
- Added media queries for mobile (768px, 480px)
- Applied Earth Observer color palette via CSS vars"

# Push to your branch
git push origin main
                    

📝

Milestone: By the end of this session, your project should have a polished interface with consistent styling, loading states, and basic responsive behavior. Tomorrow, we focus on testing and performance optimization.

Knowledge Check

Quiz: Responsive Design

🧠 What is the 60-30-10 rule in UI color design?

Summary

Summary of Big Ideas

1

Fresh eyes find real problems. Peer review through the 5-second test and heuristic evaluation reveals usability issues you cannot see in your own work.

2

Trust requires transparency. AI interfaces must show sources, loading states, and error messages. Silence and unsourced claims erode user confidence.

3

CSS custom properties create consistency. Define your type scale, color palette, and spacing as variables. Every component references the same source of truth.

4

Animate only transform and opacity. These are GPU-accelerated. Animating layout properties (width, height, top) causes jank and dropped frames.

5

Mobile-first, then enhance. Start with a single-column layout and use min-width media queries to add complexity for larger screens.

Reference

Glossary of Key Terms

📋 Heuristic Evaluation

A usability inspection method where evaluators examine an interface against a set of established usability principles (heuristics), such as Nielsen's 10 heuristics.

⏱️ 5-Second Test

A UX research method where users view a design for 5 seconds, then recall what they saw. Tests whether a page communicates its purpose at first glance.

✨ Micro-animation

A small, subtle animation (typically 100ms to 500ms) that provides feedback, guides attention, or adds personality to an interface without distracting the user.

📱 Responsive Design

A web design approach where layout, images, and content adapt fluidly to the user's screen size and device, typically using CSS media queries and flexible grids.

📐 Media Query

A CSS feature (@media) that applies styles conditionally based on device characteristics such as viewport width, height, or orientation.

🎨 Color Palette

A curated set of colors used consistently throughout a design. Typically includes primary, secondary, background, and semantic (success, warning, error) colors.

🔤 Typography System

A structured scale of font sizes, weights, and line heights that creates visual hierarchy. Often based on a mathematical ratio (e.g., Major Third at 1.25).

References

Academic References

[1] Yin, M., Wortman Vaughan, J., & Wallach, H. (2019). "Understanding the Effect of Accuracy on Trust in Machine Learning Models." Proceedings of CHI 2019. doi:10.1145/3290605.3300509
[2] Nielsen, J. (1994). "Enhancing the explanatory power of usability heuristics." Proceedings of ACM CHI'94 Conference on Human Factors in Computing Systems, pp. 152-158. doi:10.1145/191666.191729. See also: Nielsen, J. (1994). "Heuristic evaluation." In J. Nielsen & R. L. Mack (Eds.), Usability Inspection Methods, pp. 25-62. John Wiley & Sons.
[3] Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). "Attention web designers: You have 50 milliseconds to make a good first impression!" Behaviour & Information Technology, 25(2), 115-126. doi:10.1080/01449290500330448
[4] Amershi, S., Weld, D., Vorvoreanu, M., et al. (2019). "Guidelines for Human-AI Interaction." Proceedings of CHI 2019. doi:10.1145/3290605.3300233
[5] Google. (2024). "Material Design 3: Motion." m3.material.io/styles/motion/overview
[6] Leaflet Contributors. (2024). "Leaflet API Reference." leafletjs.com/reference
[7] MDN Web Docs. (2024). "CSS animations and performance." developer.mozilla.org

🔗 External Resources

Type Scale Calculator for generating ratio-based typography
Coolors.co for palette generation and contrast checking
WebAIM Contrast Checker for WCAG accessibility compliance
Easings.net for CSS easing function reference
CSS-Tricks: Complete Guide to Media Queries

🌟 Pioneer Profile

👤

Don Norman

Pioneer of User Experience

He popularized the term 'User Experience' and wrote 'The Design of Everyday Things', fundamental to modern UI/UX.

🌍 Local to Global

UX and Placemaking

Applying EO to Community Challenges

Digital spaces are the new workplaces. Excellent UX creates a sense of 'place' and belonging for remote workers interacting with complex tools.

📍

Texas Connection: In Texas, EO data is used to monitor the Edwards Aquifer depletion and track the expansion of urban heat islands across the Dallas-Fort Worth metroplex.

🗺️

🤔 Geographic Inquiry

Regional Decisions Scenario

Scenario: Sustainable Workspace Siting

Your startup needs to establish a new hybrid work hub. You must balance employee commute times, environmental impact (using the IPAT equation), and existing green infrastructure.

Your Task:

Identify 3 potential sites using EO vegetation indices.
Calculate the estimated carbon footprint of hybrid commuting.
Propose a Placemaking strategy for the hub.

📚 Summary

Big Ideas & Glossary

Summary of Big Ideas

Data is only as valuable as its application.
Space technology has direct terrestrial benefits.

Glossary of Terms

Earth Observation

Gathering information about Earth via remote sensing.

📝 Knowledge Check

Auto-Graded Quiz

What is the core principle of 'Placemaking' when applied to digital dashboards?

A

Making the background image a picture of an office.

B

Designing interfaces that foster connection, meaning, and intuitive spatial reasoning.

C

Adding more buttons so users have more to do.

✅ Correct! Placemaking in UX is about transforming a sterile digital tool into a meaningful, usable environment.

❌ Incorrect. The right answer was B. Placemaking in UX is about transforming a sterile digital tool into a meaningful, usable environment.

📝 Daily Reflection

What was your biggest takeaway from this session, and how does it apply to the TERRA project? Write your response below. Your instructor will review this to track your progress.

Lab: UX SprintPolish Your AI Interface

From Functional to Delightful

Today's Sprint: Apply to Your Project

The UX Audit Checklist

Step 1: Peer Review

🔄 How to Swap

📋 Rules of Engagement

The 5-Second Test

Heuristic Evaluation Walkthrough

UX Audit Feedback Form

Quiz: UX Heuristics

CSS Micro-Animations

Typography System

Color System: 3 Ready-Made Palettes

🌿 Palette 1: "Earth Observer" (default)

🌊 Palette 2: "Ocean Sentinel"

🔥 Palette 3: "Fire Watch"

Chat UI Polish

Map UI Polish

Responsive Design

Quiz: CSS Performance

Sprint: Apply UX Improvements

Commit and Push

Quiz: Responsive Design

Summary of Big Ideas

Glossary of Key Terms

Academic References

🔗 External Resources

Don Norman

UX and Placemaking

Applying EO to Community Challenges

Regional Decisions Scenario

Scenario: Sustainable Workspace Siting

Your Task:

Big Ideas & Glossary

Summary of Big Ideas

Glossary of Terms

Auto-Graded Quiz

📝 Daily Reflection

Lab: UX Sprint
Polish Your AI Interface