Week 4: Sketching and wireframing

This week we looked at methods that can be used to start taking user research results and transforming them via initial steps into a tangible UX design. Within our first module GDO710, we looked at rapid ideation and the methods that can achieve that; sketching is a trusted method to get ideas on paper quickly; within this module, though, we put it to work and see how these tools can be used in a UX prototype design process end to end.

  1. Sketching

Designers often rely on sketching as an initial step in their design process, and for a good reason. Sketching and wireframing are potent tools for quickly generating and exploring ideas and identifying potential usability issues early in the design process. “Sketching is a low-fidelity, iterative design method that allows designers to explore and communicate ideas quickly and efficiently.” Goodwin, K. (2009)

When starting a design, sketching can help designers quickly flesh out their ideas and test out different design directions before investing a lot of time and resources into creating more detailed digital designs. By sketching ideas on paper, I could easily experiment with different layout options, test various design elements, and understand how their design might flow. Furthermore, sketching is a πŸ’° cost-effective way to collaborate and communicate with team members and stakeholders. By sharing sketches with others, designers can get feedback and input early on in the design process, which can help to ensure that the final product meets everyone’s needs and expectations.

2. Gamification

Gamification refers to the application of game principles and mechanics to non-game contexts to motivate and engage individuals in problem-solving activities. This technique employs game elements such as point systems, progress bars, badges, leaderboards, and rewards to promote participation and increase users’ motivation to complete tasks. By leveraging the psychological principles of motivation and human behavior, gamification creates a more enjoyable and immersive experience for users, encouraging them to become more self-contributing.

In essence, gamification can be an effective tool for organisations to incentivize participation and foster a sense of competition among users, leading to increased engagement, satisfaction, and loyalty. By incorporating game mechanics into real-world scenarios, individuals can gain a sense of progress and accomplishment, making them more likely to complete tasks and achieve goals. Ultimately, gamification can help businesses achieve their objectives by driving user behaviour and increasing user retention.

“Gamification is using game design elements, such as points, badges, and leaderboards, in non-game contexts to increase user engagement and motivation.” (Goodwin, K 2009)

3. Design Studio

Design studio are the bridge between research and design thus the initial step in visualizing solutions “Design studio is a collaborative design method that brings together cross-functional teams to generate, share, and evaluate ideas.” As a designer, it is important to start ideation asap and continue throughout whenever you have an issue and require input from others.

3.1 The benefits of a design studio

Post, design studio sessions, design teams should have a shared vision and a strong sense of purpose.

Positives of design studio

βœ… It encourages the sharing of ideas across various teams

βœ… It combines alternative perspectives within a team

βœ… It helps combine focus on the brand, technology & user goals

βœ… It allows for rapid, innovative solutions

βœ… Low fi and chill

βœ… It counteracts premature attachment to potential design solutions

βœ… It helps to better visualise complex issues with lower stress thinking

It’s important to remember that design studio is a method; as with any method, there are many ways to do it. Below is a good place to start

πŸ”΄ Set goals: Set out problems

Have we got a persona? Yes we have created Lydia and designed a user persona for her.

Do we have a problem statement? Yes we have filtered it down to the following “β€œThere is a need to clarify what charitable giving activity has been undertaken by a user to plan and budget better in the future, to control future charity giving.”

πŸ”΅ Diverge: generate sketches

lofi drawings

Fast visualisation of ideas

The idea curve

This week we were asked to sketch out no less than six different concepts for our UX prototype, this allowed for multiple ideas to be thrown into the mix and through looking at them on paper, their usability and concept ironed out.

My concepts for the above sketches were as follows:

  1. The solar system giving profiler: This concept allowed users to see the charity giving profiles from the aspect of being a solar system, by doing so it allowed for them to see the giving profile in a different perspective compared to the stars and planets.
  2. Swap an item week: The swap an item week allowed users to choose an item that they would usually buy in a week and instead swap it for a charitable donation; this gave them level of autonomy and yet freedom to give slightly more than they usually would per week.
  3. Sector balancer: this idea allowed users to equalise their giving amounts over all of the sectors they were giving to, allowing for equality of their giving profile.
  4. Pop swap: The pop swap idea allows users to answer questions about the charities they give to and upon seeing this information, swap as they see fair based upon the information that they’ve gathered.
  5. Personal statement matcher: This is an automated feature that matches users’ personal statements, detailing their giving aims, and aligning them to closer-matched charities, that may be out of their scope or perhaps geo-location-specific understanding.
  6. Pick and choose activity planner: this feature offers the ability to pick a charity fundraising event with four basic options; once selected, these can be matched to existing charity events or create a new event that can be shared on social media to drum up other participants.

3.1 Self-criticism

My idea of gamification was somewhat sceptical as I saw it initially as a separate process within UX design, something to perhaps consider after the designs had been created. As shared within this text by Landers, R. N., & Landers, A. K. (2014) “Gamification involves the use of game design elements, such as badges and points, in non-game contexts to motivate and engage users. While the effectiveness of gamification is still being debated, studies have shown that it can be an effective tool for increasing motivation, engagement, and satisfaction. By providing users with clear goals, feedback, and rewards, gamification can be used to encourage desired behaviors and drive user engagement and retention.” I felt like I wanted to avoid it as part of my UX design process previously as it has not proved itself as a tool to go to each and every time something is designed for users, but now seeing that it is an effective tool to increase engagement, I see that I can be merged into the design process rather than added post-design. Allowing the designer to forward think about the uses of users’ journeys and their longevity.

🟒 Critique:

Evaluate each others sketches

Identifying the ways that you can collectively solve the problem

Set some ground rules allow for open discussion, this isn’t really the time for critique

🟑 Iterate:

Each member of the design studio merges several ideas into one mash-up

The team is working toward the same goal, a collective zeitgeist as it were so borrowing of each others ideas is encouraged

🟣 Converge:

A final decision is sometimes made through the use of voting, but whatever method is used, it’s crunch time on an idea to take the lead.

4. Wireframes

When beginning the design process for a website, app, or software, wireframes play a crucial role in the development process. Wireframes serve as a visual representation of the user interface, laying out the basic structure and functionality of the product. They are often created during the initial stages of design, as they allow designers to explore different options and make decisions about the product’s layout, content, and functionality.

It’s important to keep in mind that wireframes are not just for the designer’s benefit. Rather, wireframes serve as a means of communication with engineers and stakeholders. They provide a shared understanding of the product’s purpose, layout, and functionality, enabling everyone involved in the design process to provide feedback and make informed decisions.

Wireframes can vary in fidelity, from low-fidelity sketches to high-fidelity designs. Medium to high-fidelity wireframes are often used to represent what users will see and interact with in the final product. These wireframes include more detail and are typically more polished, providing a clearer picture of what the final product will look like.

In summary, wireframes serve as a critical tool in the design process, allowing designers to communicate their ideas and make informed decisions about the product’s layout, content, and functionality. By creating wireframes, designers can effectively collaborate with engineers and stakeholders to create a shared vision of the final product.

We created a wireframe for the user flow from last week’s assignment. Taking the required user steps and adding them to a block-level wireframe allows designers to see where the interactions shall occur.

πŸ’­ Wireframes are a communication tool

πŸ’­ They allow you to design concepts or intent

πŸ’­ They relay the hierarchy of elements on a page

πŸ’­ They display functionality

πŸ’­ They show interaction options

πŸ’­ Wireframes gather page layout

Block level wireframe for air bnb user flow


Knowing the difference between design tools & their uses is essential; at any stage in the design process, the tasks can snowball, and it’s important to use the right methods to help you reflect and reorganise until the best idea shines through. The tool’s best use cases can be seen as being for reflection of practice and whilst they make no hard and fast rules for how to design they allow to perfect a model which can help you continuously improve “The model of promoting reflection in learning emphasizes the importance of critical reflection in facilitating deep learning and professional development. By engaging in reflective practice, designers can learn from their experiences, identify areas for improvement, and develop strategies to enhance their design processes and outcomes.” Boud, D., Keogh, R., & Walker, D. (2013)


Goodwin, K. (2009). Designing for the Digital Age: How to Create Human-Centered Products and Services. John Wiley & Sons.

Boud, D., Keogh, R., & Walker, D. (2013). Promoting reflection in learning: A model. Routledge.