This class was taught as part of UX Sunday, hosted by HourSchool.com: http://hourschool.com/courses/advanced-ux-wireframing-and-detailed-design-sf-in-san-francisco-ca
The class covered how wireframing fits into the larger design process, and what tools can be used to create wireframes. We also explored the use of wireframing as a sketching mechanism and thinking tool for user interface and UX design.
A prioritized user story backlog helps to understand what to do next, but is a difficult tool for understanding what your whole system is intended to do. A user story map arranges user stories into a useful model to help understand the functionality of the system, identify holes and omissions in your backlog, and effectively plan holistic releases that delivery value to users and business with each release.
Social In(ex)clusion, Dis/ability and TechnologyAlan Foley
Presentation by Alan Foley and Beth Ferri from Syracuse University on the paradoxes of assistive technology - the ways technology can exclude.
Presented at the 11th Annual Second City Disability Studies in Education Conference - May 12-15, 2011.
A prioritized user story backlog helps to understand what to do next, but is a difficult tool for understanding what your whole system is intended to do. A user story map arranges user stories into a useful model to help understand the functionality of the system, identify holes and omissions in your backlog, and effectively plan holistic releases that delivery value to users and business with each release.
Social In(ex)clusion, Dis/ability and TechnologyAlan Foley
Presentation by Alan Foley and Beth Ferri from Syracuse University on the paradoxes of assistive technology - the ways technology can exclude.
Presented at the 11th Annual Second City Disability Studies in Education Conference - May 12-15, 2011.
Creating new experiences of storytelling while using the narratives of the Panchatantra and understanding the structure of story & art of storytelling.
I am an NYC-based UX/UI Designer, passionate about technology and storytelling through different sensory experiences. My daily muse comes from the nuances of human interactions, designing and re-designing, and my relentless curiosity of a 5-year-old.
The Triforce of UX: Empathy, Curiosity, HumilityBrandon Ward
UX Consultants are great—like design ninjas dropping in to fix all the things. But what happens when you want to take the relationship to the next level and bring design in-house? How can you tell the good candidates from the bad, and sift through the good to find the great? How do you avoid someone who looks good on paper, but won’t deliver the results you need? In this talk I’ll share the 3 core qualities I seek in every designer I hire, and how to discover if your candidates have them.
2015 was an exciting year for HubSpot. In addition to launching several new products, the HubSpot marketing platform expanded to five new languages and got a major facelift designed to make marketer's daily lives easier. For businesses not ready to buy a robust marketing platform, we also introduced Leadin, a freemium app that allows you to capture leads and get lead intelligence on any website. You’ll find all of this and more in our 2015 HubSpot INBOUND Keynote Address.
Slides from 2nd meeting of UI/UX User Group in Dominican Republic. These slides contain:
- UX in Layouts in the last 5 years
- Long Scrolling Site Basics
- Layout trends for 2014
- Wireframing 101
Creating new experiences of storytelling while using the narratives of the Panchatantra and understanding the structure of story & art of storytelling.
I am an NYC-based UX/UI Designer, passionate about technology and storytelling through different sensory experiences. My daily muse comes from the nuances of human interactions, designing and re-designing, and my relentless curiosity of a 5-year-old.
The Triforce of UX: Empathy, Curiosity, HumilityBrandon Ward
UX Consultants are great—like design ninjas dropping in to fix all the things. But what happens when you want to take the relationship to the next level and bring design in-house? How can you tell the good candidates from the bad, and sift through the good to find the great? How do you avoid someone who looks good on paper, but won’t deliver the results you need? In this talk I’ll share the 3 core qualities I seek in every designer I hire, and how to discover if your candidates have them.
2015 was an exciting year for HubSpot. In addition to launching several new products, the HubSpot marketing platform expanded to five new languages and got a major facelift designed to make marketer's daily lives easier. For businesses not ready to buy a robust marketing platform, we also introduced Leadin, a freemium app that allows you to capture leads and get lead intelligence on any website. You’ll find all of this and more in our 2015 HubSpot INBOUND Keynote Address.
Slides from 2nd meeting of UI/UX User Group in Dominican Republic. These slides contain:
- UX in Layouts in the last 5 years
- Long Scrolling Site Basics
- Layout trends for 2014
- Wireframing 101
Here are the slides from the UX Portfolio Workshop I did at exploreUX on 4/22/14. The workshop was part presentation and part activities to get participants in the right mindset for creating their UX portfolios.
The slides go into the specifics on:
• What to put in your UX portfolio
• How to figure out what (of your stuff) to include
• How to add what you’re missing
• What tools and resources to use in building it
• What’s a good (and bad) portfolio
The Lifestyle 21 - Mobile UX design & wireframe concept for HUBBACarzanova
Nathasit Wajasittisilp - CMO of The Lifestyle 21 Co., Ltd.
This work shop has been specifically provided for @Hubba - Coworking space in Thailand during Jelly Week of 2013.
Material is about concept of mobile UX design and wireframe
which create impact for stakeholders even more than you can think of.
5 Pieces of SEO Advice You Should Definitely IgnoreHubSpot
Need SEO advice? Don't know where to start? This quickfire SlidesShare will bring you through 5 important pieces of SEO advice you should ignore (as well as why!).
If you need more SEO advice, tune into Marketing Grader Live with Kieran Flanagan and Rand Fishkin on October 21st: http://hubs.ly/H01hJ-T0
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.Marc-Oliver Gern
UX INTERVIEWS is a series of short interview sessions – with senior UX practitioners and Service Design Thinkers. Please let me know if you are free to provide your input, too. I will send you a quick survey with new questions.
Gibt es in Scrum ein systematisches Vorgehen, die User Experience (UX) des Produktes sicherzustellen? Eine Möglichkeit ist, das iterative Vorgehen des User Centered Designs (UCD) mit Scrum zu verschmelzen. UCD bezieht den eigentlichen Nutzer der Anwendung von Beginn an in den Entwicklungs- und Gestaltungsprozess ein. Da sowohl Scrum als auch UCD in Iterationen ablaufen, liegt der Versuch nahe, Symbiosen zu erzeugen. Die Session zeigt Wege, diese zu finden, und geht auf damit zusammenhängende Herausforderungen ein.
When you know something is coming up, why wait to prepare? There are certain appointments that all of us have in our future so "dig your well before you're thirsty!"
Targeted investment in livestock research helps achieve the Sustainable Devel...ILRI
Poster prepared by Wellington Ekaya, Berhanu Gebremedhin, Olivier Hanotte, Henry Kiara, Lutz Merbold, Sibonisio Moyo, Hung Nguyen, V. Padmakumar, Roger Pelle, Tom Randolph, James Stapleton and Azage Tegegne, June 2018.
What the !@#$ is UX? A fun and concise introductionSean Buch
An entertaining intro to the field of UX, that I presented at Entelect Dev 2018. This talk was centered around the practical applications of UX principles such as Gestalt and heuristics to enable non-UX professionals, mainly software engineers to use learnings from UX in their day to day roles.
Prototyping and iteration aren't new ideas. But when deadlines are tight, and you're on the hook to deliver a cool new technology or user experience, what do you do? Over and over, I see people spending too much time making polishing, and too little time exploring.
What use are experiments for industry?
1. Experiments are a powerful tool for evaluating technologies. Experiments provide an objective comparison rather than subjective opinions
2. The results of experiments should allow industry to: Base decisions on objective grounds and increase control on software development
Ask the Pros: How to Manage Social Media at Your NonprofitBig Duck
Facebook? Twitter? Pinterest? Instagram? With so many channels, it can be hard to know where to start, how to make time for it, or if you're doing it well. Social media has fundamentally shifted the way we communicate and connect with our supporters. Farra Trompeter, Vice President of Big Duck, will moderated a panel of nonprofiteers who manage communities and social media for their organizations. Together they will shared how they use social media to engage their communities.
Presentation by Dr. Olfunke Cofie (CGIAR Challenge Program on Water and Food-Volta Basin) at a workshop clinic held at the International Water Management Institute office in Accra, Ghana.
January 9, 2012
Getting Other People to Care - Social Media Breakfast CTCauseShift
Scott Henderson, managing director of CauseShift, presented at the Social Media Breakfast Connecticut December meeting at Quinnipiac University. He focused on how organizations and people can use social media to engage others in causes they care about.
Christian Bason comes to MaRS for the first event of the Inspiring Action for Social Impact Series - a national program that presents international thought leaders, applied learning and practical strategies for social innovation in Canada. The Inspiring Action for Social Impact Series is presented by Social Innovation Generation (SiG), PLAN Institute and the Public Policy Forum. It will tour throughout Canada in 2011.
The career path of Public Relations is changing with the rise of social media. This presentation walks through the evolution of PR 1.0 to PR 2.0 and how to manage social media channels properly.
Попытка внести ясность в работе с историей в git. Что она из себя представляет и как выглядит. В чём отличие между структурой истории svn и git. А также рассказ про более низкий уровень организации этой системы контроля версий.
Het food-based concept voor een wereld post coronaRomydekkers
Tijdens mijn stageperiode bij het Amsterdamse bedrijf 16 Mammals, heb ik mij bezig gehouden met het toekomstbeeld post corona op het gebied van food-retail. Het verslag bevat een grondig onderzoek naar de invloed van corona op food-retail Nederland. Vanuit dit onderzoek is er een een innovatief food-based concept op gesteld. Wil jij weten wat voor concept er is ontworpen? Klik dan hier!
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
7 Alternatives to Bullet Points in PowerPointAlvis Oh
So you tried all the ways to beautify your bullet points on your pitch deck but it just got way uglier. These points are supposed to be memorable and leave a lasting impression on your audience. With these tips, you'll no longer have to spend so much time thinking how you should present your pointers.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
2. Who am I?
Christina Tran
sodelightful.com
Visual design > fd2s & service design >
teaching > ac4d & interaction design > ???
3. What we’ll cover
• What is a wireframe?
• How does it fit into the design process?
• What does my wireframe need to be
able to do?
• What should I use to make one?
• Now what?
5. So what is a wireframe?
“Wireframes are a set of documents that show
structure, information hierarchy,
functionality, and content…Wireframes are a
means of documenting the features of a
product, as well as the technical and business
logic, with only a veneer of visual design. They
are the blueprints of a product.”
Designing for Interaction, Dan Saffer
10. So what is a wireframe?
We often think of wires as deliverables.
But wireframing is a process.
They are a communication tool between the
interaction/UX designer and:
– Clients, funders, business people
– Other designers (visual, industrial, UX)
– Developers
– Copywriters
– His/herself
15. Where wireframing fits in
Storyboards, Use cases, Digital wires, Visual/brand Annotated
Hand-drawn
Scenarios, Task analysis, Task flows, IA, language, wires, User
wires
Personas (Hero) flows Prototypes Comps stories
Card sorts, Usability
Co-design Testing
Concepting Refining
16. HOW NUDGE WORKS
Nudge is an easy way for care providers to check
in with their patients between appointments.
Automated text messages help patients better patientnudge.com
understand and stick to their treatment plans.
Kyle has just had ACL knee surgery. He receives
1 instructions and medicine from his primary physician.
During his discharge process, nurse Tina schedules
2 Kyle to receive their standard set of follow-up Nudge
messages for ACL patients.
How are you
feeling today?
Storyboards, Reply on a scale
of 0 (terrible)
to 5 (great), and
Scenarios, if you’d like add
a note.
Personas
At home over the next week, Kyle automatically
3 receives text messages each day asking him how he is
feeling and what his pain levels are.
Who’s using it, why, how?
S C H E D U L E . C ON N E C T. R E F L E C T.
NurseWelcome, Jennie | My Account | FAQsreplies on Nudge
Tina monitors all her patient | Log Out
4 and notices that Kyle’s pain levels are getting worse
DASHBOARD MY PATIENTS CHECK-IN MESSAGE
when they should be getting better.
< Back to all patients
Katie Nabovky 5 weeks Send Katie a 1-Time Message
512-555-5555 Edit
Hi Kyle. How is your knee
feeling? If your pain is
Notes: Edit
getting worse, give us a
Enter patient notes here
call so we can schedule a
follow-up appointment.
Credit: Christina Tran for PatientNudge, Adobe Illustrator
Select All | Select None Archive Selected | Delete Selected | Flag Selected
When?
MESSAGE WHEN IN REPLY TO
Today Now
17. Use cases,
Task analysis,
(Hero) flows
What are the main things people’ll be
doing (hero flow)? In what order?
Credit: Jon Kolko
18. Hand-drawn
wires
How will the content be shown and how
will the actions work? (Start small. Then
draw it over & over again—each time
bigger and with more details.)
Credit: Christina Tran
19. Digital wires,
Task flows,
Prototypes
Where does everything go?
What’s the hierarchy? Which UI
patterns will be used?
Credit: Christina Tran for TeamOne, Omnigraffle
20. No No Yes Yes Yes Yes
Alert User
Output
Directions
Go to Store
Start Shopping Alert User: Item on
Optimize No LSC List = Yes Yes Is there a Yes Take Photo Yes Item LSC Yes Item Crossed
Arrive at Store LSC List = 0 Your list is Proceed? Find Item Pre-LSC or
List? Non-LSC List = 0 Pre-LSC List complete. UPC? of UPC Pre-Non-LSC Eligible? Off Pre-LSC List
Now Balance = $0 List?
Yes No No No No No
Alert User:
Alert User: Weigh produce Non-LSC List
Shortest Yes LSC Balance Yes Item currently not
Sort List Your list total = +1
Time? Exceeded? on any list.
exceeds your
LSC funds.
No No
Retrieve printed
Yes Item Crossed
UPC sticker
Confirm Off Pre-Non-LSC
Now and place on item.
Alert User: Add? List
Shortest Yes Balance Yes
Sort List Your list total
Distance? > LSC
exceeds your
Balance?
LSC funds.
No
No No
Shortest Yes Finished No
Sort List
Distance? Shopping?
Yes
No
Digital wires,
Alert User:
Proceed to
Task flows, IA,
Checkout.
Prototypes
Is Now
Enter Cashier Total List = Yes Purchase Total Purchase Yes Pay Using Yes Yes PIN Yes
Balance <= Enter PIN
Checkout Line Scans Item LSC List + Appears on iPhone Total = Now LSC Funds? correct?
to Purchase? PIN = +1
Total List = 0 Total List = +1 Non-LSC Screen Balance?
List?
No No No No No
What are ALL the possible
No
Alert User:
Confirm Purchase Pay Using Yes User Pays Using Alert User:
Total with Cashier. Other Another Form PIN = +4?
PIN Incorrect.
Payment? of Payment
No Yes
routes someone can take? Abandon
Purchase
Alert User: Too many
incorrect PIN
attempts. Use
another form of
payment.
Credit: Scott Magee for AC4D, Omnigraffle
21. Visual/brand
language,
Comps
What’s the hierarchy?
What’s the visual language?
What do the pixels look like?
Credit: Christina Tran for Fugaboo, Illustrator/Photoshop
22. Annotated
wires, User
stories
What does the developer need to know?
E.g. what a button does and WHY.
(Controls, conditional items, constraints)
Credit: Kristine Mudd for AC4D, Illustrator/InDesign
23. Annotated
wires, User
stories
What should people be able to do?
What does the developer need to
start planning their sprints?
24. Where wireframing fits in
Storyboards, Use cases, Digital wires, Visual/brand Annotated
Hand-drawn
Scenarios, Task analysis, Task flows, IA, language, wires, User
wires
Personas (Hero) flows Prototypes Comps stories
Card sorts, Usability
Co-design Testing
Concepting Refining
25. How do you make ’em?
Depends…
• The project & your role in it
• What stage you’re at (what you need the
wires to do, and what fidelity you need, what
the wires need to communicate)
• Who else will need to work on the same
wire files? What do they use?
• How much money & time you have?
• Do you need to also annotate in the same
program? Prototype in same program?
26. Wireframing tools
Tool (in order of fidelity) Why
Analog (handdrawn, pen When you’re thinking,
& paper, whiteboard, Quick iterations,
stencils) Playing with options,
Collaborative, Cheap
Repurposing other apps If you already love the
(Powerpoint, Keynote, program, If it can help
Fireworks) your team collaborate
27. Wireframing tools
Tool (in order of fidelity) Why
Wireframe-specific apps When you’re focused on
(Visio, Omnigraffle, Axure, content & structure instead
Balsamiq, MockFlow, so of visual, easy consistency,
many more…) Stencil libraries, some
prototyping abilities
Digital (Illustrator, When you’ll need to give
Photoshop) someone hi-fi pixels, 960
grid
Prototype it (HTML, Ruby on Some interactions just need
Rails, Flash, Adobe Catalyst, to be seen, Easier to test
etc.) user interactions
28. A note about usability testing
Do it early and often! You are not the user!
“Testing is really more like having friends
visiting from out of town. Inevitably, as you
make the tourist rounds with them, you see
things about your home town that you usually
don’t notice because you’re so used to them.
And at the same time, you realize that a lot of
things you take for granted aren’t obvious
to everyone.” Don’t Make Me Think by Steve Krug
29. A note about usability testing
“Testing one user is 100 percent better than
testing none.” Don’t Make Me Think by Steve Krug
Can be done:
• Easily
• Cheap-ily
• Fun-ily
Just look up Jakob Nielsen’s “Discount
Usability Testing”. Explore think-aloud
method, paper prototyping, & co-design.
30. Practice makes…process
“Enlightened trial and error triumphs over the
wisdom of the lone genius.”
IDEO person on 60 Minutes
Wanna try it out?
Wanna ask questions?
Want feedback on your wires?