Creative Engineering Design (Spring 2022)

---

Creative Engineering Design (Spring 2022)
Individual Assignment 3
Individual Assignment 3
Dr. Sarvar Abdullaev
[e-mail]
March 7, 2022
These problem sets are prepared to teach you basic tools and concepts involved in designing products.
You should complete given exercises and submit them in a single zip file named as your student ID (e.g.
u210023.zip
) to eClass before the deadline. Your completed assignments will not be graded, but will be
marked for completion. The maximum mark for completing all assignments in this semester is 10 points.
Although it is an individual assignment and you cannot use other student’s work in this assignment, you can
still use publicly available online resources in this assignment. You must properly reference all resources.
Otherwise, it will be considered as plagiarism.
I may select 3 best works and ask their authors to present. Authors of best submissions will receive addi-
tional bonus points (10 points) which they can use only once for jacking up their marks in other submissions.
1
Food Delivery App Prototype in Figma
You are requested to prepare a clickable prototype in Figma for a food delivery mobile app ”Yummies” after
UX team has finished their research and came up with basic UI and UX design for the mobile app. Please,
check
Yummies presentation.pdf
file enclosed to this task to learn more about the research findings of UX
team. You can also learn more about how the UX research process has been organized in iterative steps
from this blog post.
Figure 1: Yummies Mobile App Preview
Yummies is a food delivery mobile app created for a hypothetical restaurant that provides its customers
with good hearty meals, snacks and drinks. People are pressed for time and often struggle to make out
1

---

Creative Engineering Design (Spring 2022)
Individual Assignment 3
time to cook or sit down for a nice meal at a restaurant. As a User Experience designer, the challenge is to
find a unique solution that helps these people get their meals quickly and easily. Your goal is to design an
accessible and inclusive mobile app that lets users order meals from Yummies Restaurant quickly and easily
at their own convenience.
After conducting a competitive analysis and interviewing five people who have some experience with
ordering food via online platforms, you came up with following User Flow for ordering food. In this User
Flow, user actions are represented in blue circles, UI screens in green rectangles and user decisions in orange
diamonds.
Figure 2: User Flow for Ordering Food in Yummies
1.1
Create UI sketches on paper
You have pondered over this user flow by sketching out on a paper potential UI wireframes for Yummies.
To make the experience fast and stress-free for the users, you prioritised ease of use and a quick ordering
process while sketching. For example, Figure 3 illustrates the
home screen
after several rounds of concept
generation and refinement.
You have to sketch the rest of UI screens for Yummies given in User Flow diagram above. Following are
the screens to be sketched:
ˆ
Sign-up screen
ˆ
Sign-in screen
ˆ
Home screen
1
ˆ
Search screen
ˆ
Menu screen
ˆ
Cart screen
ˆ
Checkout screen
ˆ
Payment screen
ˆ
Order Confirmed screen
Scan, label and save all your UI sketches into
sketches.pdf
file, and include that into your assignment
submission.
1
It is already given in Figure 3, but you can propose your own version
2

---

Creative Engineering Design (Spring 2022)
Individual Assignment 3
Figure 3: Home screen sketches after several rounds of iteration
3

---

Creative Engineering Design (Spring 2022)
Individual Assignment 3
1.2
Create high-fidelity UI design in Figma
Once your sketched out all the screens in the user flow, it is time to create a high-fidelity design of these
sketches. After researching the Figma community, you have found many reusable components and templates
for food delivery mobile apps. For example, this template and components created by Sumanya looks pretty
good and you decide to use it
2
.
Figure 4: Food Delivery App Template by Sumany
You have to create high-fidelity design of your screens in Figma and save them inside
yummies.fig
file to
be attached to your submission. Check sample high-fidelity UI screens shown in Figure 5 for your reference.
Figure 5: Sample high-fidelity UI screens for Yummies
1.3
Create clickable prototype in Figma
Now all of your high-fidelity screens are ready and it is time to make them clickable so it reflects the flow
shown in Figure 2. Make you changes inside
yummies.fig
file to create a clickable prototype of Yummies
mobile app. You can check this sample prototype for your reference.
2
You can pick another template if you do not like this one
4

---

Document Outline

• Food Delivery App Prototype in Figma
  • Creating UI sketches on paper
  • Creating high-fidelity UI design in Figma
  • Creating clickable prototype in Figma