Sketching and Wireframing

Sketching

Sketching is perhaps the most efficient way to communicate a vision or meaning. It allows us to experiment with multiple ideas, approaches and iterations very quickly. To kick off a sketching session, it helps to set an aim and decide on what story you should tell and then set an allocated time frame for sketching, to help you stay focused and on target (Babich, 2016).

Buxton (2007) argues that the act of seeing, reading and interpreting a sketch we have made using our current knowledge creates new knowledge. Sketching is an aid to thought. In a similar vein, it is recommended to put sketches you draw up on the wall because seeing them as a whole and not as isolated sketches stimulates your thinking and helps you see the bigger picture (Babich, 2016).

Below is Dave Gray’s version of the visual alphabet - building blocks for conveying ideas and concepts.

The visual alphabet
“To be useful, any language requires some set of shared norms and rules. As the ideas to be explored and communicated become more complex this becomes even more important.” - Dave Gray

Design Studio

A design studio is a rapid iterative process that involves participants engaging in divergent thinking and sketching multiple rough designs, coming together and discussing those sketches and then converging the ideas generated into a single design concept with which to move forward that effectively solves the objectives set out in the beginning (Ungar & White, 2008).

Design studio sessions are the bridge between the research and the design phase of the design thinking process and are the first time you begin to visualise your solutions. They give us a way to engage stakeholders, which gives them the opportunity to share their ideas early on in the project. They also help us generate more ideas, incorporate the specific expert knowledge that each individual has, create a solution based on consensus and establish a sense of ownership. People love to participate in the process of coming up with and designing ideas, so inviting key stakeholders is truly a bonding moment for the team (Spool, 2012). Greever (2020) states that stakeholders hold valuable domain knowledge and key information that we need in order to be successful.

The critique phase of a design studio is absolutely essential, because it allows participants to avoid personal preference and actively encourages them to analyse ideas based on the goals outlined at the beginning of the session, scenarios and personas.

Forcing people to generate multiple ideas helps us avoid the trap of feeling attached to our first idea (Spool, 2012).

I decided to run my own design studio for my project. I looked at my research so far and determined that the problem area I wanted to focus on for this activity was giving users the ability to track workouts, as this was a key goal identified in the research. After setting my design studio goal, I began sketching solutions, limiting myself to 1 minute per solution sketch.

1 minute sketches from my design studio
Whiteboard design iterations based on two critique sessions

Wireframing

Using the ideas that emerged in the design studio and referring back to the user flow I made last week, I began wireframing the screens needed to facilitate the activity tracking flow. Wireframes are the bridge between low-fidelity sketches and the first interactive prototypes which help us make our ideas tangible (Babich, 2020).

Wireframes for the 'track an activity' flow

I also found that although it took longer than using lorem ipsum, writing draft content for my wireframes early on resulted in more informed design decisions, as did writing annotations to describe the logic behind some interactions, like overlays that the screens were not communicating fully (Suprunenko, 2020).

Digital wireframes for activity tracking flow

References

Babich, N. (2016) “Everything You Need to Know About UX Sketching,” Medium. Available at: https://uxplanet.org/everything-you-need-to-know-about-ux-sketching-4ab8e66902e (Accessed: February 16, 2022).

Babich, N. (2020) “Common Wireframing Issues to Avoid,” Adobe. Available at: https://xd.adobe.com/ideas/process/wireframing/common-wireframing-issues-to-avoid/ (Accessed: February 19, 2022).

Connor, A. (2021) “Design Studio: A Method for Concepting, Critique, and Iteration.” Available at: https://www.slideshare.net/adamconnor/design-studio-a-method-for-concepting-critique-and-iteration.

Gray, D. (2017) “Below is Dave Gray’s version of the visual alphabet - building blocks for conveying ideas and concepts,” Medium. Available at: https://medium.com/the-xplane-collection/in-defense-of-the-visual-alphabet-a8dcca7cf151 (Accessed: February 17, 2022).

Greever, T. (2020) Articulating Design Decisions. CA 95472: O’Reilly.

Spool, J. (2012) “Design Studio Workshop: Adding Up the Benefits,” Center Centre. Available at: https://articles.uie.com/design_studio_workshop/ (Accessed: February 17, 2022).

Suprunenko, A. (2020) “How To Succeed In Wireframe Design,” Smashing Magazine. Available at: https://www.smashingmagazine.com/2020/04/wireframe-design-success/ (Accessed: Spring 2, 2022).

Ungar, J. and White, J. (2008) “Agile user centered design: enter the design studio - a case study,” Extended Abstracts on Human Factors in Computing Systems, pp. 2167–2178. Available at: https://dl.acm.org/doi/10.1145/1358628.1358650

© 2022 Camilla. All Rights Reserved.

Designed in Figma,
knitted with Webflow :)