Ironhack Challenge 2 : Wireframing

For my second challenge, the goal was to create our first wireframing and to focus on the interaction design and user flow.

Wireframing is an essential step in translating an idea into reality. The purpose is to create the basic skeleton for each screen of our design, before branding, images and colors get involved. Visual clarity is of the utmost importance! The wireframe should be monochrome (without shades of grey or color), so that we can concentrate on the structure and not how it looks.

For this challenge, I chose the app “Karma”, a Swedish food-waste startup that connects restaurants, cafes and grocery stores with users eager to purchase unsold at a lower price.

App Karma (Anne Moreno drawing)

I created a wireframe version of a common user flow on this app : ordering food. First, I did a low-fidelity layout of my user flow, using pencil and paper. I sketched the whole structure and identified the different UI components. Then, I choose to use Sketch to design a mid-fidelity layout.

Wireframing on Sketch
Screenshots from the app (iOs)

And then, I made a simple prototype on Invision. Check this out!

Take-aways

I really enjoyed doing this “reverse”/ kind of “Back to the future” challenge! But creating monochrome wireframes is not as easy as it looks, it is hard to find the right balance to communicate ideas successfully.

“Form follows function .“

This quote from the architect Louis Sullivan sums it all up! This step is essential in UX design process.

If you create, at first, a strong basis, the whole design will be consistent and relevant. Just keep in mind these two principles to stay on the right track :

  1. Maintain clarity
  2. Simplicity is key

Thanks for reading!

--

--

--

UX/UI designer · Architect

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Plan a Room Makeover Like a Pro

Visual Design Process Blog: A4 Design Systems pt.2

The problems with minimal tab designs

Verdana | Type Set

How might we tracking calories from our food deliverer? Here is an idea!

Thinking About Thinking Too Much

Content Audit Exercise Summary — Da Vinci Art Alliance

Curation of Serene Living Space — Interview with Zekai Zhang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Anne Moreno

Anne Moreno

UX/UI designer · Architect

More from Medium

Ironhack’s Prework Challenge 2: Wireframing

Ironhack’s Prework:Madalena_Challenge1

Nielsen Norman Group, Design Thinking 101

Ironhack’s Prework — Challenge 2: Shazam

Ironhack’s prework: Mariana De La Garza- Challenge 2: Wireframing Vivino app