DSGN 270 Assignment 1 - Agile UX Breakdown

Scenario

You are the only UX/UI savvy dev on your development team for a mobile app. After an initial requirements meeting, you realize a little UX will help the team visualize their work.

You decide to create a small proof of concept document to hopefully get buy-in from your teammates.

Instructions

Select a mobile website of your choice (except Amazon; see below) or make one up.
In 50 words or less, summarize the purpose of the website to provide context for the rest of this assignment.
Create 3 User Stories related to the website in one unordered list.
For ONE of the User Stories, create one 5-step (at least) User Flow as a numbered list.
Create at least 3 mobile wireflow screens (wireframes labelled with user flow steps) to support the chosen user flow.

Examples submissions from past students

Note: Since these examples have been provided, you CANNOT use Amazon as the focus of your assignment.

Marking Criteria

This assignment will be marked out of 20 points, which will be given for each of the following:

User stories: 5 points

Stories should the following grammatical format (or similar):

As a [type of user], I want [an action] so that [a benefit/a value].
- See: Agile User Stories
Each story should fit the INVEST set of criteria.
Stories should be a maximum of 30 words.
Stories should be presented as an unordered list.
Each Story action (What) and benefit/value (Why) should be distinct from the other two.

User flow: 5 points

The user flow should:

reference which Story you've chosen.
have the same starting point for all users;
be 5 tasks or more;
show only one path and not show branches;
end in success;
be presented as a numbered list.

Each task should be:

short and concise;
be user-centric (no system processes included);
focus on actions that trigger screen or layout transitions.
- For example: "user submits form" instead of "user enters username..."

Wireframe: 5 points

Screens should be low-fidelity but contain the major page elements.
Annotate your wireframes with Task Flow step numbers. Add arrows, if necessary, to better communicate the task.
All wireframe screens should be included in your document as a single image no larger than an 8"x10" page when printed (can be either portrait or landscape) and be embedded in your document.

General: 5 points

Points will be deducted for lack of scannability:

Text is concise and legible.
The composition of page elements (headings, lists, body text, images, etc) supports visual hierarchy.
The content focuses on a dominant message.

Submission Instructions

In order to receive a grade:

Submit your assignment as a repo named dsgn270-a1, with:
- The text of your assignment saved in a README.md file in the root of your project;
- Your name, course title and assignment title at the top of the page;
- Your wireframe saved as a PNG image in an /images directory;
- Your wireframe linked at the bottom of your README.md file.
Zip your assignment and submit it to Brightspace.
As a comment to your submission, include:
- a link to your GitHub repo;
- a link to the live GH Pages site;