Upload
lucas-garcia-de-polavieja
View
121
Download
5
Tags:
Embed Size (px)
DESCRIPTION
This is a student project for the UXDI program at GA. Intro: Instagram is currently a mobile application for people who want to share pictures or videos with followers. It is designed for quick, easy, on-the-go sharing with the ability to comment, like and tag people in photos. To diversify its revenue stream beyond just advertising, Instagram is a adding a new feature to it’s app. It will now allow users to customize and purchase physical versions of their photos.
Citation preview
I N T R O D U C E S
Project 3. Team X. 2014 UXDI Winter students: Angelynn Nakaguchi, Gregg Antonucci, Roxanne Mustafa, Lucas Polavieja
T H E P R I N T F E A T U R E
Project 3. Team X. 2014 UXDI Winter students: Angelynn Nakaguchi, Gregg Antonucci, Roxanne Mustafa, Lucas Polavieja
Project 3. Team X.
About the product
About the project
T H E P R I N T F E A T U R E
Instagram is currently a mobile application for people who want to share pictures or videos with followers. It is designed for quick, easy, on-the-go sharing with the ability to comment, like and tag people in photos.
To diversify its revenue stream beyond just advertising, Instagram is a adding a new feature to it’s app. It will now allow users to customize and purchase physical versions of their photos.
In this case study we will:• identify where in the app we will introduce this feature• describe how people edit and customize their photos
for printing• show a flow for selecting and editing photos• show a checkout and delivery flow• show key screens keeping the look and feel of Instagram
Discovery
User research
Design iterations
Prototype
Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Case study
Project 3. Team X. T H E P R I N T F E A T U R E
How much can we change the App?Always respecting our current users. Not making the new feature something they’d feel the business is taking advantage - asking for their money-. Make clear this is not an e-commerce with the sole purpose of selling, is just a new service that the user can take it or leave it.
What is User Behavior within the App?It will remain as “sharing and posting” with the added value of giving the opportunity to stay in the App if they feel like printing their content.
Where can we perform new functions in the App?Making clear both tasks of “sharing and posting” and “printing” are separated; an App - the feature of printing- within the App - Instagram-. Otherwise the user would be upset and leave.
Who would this feature be used by?Nostalgic-skeptical-romantic Instagram users that believe in a tangible world.
Discovery Design Iterations Prototype
Discovery
Process
User research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Research
Major increase in Users when New Feature is added
Sources QuantcastGigaom
Significant increase in users when new feature is added.
Discovery
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
• SHUTTERFLY
• MOO.COM
• PRINTSTAGRAM
• ARTIFACT UPRISING
• KANVESS
• FOXGRAM
• SNAPSTAGRAM
MANYPRODUCTS
FEWERPRODUCTS
FEWERFEATURES
MANY FEATURES
FUTURE
Discovery
Competitive analysis
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Method: We surveyed Instagram users with 10 questions about printing behavior.
Findings: • More women print than men.• Of the women and men who did
print, the majority were mostly printing gifts.
• The content of the pictures was mainly family, friends and travel.
• A large percentage of Instagram users do print but only a small percentage were printing Instagram photos.
User research
By thenumbers
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Opportunities identified: • Easy to use• Customization• Unique products• individuals: squares, retro/polaroids style prints• mini-books• stickers, tattoos• flip video - convert videos to flip book• calendar (future item)
User research
By thenumbers
Discovery Design Iterations PrototypeUser research Looking ahead
Personas
Project 3. Team X. T H E P R I N T F E A T U R E
Mary Childs Monica Lone John SmithAGE 35-40 25-30 30-35
STATUS Married, with one child Single Married, with two children.
QUOTE “I don’t like to share everything I do but I like to give gifts”
“I like the idea of scrapbooking and printing, like frames, but I just never get around to it.”
“The kids grow up so fast. I don’t want to miss a thing. Printed photos feel more permanent.”
CHARACTERISTICS Very creative (artsy-crafty)Tech Savy
Tech savvy.
Thoughtful of other people.
Conscientious buyer.
Very creative (artsy-crafty)Tech Savy
Non-creativeTech Savy
BEHAVIORS Power User of Social MediaPrints SometimesGift Giver
Power User of Social MediaDoes Not Prints OftenLikes Humorous Gifts
Power User of Social MediaPrints OftenTakes Pics Often of Family
GOALS Wants to give gifts to othersthat matter.Wants to print special occasions for herself.
Wants to print more with minimal effort.Wants to print more mementos.
Wants collect mementos of family and kidsWants to make quality printseasily and affordably.
User research
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Method: The group created paper wireframes and flows.Sketches
Discovery Design Iterations PrototypeUser research Looking ahead
Designiteration 1
Project 3. Team X. T H E P R I N T F E A T U R E
1. PopApp 2. Flinto
Prototypes
Designiteration 1
Discovery Design Iterations PrototypeUser research Looking ahead
Method: The group created paper wireframes and flows, to then develop two on-the-fly prototypes in PopApp and Flinto for the first usability testing.
Project 3. Team X. T H E P R I N T F E A T U R E
Screen samples
Designiteration 1
Discovery Design Iterations PrototypeUser research Looking ahead
Findings: • Most users did not like the
location of the print icon.• Users did not see clearly how to
add pictures.• Editing and arranging photos from
sources was not clear.
Opportunities identified: • A way to catalog/save/view the
pictures saved from the feed into a print queue.
• Make “Save to Print” part of “like” and “comment” features.
• Security features need to address the user who may not want any print notifications.
Project 3. Team X. T H E P R I N T F E A T U R E
EDITINGSELECT PRODUCT
PAST PROJECT
CURRENT PROJECT
NEW PROJECT
TAG
YOUR FEED
YOUR PROFILE
FOLLOWERSPROFILE
ADD PHOTOS
CART
PRINT HISTORY
PRINT SCENARIOS
NEW PRINT PROJECT
SAVE(to print queue)
Designiteration 1
Print paths
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Findings: Allowing others to print shared photos may be enough of a security concern to drive some users away. Settings need to be clear and customizable.
2. Default Settings: restriction of the access for other users to print user’s photos.
3. “Allow Printing” setting: Selective print access - the user can manually select who is allowed to print his/her photos.
1. New “Print” option in Settings.
Opportunities identified:
Security
Discovery Design Iterations PrototypeUser research Looking ahead
Designiteration 1
Project 3. Team X. T H E P R I N T F E A T U R E
No Notification but request is stored
PROJECT
FOLLOWERSPROFILE
FOLLOWERSPROFILE
SEND PRINT REQUEST
PIC
BASED ON FOLLOWERS
SETTINGS
TURNED OFF
: PRINT REQUEST
NOTIFICATION
FROM EVERYONE
FROM PEOPLE I KNOW
: PRINT REQUEST
RECEVIED?
Only Notifications from Followers
Notifications from anyone
Notification
Discovery Design Iterations PrototypeUser research Looking ahead
Designiteration 1
Project 3. Team X. T H E P R I N T F E A T U R E
Print request
Designiteration 1
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Method: The group created a prototype using Axure.
Findings: • Most users were confused about the
function of the print icon.• Users did not understand how to create
print projects.
Opportunities identified:• Print icon should be in an obvious place.• Check out flow should function like a hub.• Saved pictures should be accessible for
future use, so that Users can tag pictures and refer to them at a later time.
• Push the User throughout the checkout flow.
Hypothesis
Designiteration 1
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Method: The team created a prototype in Axure that captured the screen-based version of the experience.
Awareness: Awareness of the new feature.
Set up and first run:Current Instagram Users create and purchase “print project.”
AxurePrototype
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Overall Impression:• Not disruptive to primary
user behavior (sharing and posting photos and videos).
• Need easier access to project history.• Further engagement through tapping on the picture
- not looking below picture.• Is Brand willing to change new design of hiding
header in feed to stay static so user can see interaction with print icon.
• Is there a bridge between home, print and purchase part of app -hamburger menu?
Core product experience:• Print Icon is Intuitive• Editing is Clear• Checkout Flow is clear• Starting Project is Clear
Looking ahead
Moving forward
Discovery Design Iterations PrototypeUser research Looking ahead
Project 3. Team X. T H E P R I N T F E A T U R E
Instagram photos
Printer feature
Squares
iPhone photos
@ and/or # search
Your feed
Your profile
Somebody’s profile
Camera roll and/or other folder search
Albums
Stickers Minibook Tattoo Flipbook Home/Feed Your projects Cart Information
Camera roll
Instagram videos
@ and/or # search
Your feed
Your profile
Somebody’s profile
FunctionsPrintSaveDelete
AccessNo access
Upon request
AccessNo access
Upon request
Your photos
Somebody’s photos
AccessNo access
Upon request
Your videos
Somebody’s videos
AccessNo access
Upon request
Current projects
Past projects
FunctionsPrint/reprintSave for laterDeleteAdd photosReplace photos
Order status
Product info.
Shipping/returns policy
Print settings
FAQs
About Instagram Print
Social
Contact
Placed
Shipped
Delivered
Individual
Stickers
Minibook
Flipbook
Delivered
i InformationSizePaperPrint qualityPrice
i InformationDatePreviewOrderStatus
Shipping info.
Delivery method
Payment info.
Confirmation
Home/Feed
Direct Explore Camera Newsfeed Profile
FunctionsPrintSaveDelete
App mapSpec doc
Project 3. Team X. T H E P R I N T F E A T U R E
User flow: printing from product menu Spec doc
Tap on Print Icon
Access to Print?
Existing Print Project
Add PicsNew Print Project?
Create NewPrint ProjectYes
Send Print Request No
Continue Shopping? Add to CartNo
Yes
No
Checkout
Shipping Address
Shipping Method
Payment Information
Review
Submit
START
BrowseFeed
Edit
Your Pics
Follower’s Pics
Camera Roll
Yes
Select Product
Action
KEY
Checkout
Project 3. Team X. T H E P R I N T F E A T U R E
User flow: printing your photos Spec doc
Tap on Print Icon
Access to Print?
Existing Print Project
Add PicsNew Print Project?
Create NewPrint ProjectYes
Send Print Request No
Continue Shopping? Add to CartNo
Yes
No
Action
KEY
Checkout
Checkout
Shipping Address
Shipping Method
Payment Information
Review
Submit
START
BrowseFeed
Edit
Your Pics
Follower’s Pics
Camera Roll
Yes
Select Product
Save(to print queue)
Que
Project 3. Team X. T H E P R I N T F E A T U R E
User flow: printing other’s photos and from projects Spec doc
Tap on Print Icon
Access to Print?
Existing Print Project
Add PicsNew Print Project?
Create NewPrint ProjectYes
Send Print Request No
Continue Shopping? Add to CartNo
Yes
No
Action
KEY
Checkout
Checkout
Shipping Address
Shipping Method
Payment Information
Review
Submit
START
BrowseFeed
Edit
Your Pics
Follower’s Pics
Camera Roll
Yes
Select Product
Save(to print queue)
Que
Access to Print?
Send Notification
Yes
No
Project 3. Team X. T H E P R I N T F E A T U R E
Wireframe: Home/feed screenSpec doc
a. Home Screen
1.0
NOTES1.0 NEW ‘Instagram Print’ Icon
(shown with notification)On click, goes to (b) Product Menu screen. Notification indicator appears only when photos have been Saved to Print Queue.
2.0 NEW ‘Save to Print Queue’ Icon (shown selected)In selected state, photo is saved to Print Queue. On click, icon returns to gray, and photo is removed from Print Queue.
2.0
Project 3. Team X. T H E P R I N T F E A T U R E
Wireframe: Product menu screenSpec doc
2.0
b. Print (Product Menu) Screen
NOTES1.0 ‘Instagram Print’ Icon (shown
with notification) On click, Saved Photos (Print Queue) screen slides in from right. Notification indicator appears only when photos are Saved to Print Queue.
2.0 ‘Print Projects objects’ IconOn click, (d) Print Projects screen slides in from right.
3.0 Print Nav HeaderAnchored during vertical scroll.
4.0 ‘Photos’ Product PhotoOn click, goes to (d) Select Photos screen.
6.0 ‘Stickers’ Product PhotoOn click, goes to (d) Select Photos screen.
7.0 ‘Mini-Book’ Product PhotoOn click, goes to (d) Select Photos screen.
8.0 Cart IconOn click, goes to Cart screen.
9.0 Screen continues below. See (c) Print (Product Menu)
Screen - bottom
1.0
4.0
3.0
5.0
6.0 7.0
8.0
c. Print (Product Menu) Screen - bottom
NOTES1.0 ‘Tattoos’ Product Photo
On click, goes to (d) Select Photos Screen.
2.0 Hamburger MenuOn click, Print Info Menu screen slides up.
1.0
2.0
9.0
Project 3. Team X. T H E P R I N T F E A T U R E
Wireframe: Select photos and edit photos screensSpec doc
NOTES1.0 Instructions
Additional Instructions for User functionality.
2.0 Number indicatorNumber above indicates photo order, number below indicated number of photos in project.
3.0 PhotoOn click, goes to Edit Screen, slides from the bottom.
4.0 Drag and DropOn click and hold, goes
to photos drag to drop new location.
5.0 Add To CartOn click, goes to Cart.
d. Select Photos in Print Project Screen
NOTES1.0 Input Field
On click, Keyboard slide up and cursor appears
2.0 ‘Photo Source Selector’ Select source for photos. Photos can be added from the queue, Instagram or Camera Roll. Source selected will be indicated in grey.
3.0 Project Photo IndicatorNumber will countdown as photos are selected indicating the number of photos needed for a particular project.
4.0 Print Source HeaderAnchored during vertical scroll.
5.0 Instagram Search On Click, search bar will come in from bottom.
6.0 Select PhotosOn click, check mark will appear indicating that Photos are selected.
1.0
6.0
e. Edit Photos in Print Project Screen
1.0
2.0 3.0
5.0
3.0
4.0
5.0
4.02.0
Project 3. Team X. 2014 UXDI Winter students: Angelynn Nakaguchi, Gregg Antonucci, Roxanne Mustafa, Lucas Polavieja
Thanx for your kind attention folks!
uxpolas.tumblr.com