Wireframing is to UX as lesson plans are to a teacher, you can´t anticipate a good lesson or a good app if you haven´t mapped it out. They also bring design ideas to life as quickly as possible with a simple sketch on paper or a few copied elements from a UI kit.
Our task for this exercise was to get to know the various types of wireframing and become comfortable with the technical process. More than that, it was an exercise in understanding the point of wireframing in the first place which is to allow your clients to visualize your solutions and actually put them into practice.
The Client
Emov is an electric car-sharing program running in Madrid that plans to expand to other cities in Spain and abroad. Users of the service can search for and book cars around the city for short-term use. Here are the hi-fi wireframes of the Emov app:
The Process
The task was to go backward in the process and design the mid-fi wireframes for the Emov app. In doing so, we had to concentrate on what we felt were the most essential elements of the final mock.
I decided that the best way to make note of what was most important to convey to the client in a prototype was to first go low-fi. So I sketched a paper prototype of the Emov app – I went full reserve engineering.
I found this really useful since a paper prototype is only meant to showcase the barebones of an app. It made me think about the designer´s vision for the app and what they thought was key to demonstrate to the client.
So with my paper prototype in hand, I opened a new artboard in Sketch and got started on my mid-fi wireframes. I knew exactly how to layout each screen and what content to place in them.
My mid-fi wireframes include a lot of icons in the hi-fi mock. I felt they were important to show to a client or a user how the key visual elements would be displayed. A lot of these icons are integral to the user being able to use the app correctly. As Donald Norman talks about in “The Design of Everyday Things”, it’s essential to have “affordances” in your design in order to guide the user to the intended interaction.
I really enjoyed spending time looking for icons. I think it would be really useful to make my own toolkit of icons so that I can save some time on future projects. I’m sure there are loads of icon toolkits but I think each designer has their preferences so having those in a folder that you can easily access would be incredibly handy.
I also didn’t yet have access to our precourse Google Docs file so I ended up creating the mid-fi wireframes without the Ironhack toolkit. I think I managed well. As you can see, I simply repeated the location icon to give the suggestion of a map on screens 2 and 3 — this was a challenge in using what you have. I think that designers have to be resourceful at times, especially when dealing with constraints of time and resources.
Next Step
Wireframing is just one piece in the puzzle of constructing a useable app. Beyond the visuals, an app must function well — we are, after all, learning to design experiences.
