Level 2 - AI-Assisted Idea Generation and Structuring

Brief

UI design, or user interface design, is an essential part of creating a successful digital product. It's what allows users to interact with a website or app, making it easy and intuitive to navigate and use. In today's fast-paced and increasingly digital world, UI design is more important than ever. It is a process of designing products, interactions and services that are easy to use and pleasurable to interact with. By enhancing the experience of an interaction with a product or service, you can create more value for that service or product from the point of view of the user audience.
You will design a website user interface based on conclusions noted in your UX report, as well as implement appropriate visual and branding elements. You will prepare a website design for mobile and desktop applications. You will also prepare a project summary in a slide deck that summarises the benefits of your design solution and how it responds to your UX Report. Cite sources in APA7.

Project Goals

User Interface Design

UI is short for User Interface. In this project, you will work on the visual design of your responsive website user interface, with a mobile-first approach, followed by a desktop interface design. Your visual design should be a response to the research you have done in the UX report (Project 1), and the goal is to provide a useful and pleasing experience for your target user. You will also prepare a 5-6 page pitch presentation that explains the design decisions you have made and how they relate to your UX report. You will be presenting in class in week 13.

Process and Checkpoints

• Create a copy of the Process Document. Use this document to record your design process, including task flow, low-resolution prototypes and feedback received.

• Checkpoint 1
  • Create 1 task flow
• Checkpoint 1
  • Low-resolution prototype for mobile
• Checkpoint 2 
  •  First digital draft for high-resolution mobile prototype on 
• Checkpoint 3 
  • Create a Style guide
  • Low-resolution prototype for desktop
• Checkpoint 4
  • Refine high-resolution mobile prototype on Figma.
  • First digital draft for high-resolution prototype for desktop on Figma
• Checkpoint 5
  • Conduct and video record the user test
• Checkpoint 6
  • Complete high-resolution mobile prototype on Figma
  • Add the links to mobile, desktop prototypes and style guide in your process document

• Week 13
  • Present your pitch presentation in class

Deliverables: What to Submit

1. Interactive Prototype in Figma

If working individually

• Mobile version of prototype created in Figma
  Minimum of 6 artboards if working individually
• Desktop version of prototype created in Figma
  Minimum of 2 artboards if working individually
• Evidence of at least one (1) recorded user test as video in your Process document 
• A style guide for the website design
  Must include:
  • Colour scheme
  • Typography specifications and formatting
  • Buttons

If working in pairs

• Mobile version of prototype created in Figma

• Desktop version of prototype created in Figma
  Minimum of 4 artboards if working in pairs
• A style guide for the website design
  Must include:
  • Colour scheme
  • Typography specifications and formatting
  • Buttons
• Evidence of at least two (2) recorded user test as video in your Process documentif working in pairs
  Submit as an MP4 file

Stretch Goal 

• +2 artboards for mobile version of website

• +2 artboards for desktop version of website

• +1 user tests

1. Process Document
   
   Regardless of whether you are working individually or in a pair,each student must submit their own Process Document Created on preferred software.

• Task flow
• Low resolution prototype for mobile
• Include links to your high resolution prototype for mobile and desktop in Figma
• Include a link to the style guide in Figma
• Evidence that your design meets accessibility standards
• Include a rationale of your Design choices
• Include a link to the user test with annotated feedback received
• Include feedback received from a peer and how it informed your process
• If working in pairs, reflect on each member's contribution and role, and include at least 1 of these points:
  • collaborative process
  • communication 
  • shared decision-making
• Reflection

How your Project will be graded

Learning Outcomes

Requirements

CLO1 Demonstrate reflective practice, addressing your proficiencies, processes, and people skills.

The reflections must be min. 

Reflection:

• Choose one reading or a weekly topic from project 2 that stood out to you. In your reflection, include:
  • A brief summary of the reading or topic
  • The key insight or learning you gained
  • How it informed your project and elaborate with an example
• Reflect on how you appraised the overall success of the project - elaborate with an example
• Reflect on which obstacles you faced and how you overcame them - elaborate with an example
• Reflect on what would you improve on future projects
• Sources cited using APA 7 referencing

LO1 Apply User-Centred design principles and approaches to the production of design outcomes.

Assessment Summary: UI Design Project

Overview:
The project focuses on User Interface (UI) design, where students are required to create a responsive website interface based on insights from their previous UX report (Project 1). The goal is to develop a mobile-first and desktop UI prototype that is visually appealing, user-friendly, and aligns with user-centered design principles.

Key Requirements:

1. Interactive Prototypes in Figma:

   • Mobile prototype (minimum 6 artboards individually, 12 if in pairs).

   • Desktop prototype (minimum 2 artboards individually, 4 if in pairs).

2. Style Guide:

   • Colour scheme

   • Typography specifications

   • Buttons and UI elements

3. User Testing Evidence:

   • Record and include at least one user test (two for pairs).

4. Process Documentation:

   • Task flow diagrams

   • Low-resolution prototypes for mobile

   • Links to high-resolution mobile & desktop prototypes

   • Style guide link

   • Accessibility compliance evidence

   • Rationale for design choices

   • Peer feedback and reflections (if in pairs, include contributions of both members)

5. Pitch Presentation:

   • 5–6 page slide deck explaining design decisions and alignment with UX report.

Stretch Goals (Optional):

• Additional artboards for mobile and desktop

• Extra user testing

Learning Outcomes Covered:

• Apply user-centered design principles (LO1)

• Demonstrate reflective practice, addressing processes, proficiencies, and collaboration (CLO1)

Mentor-Guided Step-by-Step Approach

Step 1: Process Document Setup

• Mentor guided the student to create a Process Document to track all design steps.

• Document included task flow diagrams and low-fidelity mobile sketches.

Step 2: Initial Mobile Prototype

• Student created a low-resolution mobile prototype based on UX findings.

• Mentor provided feedback on layout, navigation, and user flow.

Step 3: Style Guide Development

• Defined colors, typography, and buttons reflecting brand identity and usability standards.

• Mentor emphasized accessibility and consistency across devices.

Step 4: High-Resolution Mobile Prototype

• Student refined the mobile design in Figma using mentor feedback.

• Key visual elements were aligned with UX report insights.

Step 5: Desktop Prototype Creation

• Developed desktop version following responsive design principles.

• Mentor ensured alignment between mobile and desktop experiences.

Step 6: User Testing and Feedback

• Conducted video-recorded user testing.

• Mentor guided the student to analyze feedback and implement improvements.

Step 7: Pitch Presentation

• Student prepared a 5–6 slide deck summarizing design rationale, benefits, and UX alignment.

• Mentor reviewed clarity, flow, and adherence to UX insights.

Step 8: Reflection and Submission

• Student reflected on project challenges, key learnings, and improvements for future projects.

• Documented reflection linked to readings or weekly topics and cited sources using APA7.

Outcome and Learning Objectives Achieved

Outcome:

• High-fidelity mobile and desktop prototypes aligned with UX research.

• Complete style guide with accessibility considerations.

• Video evidence of user testing and iterative improvements.

• Clear presentation demonstrating design decisions.

Learning Objectives Covered:

• LO1: Applied user-centered design principles to produce practical UI outcomes.

• CLO1: Demonstrated reflective practice on processes, proficiencies, and collaboration.

Boost Your Grades with Expert Assignment Solutions

Looking for guidance on your assignment? You can download our sample solution to see how a high-quality answer is structured, helping you understand key concepts and improve your own work. Remember: This sample is for reference only submitting it as your own work may lead to plagiarism issues.

For a truly stress-free and safe solution, you can order a fresh, plagiarism-free assignment tailored to your requirements. Our team of professional academic writers ensures every solution is unique, thoroughly researched, and delivered on time. With a custom assignment, you get:

• 100% Original Work – No risk of plagiarism

• Expert Guidance – Written by qualified professionals in your field

• On-Time Delivery – Meet all deadlines with confidence

• Better Grades – Structured, comprehensive, and academically sound solutions

Plagiarism Disclaimer: The sample provided is for educational reference only and should not be submitted as your own work. Always use it to guide your learning and assignment writing.