IronHack Pre-work 2-Simoes

Challenge 2 : Wireframing

As part of a case study for the IronHack-UX/UI Design Bootcamp, I’ll be presenting my work via Figma.

My task is to create a wireframe version of the user flow of the application, Vinted, based on screenshots of that application.
My final render should be a simple 5 screen interactive prototype.

// Why Vinted?

I chose the Vinted app because it’s an app I use regularly. I find it simple and intuitive and wanted to understand how they created their skeleton to simplify it.

Basically this application could be very complex.

Indeed, it offers all types of product sharing: Women, Men, Kids and Home
Under several subcategories.
You can post your product and sell it anywhere in the world and you can buy and have it delivered worldwide.
It’s an application that I think is modern, fun and in the air of time. Moreover, its graphic charter is recognizable.
Everything in this application makes it interesting.
Let’s see what it looks like in the wireframes

…

// Analysis//

If we take a closer look at the application, it has various interface elements

• Interface elements

-Input controls:
Buttons, Radio buttons, Drop down lists, Drop down buttons, List boxes,Text fields.

-Navigation components:
Islands, Image carousel, Search field, Pagination, Chips.

-Information components:
Message boxes, Notifications.

• Colors

Then I tried to analyze their message through the color. The colors used are mainly white and blue green.
The color that stands out is a tint of green, tertiary color.
The message he wants to communicate is Natural and Reassuring. The cold colors inspire calmness and are relaxing.

Here is their graphic charter :

// Wireframes //

For this exercise I chose to work with the five possibilities of pages proposed on the home page of the application.
Each page is linked to an understandable and efficient logo.

These pages are for me the skeleton and the base of Vinted. At a glance you can see and understand how to use this application.

These different pages are mainly composed of visuals: icons and photos. This makes the application intuitive and fluid for users.

What seems complicated becomes very fun and easy.
This is what makes their STRENGTH and their difference in front of their competitor.

// What I learned //

Figma is a very complete software, rather easy to use and it is very interesting.
I really enjoyed discovering it through exercises. I don’t have Sketch at my disposal right now but I’m looking forward to testing it and learning more.

My first mistake is that I didn’t have enough time. I spent a lot of time on the first challenge and I didn’t have enough time for the next ones. And practicing on a new software requires time and patience to make a quality work.

I encountered some difficulties that I could have solved if I had been better organized.
-I couldn’t use the IronHack library and I couldn’t incorporate the logos I wanted.
-I wanted to link to a button and the next page but in the “Prototypes” tab of Figma other data was given to me. Very different from the example in the video.
For my part, I think I have trouble downloading some things.

However I will continue to practice and try my best to rectify my mistakes.