Application Design: Assesment 3 - LoFi Prototype

on

21.11.25 - 12.12.25

Celine Christabelle Patricia / 0374872 

Application Design / Bachelors of Design (Hons) in Creative Media / The Design School

Task 3: Lo-Fi prototype 

Table Contents

  1. Lectures
  2. Instructions
  3. Tasks
  4. Feedback
  5. Reflections

Lectures

Week 10

Way finder →  consistent branding, to make it easy for users to know where the label

  • consistency in the information you present
  • familiarities → memories
  • respect users’ time, its fine to skip some path

Web navigation

Global → high level, always there

  • Navigation bar always there, so its global

Local → one level or more below

  • the category button, the one that sends you to one page

Contextual → changes depending on context and choices

  • promotions, depending on context

Faceted → filters and sorting

  • expenses by price (filtered)

Supplemental → extra help

Footer of the website is the “reception desk”

Search → special navigation

  1. Last resort - cannot find what to look
  2. Shortcut - already know what to look for
  3. Map - want to see all choices

Navigation best practices

  • know where we are
  • where we can go
  • what will happen there
  • what do i need to know first

Decision making

  • alternatives
  • uncertainty
  • risks
  • interpersonal issues
  • complexity

Process of decision making

  1. gather relevant information
  2. examine and identify alternatives
  3. choose among the alternatives
  4. take action
  5. review the decision and the impact

Anchoring

by creating options, you guide people making decision

→ for example range of 3 prices from Most expensive, less expensive, and cheapest, together with their benefits

Paradox of choice

  • too much choices, more attractive but harder too choose
  • less choices, may be less attractive but easier to make options

Decision fatigue

mental energy → at night, we are tired, bad decisions happen, can’t proceed risk and rewards correctly

Hooks

→ repeating habits

Trigger → action → reward → investment


Week 11

Limits of testing

  • not everything can be tested
    • long term things, like streaks and so on
  • test depends a lot on the tester, the effectiveness depends there
  • Takes time

Testing steps

1. Planning

  • Team direction → being clear on how the test is conducted and why helps the team to speed on the issues
  • Consistency → systematic approach helps getting clean data between participants
  • Less problems → thinking through the approach and logistics to reduce friction and issues during the test
  • Easy report → helps to explain the results to 3rd parties

2. Recruit

3. Test

  • Goal → mini problem statement, give them specific objectives
    • “Users will create an order for a new bicycle within 2 minutes” → Have specific instructions
    • “User will input their medication without mistakes” → What medication? To who?
    • “Users must find the good drivers for their device” → What is a good driver?
  • Logistics → where, how much, what type, how long
    • In lab testing → place where all parameters are under control
    • Remote testing → online testing, video recorded of the person and the prototype
    • Guerilla testing → spontaneous test on street
    • Moderated → guiding user through test, has user manual (mostly on paper)
    • Unmoderated → let them guide themselves, best for testing navigations(figma prototype)
    • Live → direct record
    • Recorded → as ppl to help record la
  • Participants → what kind of people
    • Target Users
    • Where and how to find them
    • How to recruit them
  • Metrics → what will be measure
  • Tasks → specify the flow of the task (this is what you tell to the users)
    • Should be simple and realistic
    • Action Based
    • No guiding the users
    • Prioritize, understand which task is critical to have tested within. a short time

4. Assess

5. Report

Goals →

  • Users are able to find relevant reviews about a moisturizer within 5 minutes
  • Users are able to check out a moisturizer within 5 minutes
  • Users are able to build a skincare routine and understand their skin-type without facing at least 2 errors
  • Users able to find and verify dermatologist and valid user reviews

Logistics →

  • Remote testing, Unmoderated, and Live

Participants

  • Targeted users
    • people who are new to skincare, doesn’t really know their concerns
    • people who has skincare as their daily products

Metrics

  • Effectiveness and learnability → how fast users can find the navigation without guidance per task
  • Satisfaction → user’s perceived comfort, confidence, and overall experience using the interface (post-testing)

    Usability Test Example

    1. Brief the tester
      • Give context
        • I am showing (stage of work) about (project context) because (current challenge)
        • I would need from you (type of feedback) to (objective after receiving feedback) within (feedback constraints)
      • Ask for permission
      • Make them comfortable
    2. Get their info (if needed)
    3. Give task
    4. Observe and take notes
      • Let them struggle
      • Don’t answer directly
        • “What do you think?”
    5. Ask follow up questions
      • If its frustrating, ask for followups, what happen
      • 3 levels of feedback
        • Describe what you see
        • Interpret what the design must be for
        • Analyze how effective the design is
    6. Thank and wrap

    Week 12

    Usability Heurisitics (Nielsen Norman Group - UX youtube to learn)

    • visibility of system status
      • users can see the system status and understand the current state
      • confirmation messages, progress bar, navigation cues
    • match between system and real world
      • align with users’ real world experience and familiar language
      • icon should be consistent
    • user control and freedom
      • feel in control, flexibility to undo and redo
      • always allow users to go back and stop, cancel and close
      • toggles and checkbox
    • consistency and standards
      • reuse some elements, consistent visuals, functions and feedbacks
    • error prevention
      • reduce likelihood of users of making mistakes
      • for example: having clear instructions, confirmation prompts, validation
    • recognition rather than recall
      • recognize information or options presented to them, don’t make users recall themselved
      • every screen have the navigation, letting them know what they are doing where are they, what is next
      • for e.g, menu navigation, search histories/recommendations
    • flexibility and efficiency of use
      • interfaces are suitable for both beginners and professionals
      • e.g. customization (like personalized interface settings, preferred shortcuts) , shortcuts, adaptability, filters
    • minimalist
      • based on trend, people this day prefers identity building, maximalism
      • though you must focus on simplicity, clarity and visual appeal
    • help users with error
    • help and documentation

    Design principles - visual design

    • balance
    • contrast
    • emphasis
    • unity
    • proximity → far from each other but still a group
    • repetition → respectively a sequence
    • alignment -optical aligment
    • hierarchy
    • simplicity
    • negative space
    • propotions → 60% 30% 10%
    • weight → primary buttton ,seconary, tertiary, icon button

    Design system

    • design language
    • DESIGN KITS → all of the design elements
      • put everything elements and things like that to help the developer as well
      • building blocks → components and guidelines, find elements that can be reused
    • component library, accessible for all the designers
    • developer sandbox
    • documentation site

    Instructions


    Task 3: Lofi

    Lo fi prototype


    Presentation

    Feedback

    Week 12

    The path of the prototype is already good. The "payment method" should not look like a button, make the payment summary larger. Fix the spacing and make it consistent. Routine builder is a nice feature but remains hidden, make a pop up menu or put it in the banner for users to see.

    Reflections

    After conducting user research, I proceed on making the app lo-fi prototype. When sketching the ideas in class, I gained more insight and have the illustration in my head on how to make the the lo-fi prototype, it made my work more efficient since my ideas flow better on paper, and I have an idea on executing the lo-fi effectively. After that, I continued making the wireframe, still on paper, and this gives me the idea on how I will connect the frames.

    However, when making the prototype, I wasn't so sure with myself on how to make the flow and keep checking the other markets on how they make the flow properly. It did work, but after conducted user testing, I realize the added features were helpful but the placement can be improvised. This makes me more confident with my upcoming hi-fi work, especially knowing that the users do understand the main flow of my lo-fi prototype, just need minor adjustments for the added features and the layout. Furthermore, further researches on other applications give me new insights on how to improve the final prototype.

    Comments

    Post a Comment