Week 10 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.

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 team meeting or discussion in and/or out of class. Update your design document with the meeting minutes and the outcomes of this week’s activities. More details are available on the Information page under Deliverable 2a.

Due next