Week 11 To-Do’s

Lecture and reading

Attend the lecture to learn about this week’s topics and obtain extra information from this week’s reading list (short articles/videos to read/watch). More details are available on the Schedule page.

• 7 Rules for Creating Gorgeous UI: Part 1 and 7 Rules for Creating Gorgeous UI: Part 2 by Erik D. Kennedy
• The Role of the Prototype in Research Through Design by Stephan Wensveen
• The Complex Relationship between Data and Design in UX by Rochelle King
• Hierarchy with Fonts
• The Gestalt Principles

Create a high-fidelity prototype for your application

As a team, start to create 1 high-fidelity prototype on Figma. Focus on the 2 selected features in your low-fidelity prototypes that you tested previously, and add necessary small features (if any) to make it more complete. For consistency, all students should use Figma and not any other high-fidelity prototyping tools.

You should split up prototype creation among your teammates. The suggested roles are:

• 1 member can take the role of the art director and create a very simple “design system”.
• 2 to 3 other team members can take the role of graphic designers, who use the design system to create specific prototype screens, overlays, widgets, etc.
• 1 team member can be the copywriter who provides all the written content, including screen descriptions, navigation names, button names, error messages, etc.

Follow these steps to create your high-fidelity prototype:

1. Assign team roles: art director, graphic designers, copywriter.
2. Create a simple design system which includes:
   • primary and secondary colour palettes;
   • typography styles;
   • the layout grid;
   • common assets like your product logo, icons, and images;
   • key components like a button, navigation, and form element.
3. Use the design system as a guide, discuss and decide on the high-level design choices.
4. Review your observations from the low-fidelity prototype evaluation and see where you can improve the interaction design, content, and structure.
5. Transfer your sketches/ low-fidelity prototypes into high-fidelity mockups and interactions.

Update your design document with your design system, rationales for decisions, description of changes, and Figma link of your high-fidelity prototype.

Team meeting and design document

Conduct this week’s activities during the studio time in class. When necessary, continue the team meeting and discussion out of class. Update your design document with the outcomes of this week’s activities. More details are available on the Information page under Deliverable 2a.

Think about your final report and research proposal (CS649)

Like the mid-term report, you should start to work on your final report/research proposal earlier, as the workload in the end of term will increase. For example, you could start to polish the results in your design document, write an outline of the report, reflect on the past design stages and received feedback, and prepare figures or illustrations. A published Google Doc will be used for hosting the blog posts of your final report. More details are available on the Information page under Deliverable 3d.

For the research proposal (CS649), you should start to think about the topics and research questions that you want to investigate. The research proposal should focus on a different topic from your team project but under the same overarching theme of the class. More details are available on the Information page under Research Proposal.