App Design
Course Objectives
Research, Prototype, and Design mobile apps. We will focus on design methodologies, tools, systems, and approaches used in app creation prior to code. No coding knowledge will be required for this course. Our work will culminate with high fidelity prototypes that look like a polished application. We will focus on UX/UI design.
Structure
The course will primarily meet asynchronously with a few exceptions for critique and one on one meetings. You will work throughout the semester to design an application. All of our assignments will work as small building blocks in our design process culminating in a final design. Pivoting, iterating, curiosity, and refinement will be the major tenants of this course.
Attendance
Two unexcused absences result in full letter grade drop and four absences result in a failing grade. Late arrival or early departure from class is the equivalent of 1⁄2 absence. If you know you are going to be absent or late notify the professor in advance. Outside of the first and last class we meet synchronously via slack each week or in scheduled one on one checkins via zoom. This is recommended to do from your computer, but in extenuating circumstance can be done on your phone with the slack app.
Requirements
This is a hands-on course, and regular attendance is necessary for participation. You are expected to participate in a positive, constructive manner, and produce the best work you are capable of. You are also expected to spend twice as much time working outside the classroom as you work inside the classroom. This means you need to spend at least seven hours per week on homework. Schedule your time accordingly. It is your responsibility to turn in assignments on time. Students who miss numerous classes or fail to hand in work on-time will find it difficult to pass the course.
Grading
Homework 30%
Participation via slack 30%
Final Prototype 40%
A Work is of exceptional quality and beyond the stated goals of the class
A- Work is very high quality
B+ Work is high quality and exhibits significantly better than average ability.
B Work is very good and satisfies the goals of the course
B- Good Work
C+ Above average work
C Average work that demonstrates understanding of class material. Satisfactory completion of the course.
C- Passing work but demonstrates below average ability and understanding of course material.
D Below average work that demonstrates poor understanding of class goals and assignments and severe lack of effort. Lowest passing grade in the class.
F Failure, no class credit.
W Withdrawal. If a student officially withdraws from a class during the add/drop period it will be deleted from his/her permanent record.
Office Hours
By appointment
Prof
Thea Rae
Sync Time
Wed 1:40PM EST
Schedule
Week 1: Intros / Overview - 2/3
Our first class will be a short synchronous meeting to introduce ourselves and go over the course, materials, and expectations.
Homework
Create a slide show consisting of 3 Apps you love to use, and 3 you hate or strongly dislike/find hard to use. Write a paragraph or two summarizing each app and its target audience as you see it. Link to the application's url if available. For each of the 6 apps take screen grabs of each the features you like best/worst and write 3-5 bullets about each feature. Post a link to the homework channel in slack. Example
Listen to these Podcasts:
*https://99percentinvisible.org/episode/of-mice-and-men/
*https://99percentinvisible.org/episode/future-screens-are-mostly-blue/
*https://www.designmattersmedia.com/podcast/2022/Best-of-Design-Matters%3A-Sarah-Jones
Read these articles:
*https://www.thoughtspot.com/thoughtspot-blog/15-mobile-app-design-best-practices
*take notes on them for discussion in our synchronous slack meet up
Week 2: App Anatomy - 2/10
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Send a link out to your Slides of Apps you like and Apps you hate
Async (within the 24hr day): Review one another's work leaving comments in a thread. @ the author
Lecture
Slides Maria Paula's Portfolio (subset of her work)
Homework
Areas: Messaging, Social, Productivity, Convenience, or something else. No Games.
Choose an area of focus from the above list, Research what is currently out there. Aggregate your findings in a slide show. Each mobile or web app, or analog tool should have its own slide with 3-7 bullets about how well it serves the purpose. You should find a minimum of 5 existing apps or tools that are related to your area of focus. Post your deck to the homework channel.
Listen to these Podcasts:
*https://99percentinvisible.org/episode/wait-wait-tell-me/
*https://www.bbc.co.uk/programmes/w3csz2xk
*https://www.bbc.co.uk/programmes/w3csz2wf
Read these articles:
*https://xd.adobe.com/ideas/principles/app-design/essential-patterns-mobile-navigation/
*take notes on them for discussion in our synchronous slack meet up
Week 3: Design Research - 2/17
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Deck link posted
Async (within the 24hr day): Review each others work and post additional resources for them if you know of something.
Lecture
Form template for user feedback collection
Homework
Write a summary your app's mission. How might it solve the niche you found your area of focus? Where did your research take you? Do you need to do more research to validate your hypothesis?
Read all of their Guidelines:
*https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/
Listen to these Podcasts:
*https://99percentinvisible.org/episode/on-average/
*https://www.bbc.co.uk/programmes/w3csz2xm
*https://www.bbc.co.uk/programmes/p059zb6n
Read these articles:
*https://medium.com/oberonamsterdam/how-to-create-an-accessible-app-and-why-you-should-5493f41f8bdb
*take notes on them for discussion in our synchronous slack meet up
Week 4: User Stories - 2/24
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: link to your app's mission statement
Async (within the 24hr day): review each other's app descriptions and leave comments about how useful you think the app would be for you and or someone you know. Be constructive while being supportive, but don't shy away from critical feedback when it could be helpful.
Lecture
Homework
Write user stories and journeys for your app put them in a slide deck or doc and post them to slack.
Listen to these Podcasts:
*https://99percentinvisible.org/episode/the-eliza-effect/
*https://open.spotify.com/episode/4NV4txfL1pIEMrBVy6KCuc?si=348b09f178fc41d7
*https://open.spotify.com/episode/13GoorSICR2TqCrnccSqYD?si=c2d55a2aaa624904
Read these articles:
*https://www.theinnovationmode.com/the-innovation-blog/user-stories-in-agile-the-whys-and-hows
*https://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
*https://uxplanet.org/a-beginners-guide-to-user-journey-mapping-bd914f4c517c
*take notes on them for discussion in our synchronous slack meet up
Week 5: Rapid Prototyping / Low Fidelity Wires - 3/2
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: user stories/journeys
Async (within the 24hr day): Review one another's user stories/journeys and post helpful feedback to the thread in slack.
Lecture
Homework
Do the rapid sketching exercise from the lecture. 1 wire every 30 seconds. 10 wires per screen.
After completing the fast twitch ideation exercise move on to creating 3 wires per screen spending 10-20 (suggested) mins per wire. You can use Miro, Procreate, Sketch, Adobe Comp, XD or Pen and paper. If analog please compile wires into a deck. Record yourself presenting your wires (2-3mins) as if you were showing them as initial sketches to a client. Post the video of your wires with your walk through to slack
Watch:
*https://ed.ted.com/lessons/rapid-prototyping-google-glass-tom-chi
Read these articles:
*https://www.interaction-design.org/literature/topics/paper-prototyping
*https://xd.adobe.com/ideas/process/wireframing/guide-to-creating-mobile-app-wireframes/
*https://www.figma.com/blog/how-to-wireframe/
*take notes on them for discussion in our synchronous slack meet up
Week 6: Presenting / User Testing - 3/9
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: lowFi wireframes
Homework
In lieu of lecture this week you will need to coordinate working as a group to play test and peer review each other's work. Meet online with your group to Play test and give feedback on one another's Wires. Post feedback to thread in slack.
Peruse these sites:
*https://www.darkpatterns.org/
Listen to these Podcasts:
*https://99percentinvisible.org/episode/florence-nightingale-data-viz-pioneer/
Read these articles:
*http://echesters.co.uk/2016/10/18/design-for-transparency.html
*https://www.figma.com/blog/research-remotely/
*take notes on them for discussion in our synchronous slack meet up
Week 7: Mid Fidelity Wires (Greyscale) - 3/16
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Recap of how user testing went
Lecture
Homework
Create mid fidelity wireframes using greyscale and text to clearly define the user stories and journeys you have mapped out. These can be made in Miro, Figma, Invision, Sketch, AdobeXD or Adobe Comp. If not online please compile into a deck. Record yourself presenting (2-3mins) the mid fi wires as if it were to a client. Post the video to slack for feedback.
Watch these Ted Talks:
*https://www.ted.com/playlists/574/how_to_make_a_great_presentation
Read these articles:
*https://pixelfridge.digital/how-detailed-should-wireframes-be-a-guide-to-wireframe-fidelity/
*https://www.figma.com/best-practices/everything-you-need-to-know-about-layout-grids/
*https://www.figma.com/best-practices/tips-for-using-constraints-in-your-workflow/
*take notes on them for discussion in our synchronous slack meet up
Week 8: Presenting / Feedback - 3/23
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Mid Fi Wires
Async (within the 24hr day): Review of Wire presentations
On Zoom
No lecture. One on one meetings 10mins long. Sign up link will be posted in slack
Homework
Revise your midFi wires based on one on ones and peer feedback. Posted links to revised wired in slack.
Watch:
*https://watchdocumentaries.com/helvetica/
*https://www.youtube.com/watch?v=aXgFcNUWqX0
Peruse these sites:
*https://ant.design/docs/spec/introduce (specifically the guidelines and resources section)
*https://www.figma.com/best-practices/component-architecture/
*take notes on them for discussion in our synchronous slack meet up
Week 9: Color - 3/30
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Revised midFi wires
Async (within the 24hr day): Review and offer Additional feedback and review of revisions if available
Lecture
Video
Slides
Homework
Create a color pallet for your app. Label the colors and how they will be used throughout the app. Post a link to your pallet with its descriptive information.
Play with:
https://color.adobe.com/create/color-wheel
Listen to these Podcasts:
*https://99percentinvisible.org/episode/the-secret-lives-of-color/
*https://99percentinvisible.org/episode/the-colour-of-money-r/
Read these articles:
*https://uxdesign.cc/color-blindness-in-user-interfaces-66c27331b858
*take notes on them for discussion in our synchronous slack meet up
Week 10: Iconography / TypeFaces - 4/6
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Color pallet for your app
Async (within the 24hr day): Review of the pallets
Lecture
Video
Slides
Homework
Choose your typeface(s) for your app. Choose icons to use for buttons throughout your application. Think about a logo and what it might look like. Post your typeface(s), icons with your color pallet as part of your style guide. You should illustrate the use cases for the icons, and fonts, scale and weight.
Check out:
https://mui.com/components/material-icons/
Listen to these Podcasts:
*https://99percentinvisible.org/episode/the-punisher-skull/
*https://99percentinvisible.org/episode/icon-for-access/
Read these articles:
*https://99percentinvisible.org/article/beyond-biohazard-danger-symbols-cant-last-forever/
*https://www.figma.com/blog/when-fonts-fall/
*https://www.figma.com/best-practices/typography-systems-in-figma/
*take notes on them for discussion in our synchronous slack meet up
Week 11: Brand Identity / Style Guide - 4/13
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: Typeface and icon choices
Async (within the 24hr day): Review in progress style guide
Lecture
Video
Slides
Homework
Create a logo for your app, start with many fast sketches one every 30-60 seconds. Spend about and hour sketching loose and fast iterating with each sketch. Review your sketches and hone in on what elements you think are the most successful, create a minimum of 10 more sketches from these elements. Use these more detailed sketches to create your logo. Remember your logo should be something that works at various scales and should be shown in light and dark colors in relation to your pallet.
Add your logo to your style guide along with your grid rules and spacing requirements.
Listen to these Podcasts:
https://99percentinvisible.org/episode/making-mark-visual-identity-tom-geismar/
Read these articles:
*take notes on them for discussion in our synchronous slack meet up
Week 12: High Fidelity Wireframes - 4/27
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: A complete style guide
Async (within the 24hr day): Review each others style guides
Lecture
Video
Slides
Homework
Begin to craft your High Fi Wires in Figma. Post a link to your progress.
https://www.figma.com/best-practices/branching-in-figma/
Week 13: High Fidelity Wireframes - 5/4
On Slack
Sync: Meet to discuss podcasts and readings.
Due by class time: In progress High Fi Wires (minimum 50% complete)
Async (within the 24hr day): Review wires, flag anything that is confusing
On Zoom
Office hours to help with design
Homework
Prepare a presentation of your Wires 5-10mins walk us through your final design
Week 14: Final Presentation - 5/11
Synchronous presentations and critique of final Apps
Week 15: Final Revisions Due - 5/18
@ me in slack with the links to your final revisions of your app