ADD THE HI-FIDELITY DESIGNS
TO YOUR PROTOTYPE &
FINALIZE YOUR CASE STUDY
USER TESTING HAS ENDED
SAVE THE CURRENT DESIGN AS A VERSION (BEFORE YOU ITERATE) SO CAN YOU SHOW PROCESS ON YOUR CASE-STUDY.
NEXT WEEK WILL BE 1-on-2 to get a final
round of feedback from WA and I. YOU WILL
QUICKLY SHARE YOUR CASE STUDY & PROTOTYPE
HI-FIDELITY DESIGNS &
FINALIZE THE CASE STUDY
IF YOU need FEEDBACK ON YOUR APPLICATION. SCHEDULE A 1-on-1 WIth AARON OR SIFAN ASAP.
POST YOUR CASE STUDY OR PROTOTYPE TO THE GROUP SLACK CHANNEL AS WELL. IF YOU WAN FEEDBACK OR A SECOND PAIR OF EYES
TRY AND GET AS MUCH DONE AS
POSSIBLE BY NEXT WEEKS CLASS.
2nd
3rd
4th
1st
DON'T FORGET TO POPULATE
ADD A FINAL WOW IMAGE IN THE BEGINNING AND THE END OF YOUR
CASE STUDY.
-
THE ROLE SECTION AND
APPLICATION LOGO/ICON.
-
ADD THE BUSINESS GOALS TO THE BEGINNING OF YOUR CASE STUDY.
IF YOU'RE NOT SURE WHAT THEY ARE, SLACK ME & SIFAN YOUR CASE STUDY
AND WE WILL HELP.
-
ADD THE PRODUCT GOALS: ADD THE TOP FEATURES ( JUST THINK, WHAT DOES YOUR PRODUCT DO...) IF YOU'RE NOT SURE, SLACK ME AND SIFAN AND WE CAN TAKE A LOOK AT YOUR PROTOTYPE AND EXTRACT THE FEATURES.
–
CASE STUDY
SHOW WIRE-FRAMES, USER TESTING QUESTIONS & USER TESTING PHOTOS
ADD A FINAL WOW IMAGE IN THE BEGINNING AND THE END OF YOUR CASE STUDY.
Show pictures of the people you
interviewed
Another example:
Introduce the research
Show how many
people you interviewed
in a visual way
THE ROLE SECTION AND APPLICATION LOGO/ICON.
Make your goals look good!
Make this just placeholder
You will come back later
and update it...
ADD "PRODUCT GOALS" TITLE
ADD "BUSINESS GOALS" TITLE
You can copy fake text from
hipsum.co
Introduce your Target Audience
Don't use the persona yet. Just
user profiles here.
• Their Persona Names:
– Olivia Online
– Heather Healthy
– Sandy Sustainable
• About them
– Describe a little bit of information about them
– Just describe a day in the life"
– Just their goals/motivation (not problem)
Show some learning goals
Show 2-3 questions under the learning goal
Show pictures of your users
-
You can also show a page from you
user script or topic map.
-
You can have a link to your
user script as well.
SHOW LEARNING GOALS
SHOW A 2-3 QUESTIONS UNDER EACH LEARNING GOAL
SHOW A PAGE FROM YOUR RESEARCH SCRIPT
INTRODUCE THE PROCESS OR
THE CHAPTERS OF YOUR
CASE STUDY.
• RESEARCH/DISCOVERY
• RESEARCH INSIGHTS/LEARNINGS
• PROBLEM VALIDATION
• IDEATION/CONCEPTS
• WIRE-FRAMING
• USER TESTING
• FINDINGS/LEARNINGS
• FINAL PROTOTYPE
INTRODUCE THE PROCESS
GOOGLE SEARCH "UX PROCESS"
The
Synthesis
Show a couple very interesting quotes
that help you build your case on why you
are focusing on a certain problem.
-
Remember:
• Design like a scientist
• Decide like a lawyer
Another
example
here
Another
example
here
(NOT MANDATORY)
If you sent out a survey to collect
data then:
-
Show some of your survey responses
-
Highlight some key responses
MAKE THEM SUPER
PRETTY DON'T JUST SCREEN
OF WHAT GOOGLE SURVEY LOOKS
LIKE - RE-DESIGN IT
Introduce your synthesis:
• Have text that says "The Synthesis"
• Show the pictures of user buckets
done in Miro
Show your Clustering:
• Have test that says
"The patterns & themes"
• Show the pictures of your patterns
done in Miro
The
Synthesis
The
Patterns
& Themes
LEARNING & FINDINGS
PUT YOUR LEARNING GOALS OR ASSUMPTION on THE LEFT & YOUR FINDINGS ON THE RIGHT.
LEARNING GOAL
FINDINGS
LEARNING GOAL
FINDINGS
LEARNING GOAL
FINDINGS
LEARNING GOAL
FINDINGS
Put your key insights
next to your learning goals
—
What did you learn about
your learning goals?
—
What were the patterns that
you found?
—
How many people said this
pattern? ex: 14/19 people said "_"
Another example
You can create a section
like this to CALL OUT the
decisions you made based off the learnings above.
—
Explain why you are going to focus on a certain aspect of the problem you learned.
—
It does not need to be more than one decision. It can be just one decision. This is the place to call out the reasoning behind the problem you're focusing on.
—
This is also a good section to explain why you're not going to focus on a certain problem or why you chosen to not focus on a certain persona group.
Another example
Introduce YOUR
PERSONA(S)
Add some copy that says:
I took all my learnings from research and created an PERSONA(S)
PERSONA OR EMPATHY MAP HERE. MAKE IT LOOK PRETTY
-
EMPATHY MAP ONLY FOR
PRIMARY PERSONAS
_
USE THE PERSONA FRAMEWORK FOR SECONDARY PERSONA
TYPES
IF YOU NEED
PERSONA HERE
EXAMPLE HERE
PERSONA HERE
EXAMPLE HERE
IF YOU WANT
DO A EMPATHY MAP,
THE DON'T SHOW
THE PERSONA
AND REPLACE IT
WITH THE EMPATHY MAP.
MAKE IT LOOK PRETTY.
WRITE YOUR PROBLEM
STATEMENT
Make your problem statement
it look good! You can use the
problem statement framework
or just write a nice 1-4 sentence
description of the problem.
You can write a solution statement
-
Brief description about what your solution will do.
SHOW SOME SKETCHES
Show picture of sketches:
You can show the 4-up
sketches we did.
And/or any sketches you have
will do....
SHOW YOUR
CUSTOMER
JOURNEY MAP
OR ANY MODELING
(OPTIONAL)
EXTRA CREDIT - MULTIPLE CONCEPTS
Show your concepts:
Call out some of the learnings,
what people liked and what
people didn't like.
-
Highlight the decisions
you have made and why
you have made them.
-
Example:
Most user's found concept-1
to be confusing and when
asked what they found most
valuable, they wanted a mixture
of concept 2 & 3.
THIS SECTION IS OPTIONAL AND
EXTRA CREDIT.
INTRODUCE AND
SHOW YOUR CUSTOMER
JOURNEY MAP OR
ANY MODELING THAT
YOU HAVE DONE
-
You don't have to show
the entire model and
you can also add a button
to "view model" that links to
another figma prototype link
with just the model in it.
INTRODUCE YOUR WIRE-FRAMES
-
You can add a button to link
to the wire-frames like I have here,
but not necessary, you can also
just show the work-flows and screens
IMPORTANT:
Show some top level screens
on the right or left.
The task as headlines.
The question that relate
to each task below the task
headline. Like this example.
You can also add
a section that shows
your screen designs
- like the example
on the left to this image.
INTRODUCE
USER TESTING
Introduce the user testing
-
Show LOTS OF PICTURES
of the people you testing
with, it can be from zoom
or it can be just pictures
of them.
Add more pictures of the
user test sessions as you
continue.
Here's another example
INTRODUCE
THE SYNTHESIS
Introduce your
user testing synthesis
and show your miro
insights.
SYNTHESIS
THE
WHAT DID YOU LEARN?
HIGHLIGHT THE PAIN POINTS & LEARNINGS
SHOW THE FINAL VISUAL
DESIGN POLISHED SCREENS. PUT THE SCREENS IN DEVICES. DON'T JUST SHOW SCREEN SHOTS.
LEARNINGS
THE
THE
VISUAL
DESIGN
THE
DESIGN
SYSTEM
Pick some of the
top learnings and show
them next to the
wire-frame screens.
You can show users
quotes as well.
-
You can magnify it
like the example
here to the right
or Just have text
next to the screen
-
You can show a
before screen
(before you
iterated) and right
next to it show the
after screen (what the
screen looked like after
the fix)
INTRODUCE AND SHOW YOUR FINAL VISUAL DESIGNS. PLACE THE DESIGNS INTO DEVICES. DON'T JUST SHOW SCREEN SHOTS...
You can also show animated gif/moves of your prototype going through different scenarios
Example:
User Onboarding
(animated gif/movie playing)
Finding a chat room
(animated gif/movie playing)
Posting & receiving a message
(animated gif/movie playing)
ADD A BUTTON TO VIEW FINAL PROTOTYPE. THIS WILL OPEN THE FIGMA PROTOTPYE LINK
EXTRA CREDIT. INTRODUCE YOUR DESIGN SYSTEM,
SHOW YOUR FONTS,
COLORS, BUTTONS
AND ICONS
SHOW A FINAL
WOW SHOT AND
THANKS THE VIEWER
-
Look on dribbble
for inspiration
THANK
YOU