2. A Little About Me.
I am continuously curious and a never-ending student. I love
to challenge myself; with patience and persistence anything is
possible. As a designer, I use my strength in storytelling and my
compassion for others to solve problems through technology
and design. To me, a great UX process is just like a great story,
engaging from beginning to end. That’s why I’m passionate
about UX. My professional background is in nonprofit
communications focused on visual communications, human
rights, and multimedia advocacy. I believe UX and human rights
are directly connected as both deal with accessibility, one to
rights and the other to technology. UX is the process of making
technology more accessible to all through identifying problems,
understanding user motivations, creating thoughtful solutions,
and effectively communicating those solutions to others.
My UX Process
UX Tool Kit
Photoshop InDesign Axure RP Sketch
Ps Ai Id in
Research
Info Architecture
UI Design
User Research Comparative Analysis Ideation Personas
Wireframes Usability Testing Hi-Fi Mock-Ups Prototyping
Heuristic Evaluation Site Mapping User Flows
Illustrator Omnigraffle InVision
Hi! I’m Kelli Vanover.
I’m a UX Designer in Brooklyn.
3. Portfolio Contents
Venmo
2100
Create a donation feature that seamlessly integrates with Venmo’s existing mobile payment
platform, encouraging users to round up cents from every transaction to donate to various
campaigns based on their interests.
Design a mobile app that reinforces the importance of climate change and the urgency to
reduce every individual’s carbon footprint. The solution was to design an interactive podcast
that utilizes augmented reality to simulate post-environmental apocalypse NYC where users
must locate virtual, location-based checkpoints in order to scavenge for supplies necessary
for survival in each season.
Determine the reason(s) behind website bounce rate, cart abandonment, and subscription
cancellations. Reorganized relevant product information to foster user trust in brand &
confidence in product, designed an account management system, and improved the
responsive functionality across mobile platforms and added a QR code to product label to
facilitate in-store purchases.
Bundle
BBU Goals Guerrilla User Test
Tags:
Persona Dev.1.
2.
3.
Comp.Analysis
Brainstorm Guerrilla User Test
Tags:
User FlowComp.Analysis
User Research Usability Test
Tags:
Context InquiryComp.Analysis
Case Study
Case Study
Case Study
Prototype
Prototype
Prototype
4. project 1 Project 2 project 3
Case Study
Venmo Create a donation feature that seamlessly integrates
with Venmo’s existing mobile payment platform.
Provide users the option to “roll up” their change to the nearest dollar on every Venmo transaction,
as well as provide a campaign database where users can customize their donation options based on
personal interests, allowing users to interact with the feature in a minimal, yet meaningful way.
Solution:
Prototype
5. project 1 Project 2 project 3
Project Timeline
My Role:
Team Venmo
Kelli Erika Shaun
Usability Testing
User Survey
Guerrilla User
TestingHeuristic Eval.
Comparative
Analysis
User
Personas
App Map:
Menu Process
Wireframes
User Flow:
Menu Process
Hi-Fi Mock-Ups
Class Presentation
Case Study
Client
Presentation
6. project 1 Project 2 project 3
Ourteambegananalyzingthebusiness,brand,&usergoalswhichwere
critical to designing a solution that would solve the problem for users
and Venmo equally. Key insights from this particular brainstorming
session included understanding Venmo’s “MVP” as “transactions”--
thus our solution could not interfere with the transaction completion
process, but still needed to engage users during this stage.
In order to verify our survey and interview results surrounding user’s
spending habits, donation motivations, and other socially influenced
behaviors, our team created a guerrilla user test scenario to determine
if the results of our user research reflected user’s actual behaviors.
Based on the final results of our user research, our team developed 4
user personas who’s behaviors, motivations, and goals were directly in
line with the types of user’s Venmo could expect to be using the new
donation feature of their app, which helped steer our design process.
Business, Brand, & User Goals
Guerrilla User Testing
Comparative Analysis
User Persona Development
Because our problem centered around donation platforms, our team
looked at the top 8 fundraising platforms, and the types on information
that influence donors. Based on Venmo’s target audience--millennials--
our team focused our goals for the feature to solicit donations from
those who already use Venmo, regardless of past donation history, and
which factors would most influence them to donate. Insights gained
from this analysis included a donor preference for small increments,
preference to donate to a cause not necessarily a name brand, and
the perceived success of the campaign as an influential factor. It was
unclear how much social circles influenced a potential donor’s decision.
PayPal Causes Kickstarter OneToday
7. Transaction screens
1 2 3 4
Venmo payout/request
form remains unchanged
from original, as familiari-
ty is crucial to user’s trust
in app.
Donation request slides
up prompting users to
round up change, with
option to skip dona-
tion--must edit settings to
disable.
Totals shown: pay to
individual total, donation
to campaign, and total
transaction amount. Re-
tain confirmation tap to
make payment.
Users are able to see
the transaction in sep-
arate statuses within
the various feeds.
project 1 Project 2 project 3
PayRequest Screen
Donation Prompt
Screen
Confirm
PayRequest
Screen
Social
Newsfeed
Screen
1 2 3 4
8. 1 2 3 4
Causes section within
menu. Nested within
current menu navigation
of app.
Causes main page: ability
to search specific cam-
paigns, select interests
which determine cam-
paigns that pop up.
Ability to hide each
section once completed,
as well as visit individual
campaign pages that ap-
pear in suggested results.
Donate directly to or
“friend“ a campaign.
Shows campaign sta-
tus bar and displays
those who support
the campaign.
1 2 3 4
project 1 Project 2 project 3
Menu Bar
Screen
Main Causes
Screen
Main Causes
Screen (hidden)
Campaign
Screen
Menu Bar Screens
9. project 1 Project 2 project 3
Case Study
2100 Design a mobile app that reinforces the importance of
climate change & the urgency to reduce every individual’s
carbon footprint.
WINTER 2100 29:05
Soaring above the city at 1,776 feet, One World Trade
Center was America's tallest building. The 104-story
building featured a grand lobby and observation deck
with unparalleled views. Sustainable design was central
to One WTC's development, integrating renewable
energy, interior daylighting, reuse of rainwater, and
recycled construction debris and materials. Heralded as
safe, sustainable, and artistically dynamic - One WTC
stands today as one of the great iconic landmarks of the
New York City of old.
ONE WORLD TRADE CENTER
BuILT IN 2014 Abandoned
95%9:23 PMAT&T
LOCATION
GO To Location
Save For Later
Thesolutionwastodesignaninteractivepodcastthatutilizes augmentedrealitytosimulatepost-
environmental apocalypse NYC where users must locate virtual, location-based checkpoints in
order to scavenge for supplies necessary for survival in each season.
Solution:
Prototype
10. Project Timeline
Team 2100
Kelli Ina
project 1 Project 2 project 3
My Role:
User Survey
Partner Research
& Branding
Guerrilla User
TestingConcept Map
Comparative
Analysis Usability Testing
Class Presentation
Case Study
Prototype
Wireframes
Technical
Research
11. project 1 Project 2 project 3
Traces Zombies Run Geocache Strava
2100 User Flow
Use Camera
Open App Play episode
Choose
episode
Interact with
episode
Conditions Resources Checklist
Complete
Challenges
Complete Challenge
Menu
Achievements
Maps Per
Season
Saved
Locations
Photos
About
Map
Location Info
Carbon Offset
Activities
2
1
10
5 6
4 8
9
3
7
1
2
3
4
There are 4 episodes in the first season of the application: Winter, Spring, Summer and Fall.
Every episode has a set of challenges that a user must complete in order to move forward. The challenges are described in the
episode and can be found through the map.
The camera is used to access the 2100 info and images through the use of Augmented Reality (AR). Users can interact with what
they see on the screen, as well as take pictures.
The map allows users to view basic information about places within a 3 miles of their current location. As they move different
locations become available to view. Additionally, when a user clicks on a pin, they get additional info and can navigate to it.
The Conditions screen shows the user the present weather conditions, potential disasters and the season’s survival plan. A main
Concept Mapping
Comparative Analysis
Guerrilla User Testing
User Flow / App Map
During our brainstorm session, our team had to determine which
features were absolutely crucial to the MVP and which would be
important, but not crucial due to time constraints of project using the
MOSCOW Method. We also had to determine how these features
would ultimately connect to the actionable challenges we would be
asking our users to make throughout the interactive podcast.
Our team conducted a guerrilla user test to solidify our overall concept
of our app--our theory being that a utility-based solution solving for
carbon footprint would not be used, but a gaming challenge would
engage users. We asked users to try to recycle a soda can, and timed
their results. Results show users will only recycle the soda can when
effort required is less or equal to the perception of inconvenience.
Our team mapped out how the users might move through the app.
Without having the actual podcast audio content to determine our
directions, we had to envision scenarios in which a user may be using
the app and what they would want to do with it, which was verified
through usability testing.
Our team compared several interactive apps that require users to
engage with the app in an active way.We found there is a strong market
for apps that spin mundane tasks like working out, and interactive
game scenarios that include scavenger hunts in either the physical
world (Geocache) or digital world (Ingress). These comparisons were
useful in determining how users would expect to be able to interact
with 2100. We aimed for interactive and passive engagement options.
12. Choose “your adventure” Podcast screens
1 2 3 4
Episode selection screen:
if image clicked, goes to
play screen. If “info” icon
is clicked, goes to epi-
sode information page.
Episode information page;
can enlarge photos dis-
played in middle of screen
as overlay. “play now” takes
user to play screen. Back
buttons goes to episode
selection.
Play episode from this
screen and control its
progress. Can hide screen
to reveal location overview
(initial) or map location
screen. Can navigate with
menu bar at bottom.
Location information
screen allows user to
get more information
about the available lo-
cations on the location
overview screen.
1 2 3 4
project 1 Project 2 project 3
Episode
Selection
Screen
Episode
Information
Screen
Play Episode
Screen
Location
Information
Screen
13. 1 2 3 4
Revealed after episode
begins to play. Get more
information about each
location by clicking on
the locations available.
After a location is chosen,
the map will use current
location to map how to
get there. User must take
exact route in order to
use AR view. Map can
zoom in and out.
Once a checkpoint is
found, users clicks on
screen to reveal the con-
tents which include sur-
vival items, and historical
context explaining how
2100 came to be reality.
Checklist tracks which
items have been locat-
ed and which still need
to be found in order to
complete the episode.
1 2 3 4
project 1 Project 2 project 3
Location
Overview
Screen
Map Location
Screen
Checkpoint
Reveal
Screen
Supplies
Checklist
Screen
Menu Bar screens
14. project 1 Project 2 project 3
Case Study
Determine the reason(s) behind website bounce rate,
cart abandonment, and subscription cancellations.
Reorganized relevant product information to foster user trust in brand & confidence in product,
designed an account management system, and improved the responsive functionality across
mobile platforms and added a QR code to product label to facilitate in-store purchases.
Solution:
Prototype
Bundle
15. Project Timeline
Team Bundle
Kelli Lisa Justin
project 1 Project 2 project 3
My Role:
Context Inquiry
User SurveysHeuristic Eval.
Comparative
Analysis Site Map
WireframesUser Flows
Client & Class
Presentation
Case Study
BBUs
Usability Testing
16. project 1 Project 2 project 3
Plated Clover Juice Dollar
Shave Club
BluePrint
Comparative Analysis
Our team analyzed several companies with subscription services in
order to understand which areas were lacking from the Bundle and to
establish“bestpractices”foraccountmanagementpagesonthesesites.
We found that the inability to manage subscription services through
Bundle contributed to nearly 90% of the reasons for subscription
cancellation, so our team designed an account management page to
provide more control to users after they have signed up for services.
Our team conducted in-depth research to understand the buying
experience expecting/new mothers go through.We sent out 2 surveys,
conducted several interviews, and analyzed the current reviews of the
product as well as the reasons subscriptions were being cancelled
from the analytics provided by our client.
After determining the necessary features each page would have, our
team went about usability testing utilizing scenarios our personas
would likely encounter on the site. We made the most drastic changes
to the product page, and added account management pages. These
pages were where the most order customization would occur.
Our team conducted a contextual inquiry for in-store and online orders
to understand the purchasing process was for users. We made several
recommendations to our client to improve these areas, including the
addition of a QR code on the product itself in order to facilitate in-store
purchases of product, as a major cause for user concern was not fully
understanding the product and how it benefit mom and baby.
Analytics, Surveys, & Interviews
Usability Testing
Contextual Inquiry
17. Product Page Screens
1 2 3 4
Product screen for mobile
displaying the images of
product selected and di-
etary restrictions in image
form that could influence
purchase of product.
Product description,
price, purchasing and
subscription options,
including ability to make
variety pack shown.
Drop-down menus of pro-
duce ingredients, added vi-
tamin supplements, product
reviews by flavor, and store
locator in order to try before
purchase.
Additional flavors of
the same product and
links to those product
pages that display the
same information as
this page.
1 2 3 4
project 1 Project 2 project 3
Product Page
Screen
Product
Options
Screen
Ingredients
Drop-Down
Screen
Other Flavors
Screen
18. 1 2 3 4
“Next Bundle” displays
when the next subscription
order will be mailed. Ability
to turn e-mail reminders on
and off with toggle, as well
as pause subscription.
“Subscription Details”
allow the user to edit the
frequency of their sub-
scription, the total num-
ber of bottles received,
as well as the totals of the
flavors included.
“Personal Details” allow
the user to edit contact
info, addresses, and bill-
ing information linked to
the subscription.
“Refer a Friend” allows
users to email or share
through social net-
works a discount for
products from Bundle,
including a custom-
project 1 Project 2 project 3
Next Bundle
Subscription
Details
Personal
Details
Refer a friend
Account Management Screen
1 2
3 4
1 2 3 4