2. ABOUT
Intro
My name is Sean Culley and I am a UX
designer that is trying to humanize the
digital space, one product at a time. I
love to get my hands dirty and dive
into user research in attempt to identify
the catalysts that dictate human
behaviors and then design accordingly
based upon such behaviors to create
a fulfilling, intuitive experience.
Hello!
3. Before I show my projects, I would like to first outline my design process…
Discover
Design
Test
Reiterate
ABOUT
Intro
The testing phase is when I conduct user tests
in attempt to validate my design and discover
new insights that I can possibly apply to the design.
The dynamic nature of human perception comes
alive at this point.
The “Discover” phase involves discovery the
actual problem that I am solving through
concept mapping, user research and IA techniques
in order to eventually come to a clear, concise
solution that reflects user needs.
After testing, I reiterate my design because it
most likely will never be correct on the first
attempt. In this iteration phase, I often
discover new design solutions which makes the
entire flow come full circle.
The “Design” phase is when I put my research to
practice by sketching out initial design solutions and
user flows to make a set of wireframes that I can
use to create a prototype.
4. TOOLS
And what I like to use:
• I use my Iphone for recording
interviews and taking pictures for
documentation.
• I use Photoshop and Illustrator for high-
level vector and raster graphic editing
and sometimes for mockups.
• Google Docs is my tool of choice
for surveys and spreadsheets. I also
prefer Google Forms for surveys.
• I enjoy using Omnigraffle for pre-
design deliverables such as user
flows and sitemaps.
• Sketch is my tool of choice for fast
wireframes and mockups because
of how it specifically caters to UX/
UI.
• Marvel is a new tool that is great for
quick prototyping.
• Keynote is my preferred
presentation tool for UX due to its
flexibility.
• Tumult Hype is a great high-level,
interactive prototyping (especially
for mobile).
Other Tools That I Have Used:
• Balsamiq
• Powerpoint
• Quicktime
• InDesign
• POP App
• Invision App
• Various Pro Audio
Software
Tools
• Axure
5. Here are my latest projects that I’ll be using to display
my process:
Venmo Donation
This was a class project at
General Assembly where my
group was assigned to add a
donation feature for charities
and crowdfunding projects
Tasks performed:
User research, UX design,
prototyping
KnewQ
This was a client project at General
Assembly where my group
redesigned a prediction-based
social media/game app for iOS.
Tasks performed:
UX research, UX design, gamification
research and strategy, wireframes
knewQ
PROJECTS
PROJECTS
Strand Holiday Microstore
For this project, I was assigned to create a
microsite for Strand book store where I
had to categorize 100 items that our class
picked from the store. As an addition, I
decided to make the site responsive after
the project was presented in class.
Tasks performed:
Contextual Inquiry, Information
Architecture, Wireframing, Prototyping
6. Prototype
Client
Frames
Test Client
Prototype
Heuristic
Analysis
of Screens
Qualitative
Research
App Redesign
Clocked User
Testing of
Redesigned
Prototype
Qualitative and
Academic
Gamification
Research and
Strategy
My Path:
PROJECTS KnewQ App Redesign
PROJECTS
• Competitive/Comparative/
Heuristic Analysis
• User Research (Survey, User
Interviews, Persona
Cultivation)
• Timed User Tests
• User Flows
• Wireframes
• Clickable Prototype
KnewQ’s initial user flows did not work in
a comprehensible manner and users
struggled initially in performing basic
tasks which made us have to prototype
from the beginning using the client’s
screens. As a group, we focused on
building a solid foundation of usability
through lean testing and reiteration
methods and tracking our progress
through timed user tests to show the
client how our design improved the
intuitiveness of the app.
Analyze KnewQ prediction game app
from a UX perspective and supply user
tests and a redesign of the current key
screens of the interface. This was
asked in order to increase the speed
of user flows with quantitative data to
validate our design decisions. Also,
supply any gamification
recommendations from a user
perspective.
Goal:
Deliverables:
My Role:
Takeaways:
(Group of 3)
• UX Researcher: User Interviews,
competitive/comparative analysis,
academic research, gamification
content strategy, creating personas
• UX Designer: Heuristic analysis, user flows,
supplemental sketches wireframes/
mockups (my partner was lead for
wireframes), user testing (both timed and
untimed), iconography testing
7. to No search options appear
to be available with regards
to “my knews” and
“trending” making it difficult
find the content you want
No category filtering
options for trending
Contrast from button
indication communicates
user location effectively
Critical Analysis Positive Analysis
Key
We began by providing a heuristic analysis (in relation to UX)
of current screens and offered suggestions in regards to
improvement after our initial client meeting. This gave us an
idea of the current usability of the app and a gameplan for
attacking the initial prototype for existing screens, user
research and interviews phases of the project.
• Filter option by category
type
• Search bar or segmented
control to allow user to
browse content based
upon interest
Feature Suggestions
PROJECTS
PROJECTS
Then we put together a prototype of the client’s screens and
tested it with users. Testing continued throughout our iterations
of redesigning the app (six iterated prototypes in total) and we
used user testing as both clues for design decisions and design
validation at different stages of the process.
KnewQ App Redesign
Heuristic Analysis Qualitative User Testing
8. Create a New Prediction Post
20 test subjects
NEWINITIAL
5%
15%
30%
20%
30%
5%
10%
85%
:01-:05 (6)
:21-:40 (4)
:41-:60 (4)
1:01-1:20 (3)
1:21-1:40 (1)
:01-:05 (17)
:21-:40 (2)
:41-:60 (1)
1:01-1:20 (0)
1:21-1:40 (0)
As a group, we performed timed user tests after our
redesign in order to compare “measures of success” with
the initial prototype in order to see tangible improvement
(as per request from the client). Overall, our new redesign
was validated by performing faster in every applicable
category where obvious CTA’s weren’t moved (ex. bottom
tab bar icon buttons).
42%
Clarity
8%
Clarity
33%
Clarity
0%
Clarity
0%
Clarity
17%
Clarity
92%
Clarity
92%
Clarity
0%
Clarity
50%
Clarity
0%
Clarity
100%
Clarity
Iconography Test
12 test subjects
Clarity of concept/topic:
I tested the current achievement icons for clarity of
concept to gain an understanding as to whether the
client’s current badge concepts were clear to users.
Overall, the level of understanding varied but the key
takeaway was that simplicity of concept was the main
indicator of icon comprehension. In addition, when
subjects responded to the higher scoring icons, their
responses were delivered quickly without hesitation,
revealing a level of intuitive understanding when tested
with simplistic concepts like sports equipment.
PROJECTS
PROJECTS
Statistical evidence of findings was important to the client so in many of our user tests we provided
numerical statistics by utilizing quantitative testing methods when we performed usability and gamification
tests.
KnewQ App Redesign
9. During testing, users were unable to identify
KnewQ logo - many thought it was a search
option
Users confused about “previous/next” function
Users showed confusions as to why location
would be necessary to post
Additionally, no user expressed a desire for
location services integration
Modified Q button to “+”
button as it is more
intuitive for users
Users expressed desire to
send challenges
directly to friends
Used text+icons to better
communicate options
Further developed “Send
To” option to allow for
global posts as well as
private/group messaging
Used text+icons to better
communicate options
Further developed “Send
To” option to allow for
global posts as well as
private/group messaging
0.1
0.2
0.3
0.3
1.1
1.2
2.1
2.2
3.1
Carrier 4:00 PM 100%
Create KnewQ
Add
Categories
Add
end-time
Add
Picture
Add
Related Link
Cancel Send
TIP
Ask a specific yes/no question, like
“Will the Yankees win the game tonight?”
Send Post to: Public
Original 1st iteratiOn 3rd iteratiOn
Carrier 4:00 PM 100%
Create KnewQ Done
TIP
Ask a specific yes/no question, like
“Will the Yankees win the game tonight?”
Send to…
Set End Time Add Categories
0.1
0.3
0.2
Activity ProfileCreateSearch Leaders
+
1.1
1.2
2.2
2.1
3.1
2nd IteratIon
PROJECTS
PROJECTS
KnewQ App Redesign
Through our various types of user tests, we eventually went through several iterations of our prototypes(s).
This is an example showcases how we redesigned how users can create a new predictions in the game.
Our design decisions included: clearer CTA on landing page, content privacy control, clearer CTA’s for on
“create new” page that centralizes features that were previously scattered throughout the app.
Wireframe Annotations
0.3
Created clear CTA buttons for
essential features on “create
Knew” screen that put all
features in one place.
Added a bar at the top of text area
to showcase privacy options for
new predictions.
10. KnewQ App RedesignPROJECTS
PROJECTS
Our prototype went through six iterations of testing and redesign. Here is our latest and greatest:
KnewQ Prototype
Create “KnewQ” Screen Profile Screen with Stats
Landing Page When
a Prediction is Made
“Select Friends” Screen
Prototype
11. CLASS PROJECT
Concept
Mapping/Survey
Comparative &
Competitive
Analysis
Solution Hypothesis/
Sitemap
User
Interviews
and Personas
Reiterate
Design
Prototyping and
Testing
Prototyping
second iteration
PROJECTS
My Path:
PROJECTS
Goal:
Implement a donation feature into
Venmo’s current interface that
allows users to follow and donate to
their favorite “causes” whether it be
charity organization or
crowdfunding projects on
Kickstarter or Indiegogo.
• Competitive/
Comparative Analysis
• User Research (Survey,
User Interviews, Persona
Cultivation)
• Complete Sitemap
• User Flows
• Wireframes
• Clickable Prototype
Deliverables:
My Role:
Research pointed to Venmo users
having an open willingness to utilize
a donation feature if it were
implanted in Venmo’s current
interface. However, a clear
distinction between charity
donations and crowdfunding
contributions needed to be
addressed in the feature design
because of a cultural differentiation.
Takeaways:
Venmo Donation Feature
(Group of 3)
• UX Researcher: User Interviews,
competitive/comparative analysis,
survey, creating personas
• UX Designer: Site map, user flows,
sketching/design studio, user testing,
prototyping (multiple iterations)
12. The main focus for implementing the donation
feature in Venmo was how to display and categorize
donation capabilities based upon how our user
research reflected a substantial level of diversity in
the user demographic that we were designing for.
Surveys
My team began by constructing a survey to
understand user habits in regards to social media
and e-payment (Venmo’s two core themes) to weed
out key users for interviews and further research to
develop personas.
Analysis
We also performed competitive and comparative
analysis in order to understand the features that
could be considered common conventions for
donation platforms and social media.
CLASS PROJECT
PROJECTS
PROJECTS
Business
Model
3% fee on credit
card transactions
(free debit
transactions)
Advertising All P2P
transactions
are free.
Collects 5%
fee for funds
collected
Marketing to
brands on
reputation
Non-profit,
based on org
relations
Target
Audience
P2P users,
18-24
Active Social
Media Users
Anyone using
P2P payments
Artistic project/
cause
enthusiasts
People who want
to pay
merchants, peers
via e-pay
People who want
to donate on the
go
Activity
Feeds
pay
Personal, friends, public Personal, public
Venmo Donation Feature
13. CLASS PROJECT
PROJECTS
Concept Mapping
We utilized concept maps and card
sorting to establish overlapping trends
between users as a start point for
personas.
Personas
Through interviews and concept mapping, we found
overlapping trends in our research and formulated
personas to serve as three main representations of
our user base that we are designing for. I wrote two
of the three persona types and crafted what features
would be needed based on user desires.
PROJECTS
User Flows
Then we created user flows for our persona
based around utilizing our new design features,
such a new donation feed and search bar
embedded in the feed.
0.1
0.1
0.1
We utilized concept maps and
card sorting to establish
overlapping trends between users.
User Interviews
We interviewed key users in order to identify
common behaviors in regards to social media and
e-payment applications through identifying user
pains points, pleasures, contexts and behaviors.
Venmo Donation Feature
14. Home/Landing page
Options from Home
Pay Screen from Home
Transaction Screen from
Home
Displayed Content from
Profile
Features from Profile
Options from Hamburger Button
(Settings)
Settings Sub-Options
Legend
CLASS PROJECT
Site Map
• I created a site map for
Venmo’s current interface
along with our added features
built into the landing page and
settings page to gain a better
understanding of the content
hierarchy.
PROJECTS
0.1
PROJECTS
0.1
• Highlights our design decision to
use “causes” as an umbrella term with
“non-profit/charities” and
“crowdfunding” as sub-categories.
• This decision caters to both the
users’ desire to access content quickly
but also making the cultural distinction
between “cause” types in the search
menu.
“If we provide a structure that differentiates
between causes and people on Venmo, then we
can provide more efficient searching capabilities
because users want to browse and search for
causes.”
Solution Hypothesis
(i.e. my favorite UX technique)
In the middle of our research, we realized that the initial
scope of the project began changing due to the clear
demographic distinction between users who donating to
charities and users who only contributed to
crowdfunding projects. For clarification, I suggested that
we should brainstorm a solution hypothesis (if/then
statement) that directly states what we are solving. His
helped us stay on task and not get lost in the process.
If [action] then [outcome] because
[customer need/problem]
Venmo Donation Feature
15. CLASS PROJECT
PROJECTS
PROJECTS
My final task in this project was creating the prototype of 50+ wireframes which could be seen here:
Landing Page
“Causes” Activity Feed
with Search Bar
“Cause” Profile Page
with ability to “Follow”
Prototype
Venmo Prototype
Venmo Donation Feature
16. To create a mid-fidelity prototype of
a microsite for web based upon
100 hand-picked items by our class
that are categorized utilizing user
testing and information architecture
techniques. On my own, I
eventually decided to add
responsive wireframes to cater to
mobile and tablet users.
• Competitive/Comparative
Analysis
• User Research (Card Sorting,
User Interviews, User Tests)
• Sitemap
• User Flows (based upon
designated personas)
• Wireframes
• Clickable Prototype of site with
check-out flow
This project had several challenges
due to the diverse clientele of book
stores and the unique inventory of
Strand. This made the
categorization and site aesthetic a
unique project where I needed to
test subjects of different age and
cultural demographics in order to
get a true reflection of user needs.
Goal:
Deliverables:
My Role:
Takeaways:
PROJECTS
PROJECTS
CLASS PROJECT
Strand Microsite
Contextu
al Inquiry
IA/User Card
sorting
Sketching
Wireframing
Reiteration,
Responsive
Wireframing
Prototyping
User Interviews
My Path:
(Solo Project)
• UX Researcher: User Interviews,
Competitive/comparative analysis
• UX/UI Designer: Sketches, user flows,
wireframes, prototype
• Information Architect: Contextual
Inquiry, Card sorting (open and
closed), site map, users flows
Strand Holiday
Picks
17. CONTACT
Contextual Inquiry
I began by going to Strand books and
selecting inventory for the microsite. This
also allowed me to see Strand users in the
store and observe how they went about
finding items in a physical setting.
User Tests
Various iterations of this project, particularly the
checkout flow were tested in order to gain a solid
foundation of user feedback to validate (or
invalidate) my design. My initial takeaway was that
my checkout was initially way too many steps and
had to be narrowed. down.
Checkout Flow
One of the key tasks for this project was
creating a checkout flow that catered to
the needs of the user. Investing the
checkout flow input was a paint point for
users so in my reiteration, the theme for my
checkout flow was to have playful copy for
quality user engagement.
Card Sorting
Card sorting was one of the main
themes of this project and it took
multiple open and closed sorts to make
sense of the inventory I was assigned to
categorize for the microsite.
CLASS PROJECT
PROJECTS
Billing Info Wireframe Personal Info Wireframe
This is making a joke out of what is general the most
tedious aspect of e-commerce, entering credit
card info.
I broke the user information section into two parts for
space so I wanted to give words of encouragement
to the user for engagement retention.
Strand Microsite
18. CONTACT
CLASS PROJECT
PROJECTS
Sample of Iteration Takeaways
0.1
0.2
1.0
1.1
2.0
2.1
2.2
0.1
0.2
1.0
1.1
2.0
2.1
2.2
Originally had items in box view
but in certain tests users felt as though this
view caused unnecessary scrolling. This
made me shorten the homepage fro
clarity.
Hero image on homepage was far too
wide in initial sketches. Realistically, this
wouldn’t work on a home page. This
made me pay more attention to image
boxes in wireframes
Top navigation bar was had far too many
features for a micro site. Narrowed it
down in final iteration but became
aware of the problem at this stage.
Font in title did not fit the bookstore
aesthetic based upon testing. Switched
the font so that there would be any
distraction in branding.
Created a carousel view for the hero
image section of the homepage to
create less scrolling. I wound up keeping
the carousel but scrapping this design
because it tested as a “dated” look.
Formalized the side navigation
categorization
Added star rankings and
recommendations on homepage after
testing feedback indicating the need for
it. Initially only had it on product pages.
Strand Microsite
19. CONTACT
This is my original prototype, I am continuing to reiterate upon this project and am currently
updating the prototype in InVision.
Prototype
Strand Prototype
CLASS PROJECT
PROJECTS
