Week 4: Sketching and Wireframing

My focus now is to map out the experience I’m creating by way of user flows, sketches and wireframes. Having iterated on my initial idea, my app is now geared towards planning for and navigating long-distance travel. I’m exploring elements such as route planning, packing lists, mobile coverage, timeline views, ticket booking and document storage.

Design Studio

Following a brainstorming session, I listed my main ideas and began sketching rough outlines of what my app would look like. This felt quite liberating and allowed me to explore the inner workings of the processes and features my users would soon use. I experienced a creativity spike while conducting my own Design Studio, where I started with low-fidelity sketches that quickly became more detailed as I went on. I sometimes struggle with writer’s block and found this method got my brain into gear and ready to ideate.

User Flows

The user flow diagrams took me quite a while due to all the various steps and possible routes involved. I may have gone slightly overboard with mapping every part of the app, but it helped me grasp the direction I was taking and has indicated the scope to which I’ll try and stick to. When creating my medium-fidelity wireframes, the user flow helped me know what each screen could include and where it would lead to. I’d initially thought I should wireframe every possibility (as per my user flow), however, after consulting with my peers, I thought it best to wireframe only the main features of the app.

My Evolving User Flow Diagram on Miro

Gamification

Gamification was also featured in this week’s content, covering best practices and how we might implement these in our designs. I’ve heard of gamification before and was pleasantly surprised to learn that, in fact, it’s widely used across systems and platforms seen in daily life. I’ve frequently encountered it in workplace environments as a means of increasing motivation and commitment to a cause (Kiryakova et al. 2014). It became clear that gamification succeeds when it’s discreet and users don’t even notice it. Taking this into consideration, I plan on gamifying the user’s carbon footprint and amount of miles travelled using the app.

Wireframes

Below are my initial paper sketches and wireframes created using Balsamiq:

Wireframes in Balsamiq

---

References

GATEWOOD, Hal. 2018. Wireframing. Available at: https://unsplash.com/photos/tZc3vjPCk-Q [accessed 26 Jan 2022].

KIRYAKOVA, Gabriela, Nadezhda ANGELOVA and Lina YORDANOVA. 2014. ‘GAMIFICATION IN EDUCATION’. 9th International Balkan Education and Science Conference, Edirne, Turkey, 16 October 2014.