kelli vanover_portfolio_5.12.16
TRANSCRIPT
Kelli Nichole VanoverUX Research & Design
Product Design
Portfolio
Contact Info
(614)485-8744
Resume
/in/kelli nichole vanover
A Little About Me I am constantly curious and a never-ending student. I love to challenge myself; with patience and persistence anything is possible. As a product designer, I use my strength in storytelling and my passion for people to fully understand problems and design thoughtful solutions. A great UX process is just like a great story, engaging from beginning to end.Prior to my UX experience, I worked for several years in nonprofit communications focusing 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. I am a firm believer in a structured yet flexible product design process as a driver of product innovation. I am eager to work on projects that excite, inspire and drive people to action. I am looking to invest my talents in a team that successfully balances product growth and innovation with people-first management practices.
Tool Kit
My Design Process Research
Wireframes Usability Testing Hi-Fi Mock-Ups Prototyping
User Research Comparative Analysis Ideation Personas Heuristic Evaluation Site Mapping User Flows
Design
Hi! I’m Kelli nichole Vanover.
I’m a Product Designer in Brooklyn.
Contact Info(614)485-8744
Resume
/in/kelli nichole vanover
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 Flow Comp.Analysis
User Research Usability Test
Tags: Context Inquiry Comp.Analysis
Wireframes Usability Testing Hi-Fi Mock-Ups Prototyping
Case Study
Case Study
Case Study Prototype
Prototype
Prototype
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
project 1 Project 2 project 3
Project Timeline
My Role:
Team VenmoKelli Erika Shaun
Usability Testing
User Survey
Guerrilla User TestingHeuristic Eval.
Comparative Analysis
User Personas
App Map: Menu Process
WireframesUser Flow: Menu Process
Hi-Fi Mock-Ups
Class Presentation
Case Study
ClientPresentation
project 1 Project 2 project 3
Our team began analyzing the business, brand, & user goals which were 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 of 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
Transaction screens
1 2 3 4Venmo 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
Pay\Request Screen Donation PromptScreen
Confirm Pay\RequestScreen
Social NewsfeedScreen
1 2 3 4
1 2 3 4Causes 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 BarScreen
Main CausesScreen
Main CausesScreen (hidden)
CampaignScreen
Menu Bar Screens
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
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.
Solution:
Prototype
Project Timeline
Team 2100Kelli 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
project 1 Project 2 project 3
Traces Zombies Run Geocache Strava
2100 User Flow
Use Camera
Open App Play episodeChoose 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
37
1
2
3
4
5
6
7
8
9
10
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 feature of this screen is related activities which the user can do in real life in order to offset their carbon footprint.
The Resources screen shows the user the state of their utilities (power and water) in real time. A main feature of this screen is related activities which the user can do in real life in order to offset their carbon footprint.
The Checklist is where a user can go to see the status of the items they have collected and what is still pending. This is based on the challenge presented in season they are listening to. In addition, this screen includes a progress bar showing how much of the challenge is completed, and how many Carbon Offset points the user has collected.
When a user clicks a real-life carbon offset activity form the Conditions and Resources screen, they are taken to a screen describing their activity of choice. Here the user taps on whether they are interested in the activity or not. Depending on their choice, they may receive Carbon Offset points.
Challenges are completed by going to real-life places, based on the user’s current location.
The Menu Screen contains access to a user’s Achievements gathered by completing challenges; Maps Per Season for when the user is not playing the episode; Saved Locations of places the user wants to go back to; Photos taken in-app; and About information on how 2100 works.
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.
Choose “your adventure” Podcast screens
1 2 3 4Episode 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 EpisodeScreen
LocationInformation Screen
1 2 3 4Revealed 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
LocationOverviewScreen
Map LocationScreen
CheckpointRevealScreen
SuppliesChecklistScreen
Menu Bar screens
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
Project Timeline
Team BundleKelli Lisa Justin
project 1 Project 2 project 3
My Role:
Context Inquiry
User SurveysHeuristic Eval.
Comparative Analysis Site Map
WireframesUser Flows Client & ClassPresentation
Case Study
BBUs
Usability Testing
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 Bundle and to establish “best practices” for account management pages on these sites. 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 an account management page. These pages were where the most order customization would occur.
Our team conducted a contextual inquiry for in-store and online orders to understand how 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 the product, as the primary cause for user’s concern was not fully understanding the product and how it was of benefit to mom and baby.
Analytics, Surveys, & Interviews
Usability TestingContextual Inquiry
Product Page Screens
1 2 3 4Product 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 PageScreen
Product OptionsScreen
IngredientsDrop-DownScreen
Other FlavorsScreen
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 SubscriptionDetails
PersonalDetails
Refer a friend
Account Management Screen
1 2
3 4
1 2 3 4