Wireframing NS. Less is more, the art of leaving out.

Jolanda Dekker
Nov 6 · 4 min read

Wireframes are an essential step in translating an idea for a digital product into reality. Wireframes are a simple, visual representation of the layout & flow of the app or website. They are used to indicate the page layout, navigation & content.
The challenge is to use just enough detail for them to be understood by someone else without being distracted from the goal due to design elements like logo’s, photo’s, various fonts etc. The result, a clear tool to discuss your solutions & ideas with your users and stakeholders.

Even a bicycle is, in the end, just made from cirkels, triangles & lines… Simple!

So leaving out as much as possible without losing the context; a black & white skeleton or blueprint of your interface. This is a challenge for me, having a keen eye for details & being very familiair with the expression “the devil is in the details”. On the other hand, as a black & white Photographer, I know all too well the power of leaving out. Let’s see who wins…

Wireframing NS. For this case, I’m reverse engineering the “Add your favourite location” feature in the public transport journey planner App of the Dutch Railways, the NS. I chose this feature as I love things that make my life easier, smarter or more fun. Let’s see how I it did this:

The first step was to figure out how the various screens are laid out & how they work together. And how to simplify this without losing context. I started with a sketch by hand, a low-fidelity wireframe:

Hand drawn NS wireframes: Add your favorite

Observations: The result is probably a little bit more detailed than necessary. Adding text makes more ‘crowded’, but helps to better understand the meaning of the various fields. I chose to include some well known icons, as a picture still says more than a 1.000 words. It is also fun to notice that by going through such a process, you get very intimate with all the details of the app. I didn’t know there were so many additional possibilities! A way to really get to know the ins&outs of this App ;-)

Sketch. After sketching by hand, it was time to built it in a more ‘professional’ way. I used Sketch, a Design toolkit for wireframes prototypes and more. With endless options and toolkits at your disposal when working with a Design tool, you have to keep asking yourself, what is essential & what can be left out. So, stick to what really helps to visualise the structure clearly, the essentials that are needed to show the basic principle, and how it can be made comprehensible for the ones you’re designing for.

NS Wireframes: Add your favourites (made in Sketch)

Observations: There are only a few basic UI elements needed this feature ‘Add your favourite’; e.g. buttons to select what you want to do (Add favourite, Search, Cancel, Save & More), icons (only if universally known), search field to search for the address you’re looking for, and a message box (a ‘list’ you have to choose from).

The flow is pretty straightforward & understandable. Select ‘add a favourite’. Search the address. Pick the address you’re looking for from the search results. And add the address to your favourites. You also have the possibility to add an icon or image to the address for better recognisability.

However, not alway logical to me, is the use of the ‘More’ button (in this case 3 dots). Having found the address you’re looking for, you use this button at the right side of the address to add the address to your favourites. My natural reaction would be to select the right address from the search result & continue from there. This however brings you back to the start page of the NS journey planner with no result at all. It is a well known symbol, but on this spot it doesn’t feel natural and keeps doing so even after many tries.

Prototyping. Last but not least, time to let the magic happen; Prototyping. Sketch offers the possibility to Prototype your wireframe. This makes your wireframes act like you’re ‘really using’ the feature. A nice way to test if everything works the way you want it to work, and again a good conversation piece & testing tool for your users and stakeholders.
All kind of interactions & animations are possible. For this case I kept them pretty basic, just to walk trough the steps. Which is actually also the fact for the NS app itself. This is how it looks like:

NS Prototype: Add your favourite (made in Sketch)

Here the link to see it in full display.

Take aways: Back to only the basics is a challenge, but it really helps me to get the design consistent, and finding designing errors I made in a high fidelity mock-up. Plus it really makes me focus on what is needed and what is ballast.

So, the Dutch Railways NS is the real artist when it comes to leaving things out without losing track of the main (train) line. If we, as users, still understand the final result, remains to be seen ;-)

Jolanda Dekker

Written by

Aspiring SD/UX Designer. Passion for creating services people love to use by ensuring they’re easy, smart & fun. Next stop: Ironhack UX/UI Design Bootcamp.

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