UID 07 - Case studies and best practices con Elisabetta Balconi

Source: transcript Part 1 + Part 2
Speaker: Elisabetta Balconi
Related: UID 07 - Course Map, UID 07 - Introduzione al corso, UID 07 - Intro alla user interface con Mirko Santangelo

One Sentence

Elisabetta’s lesson shows how professional UI work moves from vision to execution through learning, strategy, style tiles, design principles, creative exploration, prototyping, documentation, collaboration, and persuasive presentation.

Core Thesis

UI design is not “painted UX”. It is not just applying colors and typography to finished wireframes.

UI design translates:

• brand values
• user needs
• UX structure
• business goals
• content
• constraints
• technology
• motion
• interaction

into a concrete interface.

Good UI work is both creative and rational. Without creativity it becomes sterile. Without structure it becomes chaos.

Elisabetta’s Professional Position

Elisabetta starts from a classic graphic design background. This matters because many UI skills still come from traditional visual design:

• typography
• hierarchy
• composition
• rhythm
• grids
• editorial thinking
• visual culture

Her career then expanded into digital design, experiential design, UI, UX, creative direction, and interactive experiences.

This creates a useful lesson: UI is not separated from graphic design culture, but it also needs product thinking, interaction logic, and collaboration.

Experiential Design

Elisabetta discusses experiential design as a field where digital and physical experiences meet.

Examples of experiential work:

• interactive retail experiences
• brand installations
• digital storytelling
• immersive product discovery
• motion-based interfaces
• playful engagement moments

The goal is often not only to complete a task, but to create memory, emotion, and brand connection.

End User Mindset

Even in highly visual brand projects, the designer must stay focused on real users.

Core questions:

• Who is this for?
• What do they need?
• What will they understand?
• What will they remember?
• What will feel useful?
• What will feel frustrating?
• What does the business want, and is it aligned with the user?

Clients often know their business, but may not fully understand the user’s perspective. Designers help translate between the two.

From Vision to Execution

The whole lesson can be understood as a path:

flowchart LR
  A["Vision"] --> B["Learning"]
  B --> C["Direction"]
  C --> D["Style Tiles"]
  D --> E["Design Principles"]
  E --> F["Creative Exploration"]
  F --> G["Prototype"]
  G --> H["Execution"]
  H --> I["Design Library"]
  I --> J["Documentation"]
  J --> K["Presentation and Handoff"]

Vision

Vision is the strategic and creative orientation of the project.

It answers:

• What should this product become?
• What should the experience feel like?
• What is the brand trying to communicate?
• What is the business trying to achieve?
• What role should the interface play?

Without vision, execution becomes disconnected.

Execution

Execution is the tangible design output:

• screens
• user flows
• components
• states
• motion behavior
• prototypes
• design library
• handoff notes
• documentation

Execution is not just polish. It is the result of all previous decisions becoming concrete.

Learning Phase

Before opening Figma, the team needs to learn.

Learning includes:

• understanding the client
• understanding the product
• understanding brand history
• reviewing existing touchpoints
• reviewing UX work
• analyzing users
• identifying business objectives
• checking constraints
• studying competitors
• collecting references

Elisabetta’s key point: designers are translators. If the designer does not understand the source material, the translation will be weak.

Collaboration as a Process Requirement

The lesson strongly emphasizes collaboration.

UI designers should work with:

• UX designers
• strategy teams
• copywriters
• UX writers
• developers
• project managers
• producers
• client teams
• stakeholders

Important: UI should not start only when a wireframe is handed over.

When UI designers join early, they understand the reasoning behind the product and can influence the experience, not only the surface.

UI Is Not Painted UX

This is the most important sentence of the lesson.

Painted UX means:

• UX creates wireframes.
• UI arrives at the end.
• UI adds colors, type, and images.
• The deeper experience is already fixed.

Elisabetta argues that this is too limited.

Real UI contributes to:

• hierarchy
• interaction
• emotional tone
• content rhythm
• motion
• usability
• brand voice
• narrative
• component behavior
• user perception

The final UI can change how the experience is understood.

Case Study 1: Fashion App

The first major case study is an app for a high-end Italian fashion brand.

The brand wanted to recreate in digital form the relationship usually built in physical boutiques.

This is a complex goal because a boutique relationship is:

• personal
• sensory
• slow
• relational
• exclusive
• guided
• brand-heavy

The challenge was to translate those qualities into a mobile app.

Fashion App Objectives

Main objectives:

• create a stronger digital relationship between brand and customer
• express brand values through interaction
• make the experience immersive
• support storytelling around products and materials
• improve pre-sale and post-sale moments
• make users feel accompanied by the brand
• create a product that feels useful, not only beautiful

The project was not just e-commerce. It was a relationship and storytelling platform.

Fashion App Process

The process included:

1. strategic learning
2. research and brand immersion
3. benchmark
4. UX and UI collaboration
5. tone of voice definition
6. style tiles
7. design principles
8. creative exploration
9. prototypes
10. design sprint
11. detailed UI
12. design library
13. handover
14. documentation

The long process was necessary because the project had large scale, many stakeholders, and a strong brand identity.

Brand Immersion

For the fashion app, the team studied the brand deeply.

Sources included:

• archives
• catalogs
• books
• campaigns
• fashion shows
• historical material
• product imagery
• existing digital outputs

This kind of research is not decorative. It helps the designer understand the visual and cultural DNA of the brand.

Benchmark Method

Benchmarking is not collecting random beautiful screenshots.

A good benchmark is structured by purpose.

For every reference, note why it matters:

Reference reason	Example
navigation	menu behavior, scroll pattern
content	storytelling structure
visual language	typography, color, image treatment
interaction	hover, drag, animation
hierarchy	how information is prioritized
component	card, carousel, filter, header
mood	atmosphere, tone, emotion

Without notes, a reference board becomes useless later because you forget why something was saved.

Related: Benchmark, Moodboard

Style Tiles

Style tiles are one of the most useful tools in Elisabetta’s process.

A style tile is not a full screen design. It is a compact visual proposal for a direction.

It can include:

• typography
• colors
• UI details
• image treatment
• buttons
• small component fragments
• mood
• interaction hints
• brand references

Why it is useful:

• it opens a discussion before full layouts exist
• it helps the client compare visual directions
• it makes abstract brand values visible
• it avoids wasting time on complete screens too early
• it helps the designer choose a direction

Related: Style Tile, Creative Direction

Design Principles

Design principles are the bridge between strategy and interface.

They translate abstract goals into design decisions.

Example logic:

Strategy / experience need	Design principle	UI consequence
premium brand	essential aesthetic	fewer decorative UI elements
immersive product discovery	content-first interface	large media and minimal controls
boutique relationship	guided experience	contextual prompts and softer transitions
brand consistency	familiar patterns	keep known e-commerce/navigation behaviors

Design principles help answer:

• Does this design choice fit the project?
• Should we simplify this element?
• Is this component decorative or functional?
• How do we explain this to the client?

Related: Design Principles

Creative Exploration

Creative exploration is the phase where many ideas are produced quickly.

It should be:

• open
• fast
• experimental
• not too polished
• full of variations
• easy to discuss

Outputs can include:

• rough screen directions
• multiple versions of a module
• motion experiments
• quick prototypes
• layout variations
• interaction tests
• visual fragments

The goal is not perfection. The goal is discovery.

Messy Work Is Useful

Elisabetta shows that early exploration can be messy.

This matters because beginners often judge their work too early.

A good exploration space allows:

• unfinished ideas
• ugly sketches
• repeated attempts
• quick variations
• feedback before polish
• discussion with other people

Professional design is not a straight line from idea to final screen.

Prototyping

Prototyping is essential when interaction, motion, or scroll behavior matters.

A static screen can be misunderstood.

Prototype can show:

• parallax
• scrolling behavior
• sticky elements
• transitions
• content reveal
• motion rhythm
• interaction feedback
• what changes and what remains fixed

Example from the lecture: a client rejected a static layout because an image looked too large. When the designer showed the animated prototype, the client understood the intended scroll/parallax behavior and accepted it.

Related: Prototype, Figma, Motion Design, Micro Interaction

Design Library

For a large project, UI needs a structured design library.

It can contain:

• buttons
• product cards
• headers
• navigation
• forms
• modules
• typography styles
• color styles
• component variants
• motion notes
• responsive rules

The design library makes the project scalable and consistent.

Related: Design System, Design System Documentation

Handover and Documentation

Documentation is the bridge between design and implementation.

It explains:

• what is fixed
• what is flexible
• what scrolls
• what stays in place
• how components behave
• how states work
• how variants are used
• which rules must be respected

Documentation does not always need to be huge. It should match the project scale.

Case Study 2: Machinezero

The second case study is a smaller website project for Machinezero.

Compared with the fashion app, it had:

• less budget
• less time
• fewer stakeholders
• smaller team
• faster feedback
• more direct communication
• more flexible roles

This case is important because it shows how the same principles can scale down.

Machinezero Direction

The team wanted the website to express the studio’s identity.

One idea was that the letter “M” could change and represent different sides of the studio.

The design direction became:

• functional but narrative
• architectural
• dynamic
• structured by a frame/grid
• visually distinctive
• connected to motion

The interface used a frame similar to architectural drawing conventions. This became both a visual metaphor and a layout rule.

Narrative UI

Machinezero’s UI was not only for navigation. It also told a story.

Example:

• project pages opened with a large video
• scrolling revealed more visual content
• a left-side narrative column changed while scrolling
• text and image progressed together

This creates a contextual narrative: the user sees the project and reads the explanation at the same time.

Related: Narrative UI

Scaling the Process

The process must scale with project size.

Large project	Small project
separate strategy team	strategy mixed with design
formal research	lighter learning
many stakeholders	direct client relationship
multiple approval rounds	faster decisions
detailed design system	smaller rule set
long documentation	pragmatic documentation

The goal is not to skip phases. The goal is to adapt the depth of each phase.

Constraints

Constraints include:

• time
• budget
• technical feasibility
• available assets
• team size
• brand rules
• content availability

Constraints can be frustrating, but they can also help creativity because they force decisions.

A useful mindset:

• What is impossible?
• What is non-negotiable?
• What can be simplified?
• What can become a distinctive feature?
• Where should I spend the most effort?

Related: Design Constraints

Clarifying the Brief

The designer should not passively accept the brief.

A brief may contain:

• missing information
• wrong assumptions
• unclear goals
• business bias
• unrealistic expectations
• weak understanding of users

As consultants, designers should identify those gaps and help the client define the problem better.

This connects to the intro lesson idea of design as translation.

Using References Without Copying

References are useful, but they must be handled carefully.

Bad use:

• copying a layout directly
• copying a style without understanding it
• collecting too many screenshots without notes
• using references only because they look nice

Good use:

• understand why a reference works
• extract a principle
• adapt the idea to the current brand
• use familiar patterns where they help
• transform the idea into something specific

The designer does not need to reinvent every pattern. Familiarity can help users. But direct copying weakens the work.

Visual Brainstorming

Brainstorming should be verbal and visual.

Useful activities:

• write post-its
• sketch quick doodles
• draw rough flows
• make messy layouts
• collect screenshots
• annotate ideas
• discuss while drawing

Tools can include FigJam, Miro, or Figma boards.

Visual thinking makes abstract ideas concrete earlier.

Presentation as Design Work

Elisabetta gives strong attention to presentation and storytelling.

Presenting design means explaining:

• what the goal was
• what problem was solved
• what alternatives were explored
• why this direction was chosen
• how it connects to strategy
• how it supports user needs
• how it supports business goals
• how the interaction works

Presentation is persuasion, but not empty persuasion. It must be grounded in reasoning.

Related: Stakeholder Presentation

Explain the Why

Every design decision should have a “why”.

Examples:

• This typography supports the brand tone.
• This reduced UI lets content carry emotional impact.
• This familiar pattern helps users feel oriented.
• This animation clarifies the relationship between sections.
• This component is repeated to create consistency.

If the designer cannot explain why, the decision is weak.

No Surprise Presentations

Elisabetta warns against big surprise presentations.

Weak process:

1. Designer disappears.
2. Designer creates a full design.
3. Designer reveals everything at once.
4. Stakeholders react late.
5. Project risks rejection or conflict.

Better process:

1. Share early reasoning.
2. Show references.
3. Align on principles.
4. Present style tiles.
5. Show exploration.
6. Collect feedback.
7. Move gradually toward final design.

This creates alignment and reduces risk.

Collaboration and Psychological Safety

Design teams need an environment where unfinished work can be shown.

This allows people to ask:

• Does this make sense?
• Is this technically possible?
• Would UX solve it differently?
• Does this pattern create confusion?
• What would you change?

Good collaboration saves time and improves the final product.

Developer Collaboration

Designers should ask developers about feasibility early.

Useful questions:

• Is this interaction realistic?
• Is this animation too expensive?
• Can this component scale?
• How should this responsive behavior work?
• Is this state difficult to implement?

This avoids designing beautiful but impractical solutions.

Balance: Creativity and Structure

The lesson repeatedly returns to balance.

Too much structure	Too much creativity
sterile	chaotic
predictable	inconsistent
safe but boring	expressive but hard to use
efficient but weak brand	memorable but difficult to implement

Strong UI needs both.

Practical Workflow From the Lesson

For a UI project, I can follow this sequence:

1. Clarify the brief.
2. Understand users and business goals.
3. Learn the brand and existing touchpoints.
4. Collect references with notes.
5. Create style tiles.
6. Define design principles.
7. Explore many UI directions quickly.
8. Prototype key interactions.
9. Build coherent flows.
10. Extract components.
11. Create a design library.
12. Document behavior and rules.
13. Present the reasoning clearly.
14. Align stakeholders continuously.

My Study Notes

This lesson is the most practical of the three because it explains how a professional designer works, not only what UI means.

Main personal lessons:

• I should make style tiles before full screens.
• I should write down why I save references.
• I should not judge early exploration too harshly.
• I should prototype motion when it affects understanding.
• I should explain design decisions with clear reasons.
• I should share work earlier and avoid surprise presentations.

Questions for Myself

• What references should I collect before designing a complex interface?
• Which style tile directions could fit the interface problem?
• What are the first three design principles for my project?
• Which interactions need a prototype instead of static screens?
• How can I document my UI for developers?
• How can I present my design reasoning clearly?

Key Vocabulary

Term	Meaning
Style Tile	compact visual direction before full layout
Design Principles	rules that translate strategy into UI decisions
Creative Exploration	fast generation of possible design directions
Benchmark	structured study of references and competitors
Design Library	organized Figma library of reusable elements
Handover	transfer of design rules and files to implementation
Stakeholder Presentation	explaining and persuading with design reasoning
Narrative UI	interface structure that supports storytelling

Related Notes

• UID 07 - Course Map
• UID 07 - Introduzione al corso
• UID 07 - Intro alla user interface con Mirko Santangelo
• User Interface Design
• User Experience Design
• Creative Direction
• Experiential Design
• Design System
• Design System Documentation
• Figma
• FigJam
• Moodboard
• Style Tile
• Design Principles
• Benchmark
• Creative Exploration
• Motion Design
• Micro Interaction
• Prototype
• Stakeholder Presentation
• Design Constraints