User Experience Design Portfolio

1. Eric Wagner
User Experience Designer
Open here

2. About Me
Who I am and what I like
Hi there, I’m Eric
I'm a User Experience Designer and I’m insatiably curious.
I’ve tried my hand at everything from marketing to
advertising, and I have chosen to pursue what I am
deeply passionate about.
User experience design is more than just designing
for users. It’s designing for people—error-prone,
emotional and imperfect people. I care about
asking why. I care about solving problems. I
care about designing for intuition.
Things I like
Check out this
picture of me!
Concerts Self-Improvement
Psych Thrillers
Asian Food
Design
Satire

3. My Process
How I get things done
Research Ideate Design Test
Iterate!

4. t

5. t
tSelf Hackathon
Objective
This was a three-week client project in
which the client wanted to increase user
engagement, merge its four existing
websites, and draw more visitors to
their live workshops.
Self Hackathon provides online
programs, live workshops, and
corporate training in a variety of self-
improvement topics in order to hack
your mind, rewire your brain, and
upgrade your life.
My Role
As design lead for this group project, I
was responsible for creating all client-
ready documentation, including the style
guide, designing all wireframes in varying
fidelity, and creating, testing and iterating
with the interactive prototype.
I conducted usability testing, synthesized
research, and created deliverables
including a comprehensive research
report, user flows, journey map,
wireframes, and an interactive prototype
showcasing our final design.
Solution
We redesigned the website,
consolidated its digital entities, and
presented our process to the client.
The client was not only blown away by
our work, but asked us to continue
working with the company after we
graduated from General Assembly.
Client Project

6. t
Competitive Research
Three of four competitor sites have an explicit
link in the primary navigation explaining how
or why their product or service works.
All competitors have multiple calls to action
varying from logging into member portals to
starting/signing up for the service.
Contextual Inquiry
I've done a hackathon, where
there's a developer and a
creative for 24 hours. Is that this?
I need more information to
understand what it is before
signing up. . . It’s hard to tell
how to get involved. I feel like I
closed out of the modal so
now I can’t sign up. Do you just
show up to things?
Seems more self-help-y. I can’t
think of how [science] would be
related. When I think ‘scientific,’
I think primary source, from a
journal, from a doctor, maybe
a study.
Clearly explain the
meaning behind the
term “hacking”
Provide information
about the service
upfront so users feel
knowledgeable
about it
- Show data and
citations to back
scientific claims
- Showcase credentials
of research, experts
and founder
Takeaways
Actual user statements
“
“
“
Response

7. t
Information Architecture
Through user testing,
we devised a new
primary navigation
and renamed Live
Events to Workshops.
Affinity Mapping
All interviewees were high-level professionals who
were interested in self-improvement, and had either
taken a class or used a product related to self-
improvement at least several times this past year.
Personas
Charles
Nyssa
Self-improvement is holistic, and she
believes everyone has his/her own path
towards it.
Professional self-improvement is directly
correlated to success in his personal life.

8. t
Wireframe Iterations
Journey Map
After attending workshops, users mentioned it was
difficult retaining and finding time to practice
techniques they learned. By sending users a
notification directing them back to the site to a
workshop recap page, we close the circle, support
users in continuing these practices, and emphasize
long-term benefits of premium content.
Home page
iterations from
initial sketches to
final design!

9. t
Content Strategy
4
1. We created an icon
system to establish
consistency with
corresponding
information.
2. What I’m Reading
shows Patrycja is
down-to-earth and
still learning too.
3. We provide
transparency and
structure in describing
the online program and
the feedback loop.
4. We encourage users to test their
confidence upfront to sample what
kind of feedback they’d receive, then
prompt them to sign up.
2
1
1
3
4
4

11. t
t
Recurring Payment Feature
Kickstarter
Objective
This was a two-week project in which
we were tasked with designing a
recurring payment feature for popular
crowdfunding site, Kickstarter.
My Role
As project manager, I focused on
managing our schedule, research,
feature definition, design, and testing.
As UX designer, I built and tested the
prototypes at varying levels of fidelity.
I led and collaborated in user research
methods including affinity mapping,
persona development, and feature
prioritization.
Solution
Creators should be able to launch
projects that provide the option for
recurring payments, and backers
should be able to discover and fund
these projects.

12. t
From our brief and our competitive analyses we determined we needed
to conduct user interviews with project creators, backers, and a third
group, subscribers, aka people who subscribe to services like Birchbox.
User Research Personas
Backer
Pat
the Sympathetic
Supporter
Creator
Maki
the Friendly
Philanthropist
Kathryn
the Scrupulous
Saver
Subscriber
User interviews provided us with deep
insights into the pleasures, pains, contexts
and behaviors of our users.
“ My friend sent an email blast, ‘I don't
normally do this. . . sorry everyone.’
Response: Design message templates to
ease feeling of shame when asking others
for donations
Actual user statement:

13. Design Charrettes
We used a method called design
charrettes to concept designs to facilitate
individual maximum creative input to
then discuss and give feedback, ending in
a combined maximum creative output.
My wireframes were featured in this
Instagram account!
I sketched and tested
these wireframes to see if
users could navigate the
newly integrated features.
Sketching

14. Hi-Fi Wireframes
I was responsible for creating the wireframes through
each iteration. This is the user flow of creating a
templatized message.
1. Select project you
want to update
2. Choose type of
message you want
to write
3. Select recipients
of your message
4. Edit the template
to your liking
Drag and drop widgets to
customize and brand your
message!
5. Preview your message
before sending

15. t

16. t
LinkedIn
This was a two-week project in which
we solved any problem we saw in the
world using design.
We created an opportunity for
professionals to give back to their
community, practice teaching and
recruit talent in order to help their
passion projects come to life. Those
with less experience can work on real
projects under professionals in their
desired field while gaining practical
work experience.
Objective My Role
This was a very collaborative effort, and as
UX Designer, I focused on the technical
background research, competitive
research, concepting, and interpreting
data from user interviews.
I created the hi-fi clickable mobile
prototype through multiple iterations and
testing as well as the user journey map.
Solution
We designed a native iOS app that
provided a platform for people with
similar interests to connect and
collaborate in person to help passion
projects and side projects come to life.
LinkedIn Projects

17. t
Since there were not many competitors of LinkedIn’s
scale in this untapped niche market, we compared
companies who excelled in one aspect of our product.
Competitive Research
Professional Social Networking
Portfolio Hosting/Job Posting
Mentoring
Grip Shapr
Coroflot Behance
College Mentors
for Kids
CollegeMentors.org
User Interviews
Through user interviews, five out of seven
users mentioned they learn best while
applying skills, particularly in group
projects.
Four out of seven users mentioned that a
sense of community is helpful to learning.
Showing interests helps
personalize profiles
Background checks
provide reassurance for
mentees
Takeaways
Displays credentials to
establish experience
level

18. t
We created two
personas based on
our user interviews,
to help guide us in
our design direction.
Personas
Journey Map
Feature Prioritization
Using the Moscow
Method to cater
to our personas,
we decided what
features we must,
should, could and
won’t design in
order to create
our MVP.
I created this journey map to illustrate the user
experience before and after using LinkedIn Projects.
Before the advent of LinkedIn Projects, people
wanting to pursue their passion projects had no way
of connecting with other like-minded, talented
people to work with. Once they use the app, people
can find others who complement their skill set while
acquiring new skills from each other in order to
realize their passion projects.

19. t
Annotated Wireframes
1. Project details
at a glance
2. Relevant user
information
stands out
3. View the activity
of your connections
at a glance
4. View past, current
and saved projects
5. Press floating action
button to create a
new project
6. Profile information
can be populated
from LinkedIn’s API
7. As a project creator,
you can view pending
and approved
applicants, and project
details
8. Creators can view
applicant details
to coordinate
collaboration
1
1
2
3
3
4
5
6
7
8

20. t
Hi-Fi Wireframes
Participants were recruited from
our team’s research pool, as well
as at random, to maintain
continuity while creating
opportunities to observe new
behaviors. I created and tested
the hi-fi prototype with these
screen designs.
Branding
In order to brand our app as separate but
still associated with LinkedIn we created
and tested various names and logos for our
app before deciding on the final version.
Usability Testing

21. Tools
What I use to get things done
Wireframing Prototyping Collaborating What I’m learning
Learning new stuff is cool.

22. Contact
How to reach me
ericwagner1017@gmail.com 954.288.4090 /@eric.wagner
Follow me on the ‘Gram!
Thanks!
/ericjwagner @swagner1017/ericwagner1017