Project 3: Application Design

Course Competencies from GWDA202 Syllabus addressed by this project:

  1. Illustrate by example the difference in functional qualities of interface design and qualify why it is imperative to incorporate sound design principles into digital interfaces.
  2. Incorporate metaphor, concept, and motif design into digital interfaces.
  3. Evaluate and analyze gestalt and cognitive principles and apply them to the design of usable interactive media.
  4. Work as a team member capable of critiquing and giving constructive criticism regarding interface designs.
  5. Iterate and complete final interface designs from initial thumbnails, lo-fidelity prototypes (wireframes), hi fidelity prototypes and other visual aides as proscribed using project management and user experience parameters.
  • From the Course Description: Interface Design is an introduction to the pre-planning aspects of the design process. Students will formulate design projects specifically for the delivery medium such as the kiosk, the World Wide Web, and other digital media. Parameters relating to color, resolution access speed, and composition will mediate the design process. Students will also employ principles of interactive design appropriate for the client and target audiences.

Project Description

You are to create a mockup of a smartphone application.  Your app will be utilitarian. It should meet a need. It will be not be a game app. Your mockup will make use of existing images/templated components, in keeping with the iPhone or  Android operating system guidelines. You are encouraged to take on a topic/subject that is of personal interest to your team. See instructor’s site for links to GUI kit downloads.

EXCELLENCE: A thoroughly documented case study which depicts the steps to the finished project.  An excellent app design satisfies a real need in a plausible way. An Excellent design is highly original design that is informative and highly usable as an smartphone application interface. An excellent design is in keeping with application guidelines, while expressing the concept of the application through motif and metaphor.

Excellent teams work together and present their project together as a team.

Job 1: Both members of your team brainstorm concepts for app. Each post three ideas to blog.

Job 2: Research and define the nature of your application concept. Create an application definition statement: 
An application definition statement is a concise, concrete declaration of an app’s main purpose and its intended audience/ Create an application definition statement early in your development effort to help you turn an idea and a list of features into a coherent product that people want to own. Throughout development, use the definition statement to decide if potential features and behaviors make sense.

Focus on novelty, viral viability. Add a category called Monetize. In this category, explain how this app generates money. Is it for sale? Is it free with limited features with expanded features available upon paid upgrade? Is it generating money by running advertisements? Is it for a nonprofit organization, performing a service in keeping with its mission statement?

Device:

Screen Specifications, portrait and landscape, primary device orientation- this may be determined by the devices you and your team mate own, are most familiar with. Research User guidelines for Android: Material Design and iphone: iOS

What is the primary task?

What page elements need to exist to perform this task?

Main:

What elements need to be highlighted in order for the user to be able to perform the main task easily and efficiently?

What are secondary tasks that can be performed with the app?

Job 3: Create Personae

Job 4:  Research and create a competitive analysis. What currently existing apps organize information or perform tasks similar in nature to yours?

Job 6: Thumbnail sketches, wireframe. Define the regions of activity, requiring different layouts. Logic Flow Map.

Job 7: Build App Icon. Vital part of project. Show its process and development separately. Also, design icons for use within the app, as needed.

Job 8: Configure existing graphic elements to spec to create final high fidelity prototype of your app.

This may be prototyped in muse, marvel, pixate, Adobe XD, etc.


Final Project Due Week 11.

Project case study will be submitted as pdf: 8.5” x 11”, landscape format. print quality (though not printed), under 10 mb in size.
It will include:

  1. Application Definition Statement Focus on novelty, viral viability. Add a category called Monetize. In this category, explain how this app generates money. Is it for sale? Is it free with limited features with expanded features available upon paid upgrade? Is it generating money by running advertisements? Is it for a nonprofit organization, performing a service in keeping with its mission statement?
  2. Competitive Analysis
  3. Three Personas. focus on plausibility and diversity.
  4. Research inspiration.
  5. Moodboard
  6. Icon Process Drawing followed by stage icon Final- preferably in context.
  7. Interface Process Drawing, sketches
  8. Sitemap/flowchart. Use draw.io. Export .pdf. Style in Illustrator and place into InDesign case study.
  9. Wireframes. Using Adobe XD, progress from wireframes, greyscale to hi fidelity in successive copies of file.
  10. A brief Style Guide which defines color choices in hex values, typeface, texture.
  11. Hi fidelity Prototype Iphone apps must conform to guidelines and visual design of current IOS. Android apps must conform to current Material guidelines and visual design. Adobe Xd is appropriate for this step. Marvel, Pixate and other online resources are also suitable.
  12. Source image attribution page. Cite sources, as needed.
  • Submitted separately and privately: Contribution Assessment for Team Projects must be submitted separately and privately by each team member.  Txt file or .doc. See non instructor’s website. The native files for the project, whether .ai, .psd, or .indd will be submitted with project

Schedule:

Week 6: 

Determine teams, communicate to instructor.

Research concepts in class. Each team member post three possible concepts for app to own blogs by beginning of next class.

4 point

Week 7: 

Decide which concept to develop. Begin research and design process.  Establish Application Definition Statement, post to all team members’ blogs before next class.

Begin Logic Flow. Process drawing for vector based app icons.

progress check end of class

2 point

Week 8:

Refine Application Definition statemeent. Post to blo. app icon. Refine Logic Flow. Work on high fidelity prototype in class

Progress check end of class. 

2 point

Week 10:

Preliminary Critique of Smartphone Project

8 points

Apply feedback to project in lab time. Progress check end of class. 

2 point

Week 11: 

The smartphone Application Interface mock up due. pdf due at beginning of class. Upload a .pdf of your finished proposal as directed in class.

30 points

2 point