Interactive Design Week 6 – Task Flow Diagrams & Use Case

For this assignment, we useD Media Space (http://mediaspace.washington.edu/) as the website of reference to diagram task flows and create a use case. I will create two task flow diagrams of how someone would add a “friend” or add a member to their network. The first diagram will show how this task is accomplished in the current functionality; the second is proposed improved version.

TASK FLOW DIAGRAMS

Current version:

Media Space task flow for adding a friend to your network

Media Space task flow for adding a friend to a user's network - CURRENT VERSION

Improved version:

Task flow for Media Space for adding a friend to your network

Task flow diagram for Media Space for adding a "friend" to a user's network - PROPOSED IMPROVED VERSION

USE CASE

The following is a use case for the proposed improved version of adding a friend to a user’s network on Media Space.

STEP 1.

User logs into Media Space website.

STEP 2.

User is taken to the Welcome screen, where there are various navigational options. One of these options is the Members tab.

STEP 3.

User clicks Member tab. Members tab has various search and filtering options:

  • General search – Primarily used for searching user’s names, but also can be used to search for classes, groups, topics… and anything that is a searchable field from any member page.
  • Class list – A list of current classes. This list changes per quarter.
  • Group projects list – A list of various group projects from the classes.
  • Topics/Interests – Based upon interests identified on member page.

STEP 4.

Decision time! User decides either to search or filtering with the various options for a member’s name.

STEP 5.

Search or filter result displays lists of names, as well as option to add each person as a “friend.”

STEP 6.

User clicks “Add a Friend” link.

STEP 7.

Message is displayed to user – “This personal has been added to your network.” New friend name is now displayed on user’s list of friends.

 

Interactive Design Week 3 – Wireframes

The assigment this week is to create a wireframe, either for a new site or a revision of an existing site.

I decided to do wireframes for a new mobile site using a website that I help manage at work. I have no experience with mobile websites or applications, except as an end-user.  I will show three tiers of wireframes – the home page, a 1st tier page (News Releases) and a 2nd tier page (a specific news release).

Existing site for  Fred Hutchinson Cancer Research Center (http://www.fhcrc.org)
fhcrc-home

New mobile site for Fred Hutchinson Cancer Research Center (http://mobi.fhcrc.org).

Home page:

mobi_v1-home-nohead
Tier 1 - News Releases List:
News Releases

News Releases

Tier 2 – Single News Release:

News Release - Specific one

News Release - Specific one