Design a mobile app that would benefit BMCC students. It should help them solve a problem or make a unique task easier. You can target all BMCC students or a subgroup, such as female BMCC students, Multimedia students, BMCC students with special needs, etc. Keep the scope of the app in check. It should help students accomplish one to three distinct tasks.
Learning Objectives
- Brainstorm an idea for a mobile app that solves a real-world problem.
- Design an interface that is easy to use by new and repeat visitors.
- Consider the constraints and strengths of mobile devices.
- Design user flows for efficient user experience.
Final Submission
- Use the provided submission template and complete all its parts, including creative brief, persona, user flows and design specs.
- Low-fidelity prototype
- A high-fidelity prototype
Process
Application design is often done as an iterative process in which cycles of prototyping, testing and refining are done in succession until a satisfactory design is achieved. In this project we will go through two rapid prototyping/testing/refining cycles.
WEEK 1
In class: Develop ideas for a mobile application with BMCC students as a target audience. We will vote on one or more apps to adopt for this project.
Select one of the ideas proposed in class for your final project and further define it in a creative brief, clearly articulating target audience, user goals and tasks and functionality.
- Choose one of ideas presented in class
- Research similar apps
- Develop app requirements
- Define target audience
- Develop a persona
Submission: creative brief, persona
WEEK 2
Class presentation: creative brief
Select one user task to prototype, and complete a full cycle of prototyping, testing, and refining. For this quick cycle draw a user flow that describes the steps users take to complete the task and use it to create a low-fidelity prototype in Figma. Share the design with classmates and refine it based on the feedback. Do the same for two more user tasks.
Steps
- User flows: identify one important user tasks in your app and draw a user flow for it. Use pencil on paper or directly in Figma. The drawings should just be sketches- focus on the elements that the user interact with and omit any graphic detail. If drawing in Figma, use B/W lines, boxes and text only.
- Prototype this ONE task completely. Create a low-fidelity prototype using the drawings of your user flows in Figma (using scans of your drawings, if drawn by hand).
- To scan your user flow drawing you can use a free scanner app on your phone such as Adobe Scan.
- See this Sample low-fidelity prototype done from scans of user flows.
- Testing
- Publish your prototype and send a link to your teammate for testing. Include any information he or she needs to know before testing it, In return, test your teammate’s prototype and comment on your experience. Assess how easily you identify and interact with active interface elements. How quickly is it apparent what the app offers and how to accomplish it? Is the path to accomplish it efficient? Consider the context in which you will use the app and provide thoughtful feedback on what worked for you, what did not, what was confusing, and what expectations you had that were not met. You do not have to suggest how to fix it. It is the job of the designer to incorporate your feedback into future design decision.
- Revise your design and prototype based on the feedback from your teammate.
- More user flows: draw user flows for two more user tasks and add them to your prototype.
- post a link to your prototype by responding to my forum post
WEEK 3
Class presentation: user flows
Now that you sorted out some of the bigger flow issues with the help of the low-fidelity prototype it is time to step it up a notch and create a higher fidelity prototype that will look closer to the actual app. To shorten production time use interface elements from the Material Design Theming kit.
- Create a second prototype in Figma, (create a new file, or start from a copy of the low-fidelity prototype. Keep the low-fidelity prototype for submission and documentation).
- Use interface elements from the Material Design Theming kit. You will be customizing them in the next module.
- Implement lessons learned in the testing of the first prototype.
- Include the tasks you prototyped before and add the rest of the tasks identified in the creative brief,
Submission: Figma prototype
WEEK 4
Class presentation: low fidelity prototype
- Test your prototype you completed so far and document the experience in your journal entry. Follow the steps outlined in Journal #13.
- Visual design: add branding (logo or app title design), typographic and color scheme, icons and other graphic elements to your prototype.
- Motion design: add animation and transitions to enhance user experience.
- The final prototype must have actual images and actual text.
Submission: design specs, high fidelity Figma prototype
WEEK 5
- Continue visual design.
- Record design decision in a design spec document.
- Test and assess high-fidelity prototype and revise as necessary.
Class presentation: final prototype
Submission: high fidelity Figma prototype. video presentation
Final Project Grading
Your final project grade is determined as followed:
- 10% Creative brief
- 5% Persona
- 20% Task flows and low fidelity prototype and user testing reports
- 15% Visual design
- 5% Design specs
- 35% Final Prototype
- 10% class presentations.
