Say you are building a real estate application. If you sit down and count how many similarities there are between a “commercial property detail page” and "residential property detail page" it innately feels redundant to design every page in high fidelity. Logic would tell you that there must be a way to communicate the concept of page similarities and translate them to a common layout that clients and engineering staff will understand. This can be a daunting task. Enter the archetype.
Many are familiar with the term “archetype” when speaking about user types or personas. However in this case, screen archetypes help us simplify the whole process of counting layouts and templatizing a design. Simply put, screen archetypes are the grouping of screens with common layouts and elements assigned by layout convention. At Dialexa, we typically define archetypes in the “applied design” phase of our creative design process. In our real estate example above, we discover that the only difference between the commercial and residential page is an additional paragraph of copy… thus, archetype!
Archetypes make themselves most of the time. It's just up to us to pay attention to the design and identify them. If you find yourself ordering a size medium shirt at your favorite clothing store over and over again, you’ve found a clothing archetype. Whether you order a t-shirt, polo, or oxford, you buy a size medium with confidence. Likewise design archetypes save us time by allowing a product development team to move forward with confidence.
A note about one potential sticking point: permutations. Say a settings screen has pills at the top to denote what type of setting you are manipulating at that time. Each one of those pills, depending on what control is needed, may require its own archetype. That means your single settings page with a pill driven, sub navigation may actually contain four archetypes on its own. This is an idea that is often lost in the mix when considering screen and archetype counts. Assessing your app’s screens is pivotal to getting a good idea of just how many unique screens exist within the app.
As helpful as archetypes are, I’m not suggesting that you ditch the idea of thinking through all screens and features at some point in the product design process. I am, however, suggesting that the amount of effort needed to think through and design every single wireframed screen in high fidelity, is redundant. After a thorough discovery, detailed wireframing process and inspired conceptual design exercise for your 141 screen app, an applied design deliverable of 20 well appointed and polished screens shouldn’t scare you. In fact, the extra time spent to organize and categorize all screens into archetypes will save your engineering team time and lead to faster project deliveries.
If you liked this article, listen to Dialexa’s Head of Design Research, Sarah Reid, and Design Architect, James Utley, on Custom Made talk using lean design research to get to the ‘the why’ of your product:
Listen to all episodes of Custom Made for insights and perspectives from industry disruptors and technology leaders.
To learn more about how Dialexa converts ideas into functionality, including our approach to the new product development process for software, click the image below.