UI and UX Design

Daffodil International University Faculty of Science & Information Technology Department of Computer Science & Engineering Midterm Examination, Summer 2026 Course Code: GSE 441, Course Title: UI and UX Design Level: 4 Term: 2 Batch: 64 Time: 01:30 Hrs Marks: 25 Answer ALL Questions [The figures in the right margin indicate the full marks and corresponding course outcomes. All portions of each question must be answered sequentially.] 1. The design team of Daffodil International University is restructuring their student portal. They realize that students struggle to find where to upload lab reports. The designer first runs a card sorting session with students to see how they naturally group "Lab Reports" and "Class Routines" into menu categories. After establishing a logical category hierarchy, the designer sits down to build an interactive hamburger menu sidebar and a clickable navigation flow to ensure students can effortlessly open the correct section with a simple swipe. [CO1] a) Demonstrate the specific action taken by the design team represents an Information Architecture (IA) task and explain its core component or purpose. [2] b) Identify which phase of the scenario represents Interaction Design. Explain how it builds upon the abstract structure provided by the Information Architecture work. [3] 2. a) During a high-stakes kickoff meeting for a new banking app, the people sitting around the table include a UI designer, a front-end developer, a cybersecurity expert, a behavioral psychologist, a business analyst, and a customer support lead. Every single one of them has an equal say in how the app's onboarding flow should be structured. Explain how this boardroom setup reflects a core User-Centered Design (UCD) principle. [2] b) A UX designer is tasked with completely redesigning the checkout flow for a major e-commerce app. Instead of jumping straight into a design tool like Figma to build structured digital layouts, the designer spends the first afternoon using a pen and paper to quickly sketch out ten different rough variations of the screen layouts. Explain the type of artifact the designer created on paper. [3] [CO1] 3. a) You are testing an engineering CAD application on a high-end touchscreen laptop that supports both a precision digital stylus and standard multi-touch gestures. A user reports that when they rest their palm on the screen to draw a precise line with the stylus, the canvas unexpectedly scrolls or registers wild erratic brush strokes near their wrist. Identify the input conflict attribute occurring in this scenario. [3] [CO2] 4. a) You are developing a vector graphics editor that supports multi-modal input interactions (stylus, mouse and keyboard shortcuts). To ensure a seamless user experience, the application must implement an infinite undo/redo system for complex operations such as drawing vector paths, scaling canvas shapes and changing object colors. Apply the structural and behavioral principles of the Command Pattern to design this undo/redo architecture. Explicitly define how the Client, Invoker, Receiver and Concrete Command components map to the specific functional requirements of this graphics editor. [4] b) UGC is migrating a desktop network monitor that renders live telemetry graphs every 200 milliseconds. The legacy codebase mixes data processing with UI rendering, making it impossible to write automated unit tests without launching the actual GUI window which fails in headless build environments. To fix this, the team is choosing between two architectural approaches: Strategy A: An intermediate component processes the system state and explicitly commands the UI widgets to update. Strategy B: An abstract presentation model exposes properties and the UI layer automatically synchronizes with them via a declarative data-binding engine. Justify which strategy is better suited to allow headless unit testing of the presentation logic with proper explanations. [3] [CO2] 5. A student from Daffodil International University is developing a cross-platform Desktop File Downloader application using Electron for final year project. When a user clicks the "Download" button for a 2GB file, the entire graphical user interface freezes, becomes unresponsive and the operating system prompts the user to "Force Quit" the application. Once the file finishes downloading in the background, the UI suddenly becomes responsive again. [CO2] a) Diagnose the root cause of this interface freeze in the context of Event-Loop Programming. Why does the task block the UI? [3] b) Propose an architectural solution using suitable type of elements or processes to keep the UI fluid. [2]