Ironhack’s Prework: Challenge 2 Wireframing
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.
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
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.