Ironhack’s Prework: Challenge 2 Wireframing

2 min readDec 26, 2020

THE TASK

For this challenge, the task was to choose an app to reverse engineer down to its to wireframe. Think of a wireframe as an outline for an app or website. The goal is to balance the information with design.

THE APP

I chose to continue to with the app from the design exercise, MyNetDiary. MyNetDiary is very similar to MyFitness Pal, a calorie and food tracker. The app allows users to set calorie and weight goals, and also offers an extensive database of verified foods and recipes.

Free calorie counter and nutrition assistant app. MyNetDiary is your digital diet assistant for weight loss.

THE USER FLOW

1st Screen: Dashboard

This is the first app for the user. For my flow, the user selects add (the big green plus icon on the bottom of the screen).

2nd Screen: Add

The user selects the Exercise feature of the app to add.

3rd Screen: Search

The user is given a list of various exercise activities to choose from.

4th Screen: Edit Exercise Entry

On this screen the user can edit the duration of the exercise chosen.

5th Screen: Search Selection

The user is taken back to the Search screen, but there is an option selected.

6th Screen: Exercise

This screen logs the exercise chosen by the user.

7th Screen: Updated Dashboard

The user is taken back to the Dashboard, but it is updated with the amount of calories burned by the exercise the user chose to log.

THE ORIGINAL SCREENS vs MY WIREFRAMES

THE PROTOTYPE

THE TAKEAWAY

I like UI! After completing the earlier exercises from the this module, this challenge went a lot more smoothly for me. My first hurdle was working with an unfamiliar program, Figma. But the “learn by doing” concept is definitely a formidable. After (more than) a few moments of panic, using Figma to complete the different tasks became easier…and fun!

As I became more familiar with Figma, I began to notice some similarities between it and other programs like Procreate. As far as my wireframes and prototypes, they can use some fine tuning, but the idea of wireframing is definitely less intimidating now.