Client
Masizzim
Masizzim is Korean restaurant chain that specialises in galbi-jjim (meat stews) and Korean traditional dishes.
Methodology
UI Design
Paper Prototyping
Wireflow
Moodboard & Style Tile
Lo-Fidelity Prototyping
Hi-Fidelity Prototyping
Software Tools
Figma
Overflow
Year
About
The challenge
Masizzim wants to promote their business internationally through the introduction of an app. They require the development of a functioning food ordering mobile application that will allow users to order and purchase from their menu online.
________________________________________________________________________________________________________________________________________________________
Paper Prototype
Paper prototyping is a process where design teams create paper representations of digital products to help them realise concepts and test designs.
With the paper prototypes, a user flow was created to illustrate the sequence of actions that users will perform to access different parts of the app. In this case, elements such as ordering, choosing dine in/takeaway, item customisations, checkout and FAQ were implemented.
Moodboard & Style Tile
Before going starting the digital prototype on Figma, a moodboard and style tile was created as it is a great way to set our the look and feel of the new UI design without having to produce work yet.
By creating these two assets, it is an incredibly effective way to communicate my ideas quickly to the wider team.
The following list of key words were chosen to create the Moodboard & Style Tile: Contemporary, Bamboo, Steel, Modern, Warm, South Korea, Red / Black
.png)
Lo/Mid-Fidelity Prototype
A medium fidelity wireframe was created from the paper prototype. Mid-fidelity wireframes have more details which include UI elements such as accurate spacing, headings, and buttons.The wireframe shown below is still slightly basic, but still accurately depicts the layout and detail of what the final prototype may look like.
Hi-Fidelity Prototype (Final Design)
Below is the final version of Masizzim's restaurant food ordering app.
Masizzim's Key App Elements
- Ordering- Dine In vs Takeaway
- Item Customisation
- Checkout & Payment
- User Account
- Other (Order History, Saved Card Details, FAQ, Support)
.png){kind=small}