Wireframing

IRONHACK Challenge 2– Prototyping & User flow

For my second challenge at Ironhack, I had to wireframe the flow of an app of my preference. I chose The Patter app once I had already mocked its screens in the task before, and it was already an app I was familiar with. I began selecting the flow I wanted to prototype: Pick a friend and run a friendship bond, keeping in mind that my goal was to create a simple six screens’ interactive prototype.

I took screenshots of the flow and imported them to Figma. After that, I did a quick low fidelity sketch of the flow, trying to understand which UI elements and texts I would keep in my wireframe, trying to make it in a way to be understood by someone else.

Original Flow:

I built my wireframe prototype on Figma using my sketches as a reference and trying to simplify its design, organizing assets, grouping and renaming my layers, creating new elements, and using the Ironhack wireframe kit. I found it an excellent opportunity to learn more about Figma and its features. My Prototype has a progress indicator screen that I was glad to reproduce using the prototype feature Interaction and then selecting Delay.

UI elements inventory:

Input controls:

• Buttons

Navigation components:

• Search Fields
• Icons
• Text carrousel

Information components:

• Message box

Containers:

• Accordion

My Task analysis:

Picking a friend and run a Friendship bond:

1. In the home screen, select Friend on the navigation bar
2. In the Friend, screen select a friend
3. In the friend, profile click on the button bond
4. Select what kind of bond I wanted to run
5. Progress indicator
6. Bonds result