Demo of Improved User Experience

Design Presented in class time on screen to whole class.

Overview

In this assignment, you will demonstrate your understanding of improved user experience (UX) by developing a clickable mid-fidelity prototype using a tool such as Figma, Photoshop, or GIMP, based on your analysis and recommendations from Assignment 2. The key purpose of this assignment is to create a design artifact suitable for user testing in Assignment 4, and to show this to the class.

Begin by forming a group of 4/5 people who can work together on A3-A5 and signing up on Quercus.

Objectives

1. Translate recommendations you wrote in your A2 from heuristic evaluations and the critical response into design modifications.
2. Develop a clickable mid-fidelity prototype that reflects your design improvements.
3. Conduct a design review to present and defend your design decisions.

Instructions

1. Design Development

Based on your proposed updates from Assignment 2, create a mid-fidelity, clickable prototype of the improved interface. This should be a logical evolution of your original interface, incorporating changes based on your heuristic evaluation, Norman’s principles, and your recommendations.

2. Documentation

Develop a document that includes:

• An overview of the changes made, and why these changes were necessary based on your Assignment 2 findings.
• A set of clearly labeled screenshots of your new design. Ensure these images effectively illustrate the changes you’ve made and the principles that informed these changes.
• A link to your clickable prototype, accessible via Figma or your chosen tool.

1. Design Review

During Module 6, each group will present their improved interface to the class during a design review. This session is an opportunity to showcase your design thinking, justify your design decisions, and receive feedback from your peers and instructor.

Each group will be asked to share the screen and walk through their design, explaining the rationale behind the changes made and answering any questions, while people in other groups provide feedback.

Submission Requirements

1. An overview document (in .pdf format) with a detailed description of changes, a set of labeled screenshots, and a link to the clickable prototype.
2. The prototype itself, accessible via Figma link or another chosen tool.
3. Design review presentation during Module 6 (4 mins +/- 10%).

Grading

• Design Development (40%):
  o The design should be a clear improvement over the original, incorporating changes based on your heuristic evaluation and Norman’s principles.
• Documentation (30%):
  o The accompanying document should thoroughly explain the changes made and their alignment with design principles, and should effectively display the new design.
• Design Review (30%):
  o The design review should clearly and confidently present the new design, effectively justify design decisions, and successfully address questions and feedback.

Resources

1. Figma: A browser-based UI and UX design application that has robust features and tools for collaborative interface design.
2. GIMP: An open-source, free software for such tasks as photo retouching, image composition, and image authoring.
3. Photoshop: A raster graphics editor developed and published by Adobe Inc. for Windows and macOS. It is used for design work ranging from photo editing to interface design.

Creating a Mid-Fi Prototype
If you’ve never made a prototype, here’s a simplified step-by-step guide on how to use Figma to create a mid-fidelity, clickable prototype. You can also consult with the TA for support.

1. Set Up a Figma Account:

Go to Figma’s official website and sign up for a free account. I suggest searching for Figma Education and signing up with your University email so you get the professional account for free.

2. Create a New Project:

After you’ve logged in, click the “+ New File” button in the top right corner to create a new design file.

3. Familiarize Yourself with the Workspace:

Figma workspace mainly consists of: the Toolbar (on the left side), the Canvas (center), and the Properties Panel (right side).

4. Start Designing:

• To start designing, select the Frame tool from the toolbar, and choose the appropriate frame size. Frames in Figma are like artboards in other design tools, and can represent a device screen.
• Use the shape, text, and image tools in the toolbar to add elements to your frame. You can adjust properties of each element (like color, font, size) using the properties panel.

4. Creating Interactive Components:

• To create interactions between different frames, you’ll need to use the prototype mode. To switch to this mode, click on the “Prototype” tab in the top right corner.
• In prototype mode, you can select an element in your frame, and drag the circular node (appears when the element is selected) to another frame. This creates a connection between the two frames.
• In the properties panel, you can define the interaction details such as animation and trigger (like on click, on hover, etc.).

4. Preview Your Prototype:

You can preview your prototype by clicking the “Play” button in the top right corner. This opens the prototype in a new tab, and you can interact with it just like a real app or website.

7. Share Your Prototype:

To share your design, click on the “Share” button in the top right corner and copy the link.

Remember, Figma is a robust tool with many advanced features. This guide just scratches the surface of what you can do. If you’re stuck or want to learn more, Figma’s official resources and community tutorials can be invaluable.

Resources:

1. Figma’s Official YouTube Channel – Offers numerous tutorials, from beginner to advanced.
2. Figma’s Help Center – Provides detailed articles on various aspects of the tool.
3. Figma’s Community – A place to find design resources and connect with other Figma users for tips and support.