Purposeful Page Architecture - Rebecca Hugo
•
0 likes•783 views
This document describes how to create a purposeful organism library for wireframing websites. It recommends following atomic design principles and tagging organisms with their purpose, such as to promote, inform, reassure, or inspire. The document provides examples of organisms for each purpose category and outlines a three step process for creating an organism library: 1) establish the needed organisms, 2) create a library with those organisms, and 3) use those organisms. It also recommends assigning each page a primary purpose, direction in the user journey, and primary action using the PIRI and PDA acronyms to ensure pages are not superfluous. The overall goal is to create reusable and purposeful components to streamline the wireframing
Recommended
Recommended
More Related Content
Similar to Purposeful Page Architecture - Rebecca Hugo
Similar to Purposeful Page Architecture - Rebecca Hugo (20)
More from uxbri
More from uxbri (20)
Recently uploaded
Recently uploaded (14)
Purposeful Page Architecture - Rebecca Hugo
- 1. G ETTING WEBPAG ES TO BE PURPOSEFUL , NOT SUPERFLUOUS O R HOW I C RE ATE D A WIREFRAME C HEATSHEET PURPOSEFUL PAGE ARCHITECTURE @GC_PEOPLE@B ECSTEX
- 2. Hello I like to be efficient I like to be accurate Wireframes make me nervous @BECSTEX
- 3. Know your user: Who are you talking to? What do they want? What do you want from them? How do you get the two to match up? Firstthingsfirst @BECSTEX
- 5. Where do you start? Should you use a template? Is there a quick way to do this? Should it just be on paper? Does every page need a hero? How many ways can you stack blocks? What if they look boring? Should the client sign these off? Where do you start? So …Wireframes? @BECSTEX
- 6. Behold Atomic Design Organism Libraries Purposeful Architecture @BECSTEX
- 12. We had spoken to our users and completed our initial testing - we knew what the users were looking for. We found atomic design and created some organisms. What comes next? Andnow? @BECSTEX
- 13. Establish the organisms you’ll need Create a library with those organisms Use those organisms 01 02 03 HOWTOCREATEANORGANISMLIBRARY @BECSTEX
- 14. Things I know to be true Every site is trying to sell you something The market is saturated - you need to do more than ‘sell’ People don’t buy what you do, they buy why you do it @BECSTEX
- 15. Establish the organisms you’ll need Create a library with those organisms Use those organisms 01 02 03 HOWTOCREATEABETTERORGANISMLIBRARY Tag the organism with a purpose NEW @BECSTEX
- 17. Promote Sell yourself Sell your service Sell your ability PIRI @BECSTEX
- 19. Reassure Social proof Case studies Third-party reports White papers Company promises PIRI @BECSTEX
- 20. Inspire Do more Think more Read more Discover more PIRI @BECSTEX
- 21. @BECSTEX
- 22. A page may have components that achieve more than one of these elements, but it is important to ensure that every page is doing at least one of these things otherwise it is superfluous. @BECSTEX
- 23. @BECSTEX Organisms InAction Intent:Showusers whichcompaniesuse ourproduct. Organism:Imagelist withoptional supportingtext. Purpose:Reassureand inform. Best case scenario Expected scenario Minimum scenario
- 25. Purpose Establish the primary purpose - remember Promote Inform Reassure Inspire PDA @BECSTEX
- 26. Direction Funnel in - where does the page appear in the journey? Funnel off - where does this page open doors to? Funnel out - where do they go when they’re done? PDA @BECSTEX
- 28. Working independently? Working to tight time frames? Working remotely? This could help. The Organism Library enables you to create wireframes that can be quickly shared amongst the team, with your clients, or stakeholders. PIRI and PDA allows you to check that the components are purposeful - and check what those purposes are - as well as clarifying entry and exits of the page, and what actions these carry. Whatdoes thisallmean? @BECSTEX