App Project

App Design

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. In the process create an Application Definition Statement. Who is your target demographic? Be precise. What tasks would this app perform? Focus on novelty, viral viability. Include 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?

iphone/iOS or Android/Material Design. Look at current market share. Hint: Android is dominating.

What is the primary task?

What page elements need to exist to perform this task? 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 Personas (3)

Job 4:  Research and create an inspiration page: What inspires your interface design?

Job 5:  Research and create a competitive analysis: Is your app unique?

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.

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.

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 
  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 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.


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