Prototyping a Mobile App

Project Brief

Following brainstorming sessions, design a mobile app.

Part 1:

1. Ideation

Start by brainstorming ideas for a mobile app (in-class activity). Write a project brief answering the following questions:

• What is the purpose of your app?
• What problem(s) do you want to solve or improve? And/or what experience you want to create for people?
• Who would benefit from using your app? 
• In what context a user would want to use it?

2. User flows lists

Develop further your mobile app idea. Ask the following questions when developing your user journey map. Answer the following questions by making lists:

• What tasks will the user be able to perform when using the app? 
• What are the steps a user need to follow to perform those tasks?
• What screens does the user move through?
• What does the user see in each screen?

3. Sketching user flows 

Create a diagram/timeline of user actions using your app. Be as detailed as possible and add notes as needed to explain details. The objectives of your user flows are to define the structure of your app.

4. Sketch out wireframes 

• Show the content and information hierarchy.
• Include notes about functionality and behaviors.

5. Translate journeys and wireframes into Adobe Illustrator/Sketch/XD

Create your user flows and wireframes in Illustrator. 

Part 2.

1. Wireframes: revisions
Based on feedback received on your first completed set of wireframes make revisions.

2. Visual Interface Design
Select typeface, colors and develop visual style and layout for your app. Test multiple typefaces and choose carefully for a good reading on the screen. Define what are the main characteristics of the visual language of your app (color palette, icons, interface elements).

Style Tiles
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of the visual brand of your mobile app. 

Create a style tile of your app using Illustrator (letter-sized page). Include the following in your style tile:

• App Name / Logo Idea
• Color palette (swatches)
• Typography choice(s): section name, post title sample, body copy, caption, etc. (list the typeface names and sizes)
• Interface elements: buttons, icons, forms, dropdown menus, navigation bar

3. App Icon
Design the app icon based on your visual design. The icon should be a pictorial representation of your concept. Your icon should not contain the name of your app.

4. Prototype
Create your prototype of your app using InVision or Abode XD. Define all touch gestures and transitions.

Part 3.

Design a single page website to promote your app. How do you present your app to your intended audience? Through a combination of text an image you will create a web layout to present your app to prospective users. Include explanations about the main features of your app and a call to action for people to be directed to download it. Decide what other content is relevant to include. Think of telling a story that engages and connects with potential users. 

Learning Objectives

• Apply principles of user experience and user centered design to design a mobile app
• Create user journey maps to show activities and interactions of a user
• Create wireframes for a mobile app
• Use sketching as a method of visual thinking and presentation of ideas
• Develop further the visual style started with your app
• Use grids to organize content in a web layout
• Develop engaging content (text and images) for a site

Deliverables

Project brief, user scenarios, user flows, wireframes, prototype, style tiles, landing page.

Readings/Resources

“What is Interaction Design?”from the book Designing for Interaction by Dan Saffer

“How We Read” from the book On Web Typography by Jason Santa Maria.”

“A Web for Everyone” from the book A Web for Everyone: Designing Accessible User Experiences by Sarah Horton and Whitney Quesenbery.

Reflections

Having the students work in the project throughout the semester, allowed them to focus on developing attention to the details of the user experience of their apps. This was the foundation for students to later work on proposing the visual design and the landing page. A strong emphasis on the design process and iteration was encouraged. For future versions of this assignment, I would like to plan testing sessions better and test outside the classroom with intended audiences.