User Experience Design & User Interface Design Fundamentals

Explore the six levels of the user experience hierarchy of needs, from function and reliability to usability, convenience, attractiveness, and significance, shaping loyal customers through personalization.

Create semi-fictional personas with demographic data, devices used, goals, problems, and fictional backgrounds to represent the target audience, enabling multiple personas for vegan Android cooking apps and seasonal ingredient ideas.

Decide between current customer personas and new users, gather insights from social data and interviews, and use an affinity diagram to define key fitness app requirements.

Explore how user personas, stories, and scenarios guide UX design, using a simple one-page, index-card template: as a person, I want to, so that I can reach a goal.

Explore empathy maps to uncover user emotions, thoughts, and triggers during scenarios. Build on personas and stories to capture drivers, pains, and gains for improved ux.

Document use cases step by step, recording exact user actions and system reactions to reveal concrete interactions and potential flow errors using Cockburn’s 13-point template.

Structure content with information architecture to create meaningful, easy-to-use interfaces for digital products. Organize pages, navigation, and key information to support users on a single screen and beyond.

Explore card sorting to shape information architecture for websites and apps, using open, closed, and hybrid consulting to align navigation with user mental models.

Leverage existing mental models and design patterns to align with users' habits, and use metaphors and familiar navigation to create an intuitive, superior user experience.

Explore visual prototypes to test layout, navigation, and logic early using low fidelity sketches and templates, then refine with high fidelity concepts through iterative user feedback.

Learn data-driven UX techniques, including observation, interviews, surveys, and AB testing, to collect data via screen recordings and analytics, and improve usability and user flow.

Design thinking guides an iterative process that centers the end user, defines the problem, captures needs, generates ideas, prototypes, tests, and refines solutions through feedback.

Explore the four-phase model of lean UX design: make assumptions about users and problems, formulate hypotheses, build an MVP, and test with users to iterate.

Explore the Nielsen heuristics for user interface design and how usability shapes human-centered experiences. Apply visibility of the system status, error prevention, recognition, and consistency to improve interfaces.

Explore practical use of the HSBC color system: start from a base hue, shift a few degrees for friendlier tones, and adjust saturation to make colors pop or blend in.

Explore color psychology and how color choices trigger emotions and quick product judgments. Learn commonly accepted color meanings—red for attention, blue for trust, green for growth—and apply them thoughtfully.

Discover how motion communicates hierarchy and available actions in modern interfaces through informative, focused, and expressive animations. Learn to use animation purposefully to guide users and create intuitive, brand-aligned experiences.

Explore how motion communicates hierarchy and navigation through animation, including hierarchical transitions, transitions between siblings, and top-level transitions, with examples like photo gallery, email inbox, and chat apps.

Use targeted, subtle animations to provide mini tutorials that guide users without interrupting the flow, showing what to do next and where to find items in collections, favorites, or bookmarks.

Use motion and animation to add character and empathy, reinforcing branding for a memorable first impression, with expressive motion guiding hierarchy, transitions, and feedback (Twitter and Duolingo as examples).

Explore the anatomy of transitions by categorizing animations into static, persistent, permanent, outgoing, and incoming elements, and apply smooth, continuous motion with fades, scaling, and shape changes to preserve continuity.

Learn how tweening, fading, and shared transformations create continuous, uninterrupted transitions between views by using in-between frames and opacity changes to maintain user orientation.

Explore how applying the same transformation to incoming and outgoing elements creates continuity in transitions. Use shared rotations or scalings to make play-pause icon changes feel natural and fluid.

Explore how easing creates natural motion by accelerating and decelerating animations, using ease in and ease out, and timing strategies to synchronize multiple elements and control overall duration.

Explore how animation speed hinges on duration and timing, guided by complexity, purpose, and spatial scale, with Material Design guidelines like 100 ms for controls and 150 ms for fades.

Examine how font choices, weights, and color schemes shape readability and visual hierarchy, with guidelines for line length (40–70 characters) and line spacing (1.2–1.5x).

Harness contrast with color, size, weight, and font lines to create emphasis, and use left, right, or centered alignment with generous negative space for readable, cohesive layouts.

Explore legibility by balancing text and background contrast, optimal font size, line length, and whitespace to ensure readable, accessible user interfaces.