Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 12 views

    UI & UX Workflow

    Uploaded by

    mytappy
    The document outlines the UI/UX workflow including user research, information architecture, wireframing, building a design system, designing the user interface, adding motion design, design governance, prototype testing and improvement. The workflow involves understanding user needs, creating wireframes and prototypes, gathering feedback and refining the design.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd

    UI & UX Workflow

    Uploaded by

    mytappy
    12 views32 pages
    The document outlines the UI/UX workflow including user research, information architecture, wireframing, building a design system, designing the user interface, adding motion design, design governance, prototype testing and improvement. The workflow involves understanding user needs, creating wireframes and prototypes, gathering feedback and refining the design.

    Original Description:

    ui ux

    Original Title

    UI & UX workflow

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document outlines the UI/UX workflow including user research, information architecture, wireframing, building a design system, designing the user interface, adding motion design, design governance, prototype testing and improvement. The workflow involves understanding user needs, creating wireframes and prototypes, gathering feedback and refining the design.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    12 views32 pages

    UI & UX Workflow

    Uploaded by

    mytappy
    The document outlines the UI/UX workflow including user research, information architecture, wireframing, building a design system, designing the user interface, adding motion design, design governance, prototype testing and improvement. The workflow involves understanding user needs, creating wireframes and prototypes, gathering feedback and refining the design.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 32

    UI & UX Workflow

    Understanding User,
    Research Insights
    • User research is used to understand
    the user’s needs, Behaviours,
    experience and motivations.
    • Instead of Research on Google, do
    Research from Users
    • Researching with empathy in mind
    • ( Objective Research )
    • You are not the user.
    • There’s no ‘one size fits all’ approach
    • Quantitative vs. qualitative
    • Attitudinal vs. behavioural
    • What do users need?
    • What is already working and what
    isn’t?
    Information
    Architecture
    • Information architecture (IA) is, like
    blue print, a visual representation of
    the product’s infrastructure, features,
    and hierarchy.
    • IA may also include navigation,
    application functions and behaviours,
    content, and flows.
    • There is no set limit to the size or
    shape of IA; nevertheless, it should
    encompass the generalized structure
    of the product so anyone should be
    able to read it and understand how
    the product works.
    Designing
    Wireframes
    • A wireframe is commonly used
    to lay out content and
    functionality on a page which
    takes into account user needs
    and user journeys.
    • Wireframes are used early in the
    development process to
    establish the basic structure of a
    page before visual design and
    content is added..
    • it provides an early visual that
    can be used to review with the
    client. Users can also review it as
    an early feedback mechanism for
    prototype usability tests.
    Building a
    Design System

    • Font Type /Family


    • Usage variations
    • Colour palette – Primary
    secondary , background
    • Buttons – Check boxes,
    • radial buttons, stepper,
    • toggle ,
    • Text buttons, outlined
    • buttons
    Rules for Perfect Typography In UI
    Rules for Color Selection in UI
    Web Content Accessibility Guidelines 2.1
    Rules in iconography
    Designing User
    Interface

    • Blending of Wireframe , Design


    system, and user data/
    information/text/ Image/product
    Add Motion
    Design
    • motion design makes UI
    experience richer and enhances
    user engagement. It is also
    helpful for the developers to
    understand behaviors and
    interactions
    Design
    Governance
    • The governance framework desi
    gn effort is a good opportunity
    to the organization's digital
    stakeholders to learn how to
    work and collaborate better. ...
    Because it's not just the end
    state that is important, but
    rather the interim conversation,
    collaboration, and compromise
    required to build your
    framework.
    Prototype testing &
    Improvisation & Update
    • Does the prototype do what it’s supposed to?
    • Do users think the product’s design matches its purpose?
    • What’s the first thing users would want to do on this product?
    Can they do that?
    • When they explore the product, do they become confused at any
    point?
    • Does anything distract them or get in their way?
    • Are there any features they completely ignore?
    • Does the information architecture and navigation make sense?
    (Can users find what they’re looking for?)
    • Does your target market feel like this product was designed for
    them?
    • What, if anything, would make your users want to use this
    product frequently?
    • How likely or unlikely would they be to recommend the finished
    product to a friend?
    • How would they describe this product using their own words?
    Conclusion

    You might also like