Ironhack Challenge 2: Wireframing the NS app
All aboard! For the second challenge I decided to create wireframes from the biggest railway operator from the Netherlands; NS. I like using the app because it is very fast and the information regarding delays or disruptions is up-to-date.
The user flow: my commute
When I use the app it is mostly my daily commute between home and work. I usually check the train times on the app so that I can plan my trip. When I am in a rush or not in the mood for a walk I also check if I can rent an NS bicycle.
Wireframing the NS app
The wireframe needed to be minimalistic and in black and white. Luckily, I had to mimick the design of the app in Sketch for a previous exercise so I already had a good set of screens. In addition, I found this neat trick in Sketch where you could find and replace a color. This and the wireframing kit provided by Ironhack really sped up the process.
The user flow and images are from my commute between home (Gouda) and an event at work (Amersfoort) while the app still remembered my previous location (Amsterdam). The images on the left are screenshots from my mobile phone.
UI elements used in the NS App
Overall, the NS app uses lots of UI elements. I encountered:
- dropdown lists
- buttons (primary, outlined or disabled ones)
- toggles
- text fields
- date and time pickers
- search fields
- paginations between travel options
- tool tips
- notifications
- modal windows
All though the list is long, I did not experience too much going on in the app.
Final thoughts
All in all, I really liked this assignment as I got to know Sketch a bit better. Not only its design features but also how you work efficiently (i.e. find and replace colors). As we all know, time is our most valuable asset so I really cherish those tricks.
In the spirit of sharing caring, do you have any tips or tricks on how to work smarter and faster in Sketch?
