INFO 110 Wireframing Assignment
This is a written assignment, which you will submit as one PDF document on Blackboard Learn.
This assignment is worth 10 points, or 10% of your course grade.
In this assignment, you will gain experience with wireframing (i.e., creating a prototype/mockup), learn how to use the rapid wireframing tool balsamiq, and apply concepts from the first half of this course.
You will be critiquing a website that you think could could be improved based on the principles and concepts you have learned in this class so far. You must choose a website together with the group you sit at a table with in class (you will all be critiquing the same website for the purposes of a future assignment, but for this assignment you are doing all of the work individually).
With your group, choose a website that you are familiar with and you think could be improved. You will critique this website and make recommendations for how the design of the interface could be modified to improve its usability. You must choose a website that is available to anyone who has the URL (e.g., no pay wall or login page should stand between the user and main content).
Part 1: Before
Recreate the website as a wireframe using https://balsamiq.com (free trial license info is below). This wireframe should recreate the existing interface as closely and accurately as possible.
Part 2: After
Think of three (3) changes you would make to improve the interface, each drawing from three different principles and concepts from below. Create a wireframe (or more if needed) for each of the changes, to effectively illustrate how you are recommending the interface should be different. These wireframes should be detailed enough that if you handed them to a software developer, they wouldn’t need to ask you any clarifying questions and they would implement your changes exactly as you are expecting them.
Part 3: Rationale
For each of the three changes you propose, explain in a few paragraphs why your changes would improve the usability of the interface. The rationale you provide should be articulate and reasoned enough to convince a product manager to push for your changes, or a CEO of a startup to invest minimal resources into your changes over other priorities.
Principles and concepts (choose 3 bullets)
• Affordances
• Signifiers
• Constraints (physical, logical, semantic, cultural)
• Mapping
• Feedback
• Conceptual models
• Gulf of execution / Discoverability
• Gulf of evaluation
• Knowledge in the head and knowledge in the world / Recognition vs. recall
• Slips
• Mistakes
You will turn in your assignment via Blackboard, in one PDF and one balsamiq file (.bmpr). The PDF must include all parts of the assignment. Export your wireframes from balsamiq into image files or take screenshots, and include these images in your PDF next to your written explanations. You are including the .bmpr file only to show your work.
Grading rubric (Total: 10 points)
1 pt – Wireframe of the current interface is an accurate representation
3 pts (1 ea) – Wireframe(s) of changes to the interface clearly get across your 3 proposed
6 pts (2 ea) – Improvements Written explanation applies 3 different principles/concepts (1 for each change) to provide a rationale for the changes and argue why each change would improve the interface
Balsamiq Trial License
Product: Mockups 3 for Desktop
LICENSE INFORMATION: License Name: Drexel HCI 2018 License Key: eJzzzU/OLi0odswsqnEpSq1IzVHwcPZUMDIwtKgxNDU1NLYwMQCDmpAaQwBK4w1C
Be sure to copy and paste the License Name and License Key exact as show above.
Here is an FAQ to get you started using Balsamiq:
https://support.balsamiq.com/desktop/classroom
And a free resource that may be useful, a user-contributed collection of ready-to-use UI components and design patterns built using Balsamiq Mockups: