INF2191 A3: User Interface Design
In this assignment, you will continue your individual UI design project, explain the results of your iteration, and produce high-fidelity mockups, storyboards, and prototypes.
I. Evaluate & iterate
Usability test
Conduct a usability test using your A2 script. with at least 4 participants
Include the usability test script. you ran (updated from A2) and summarize your testing data on the Evaluation page of your A3 Figma file.
Design critique
Receive design critique from at least 2 peer designers (in INF2191H)
Do it during our W12 studio to avoid having to organize it yourself
Include the critiques you received on the Evaluation page of your A3 Figma file.
Iteration report
Identify 3-5 issues with clarity, usability, or utility from your usability evaluation that require notable changes to your project's interactions or structure for A3
Adding creative does *not* count as a major change
For each major change, show and justify the change:
Show the A2 (before) version
Show the evidence for the issue (e.g., design critiques, usability test data, best practices)
Show the A3 (after) version
Include the issues and changes on the Evaluation page of your A3 Figma file.
II. Creative strategy
On the Creative Strategy page in Figma:
Research and compile a mood board of visual references. This must include both the visual culture of your audience, and the competitive climate for your app
State your overall creative strategy in a list of keywords that consider the audience, competitors, tone, vibe, and voice of your product direction
Show your final strategy as a style. tile that demonstrates the content, colour palette, images, typefaces, and visual styling for your product
Briefly document alternatives you considered and justify how each of these choices supports your creative strategy
III. Final Design and Prototype
Design system updates (A3)
Define all colours as Variables with useful names and document briefly
Detail your choice of typefaces, their relevance to your creative strategy, and document briefly
Document all icons and images, and cite sources
Update all colour, text, and layout design specification / documentation
Storyboard
Update screens with changes from your iteration and update storyboard annotations to match
Apply your creative strategy to your sequential storyboard to produce high-fidelity UI mockups
Prototype
Ensure your prototype is up to date from your iteration and runs from your high-fidelity storyboard
Standards from A2 still apply:
Navigate each task from start to finish
Overlays & scrolling where needed
Include local interactions (e.g., switch toggles, checkout totals, etc.) if appropriate
Content updates accurately from screen to screen and in-place if necessary
No extra screens for state changes that could be done in-place
Standards & fidelity (A3)
Mockup (high fidelity) standards including accurate brand and creative colours, images, etc.
Standards from A2 still apply:
Accurate semantics: navigation, UI labels, and icon meaning
Realistic content: clear, accurate, varied length to test your layout
Accurate text size and typography scale
Accurate screen and element size, consistent spacings
Accessible colours, graphics, touch sizes, and text
What to submit
Keep working in your "INF2191 Design Project [First name] [Last name]" Figma file with the following pages in an updated order:
● [NEW] A3 Storyboard (Mockup): New page for your final mockups in A3
● Components: Update from A2
● Design System: Update from A2, include creative strategy documentation
● [NEW] Creative Strategy: Document your creative strategy
● Evaluation: Updated usability test script, summary of tests & design critique, comparison of A2 and A3 design by issue
● A2 Storyboard (Wireframe): Keep these from A2, no changes needed
● Requirements & Tasks: Update from A2
Submit the following:
● Submit a link to your "INF2191 Design Project [First name] [Last name]" Figma file
● Set this file's permissions to "Anyone with the link can Edit" (!)
● Submit a PDF export of every page in the Figma file.