Design for Mobile – Student Outcomes

Projects must be country specific, and students spend a great deal of time researching the target country to ensure that the mobile app they are designing is relevant to the indended audience.

Depending on course composition, mobile design may be weighted to design, Ux, or development. Here is a sample submited from a more design-centric student:

littlebook_campion_print_edit-design-mobile

A Customer Journey from another project, in this case a job app aimed at Croatian job-seekers:

design-for-mobile-customer-journey

A completed group project, this time an app that allows visitors to Thailand locate medical services quickly and easily:

NOTE: a large file, may take some time to load!

design-for-mobile

 


Design for Mobile – Sample Assignment

Week 03 – Homework – Interaction Design Flowchart 

For this Homework, you will begin developing a Interaction Design Flowchart for presentation in week 05.

Study Examples

Study Features of Process Flowcharts

Study Features of Ux User Flow Diagrams

Download Additional Examples

  • Download from “Week 03 Homework – Interaction Flowchart Examples” under Doc Sharing

Create a Interaction Flowchart

  • Use the material from your Personas
  • Create Your Storyboard first
  • Create your Customer Journey
  • Your Interaction Design Flowchart should match the “scenes” in your Storyboard
  • Add callouts on your screens to explain
    • Design elements
    • Interaction elements
    • Where the user interacts (often with a little hand icon)

Be Prepared to Share

  • You will share your Interaction Design Flowcharts in Week 04

Design for Mobile – Competencies

Course Description:

Students will learn to create custom solutions for content delivery on mobile devices by developing web application and device application user interface tools optimized for delivery on mobile devices. Students will work in class with mobile devices to learn needs, restrictions of designing for mobile devices as well as test student-designed interfaces.

 

Course Focus:

In this course, students will learn about the unique features of the mobile audience for the web, and how to design and develop for this audience. Topics include mobile history, “mobile first” design patterns, CSS media queries, responsive design, and progressive enhancement strategies For their final students will develop a “mobile first” site with responsive breakpoints, and additional features (CSS3) leading to greater mobile usability and universal access.

 

Course Competencies:

Upon successful completion of this course, the student should be able to:

Conduct necessary research for projects
  • Become familiar with mobile technology terminology
  • Examine the history and impact of mobile computing on society

Identify properties of various delivery platforms

  • Identify different types of mobile devices and their uses
  • Design to the needs and limitations of mobile devices

 Design for specific delivery platforms

  • Design device UI for application delivery

Create user-centered navigation experience 

  • Develop web-based interface for mobile devices

Produce and deliver presentations

  • Exhibit solutions in a finished manner suitable for client presentation
  • Evaluate and organize researched information for effective presentation

 

Course Prerequisite(s):  GWDA 202 Interface Design


Web Standards – Competencies

Course Description: 

An investigation into the importance of adhering to web standards and following accessibility guidelines. Students gain an understanding of how these best practices enable inclusive designs that address diverse user needs, contribute to improved Search Engine Optimization, and meet legal requirements such as Section 508. Students code and test sites for cross-browser compatibility, valid markup, and compliance with accessibility guidelines.

Define Web Standards

  • Identify components of web standards and best practices
  • Distinguish between non-standard and standard script

Evaluate the role of contemporary standards (XHTML 1, CSS 2.1, etc.)

  • Write standards-based script
  • Review and edit script for compliance

Prepare for upcoming standards (HTML 5, CSS 3, etc.)

  • Recognize the challenge of designing for multiple devices
  • Implement a design solution that degrades for older standards

Employ Web Standards to solve design and technical problems

  • Apply web standards through technical solutions

Discuss the social implications of accessible design

  • Identify accessible design obstacles

Experience Design – Outcomes

A customer journey, individual project:

The following was a complete Ux presentation, done as a group project by several students for a job board website.

ux-presentation

Students also built a code prototype using PHP/MySQL to emulate job board functions. Here is a shot of the homepage:

 


Experience Design – Sample Assignment

Week 07 – Homework – Task Completion Testing

In this User test, you will check your User Flow via Paper Prototypes, and confirm the tasks you assumed to lead Users through the User Flow in fact do exist and work.  Looking at high-level tasks (e.g., ordering a product from a website), you will confirm that Users understand and can do the task in your Prototype.

  • The test is similar to that you conducted in USER TEST 3 with a Paper Prototype, but should be conducted onscreen.
  • You will do PROTOTYPING IN CODE with respect to User Interaction
  • If possible, do the Prototype layout and design using code as well

Define Your Testing System Prototype

  • Prototype must be onscreen
  • You can use scanned images of Paper Prototypes
  • Keep the Prototype in a “wire-framey” mode, rather than a complete Page Comp
  • At a minimum, add code that, upon a “click” on the page, jumps the User to the next page in your User Flow

Upload your Prototype

  • This will allow you to pull the site from any location
  • This will allow testing on desktop and mobile

Define High-Level Tasks

  • Examine the User Flow, Scenario, Storyboard for high-level tasks
  • Write down a list of at least 5 of these High-Level tasks
  • Define the “widget” (e.g. something from a Ui) kit that provides visual affordance for the task
  • There may be more than one widget – you are testing a task with several smaller sub-tasks

Create a Question Set out of Each Task

  • The Task: Log into an existing account
  • The Question:
  • If you already had a Username and Password, and were trying to Log in to your site, what would you click next?
  • …and what would you do next?
  • …and what you you click to finish

Get Users to Test

  • Invite Users to your testing
  • Time required will be 10-15 minutes
  • Test both interfaces
    • Desktop (will have to be in the class)
    • Mobile (will have to test ON the mobile)


Write Down the Results

  • Score how many times a User completes a task
  • Score partials for partial completion of a task
  • Derive a numerical % score for each task

Experience Design – Competencies

Course Description:

An examination of user-centered experience and its relationship to information architecture, interface design, and usability.

 

Course Focus: This course introduces students to the Ux design process. Students develop a project concept, then create standard Ux deliverables – market segments, Personas, User Stories, Customer Journeys, Interaction Diagrams, and Wireframe deliverables. They also conduct Ux testing with early-stage (paper) prototypes.

 

Learning Outcomes:

Upon successful completion of this course, the student should be able to:

Define user-centered experience design

  • Describe the relationship between information architecture, interface design, and experience design
  • Explain the role of usability in experience design

Apply principles of experience design

  • Create user flow documentation
  • Produce wireframes to communicate feedback loops
  • Create interface systems for multi-platform delivery

Solve design problems with principles of experience design

  • Combine principles of usability, information architecture, and interface design to create effective user experiences

 

Course Focus Competencies:

  • Create a website embodying features of user experience research
  • Understand the role of WPO in Ux
  • Understanding the role of SEO in Ux
  • Understand the relation of Sustainable Web Design and Ux
  • Run user experience tests to confirm that the design matches expectations
  • Iterate designs based on results in Ux testing.

 

Course Prerequisite(s): MM2203 Introduction to Web Design


User Experience 3: Project Dev – Sample Assignment

Week 8: Week 08 – Lab – SEO Page Testing

In this Lab, you will test the draft prototype page which describes one of your complete Ux projects.

Testing is for understanding, legibility, readibility, and findability.

User Priming

  • Their Persona is a “creative director” or “employer” looking to hire you
  • Their task is to understand your skills and abilities
  • Their goal is to evaluate you as a good/bad hire
  • Additionally they are evaluating your page for completeness
  • They carry out the task by scrolling through your page
  • They are looking for things you left out
  • They are looking for typos, bad images, and other errors

BEFORE THE TEST

  1. Do Google searches for Ux portfolios. Write down the keywords that tend to bring up Ux portfolio sites
  2. Use Google Adwords, Bing Webmaster Tools, or other keyword search tools to find terms related to your portfolio site
  3. Look at the results, and compile a list of keyword and key phrases your Employer site Persona would be likely to type in to find your site
  4. Adjust your page content, title and headers to match common keywords from your compiled list

Add Keywords SEO to your Site

  1. Add meta tags <meta name=”keywords”…> to your page with the keywords
  2. Add meta tag <meta name=”description”…> to your page which use the keywords and phrases to describe your site
  3. Add Facebook OGP tags to your page
  4. Add Twitter Card tags to your page


Sample Meta Tags


< meta name=”keywords” content=”user experience, ux, experience design”>
< meta name=”description” content=”I am a Ux designer with user experience portfolio work and interaction design experience as well”>

@link https://searchenginewatch.com/sew/how-to/2067564/how-to-use-html-meta-tags

Facebook OGP Tags

<meta property=”og:title” content=”Facebook Open Graph META Tags”/>
< meta property=”og:image” content=”https://davidwalsh.name/wp-content/themes/klass/img/facebooklogo.png”/>
< meta property=”og:site_name” content=”David Walsh Blog”/> <meta property=”og:description” content=”Facebook’s Open Graph protocol allows for web developers to turn their websites into Facebook “graph” objects”/>

Tutorials for Adding Facebook OGP
@link https://davidwalsh.name/facebook-meta-tags

Facebook OGP Debugger
@link https://developers.facebook.com/tools/debug/

Twitter Card Tags

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nytimes">
<meta name="twitter:creator" content="@SarahMaslinNir">
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
<meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
<meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg">

Twitter Card Tutorials
@link https://dev.twitter.com/cards/overview

Twitter Card Validator
@link https://cards-dev.twitter.com/validator

TEST 1: Run the Google Search Test (SEO)

  • Have your testers try to find your website in Google
  • Have your testers try to find your website in Bing
  • What keywords did they use?
  • How do their keywords compare to your list?

TEST 2: Run the Main Page Test (non-SEO)

  • Have your “Final Project” Ux Page onscreen (or the home page of your portfolio) with keywords and phrases optimized from above
  • Use at least 3 Testers
  • Use a Note-taking test strategy:
    • User explore the page, making comments as they go
    • You write down their comments
    • After they have scrolled around for a while, you can ask them specific questions to see if they understood what you were trying to say
    • At the end, ask them if they would hire you(!)


TEST 3: Social Network Testing (SEO)

  • Have your testers log into their Facebook and/or Linkedin account
  • Have your testers type in the address to your website
  • Ask them what they learn by what appears
  • Ask them if they would visit your site, based on what they saw in the social network

User Experience 3: Project Dev – Outcomes

The following is a completed Ux design document for Golden Tours a travel site aimed at seniors. The first document is a mission statement/design brief for the project:

golden_tours

The next PDF shows outcomes, including Ux deliverables and final website design. Here is the Business Model:

 

 

A sample Customer Journy map from the project:

Interaction Diagrams:

User Flowchart:

 

Test results (heatmaps):

Portfolio site for this student at: http://lucianaflora.com


User Experience 3: Project Dev – Competencies

Course Description:

A continuation of User Experience Design: Prototyping, this course examines the methodologies and techniques of developing multi-platform interactive experiences. Previous user experience research, prototyping, and testing culminate into an engaging, interactive, multi-platform user experience. Students demonstrate an advanced understanding of the User Experience design industry.

 

Course Focus:

This course expands on the initial project created in User Experience: Prototyping, continuing prototype development and introducing principles of production planning and project management. In addition to completing the project prototype, students will develop industry-standard production and marketing deliverables, including a plan based on researched development needs.

 

 

Course Competencies:

Upon successful completion of this course, the student should be able to:

Identify and analyze the development needs for a multi-device interactive project

  • Describe and/or demonstrate the technology requirements of components of a multi-platform project
  • Create a production plan based on development needs that would be required to fully execute the concept designed

Produce working components of a multi-device interactive project

  • Prepare assets for multi-device delivery to demonstrate the concept such as interactive prototypes, video simulations, and marketing material

Professionally present the final solution

  • Present the completed project including the research, prototyping, and testing that led to the final result
  • Demonstrate professionalism and thorough understanding of the project concept and the user experience design industry

 

Course Prerequisite(s):  User Experience Prototyping