UX Challenge: Wireframing

Amelie Nicklas
Oct 6 · 3 min read

Today the challenge was to turn the time back and imagine what an app could have looked like when it was first sketched! For this exercise I chose “Kleiderkreisel”, which is a German platform where people can sell their clothes as second hand products. And YES, there is an English version of “Kleiderkreisel”! It’s called “Vinted” :)

I chose “Kleiderkreisel”, because I regularly use it to upload my clothes and purchase second-hand items. Over and over again it convinces me with it’s simple and time-less design/layout. As I am not quite familiar with all the programs I am using from now on (as Sketch, Invision etc.) I welcomed the Kleiderkreisel app and it’s simplicity, so there is no distraction this time for me during the process ;)

Here are the paper wireframes of the five screenshots of the action selling clothes — uploading pictures — save pictures:

Quick info on the elements of the screens: the app itself consists of very few elements. Screen 1(Mein Feed) consists of a check box (filter) and icons with underlying actions (news, search, sell, messages, profile). The pictures are also icons. Screen 2, as well as screen 4 consist of text fields, radio buttons (behind the various buttons “Kategorie”, “Marke”, “Zustand”) and a “pop up” list behind “Fotos hochladen”. Screen 3 follows a checkbox principle, however the choice is limited to five pictures max.

After experimenting with InVision and getting to know the program better, I managed to create the following prototype of the action mentioned above (selling clothes — uploading pictures — save pictures). Quick instruction on how to navigate through the prototype properly:

Screen 1: click the “plus” button / “Verkaufen” (To sell)
Screen 2: click “Fotos hochladen” (upload pictures)
Screen 3: click “Fotos aus Album wählen” (chose pictures from gallery)
Screen 4: click “Speichern” (save)
Screen 5: to start again, click “Abbrechen” (Exit)

Note: You can click “Abbrechen” on any screen to get back to an earlier screen. If you press “Abbrechen” on screen 5 you’ll be linked to Screen 1 again.

Learnings from this challenge: It’s way easier to concentrate on the content when colors, typography and the like do NOT matter. I really enjoyed this challenge (!). Especially creating prototypes is an amazing way to see your own results. Thank you Ironhack Berlin for offering us the Wireframe Kit. It was really helpful :)

Amelie Nicklas

Written by

Newbie to UX/UI Design, studying @Ironhack. Thoughts surrounding lifestyle, food and culture. Currently exploring #holisticnutrition and #TCM.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade