A 50-year-old framework that is still relevant to our design exploration
Another design exploration framework to inspire you + case study
I've been discussing exploration for three weeks now, and I still have 3 to 4 drafts I'm eager to share with you. In this post, we're diving into how we can create variants using a framework that has been relevant for over 50 years.
I contend that there is no one-size-fits-all rulebook for exploration. We all have our unique rituals. On a high level, my exploration is always guided by principles I've previously shared with you in the second series on exploration: Reflect, Explore, Iterate. The rest unfolds as a series of serendipitous moments.
However, my perspective shifted when I discovered an old framework called SCAMPER. I realized that what I'd been intuitively doing could be structured less arbitrarily. Although I've never applied SCAMPER prescriptively, the framework has certainly made me more conscious of what I do during the exploration phase.
Meet Bob Eberle, an American author, educator, and authority on creativity.
He developed the SCAMPER method to provide teachers and parents with creative games designed to enhance children's problem-solving abilities. This technique was introduced in his book, 'SCAMPER: Games for Imagination Development.'
SCAMPER is an acronym that stands for Substitute, Combine, Adapt, Modify, Put to another use, Eliminate, and Reverse. Each verb provides a distinct lens through which to spark fresh ideas.
Let's explore each of them with a simple case study from a dog-sitting app.
Case Study: Pet Sitting App
I'm designing a solution for paw parents to receive real-time updates when their dog or cat is in care. They can access updates on their pet's activities, view photos, and chat with the pet sitter.
I'm considering adding a visible and accessible entry point on the home screen that leads to another screen with all this information. This feature would only be displayed during an active pet-sitting session and would disappear once the session concludes. Additionally, the primary reason paw parents are likely to use the app during a session is to monitor their pets, rather than for any other purpose.
Assume this is what I got as the first idea.
Then, I’m going to explore new alternatives with S.C.A.M.P.E.R.
[S]ubstitute
"Substitute" refers to the act of replacing one element with another. The goal is to enhance the overall design or find a more effective solution. Begin by pinpointing replaceable elements, then identify other alternatives that serve the same function but could offer improved outcomes. For example, a checkbox can be substituted with a switch, or vice versa.
Let’s take a look at the pet-sitting app case study:
Initial idea: I use an icon to indicate that an image from the pet sitter is available.
Substitute: I use an image or the most recent image to indicate that an image is available. In this situation, paw parents can simply take a quick glance.
[C]ombine
"Combine" means putting different things together to make something new. Explore ways to mix parts from two different ideas to create something exciting and better.
Search for ways that different pieces can work well together to make better solutions.
When you combine elements, you might modify, substitute, or eliminate existing ones.
As I mentioned earlier, you're not restricted to using just one method for each alternative. One change could lead to another.
[A]dapt
Consider borrowing ideas or solutions from other fields and adapting them to your context. For example, I take inspiration from a ride-hailing app to see the ongoing trip card, which can be pretty similar to the pet-sitting session card.
Let’s take a look at the Lyft app.
Here's what I've adapted from Lyft. Although it's not an exact replica, I've contextualized it for my own use. I drew inspiration from Lyft to make the card always fixed at the bottom and expandable.
I personally love 'adapting' so much that, instead of finding inspiration from direct competitors' apps, I gain fresh ideas from apps in different industries, which these apps solve a particular problem in a similar way to my problem.
[M]odify
Modifying refers to making changes to existing elements to improve them or make them more suitable for a specific purpose.
Initial design: My initial card idea is flat, without any shadow.
Alternative by modifying: Then I made a small but crucial modification: by adding a shadow, the element now appears more elevated and suggests it can be tapped. In this case, I can eliminate the arrow.
It doesn't have to be a major modification. I always believe that a small change can convey a different meaning.
[P]ut to another use
"Put to another use" suggests repurposing an existing element, feature, or idea for a different application than originally intended. This approach often reveals new value or utility that may not have been initially obvious.
Initial idea: Imagine that the initial idea involves using the ongoing session card solely as an entry point to open the ongoing session detail screen.
Put to another use: Then I repurposed it from being an entry point to serving as a quick information card before users explore more details.
[E]liminate
Identify and remove unnecessary elements from the design. Simplify the concept by eliminating features that don't contribute significantly to the overall value or user experience for cleaner, more efficient designs.
Initial idea: The arrow icon provides an affordance that the card is tappable, signaling that more content is available.
Eliminate: Could it work without an arrow? Yes, if elevated card elements and green text consistently signify tappable items, that's sufficient for user understanding.
Always seek opportunities to remove unnecessary details. I constantly remind myself that less is more. However, if eliminating elements makes your design ambiguous, reconsider.
[R]everse
Challenge conventional ideas by flipping or rearranging elements to see if a new perspective or solution emerges. It's about challenging conventional order or orientation to uncover alternative methods or ideas that might be more effective. For instance, if your design primarily involves vertical scrolling, explore how it would appear and operate with horizontal scrolling.
Initial idea: From the beginning, I've always aimed to make the card as compact as possible on the homepage.
Eliminate: Why not reverse that thinking? Make the container much larger so that it can accommodate all the information on the home screen nicely–Since it is the most important thing when a session is ongoing.
There are no strict rules or a specific order for using these actions. You're not obligated to employ all seven methods. In my experience, my process is often unstructured; I frequently blend two or three actions like ‘modifying’, ‘substituting’, and ‘combining.’
I might start by borrowing ideas or solutions, either from the same field or elsewhere, and then ‘adapt’ them to my context.
When presenting your idea, these action verbs can help structure your storytelling. For example:
"I started with this initial idea, encountered [issue], and then SUBSTITUTED [initial idea] with [new idea]."
"I ADAPTED this idea from another app because it closely aligns with our case... [elaborate further]."
"I ELIMINATED [what you've removed] because [the reasons]."
Again, I suggest that this doesn't make us work like robots during exploration. Most of the time, I don't even think about the methods anymore; I just go with the flow. This framework simply gives us a different perspective, indicating that exploration is actually not arbitrary.
Thank you for reading! I hope you find this framework useful. If you enjoyed this post, consider giving it a like. If you have any questions, feel free to reach out to me at hi@thebuddyman.com or in the comment section below.
Get a free UI kit from Nucleus
Hey, I’d like to introduce you free UI Kit I made in Figma that I use for making the examples above.
Download Nucleus Lite – Free version
Looking for more components and patterns? Get Nucleus Plus.
Nucleus Plus is the all-in-one UI Kit to supercharge your design workflow, kick-start your projects faster, and level up your process.
✓ Everything you need, from wireframing to high-fidelity design.
✓ Designed for everyone, from those learning UI design to starting a design system.
✓ Created with developers in mind (production-ready).
Features: 1000+ components & variants, Variables & global styles, Light and dark modes via variables, 700+ unique & premium mobile app screens, and more…
Support Design Buddy
All the content on Design Buddy and in the newsletter is accessible to everyone for free
If you like my post, please consider giving it a ❤️
Share it with your design friends.
Subscribe to the newsletter, if you haven’t.
If you have any comments or feedback, or if you'd like to get in touch, feel free to send me a message. Thank you for subscribing!
Digital handbooks for designers
I'm writing two handbooks to guide designers with valuable insights, helping them thrive in their craft.
Frameworks for Thinking offers various frameworks and tools to help designers and creatives think critically, generate new ideas, and solve complex problems.
Deliberate Practice for Designers provides guides and insights to help you master your craft and become a lifelong learner through deliberate practice.