Tips to Utilize Wireframes to Tell an Effective Product Story
Summary
Key Insights
-
•
Staying in low-fidelity wireframes during early concept phases enables quicker iteration and focused problem-solving.
-
•
Collaborative sketching sessions with multiple rounds build trust and generate stronger, shared concepts.
-
•
Using thick markers for sketching helps keep ideas high-level and prevents premature focus on details.
-
•
Wireframes should be crafted digitally to look polished and presentable, even if low fidelity.
-
•
Leveraging existing UI patterns or design system components maintains consistency and speeds up wireframe creation.
-
•
Presenting wireframes within the full context of the product and user flow aids stakeholder understanding.
-
•
Leaving ambiguous areas in wireframes as question marks encourages constructive feedback and discussions.
-
•
Storytelling in presentations, including personas, problem statements, and business impact, improves stakeholder buy-in.
-
•
Content design should be integrated early during wireframe development, pairing writers with designers.
-
•
Low-fidelity wireframes can and should be created by non-designers with the right tools and team collaboration.
Notable Quotes
"Staying in low fidelity throughout this early concept development phase allows for really strict focus on the problem slash solution space."
"Wire frames plus a little bit of storytelling is awesome."
"There’s nothing aesthetic to grab onto, so you’re not gonna be focusing on type styles, fonts, colors, photos."
"I want your sketching to be really high level—I want you to explore concepts, not refine content."
"Low fidelity does not mean low quality."
"If you don’t know what should go in a specific area, it is really powerful to leave it as a question mark."
"Tell a story of design: start with the background, introduce the users, demonstrate how it will work."
"Be very clear on exactly what type of feedback you’re looking for because you’re gonna get a lot better feedback."
"I find the existing patterns in my product and use those because it’s easier to bring things back in."
"Non-designers can build wireframes really quickly using easy drag-and-drop components from a design system."
Or choose a question:
More Videos
"Always communicate next steps, timelines, and delays honestly with candidates; they will appreciate it and stay engaged."
Corey LongHiring in DesignOps: A Critical Study on How to Hire and Get Hired
September 23, 2024
"I see designers fall back on being the defender of the user like a union boss, but that’s not your only responsibility."
Gretchen AndersonScaling the Human Center
June 8, 2017
"Boldness is only possible and enabled by generosity. Generosity means empathy, collaboration, and transparency."
Lori Muszynski Peter MerholzKeeping Design Weird
October 2, 2023
"Alternative navigation users might use voice commands, head mice, or grid coordinates to access elements."
Sam ProulxSUS: A System Unusable for Twenty Percent of the Population
June 9, 2021
"Qualitative researchers can help design better human-in-the-loop evaluation guidelines that consider social context."
Prayag Narula Rida QadriHCI 2.0: Humanity Deserves the Attention that UX Research has to Offer
March 28, 2023
"Not everything that is faced can be changed, but nothing can be changed until it is faced."
Deanna SmithLeading Change with Confidence: Strategies for Optimizing Your Process
September 23, 2024
"You need a thoughtful operation managing your democratization program to keep it on track and adaptable."
Lija HoganDoing more with more: Lessons from the Front Lines of Democratization
March 9, 2022
"No company has a dominant advantage in AR/VR accessibility yet, but that will change in the coming years."
Sam ProulxTo Boldly Go: The New Frontiers of Accessibility
March 11, 2022
"You can also reach us quickly by going to help-desk-customer-service for any tech or support issues."
Bria AlexanderOpening Remarks
October 3, 2023
