ux portfolio 4:22
TRANSCRIPT
Sean Culley | UX PortfolioMarch 2015
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!
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.
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
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
KnewQThis 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
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
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
Create a New Prediction Post 20 test subjects
NEW INITIAL
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
During testing, users were unable to identify KnewQ logo - many thought it was a search optionUsers confused about “previous/next” functionUsers showed confusions as to why location would be necessary to postAdditionally, no user expressed a desire for location services integration
Modified Q button to “+” button as it is more intuitive for usersUsers expressed desire to send challenges directly to friends
Used text+icons to better communicate optionsFurther developed “Send To” option to allow for global posts as well as private/group messaging
Used text+icons to better communicate optionsFurther developed “Send To” option to allow for global posts as well as private/group messaging
0.1
0.20.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 iteratiOnCarrier 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.
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
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:
This was a group project where I had two partners. For the first phase, my duties consisted of mostly User Research. I used concept mapping and qualitative research methods in order to pinpoint user habits, particularly in user interviewing and persona creation. In the design phase, my key contribution was creating the prototype and reiterating on our design.
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)
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
payPersonal, friends, public Personal, public
Venmo Donation Feature
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.10.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
Home/Landing page
Options from Home
Pay Screen from Home
Transaction Screen from Home
Displayed Content from ProfileFeatures 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
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
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
Contextual 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
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
CONTACT
CLASS PROJECT
PROJECTS
Sample of Iteration Takeaways
0.1
0.2
1.01.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
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
CONTACT
CONTACT
SEAN CULLEY
EMAIL: [email protected]
PHONE: 201-704-3163
LINKEDIN: LINKEDIN.COM/IN CSCULLEY
THANKS FOR STOPPING BY!