My UX Design Portfolio

1. JEANNIE KINNETT
USER RESEARCHER + EXPERIENCE DESIGNER

2. “WE ADORE CHAOS BECAUSE WE LOVE
TO PRODUCE ORDER.”
- M.C.ESCHER
OVERVIEWCASESTUDY#1CASESTUDY#2CONTACTINFOABOUTME

3. HOW I LIKE TO WORK:
OVERVIEW
CASESTUDY#1CASESTUDY#2CONTACTINFOABOUTME
(1) LEARN from & about the Users. (2) CREATE something for the Users. (3) TEST with the Users. ITERATE based on testing data.
Throughout my process, I alternate Divergent Thinking (thinking big) with Convergent Thinking (thinking practically).
Creating these different spaces lets my team and me get great work out-the-door on time, every time.
* This is the specific process I used in Case Study #1,Twitch.tv. Tools and steps vary with each project’s goals.

4. HOW I LIKE TO WORK:
OVERVIEW
CASESTUDY#1CASESTUDY#2CONTACTINFOABOUTME
(1) LEARN from & about the Users. (2) CREATE something for the Users. (3) TEST with the Users. ITERATE based on testing data.
Throughout my process, I alternate Divergent Thinking (thinking big) with Convergent Thinking (thinking practically).
Creating these different spaces lets my team and me get great work out-the-door on time, every time.
LEARN
* This is the specific process I used in Case Study #1,Twitch.tv. Tools and steps vary with each project’s goals.
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT

5. HOW I LIKE TO WORK:
OVERVIEW
CASESTUDY#1CASESTUDY#2CONTACTINFOABOUTME
(1) LEARN from & about the Users. (2) CREATE something for the Users. (3) TEST with the Users. ITERATE based on testing data.
Throughout my process, I alternate Divergent Thinking (thinking big) with Convergent Thinking (thinking practically).
Creating these different spaces lets my team and me get great work out-the-door on time, every time.
LEARN CREATE
* This is the specific process I used in Case Study #1,Twitch.tv. Tools and steps vary with each project’s goals.
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT

6. HOW I LIKE TO WORK:
OVERVIEW
CASESTUDY#1CASESTUDY#2CONTACTINFOABOUTME
(1) LEARN from & about the Users. (2) CREATE something for the Users. (3) TEST with the Users. ITERATE based on testing data.
Throughout my process, I alternate Divergent Thinking (thinking big) with Convergent Thinking (thinking practically).
Creating these different spaces lets my team and me get great work out-the-door on time, every time.
LEARN CREATE TEST & ITERATE
* This is the specific process I used in Case Study #1,Twitch.tv. Tools and steps vary with each project’s goals.
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
CONVERGENT
DIVERGENT
-1-
Topic Map
(Questions
for
Users)
-3-
Gather
Survey
Responses
-2-
Pare Down
(Questions
for
Screener
Survey)
-4-
Select
Users
for
Interviews
-6-
Affinity
Map
&
Create
Personas
-7-
Ideate
Features
-8-
Prioritize
Features
(Feature
Mapping)
-9-
Sketch/
Design
Studio
-11-
Wireframe
& Prototype
-12-
Test
-13-
Iterate
-14-
Deliver
-10-
Discuss
Sketches/
Design
Studio
-5-
User
Interviews
CONVERGENT
CONVERGENT
CONVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
DIVERGENT
CONVERGENT
CONVERGENT

7. TWITCH.TV
Design and Integrate a video upload feature for America’s 4th largest source of peak Internet traffic.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

8. WHAT I DID:
• Led the Research Phase including:
• Led topic mapping
• Wrote screener survey questions
• Helped organize interviews
• Led Affinity Mapping.
• Developed the 3 Personas.
• Wireframed the new upload feature flow.
• Comparative Research.
BRIEF: Design a new way to upload and view content that lets gamers share their tips and tricks with each other.
TIMELINE: 2 weeks
TEAM SIZE: 3 designers
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME
WHAT WE SPLIT:
• User Interviews.
• Usability Testing.
WHAT MYTEAMMATES DID:
• Created Supplementary Wireframes,
integrating video content into Twitch.
• Finished hi-fi Mock Ups & Prototype.
PROJECT OVERVIEW
• Personas
• Competitive User Flow Analysis
• Annotated wireframes
• Clickable prototype
• Sitemap
DELIVERABLES

9. RESEARCH
15 IN-DEPTH USER INTERVIEWS…
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME
201 SCREENER SURVEY RESPONSES…
48% 52%48% had used Twitch before.
From 15 different countries.
57%
43%
Men
Women
34%
3%
63% 63% had watched a walkthrough on Youtube.
But only 3% had watched a walkthrough on Twitch.
To ensure we interviewed Users who could help us answer our
research questions, we selected survey respondents who:
(1) seemed serious about gaming
AND
(2) had at least some knowledge of Twitch.
“I don’t want a spoiler.
I just want a hint.”
“Why would I stream?
It’s a social thing.”
“I love watching people play games as much as
I like playing them myself.”
(That’s me!)

10. PROMPT: A few users said they
gamed specifically for social reasons.
MY QUESTION: “Are there trends
associated with the level of sociability
in gamer behavior?”
MY ROLE: I suggested we try
mapping our findings on a Pain-to-
Pleasure continuum (horizontal axis)
bisected with a Social-to-Alone
continuum (vertical axis).
FINDING: We discovered our users
clearly fell within three strata, based
on their chief reason for watching
others play video games.
RESULT: This delineation served as the
basis for our three personas.
RESEARCH ANALYSIS
RESULT: This delineation served as the
basis for our three personas.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

11. PROMPT: A few users said they
gamed specifically for social reasons.
MY QUESTION: “Are there trends
associated with the level of sociability
in gamer behavior?”
MY ROLE: I suggested we try
mapping our findings on a Pain-to-
Pleasure continuum (horizontal axis)
bisected with a Social-to-Alone
continuum (vertical axis).
FINDING: We discovered our users
clearly fell within three strata, based
on their chief reason for watching
others play video games.
RESULT: This delineation served as the
basis for our three personas.
Watching for SOCIAL
Watching for ANSWERS
Watching for ENTERTAINMENT
RESEARCH ANALYSIS
RESULT: This delineation served as the
basis for our three personas.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

12. Watching for SOCIAL
Watching for ANSWERS
Watching for ENTERTAINMENT
24 YEARS OLD // I.T. SPECIALIST
“Why do I stream? It’s a social thing.”
AMANDA
Since moving to New York, Amanda has
struggled to find friends seriously interested in
video games. She keeps up with her old gamer
pals via Twitch and Steam; the group broadcasts
and streams each other’s gameplay at least once
a week. Amanda also likes to meet new people
online. When not working with computers or
gaming, Amanda is taking care of her dog, Atari.
• Broadcasts/uploads once a week
• Searches for her friends’ videos
• Chats with old and new friends
• Listens to EDM while gaming
BEHAVIOR
• Lag on live broadcasts
• Broadcast set up is a hassle
• Problems with bandwidth
• Need to log in
PAIN POINTS
FAVORITE GAMES
Battlefield Hardline, Counter-Strike, League of Legends
FAVORITE PLATFORMS
PC, PS4
TIME SPENT PLAYING/WATCHING GAMES
Everyday, about 2-3 hours
BENji
19 YEARS OLD // GRAPHIC DESIGN STUDENT
“I prefer watching other people play video games.”
Benji’s favorite TV show is video games. He
watches gamers’ videos between classes—with
friends or by himself. He even sometimes
watches Let’s Plays when falling asleep. Benji
follows funny gamers on YouTube, Twitter, and
Facebook. He’ll watch a livestream if it’s starring
one of his favorite gamers or if one of his friends
tells him to check it out.
• Unwinds watching Let’s Plays
• Learns about new videos from
social media and from his friends
• Watches walkthroughs to check
out a new game
BEHAVIOR
PAIN POINTS
FAVORITE GAMES
Super Smash Bros., Minecraft, Clash of Clans
thomas
31 YEARS OLD // MARKETING MANAGER
“I’m not here to make friends. I’m here to game.”
If Thomas takes his job seriously, he takes his
RESEARCH ANALYSIS
RESULT: This delineation served as the
basis for our three personas.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

13. PERSONAS
24 YEARS OLD // I.T. SPECIALIST
“Why do I stream? It’s a social thing.”
AMANDA
Since moving to New York, Amanda has
struggled to find friends seriously interested in
video games. She keeps up with her old gamer
pals via Twitch and Steam; the group broadcasts
and streams each other’s gameplay at least once
a week. Amanda also likes to meet new people
online. When not working with computers or
gaming, Amanda is taking care of her dog, Atari.
• Easy way to upload walkthroughs
• Communication between gamers
• Ability to meet new people
• Ability to find her friends easily
NEEDS
• Broadcasts/uploads once a week
• Searches for her friends’ videos
• Chats with old and new friends
• Listens to EDM while gaming
BEHAVIOR
• Lag on live broadcasts
• Broadcast set up is a hassle
• Problems with bandwidth
• Need to log in
PAIN POINTS
• Easy way to upload walkthroughs
• Comment on videos
• Ability to find her friends’ videos
• Live chat feature
FEATURES
FAVORITE GAMES
Battlefield Hardline, Counter-Strike, League of Legends
FAVORITE PLATFORMS
PC, PS4
TIME SPENT PLAYING/WATCHING GAMES
Everyday, about 2-3 hours
I developed each user type into an in-depth persona like the one below. Personas influenced our entire iterative design process.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

14. THIS is more complicated than and takes more time than THIS.
I used these flows as benchmarks to ensure I designed a quick, clear new upload flow for Twitch users.
COMPARATIVE RESEARCH
HOME
click your
account
name
VIDEO DETAIL
PAGE
click
gear icon
click
EXPORT
UPLOAD
WINDOW
POP UP
link
YouTube &
Twitch
accounts
click
video
click
VIDEO
MANAGER
VIDEO
MANAGER
PAGE
click
SETTING
SETTINGS
PAGE
click
CONNECT-
IONS
complete
info
click
EXPORT
DONE
HOME
click
UPLOAD
UPLOAD
SCREEN
complete
info
click
PUBLISH
DONE
UPLOAD
PAGE
drag & drop
files
click
SELECT
FILES TO
UPLOAD
YOUTUBE’S UPLOAD USER FLOW
(minimum 3 clicks, 3 screens, clear language)
TWITCH’S PREVIOUS UPLOAD-TO-YOUTUBE USER FLOW
(minimum 5 clicks, 4 screens, confusing language)
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME

15. UPLOAD USER FLOW MOCKUPS
UPLOAD SCREEN
Familiar drag-and-drop UI.
(minimum 3 clicks, 3 screens, clear language)
UPLOADING + VIDEO DETAILS SCREEN
Upload progress bar. Enter video details during wait.
CONFIRMATION SCREEN
Video summary. Link to view in profile.
(OPTIONAL) ANNOTATIONS SCREEN
Unlike on Youtube, users can choose to annotate the
video during the upload process.
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME
HOME
SCREEN
Click newly
added
UPLOAD
button.

16. CLICKABLE PROTOTYPE
CASESTUDY#1
OVERVIEWCASESTUDY#2CONTACTINFOABOUTME
https://projects.invisionapp.com/share/UR2PUEJ8H#/screens

17. CASESTUDY#2
KANDUIT
Design a calendar & scheduling features for an online directory for social workers.
kanduit
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME

18. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
WHAT I DID:
• Served as my team’s point of client contact.
• Led the Research Phase including:
• Organized and led 12 user interviews
• All Affinity Mapping and Research Analysis.
• Created & presented initial Research Report.
• Built and tested clickable prototype with InVision.
• Conducted A/B testing.
• Designed final mockups for desktop and mobile.
BRIEF: Kanduit is a directory of social services for social workers (in beta). Design the second-half of this app: a
connected calendar/scheduling system that lets social service providers make appointments for their clients.
TIMELINE: 3 weeks
TEAM SIZE: 3 designers
WHAT MYTEAMMATES DID:
• Created Initial Wireframes.
• Assembled the Research Report.
WHAT WE SPLIT:
• User Interviews.
• Personas
• Competitive User Flow Analysis
• Annotated wireframes
• Clickable prototype
• Sitemap
DELIVERABLES
PROJECT OVERVIEW

19. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
RESEARCH
What are Kanduit’s prospective Users like? (Scheduling behavior? Motivations? Highs & Lows?)
To find out,
we talked with 12 Users* including:
What are Kanduit’s business goals & brand goals?
To find out,
we held three Stakeholder Interviews.
• Social Workers
• Private Practitioners
• Agency Administrators.
• Program Managers.
*Some provided by the Client. Some gathered from our own network.

20. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
RESEARCH ANALYSIS
PROMPT: We are tasked with designing a flow.
MY QUESTION: “What are the highs and lows as
a social worker goes through the scheduling
process? Are there trends temporally?”
MY ROLE: I did all of the mapping, categorizing,
and analysis. One of my teammates wrote our
interview notes on stickies. I circled key findings.
FINDINGS: Kanduit’s main User Type, social
workers, exclusively uses desktop for
scheduling.
RESULT: I advocated for the User’s technical
preferences. I persuaded the client that our
team should focus first-and-foremost on the
Desktop experience, rather than on a mobile app.

21. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
PERSONAS
Sally the Social Worker
Tech Savviness: Medium
Context: Running around to meet clients or in office to do paperwork
BEHAVIORS
PLEASURES
◦ Helping others succeed
◦ Getting clients to commit to helping themselves
◦ Having enough time to get everything done, especially paperwork
& appointments
PAINS
◦ Paperwork & Having to log hours
◦ Difficulty finding the right program
◦ Difficulty getting in touch with clients
◦ Client no shows. And clients attendance impacts Sally’s company’s
grant funding
FEATURES
Sally works long hours, but her days are never the
same. She drives to meet her clients in their
homes or at their appointments, all the while
logging her hours and juggling stacks of
paperwork. Her biggest motivation is her desire to
be a force for positive change in the world. And
she’s great at it. Sally could use a little help getting
all her tasks done.
“It’s a stressful job. . . but I think at some
point you’ve got to be a catalyst for change.”Heather the Healthcare Provider
Tech Savviness: High
Context: In an office, going from appointment to appointment
PLEASURES
◦ ZocDoc is super user friendly
◦ Making a breakthrough with a client
◦ Feeling confident in the referrals she makes
PAINS
Heather loves getting to help people every single
day. Her schedule is always full because she tries
to help as many clients as possible. Healther
recognizes her professional limitations, though,
“It would be really helpful if thre was [a]
system that was really painless for referrals.”Abby the Administrator
Tech Savviness: Medium
Context: Front desk of her program’s office

22. Search
Results
Page
Appt. Times
Modal
Window
click
BOOK
ONLINE
click time
slot Login Page
click time
slot
Patient Info
select
I’M NEW
select
I’VE
USED
click
CONTINUE
Login
Modal
Screen
Book Your
Appt. Page
Fill in
Basic
Appt.
Info
click
CONTINUE
Book Your
Appt.
Page 2
specify
patient
click
CONTINUE
Appt Info
Book Your
Appt.
Page 3
verify
phone #
click
BOOK
APPT
Your Appt.
Is Booked
Page
Details “Finished!”?
Sign Up
Modal
Screen
RESEARCH - PART 2
CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
Kanduit set ZocDoc as its benchmark for scheduling simplicity. Data gathered in our User Interviews validated ZocDoc’s felt ease-of-use.
I mapped out ZocDoc’s scheduling flow to see how I could beat it.

23. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
ITERATIONS: APPT.NOTIFICATIONS STEP
1. Language changes based on user
feedback: Changed “Client Info” to “Account
Info” & “Appt Details” to “Notifications.”
1
V1 (SKETCH) V2 (LO-FI WIREFRAME) V4 (FINAL MOCKUP)
2. Added option to inform client of new
appt.
3. Added numbers to simplify.
4. Adjusted spacing to fit more onto the
screen at once.
3
2
4

24. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
ITERATIONS: CALENDAR (MONTH VIEW)
2. Switched Day & Month view buttons.
May
2015 Clients
1. Changed icons to test (Day,Week, Month,
Clients) to increase clarity.
1
V1 (SKETCH)
V2 (LO-FI WIREFRAME) V4 (FINAL MOCKUP)
2

25. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
ITERATIONS: NOTIFICATIONS PAGE
3. Separated Future & Past Appointments.
4. Added a Load More button.
1
V1 (SKETCH)
V2 (LO-FI WIREFRAME) V3 (FINAL MOCKUP)
3
2
4
1. Added color-coding & icons.
2. Separated notifications & footer.

26. CASESTUDY#2
OVERVIEWCASESTUDY#1CONTACTINFOABOUTME
kanduit
CLICKABLE PROTOTYPE
https://projects.invisionapp.com/share/RE30AMKZT

27. 10 THINGS YOU DIDN’T KNOWABOUT ME
1. I am named after my Southern grandmother,Jeannie Martin Puckett.
2. My favorite book is ATale of Two Cities.
3. I played Dorothy in my 1st grade’s rendition of The Wizard of Oz.
4. I can identify almost every breed of dog.
5. This is my favorite color.
6. In college, I was Co-President of our Outdoor Leadership Training program and led week-long
backpacking and whitewater canoeing trips.
7. I love a good pun.
8. My spirit animal is a Border Collie because they’re clever, enjoy being active, and are good at
herding people.
9. My guilty pleasure is researching personal finance tools.
10. I can imitate the ping pong ball sound eerily well.
ABOUTME
OVERVIEWCASESTUDY#1CASESTUDY#2CONTACTINFO

28. EMAIL: JEANNIE.KINNETT@GMAIL.COM
LET’S TALK.
CONTACTINFO
PHONE: 678.637.2910
INSTAGRAM: @JeannieWasHere
OVERVIEWCASESTUDY#1CASESTUDY#2ABOUTME