Thu, Nov 23
Designing user experinces
Today's objectives!
Work in progress review of diary and flow chart assignment.
Tasks
Review work in progress.
Presentations
Responsive design
Asset creation
How to do things
Workflow and testing
Agenda
Assignment
Assignment 11: App wireframe
Citizen science: Wireframe an App
Using Figma, develop the user experience for an application, as described below.
This application is designed to let users find and report an aquatic invasive species, the European Green Crab (Carcinus maenas). Learn more here: Aquatic invasive species
Develop a lo-fi wireframe of the citizen science invasive species reporting app. Set it up at a size that matches your own phone. You'll want to use the official Figma app for Android or iOS for testing - don't just test on your computer. test early, test often.
As noted on the web page below, the app should allow users to:
- Send a photograph (or more) of the invasive species.
- Send the exact location.
- Send any notes.
- Allow submission anonymously or with contact info.
Your wireframe at this point should focus on demonstrating the flow of actions needed to accomplish the task, and what features the app needs. Treat any wireframes as explorations of flow, not detailed layouts. Detailed visual design is not needed for this assignment.
Make sure your wireframe is well-constructed, with buttons that work, etc. Function and flow is more important than detailed visual design. Make sure to test as you go. A major part of the wire-framing process is for the designer to understand and fix problems with the navigation and flow of the app. The intent of the app is to communicate the concept to non-designers.
You will need to make decisions about features, etc., as part of the process.
As this will be a phone app, choose a phone model/size an design to that. It does not need to be "responsive" in terms of working on different screen sizes or orientations. Figma's preview on device function is good for testing.
Important: this is an initial wireframe designed to show flow and functionality, and to reveal problems or gaps that you will need to address. Time spent on visual design beyond basic hierarchies of information, labels, interface elements, etc is not time well spent at this stage. While some of the Figma interface kits for iOS or Android may be useful, focus on communicating the intent of your design. It's fine to create placeholders from screenshots, etc. - especially useful if you want to represent built-in functions such as maps, cameras, photo galleries, keyboards, etc.
Phase 1: Due for submission Thu, Nov 30. Post a link to your Figma prototype to your web server as YOURLASTNAME_Assignment-11.
Samples
Here you will find any sample files or code samples you need for class.
None this week - refer to last week's page.
Tutorials
None this week - refer to last week's page.
Resources
Planning and prototyping
- Photoshop: Generate assets
- https://helpx.adobe.com/ca/photoshop/using/generate-assets-layers.html
- Illustrator: Export for Screens
- https://helpx.adobe.com/illustrator/using/collect-assets-export-for-screens.html
- "Responsive" Images
- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
- Slicing
- https://helpx.adobe.com/photoshop/using/slicing-web-pages.html