Your team has been asked to design the prototype (wireframes) for a coffee ordering mobile
application that has the following features:
A user should be able to log in with a username, password, GitHub, or Google and should be
directed to a screen that contains images of at least five different types of coffee.
A user should be able to click on an image and be taken to a new screen that allows the user to
order the coffee by displaying the price of the coffee and asking for:
o The delivery address.
o The delivery date.
o A payment method on a payment gateway.
Finally, the app should display an “Order complete” screen confirming the order details.
Research the Apache and MIT licensing modules and decide on a Software License for your
potential software.
1. You are required to work in a group and plan group tasks to complete this project. A part of
task‐based group work is how to organise yourselves. You will use Azure boards for this.
Azure boards allows you to create and assign and track tasks per group member. Break this
application prototype into smaller tasks. Create boards for these tasks, assign users and start
tracking. You will need to submit:
Wireframes;
Screenshots of your original board with the tasks assigned;
Screenshots of status updates and the completion of tasks;
Screenshots of your final boards when the tasks are complete.
2. You will make use of Figma to design this prototype. Figma allows you to create beautiful wireframes (User Interfaces) and take a potential client through the functionality of the app
without the need for code. Make use of Figma to create the application specified above.
Provide a link to your wireframes and Azure Boards.
As an AI language model, I am unable to generate or provide screenshots, images, or links. However, I can help guide you through the steps to complete this project.
1. Task Planning and Organization using Azure Boards:
- Create an Azure DevOps account if you don't have one already.
- Set up a new project and create a board specifically for this coffee ordering application prototype.
- Create User Stories or Tasks for each feature and subfeature of the application. For example:
- User Authentication:
- Create login screen wireframe.
- Implement login functionality.
- Coffee Selection:
- Display images of coffees in a scrollable list.
- Create clickable image wireframes.
- Link images to a new screen for ordering.
- Coffee Ordering:
- Display coffee price and order details wireframe.
- Create input fields for delivery address, date, and payment method.
- Implement validation for all input fields.
- Order Confirmation:
- Create order complete screen wireframe.
- Display order details and confirmation message.
- Assign board members to each task.
- Continuously update and track the progress of each task by moving them through different stages (e.g., To Do, In Progress, Done).
- Take screenshots of the initial board layout with tasks assigned.
- Take screenshots throughout the project to demonstrate the progress and completion of tasks.
- Take final screenshots of the board when all the tasks are completed.
2. Wireframe Design using Figma:
- Sign in to Figma or create a new account if you don't have one.
- Start a new project and create frames/pages for each screen of the coffee ordering app.
- Use Figma's design tools to create wireframes for each screen, ensuring they follow standard UX/UI design principles.
- Add interactive elements to the wireframes, like buttons and navigation links, to simulate the app's functionality.
- Share the wireframe project and generate a public link to share with others.
Remember to ensure that the wireframes and board are easily accessible to all members of your team and any necessary stakeholders.