UX Portfolio - Chris Stair

UX Portfolio
Chris Stair

Monday, November 11, 13

Skills Overview
•

Research - Competitive Analysis, In-Person/Long Distance Interviews,
Surveys, User Testing

•

Analysis - Qualitative Analysis, Task Analysis, Personas, Scenarios

•

Features - Brainstorming, Feature Generation, Feature Prioritization

•

Sketching - Creative Ideation, Paper Prototyping, Iteration

•

Wireframing - Wireframes, Mockups, Site Maps, Specification Documents
(Programs: Omnigraffle, Keynote)

•

Prototyping - High and Low Fidelity Prototypes (Programs: Omnigraffle,
Axure, Keynote)

2

Mentor - Lis Hubert - IA
Back in February 2013, a college friend mentioned that a UX Designer was looking for an
intern. Little did I know what the future would have in store for me. Since then Lis has taken it
upon herself to expose me to the wild world of UX.

Blog Posts
http://wp.me/p26Qjq-2Vz
http://wp.me/p26Qjq-3bm
http://wp.me/p26Qjq-3hL

Projects
Book - How to Set Up a Website
Research
Visual Design

Client Page Redesign

Case Study #1

General Assembly’s Front Row Live Stream Redesign
by Chris Stair
(For UXDi)


General Assembly’s Live Stream Redesign

As of October 2013 General Assembly outsourced the live streaming element for their online
content. They were considering bringing the service in-house and were interested in how they
could improve the experience. In their words, “It should be able to provide online users with a
way to interact, collaborate, connect, ask real-time questions, broadcast needs, share resources
and otherwise communicate with each other in a meaningful, intuitive and extremely functional
way.”
The challenge: Identifying important trends in research and translating them into a design that
meets both client needs and user needs.
The Solution: A redesign of the confirmation email to accommodate first time users, a new sign
in process, a new waiting screen, a new interface and a new exit screen. All stages of design
paid special attention to networking and question handling.


PROJECT OVERVIEW

The project lasted three weeks. During that period I met with my stakeholders from General
Assembly, interviewed users and GA Staff, participated in live streams, analyzed the research
and then proceeded to design solutions to augment the live stream user experience. The project
culminated in a presentation for General Assembly’s Digital Products Team. While working I
realized that the most important element of the live stream users’ experience could be solved
outside of the stream itself. The stages I went through during this process were:

•

Research

•

Persona Creation

•

Sketching & Creative Ideation

•

Wireframing

•

First Iteration

•

Prototyping


KEY SCREENS AND FEATURES
Main Interface

Growth Hacking Strategies

Email Redesign

Part 2 of 3
Chat - Sally
1:32
Arturo
Uploaded Growth Statistics.xl
1:33
Tommy
Generally that refers to acquiring
new users or increasing revenue
over a given period of time
Randy
1:40
What are some models for
growth?

16:9

1:40

Dana - Moderator
Great Question @Randy!

@Ami
1:42
Hey Sally, thanks for posting that
link earlier. Do you know any
other useful websites?

#GAlivestream

Send

Description

Questions

Message

Upload

Users
Starting a business seems like a daunting task. In this class, Erik will explain three strategies he
has used to start successful businesses. Whether you’d like to understand how to increase your
visibility on the web, choose an insurance plan, and focus on your value proposition, this is the

Frank
Me

Frank
Cori

Robert

Arturo

Kurt

Order Conﬁrmation

Ami

class for you.

TAKEAWAYS
▪

Know how to form your company

▪

Understand strategies for increasing visibility on the web

▪

Get live

Erik Kimel is an entrepreneur and founded his first company,
Peer2Peer Tutors, as a senior in high school in 2004. He grew
Peer2Peer from one tutor and one client to over 5,000 tutors and

Question Forum
Descriptions

Tommy

ABOUT THE INSTRUCTOR

Congratulations, you have successfully registered for the
upcoming live stream.
It will be airing on November 5th at 5:00 pm.

Randy

Sally

Network at GA

Please keep an eye on your email, you’ll be receiving a link
30 minutes prior to the scheduled start time.

Question

Questions

1 New: What are companies with high growth?

Vote
20

1:35pm

What are some growth models?

15

What are some techniques for research?

17

1:30pm

5,000 clients across the east coast region of the United States. In

What are the best ways to grow on a low budget?

1:43pm

Ask the Moderator

Related Videos

1:40pm

What job title would help me grow my business?

12

1:20pm

How do you go about getting your ﬁrst 5,000 clients?

12

1:15pm

What in your mind, are some of the greatest
trends in business today?

10

Class Description

2012, Peer2Peer Tutors was acquired by an international network
of college admissions experts, which was covered by the Wall

Network at GA

Street Journal. Kimel has been featured on the Top 25 under 25 list
in Business Week

Cheers,
The GA Team

What is growth hacking?
Are there any good books on growth hacking?


Answered 1:35

Answered 1:40

DESIGN RESEARCH

Method:

I interviewed 7 people from all around the United States, as well as 1 in
Russia and 1 in Vietnam. The participants were asked 1 of 3 scripts
depending on their exposure to online learning: unfamiliar, beginner, heavy
user.

Findings:

I found that getting questions answered was the most important aspect
for new users, because receiving a real time response was the only
element that competing services cannot currently offer them. The second
most important part of the live stream experience was networking.

Opportunities Identified:

I found that General Assembly can better answer questions and facilitate
networking through:
1). Email Redesign
2). Sign In Redesign
3). Interface Redesign


PERSONAS

ENTERPRISING INDIVIDUAL
Amber Gonzalez - 30, Philadelphia
“My goal was to learn more. In my specific case, I’m on a mission to cram
my brain with as much information as possible. I want to make sure I’m
current with trends.”
Background
Amber majored in journalism at Skidmore in upstate New York. She
graduated seven years ago and worked at a magazine for five. In the past two
years, she became interested in starting a website that would match coffee
enthusiasts with new brands of coffee. She started taking online courses for
HTML and InDesign from lynda.com. In addition, she was looking for
general business skills.
She found GA while searching online for brand strategy workshops. She
ended up signing up for the live stream, because it was free. Living in
Philadelphia, it is not as convenient for her to take GA classes on-site.
Key Characteristics
She uses the site in order to have a general knowledge of entrepreneurship,
with multiple focus of interests. She would browse through a list of
interesting livestream classes and would like to interact with both instructors
and students. As she wants to know more about how other people do small
business, she would like to know about other students’ profile.
Goals and Motivations
- She came to GA to learn about general business strategies and skills.
- She wants to know enough to stay current, not necessarily an expert on one
single area
- She is looking to network and meet like-minded individuals in chats.
Frustrations and Pain points
- She dislikes when people comment too much in the chat
- She could not know much about other interesting students just through chat.
- She thinks the classes aren’t put into the proper hierarchy in terms of
expertise.
- She wishes she could read reviews about classes ahead of time.
- She could not find some of the helpful links or sources in the chat after
livestream


IMPROVING PROFESSIONAL

TECH TOURIST
Dmitry Rosen, Russian, 20

William Moore - 36, New York
Background
William is a 36-year old mid-level director at a retail oriented corporation
living in Upper East Side, NY.
He is busy all the time with his high-powered job, but he feels the need to
learn more skills such as design, so he does not have to wait for other
departments to finish up the projects his team is working on.
He heard about GA from some networking events, browsed GA’s website
and found out about the online program. He tried on-demand videos but
came up with a few questions, and hoped to get them answered through
live-stream
Quote
“It’s not about being an expert, it’s about filling that gap.”
- to learn a specific skill: digital marketing. or any skill that would quickly
fill in the gap in his workstream
- already has a few questions in mind and hope to interact with the
instructor
- wants a quick and easy way to get the information he wants from an
experienced instructor
Key Characteristics
- he is an experienced and serious professional who likes to stay focused
- he is not into networking or anything social with other online students
- he has a concrete problem and wants an answer from expert
Pains and Frustration
- he is very busy, unable to watch more videos or go back and check out all
the links
- sometimes his question do not get answered
- he is unable to predict the quality and level of the livestream classes
- feels annoyed by students having silly side conversations

Background
Based in St. Petersburg Dmitry works freelance for several agencies that do
business providing cheap coding for US-based companies. He heard about
GA when he searched online courses for branding. He looked at the website
and liked the design. After clicking through the various offerings he figured
out that the live stream option is free. He will not pay for a service unless
there is a demonstrably high value.
Dmitry wants to stay current because he feels that the education in Russia,
especially in tech, is lacking. It is generally 2-3 years behind technology in
the United States. So he wants to take advantage of cutting edge lectures so
that he can continue working with his clients in the United States.
- To stay current, at the forefront of technology
- To learn best practices in a variety of contexts
- To improve his career path
Key Characteristics
- Brand oriented rather than rating or review oriented. He does not trust
reviews. Brand orientation involves prestige of GA, prestige of speaker, and
perceived value of the topic.
- He is not interested in the chat feature.
- He does not have a strict focus because he is trying to ‘stay current’. He’s
more likely to watch topics that play to his strengths but he will not ignore
anything for fear of being left behind.
- He does not trust the chat feature because he doesn’t know if the users have
their own agendas. He spends most of his time focusing on what the teacher
is saying.
- Very literal.
Pains and Frustration
- Timezone is a blocker, but he can make it if he stays up late.
- He often watches videos on his mobile and gets frustrated when the video is
not mobile compatible.
- Thinks there is a lack of structure in the Front Row, would like more
structure with more takeaways and technical skills.
- Subscription cost is high in his currency
- Wants a larger community to exist outside
- Does not feel he is a part of the GA community but wants to be

Scope of Questions Broadens Based on
Number of Visits
Speciﬁcity

Single
Question

Personas
Improving Professional
Enterprising Individual
Tech Tourist

Narrow
Topic
General
Industry

1

2

3

Visits


4

CONCEPTUAL IDEATION


DESIGN HYPOTHESIS
Target
Demographic for
Email Redesign

Speciﬁcity

Single
Question

Personas
Improving Professional
Enterprising Individual
Tech Tourist

Narrow
Topic
General
Industry

1

2

3

Visits

4
Target Demographic
for Question Forum

DESIGN ITERATION 1
ITERATION 1

Chat

send

8

7

Method:

How much do fonts cost?
6
Description

Slides

Notes

Links

1

2

3

4

Person Person Person

Top 7 Questions
Question 1
5

After interviewing participants, determining client needs and
doing a competitive analysis I designed an interface that
would take advantage of current user behaviors which
included checking the course description, reviewing slides,
taking notes and examining links. The question answering
process was very important to users so I designed a
‘question forum’ to facilitate the communication between
General Assembly and users. In addition I redesigned the
conﬁrmation email and the sign in screen to further
accommodate user needs.

Question 2
Question 3
Question 4

1.
2.
3.
4.
5.
6.
7.
8.

Class Description
Slide Presentation
Notepad
Link Collection
Question Forum
Chat Function
Current Question
Full Screen

EMAIL REDESIGN 1

SIGN IN REDESIGN 1

Order Conﬁrmation
Class Title/Link to Description

Enter username

Information about Email
Reminders

Upload or Choose a
Photo (Optional)

Questions? (Wording TBD)

Network at GA
About GA

Order Summary


Submit

or sign in with

In

f

Email Redesign
Method:
FINAL EMAIL
CONFIRMATION

After interviewing participants and determining client needs. I
recognized there was a common theme among all new
users. They had specific questions they wanted answered,
in fact it was those questions that brought them to the live
stream. The questions ranged in specificity, but it was
universally important to the users that their questions get
answered.

Opportunities Identified:

Order Confirmation
Congratulations, you have successfully registered for the upcoming live stream.
It will be airing on November 5th at 5:00 pm.
Please keep an eye on your email, you’ll be receiving a link 30 minutes prior to
the scheduled start time.
If you have any questions you would like addressed in the live stream please
contact the moderator by clicking below.

Ask the Moderator
Class Description
Network at GA
Cheers,
The GA Team


Answering the right questions was the largest concern for the
user base. However they lacked a good opportunity to ask
questions before the stream. There were also a number of
reasons that kept users from asking their questions during
the stream. Giving users a way to ask the questions
immediately after signing up for the live stream would solve
problems for both the business and the users.

DESIGN ITERATIONS | PROTOTYPE
FINAL PROTOTYPE

Method:
I created a high fidelity prototype using
OmniGraffle and Keynote to detail the entire
experience from the pre-stream email confirmation
to the exit screen for when the live stream is over.

Part 2 of 3

CORE PRODUCT EXPERIENCE
Receiving an order confirmation
Submitting a question before the stream starts
Utilizing interface during stream to network and
learn more

Chat - Sally
1:32
Arturo
Uploaded Growth Statistics.xl
Tommy
1:33
Generally that refers to acquiring
new users or increasing revenue
over a given period of time
Randy
1:40
What are some models for
growth?

16:9

1:40

Dana - Moderator

Sign-in process
Chatting during the Live Stream
Learning more about fellow classmates
Upvoting a question
Learning more about the topic via related materials
Full Screen

Great Question @Randy!
@Ami
1:42
Hey Sally, thanks for posting that
link earlier. Do you know any
other useful websites?

Send

#GAlivestream
Descriptions

Message

Questions
Questions

Upload

Users

Question
1:40pm

Vote

1 New: What are companies with high growth?

What are the best ways to grow on a low budget?

20
Frank
Me

1:35pm

What are some growth models?
What are some techniques for research?

17

Ami

Robert

Arturo

Kurt

FINAL SIGN IN

15

1:43pm

Frank
Cori



Part 2 of 3

1:30pm

What job title would help me grow my business?
How do you go about getting your first 5,000 clients?

Chat
Users
Related Videos

12

1:20pm

Part 2 of 3

12

Tommy

1:15pm


10
What in your mind, are some of the greatest
Peer2Peer from
trends in business today? one tutor and one client to over 5,000 tutors and

Randy

Sally

Sign In

Network at GA

16:9

Enter Username

Next

Done

or sign in via

Related Content
Description

In

Questions



Profile

16:9


What is growth hacking? college admissions experts, which was covered Answered 1:35
of
by the Wall

Chat
Users
Related Videos


Optional

f

City

Questions

Description

Company Name

class for you.

TAKEAWAYS

Upload Photo

TAKEAWAYS

Website

in Business Week

Are there any good books on growth hacking?

Answered 1:40

▪


▪


▪


▪


▪


Job Title


class for you.

Get live

▪

Get live

ABOUT THE INSTRUCTOR

What topics are you interested in?


User Experience
ABOUT THE INSTRUCTOR Business
Foundations
Design




Web
Digital
Mobile

Product
Design







in Business Week


Development
Marketing
Development

in Business Week

Data Analysis

Case Study #2

intervieWMe
by Chris Stair
GA UXDI Course Project #3


Project Brief
IntervieWMe was the Third project from my General
Assembly course. Working alone over the course of two
weeks I developed an idea from a research phase into a
high ﬁdelity prototype. These are the steps I took:

• Research
• Persona Creation
• Feature Prioritization
• Sketching/Iteration
• First Iteration
• User Testing
• High Fidelity Prototyping

Final Product
Description
IntervieWME is an interview preparation tool designed to
help recent college graduates prepare for upcoming
interviews.
It allows users to record, review, save and share answers
to potential interview questions. The users can share
their answers through multiple channels.
InterviewME has an advantage over the competition
because it is designed for mobile and connected to
social media.

18

Research

I created a screener survey to select millenials from my class who had
varying levels of job interviewing experience. From my pool of 12
qualiﬁed applicants I interviewed seven people over the course of two
days. Participants in the study were asked about their interview
preparation habits and their performance in past interviews.
I found that participants fell into three basic categories in terms of
their methods of preparing for interviews. Those three categories
became personas. I designed for two of the personas because the
third, by deﬁnition, did not spend time preparing for interviews.

19

Cheryl Ko - The Overachiever
“There was a time that I prepared a huge
booklet for a job and it threw them off
completely. They were impressed.”

•

Stresses before interviews, but alleviates the stress by
preparing.

•

Rarely makes mistakes in an interview because of her
intense preparation.

•

Highly social in her preparation, frequently solicits
advice and feedback from friends and family.

•

Represents key demographic.


John Lenney - The Stresser
“I get easily distracted, and then I get nervous and then I don’t do
anything.”

•

Stresses before interviews, relieves stress by paying attention to something else.

•

Often makes simple mistakes in interviews because of his lack of preparation.

•

Generally prepares alone.

•

Preparation is short, generally 1-2 hours before each interview.

•

Often receives pressure from family to work harder at preparing.

•

Represents key demographic.


Mark Kurfess - The Winger
“I don’t really go in thinking of things I like to
do it off the cuff.”

•

Has experience interviewing.

•

Does not stress heavily before interviews.

•

Does not spend much time preparing, preparation often involves a quick background
check on the company itself.

•

Makes mistakes in the interview, but they tend to be small and relate to a lack of
preparation.

•

Not part of target demographic.


Key Features

•
•
•

Record Answers for Potential Questions
Replay Recordings and Improve Answers
Share Answers with Friends for Feedback

23

Design Iterations
interviewME

Designed Mobile First
for Desktop

Redesigned According
to Mobile Conventions

John Gates 10/25/13
Why I make an awesome worker

Interview Recording of
Why John Makes an
Awesome Worker

Justin Park I really like his explanation
Roy Park

ya me too

Sara Brown 10/25/13

Converted to Desktop


Converted back to Mobile

First Wireframes
Home
Enter Your Question Here

Projects

Record

Share

BofA

Why are you a good job candidate?

Share

Cancel

Why would you be a
good candidate?

1 Comment

How much
experience do you
have?

0 Comments

0:50

What is your greatest
weakness?

0 Comments

0:50

If you had a problem
you couldn't ﬁnish,
how would you deal?

0 Comments

0:50

T l me about
el
yourself.

0 Comments

f

0:45

1:00

Why are you a good job candidate?

0:45

0:45

25

Key Takeaways from
User Testing
Users:

•
•
•
•
•

Were confused by home screen
Found two step sharing process cumbersome
Were unsure of the format for their answers
Needed a global navigation
Needed standardized icons

26

Final Design
Home

Proﬁle

Record

interviewME

Proﬁle

Record

John Gates 10/25/13

Share

Cheryl Ko
15 Videos

Share
Share

Write Comment…

204 Connections

Cheryl Ko

Interview Recording of
Why John Makes an
Awesome Worker

LinkedIn
Email

Justin Park I really like his explanation
Roy Park

ya me too

What is my greatest strength?
Comment

Sara Brown 10/25/13

Share

+Question

Sean Bradcliffe
Good Job Staying up late to work on this

27

0:15

Facebook
Interview
Me

Case Study #3

Paper

GA Work Guidelines
Asset and Logo2 UXdi
September 2013
March 2013
Alan Nudman, Ethan Cline and Chris Stair

Project Brief

The second project I completed during my User Experience Design
Immersive at General Assembly was a mock newsreader application
for Facebook. Over the course of two weeks my team of three
members worked to understand what advantages a brand like
Facebook could leverage in the form of a news reader application,
as well as what users look for in a news reader application.

•
•
•
•
•
•
•

Research
Persona Creation
Feature Prioritization
Sketching
Wireframing
User Testing
Low Fidelity Prototyping


PRODUCT OR PROJECT DESCRIPTION
Product description

Facebook Paper is a convenient and socially optimized news reader
for RSS users who have not found a replacement for Google Reader.
It allows all 1.1 billion Facebook users to ﬁnd news from a single
source they already use. The reader has an advantage over
competition because Facebook has more data on their users and the
users already read, share and comment on news in Facebook.

Key features
• Trending & Popular feeds
• Saving articles to mobile
• Share & commenting
• Add & organize feeds


Research

Our group interviewed six participants
over the course of three days. We used
a screener survey to select participants
between the age of 22 and 35 who
regularly read news online. We found
that there were two basic demographics
which we then used to create personas.

Conclusions
1. Two different content consumption habits
2. Importance of simple interfaces was universal
3. Value of “push to mobile” feature
4. Former Google Reader had not been replaced yet
5. Difference between “pleasure reading” and “work
reading” was voiced across the board

Personas

Julia Edwards
•Prefers high resolution images and

longer articles.
•Distinguishes between browsing for
pleasure and browsing for work.
•Generally reads news online at home
on the desktop.
•Places a high value on shares from
friends.

Craig Gomez
•Prefers to read shorter articles with no

images.
•Reads at home on the desktop, but then
bookmarks longer articles for mobile
consumption during the commute.
•Places a high value on staying informed.
•Dislikes when news ‘backs up’ and he
has several thousand unread articles in
his feed.

“I subscribe to all
these sources
because they all have
good writing and I
enjoy the quality of
the writing.”

“I like to read really fast...”
“I like tech and culture, social
media for the breaking... I get on
Twitter and Facebook and they’ll
say Syria is really bad.
Then I´ll look at the Atlantic to
get opinions”.

Design Iterations from Sketching to Wireframing


Usability Testing

1. Users wanted a more simplified
Dashboard
2. Users needed clarification for the ‘Add’
button
3. Users couldn’t recognize the wireframe as
Facebook
4. Users didn’t like the confirmation page
from the ‘add feed’ function
4. “Add feed” function’s confirmation page
didn’t make sense to users


Contents (Home)

We decided to keep Facebook’s
formatting when displaying articles.
We found that the majority of our
users like saving articles
to their mobile devices for later
reading.
Facebook’s main competitive
advantage lies in the information they
possess, showcased in trending.
We found that having one button
to control feed subscriptions
keeps the interface streamlined
and manageable.


Thank you!

Email: ccstair@gmail.com

UX Portfolio - Chris Stair

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to UX Portfolio - Chris Stair

Similar to UX Portfolio - Chris Stair (20)

Recently uploaded

Recently uploaded (20)

UX Portfolio - Chris Stair