Ironhack UX UI Prework | Challenge 2: Wireframing

Overview and User Flow

An app I always enjoy using is Burger King’s. It’s a great app that always saves time when I’m in a rush. The feature I like the most, is the payment in the app and pick up at the restaurant, keeping me from staying in lines to make the order.

The content is well placed and the navigation flows easily. With just a few steps the user can pay before leaving home or the office and drive right to the restaurant and take it.

The recently added Points Club just makes the users feel like they’re running into big prizes as much as it makes orders. The more points the users earn, the bigger the prizes gets.

Here is an example of how such a user flow in Burger King app looks like for a user that wants to log in and make an order.

Wireframe

In order to analyze the functionality of this user flow even more closely, “reverse engineering” shows the low-fi wireframes of the chosen user path.

Simplified place holders, descriptive buttons and boxes replace the UI features to focus on the main elements.

Prototype

The following frames are given as an example of the login navigation of a first time user that wants to access all orders. Signing in works simply by creating an account with basic information such as, full name, e-mail address, CPF and password. Fields like CEP, Birthday and gender are optional. The user can also log in using an existing Facebook account.

Once this is set up, the user is guided to the home screen.

If you’re interested to test the wireframe prototype, just click here and you’ll be redirected to Figma website.