28
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

Instagram introduces the Print Feature

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

Page 1: Instagram introduces the Print Feature

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

Page 2: Instagram introduces the Print Feature

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

Page 3: Instagram introduces the Print Feature

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

Page 4: Instagram introduces the Print Feature

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

Page 5: Instagram introduces the Print Feature

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

Page 6: Instagram introduces the Print Feature

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

Page 7: Instagram introduces the Print Feature

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

• INSTAGRAM

FUTURE

Discovery

Competitive analysis

Discovery Design Iterations PrototypeUser research Looking ahead

Page 8: Instagram introduces the Print Feature

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

Page 9: Instagram introduces the Print Feature

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

Page 10: Instagram introduces the Print Feature

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

Page 11: Instagram introduces the Print Feature

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

Page 12: Instagram introduces the Print Feature

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.

Page 13: Instagram introduces the Print Feature

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.

Page 14: Instagram introduces the Print Feature

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

PRINT

ADD PHOTOS

CART

PRINT HISTORY

INSTAGRAM

PRINT SCENARIOS

NEW PRINT PROJECT

SAVE(to print queue)

Designiteration 1

Print paths

Discovery Design Iterations PrototypeUser research Looking ahead

Page 15: Instagram introduces the Print Feature

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

Page 16: Instagram introduces the Print Feature

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

Page 17: Instagram introduces the Print Feature

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

Page 18: Instagram introduces the Print Feature

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

Page 19: Instagram introduces the Print Feature

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

Page 20: Instagram introduces the Print Feature

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

Page 21: Instagram introduces the Print Feature

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

Page 22: Instagram introduces the Print Feature

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

Page 23: Instagram introduces the Print Feature

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

Page 24: Instagram introduces the Print Feature

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

Page 25: Instagram introduces the Print Feature

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

Page 26: Instagram introduces the Print Feature

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

Page 27: Instagram introduces the Print Feature

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

Page 28: Instagram introduces the Print Feature

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