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.
2. 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
3. About the
product
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.
About the
project
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
Project 3. Team X.
T H E
P R I N T
F E A T U R E
5. Discovery
Process
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
Project 3. Team X.
User research
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
6. Discovery
Research
Significant increase in users when new feature is added.
Sources
Quantcast
Gigaom
Discovery
Project 3. Team X.
User research
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
8. User
research
By the
numbers
Method:
We surveyed Instagram users with 10
questions about printing behavior.
Findings:
•
•
•
•
Discovery
Project 3. Team X.
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
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
9. User
research
By the
numbers
Discovery
Project 3. Team X.
User research
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)
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
10. User
research
Personas
Mary Childs
Monica Lone
John Smith
AGE
35-40
25-30
30-35
STATUS
Married, with one child
Single
Married, with two children.
QUOTE
“I don’t like to share
“I like the idea of
everything I do but I like to scrapbooking and printing,
give gifts”
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
Very creative (artsy-crafty)
Tech Savy
Non-creative
Tech Savy
BEHAVIORS
Power User of Social Media
Tech savvy.
Prints Sometimes
Gift Giver
Thoughtful of other people.
Power User of Social Media
Does Not Prints Often
Likes Humorous Gifts
Power User of Social Media
Prints Often
Takes Pics Often of Family
GOALS
Wants to give gifts to others
Conscientious buyer.
that 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 kids
Wants to make quality prints
easily and affordably.
Discovery
Project 3. Team X.
User research
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
11. Design
iteration 1
Sketches
Discovery
Project 3. Team X.
User research
Method:
The group created paper wireframes
and flows.
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
12. Design
iteration 1
Prototypes
Method:
The group created paper wireframes
and flows, to then develop two on-thefly prototypes in PopApp and Flinto for
the first usability testing.
1. PopApp
Discovery
Project 3. Team X.
User research
Design Iterations
T H E
2. Flinto
Prototype
P R I N T
F E A T U R E
Looking ahead
13. Design
iteration 1
Screen samples
Findings:
•
•
•
Discovery
Project 3. Team X.
User research
Opportunities identified:
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.
Design Iterations
T H E
•
•
•
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.
Prototype
P R I N T
F E A T U R E
Looking ahead
14. Design
iteration 1
Print paths
YOUR FEED
YOUR
PROFILE
SAVE
TAG
(to print
queue)
FOLLOWERS
PROFILE
SELECT
PRODUCT
PRINT
EDITING
CART
NEW PROJECT
CURRENT
PROJECT
PRINT SCENARIOS
ADD PHOTOS
INSTAGRAM
PAST
PROJECT
NEW PRINT PROJECT
PRINT HISTORY
Discovery
Project 3. Team X.
User research
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
15. Design
iteration 1
Findings:
Security
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.
Opportunities identified:
1. New “Print” option in Settings.
Discovery
Project 3. Team X.
2. Default Settings: restriction of
the access for other users to print
user’s photos.
User research
Design Iterations
T H E
3. “Allow Printing” setting: Selective print
access - the user can manually select who is
allowed to print his/her photos.
Prototype
P R I N T
F E A T U R E
Looking ahead
16. Design
iteration 1
Notification
PIC
SEND PRINT
REQUEST
PROJECT
Discovery
Project 3. Team X.
User research
FOLLOWERS
PROFILE
Design Iterations
T H E
:
PRINT REQUEST
RECEVIED?
No Notification but request is
stored
FROM PEOPLE
I KNOW
Only Notifications from
Followers
FROM
EVERYONE
FOLLOWERS
PROFILE
:
PRINT REQUEST
NOTIFICATION
TURNED OFF
BASED ON
FOLLOWERS
SETTINGS
Notifications from anyone
Prototype
P R I N T
F E A T U R E
Looking ahead
18. Design
iteration 1
Method:
The group created a prototype using Axure.
Hypothesis
Findings:
•
•
Most users were confused about the
function of the print icon.
Users did not understand how to create
print projects.
Opportunities identified:
•
•
•
•
Discovery
Project 3. Team X.
User research
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.
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
19. Prototype
Axure
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.”
Discovery
Project 3. Team X.
User research
Design Iterations
T H E
Prototype
P R I N T
F E A T U R E
Looking ahead
20. Looking ahead
Moving forward
•
•
•
•
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:
•
•
•
•
Discovery
Project 3. Team X.
User research
Print Icon is Intuitive
Editing is Clear
Checkout Flow is clear
Starting Project is Clear
Design Iterations
T H E
Overall Impression:
•
Not disruptive to primary
user behavior (sharing and
posting photos and
videos).
Prototype
P R I N T
F E A T U R E
Looking ahead
21. Spec doc
App map
Home/Feed
Printer feature
Direct
Stickers
Squares
Instagram photos
Explore
Minibook
Camera
Tattoo
iPhone photos
Newsfeed
Profile
Flipbook
Home/Feed
Instagram videos
@ and/or # search
Camera roll and/or other folder search
Camera roll
Information
Cart
Current projects
Order status
Shipping info.
Past projects
@ and/or # search
Your feed
Your projects
Delivery method
Placed
Your feed
Your photos
Shipped
Payment info.
Your videos
Albums
Somebody’s photos
Access
No access
Print/reprint
Save for later
Delete
Add photos
Replace photos
Access
No access
Upon request
Delivered
Functions
Somebody’s videos
Upon request
Your profile
i
Somebody’s profile
Access
No access
Product info.
Access
No access
Upon request
Information
Date
Preview
Order
Status
Your profile
Somebody’s profile
Confirmation
Individual
Stickers
Upon request
Minibook
Flipbook
Functions
Delivered
Functions
Print
Save
Delete
Print
Save
Delete
i
Information
Size
Paper
Print quality
Price
Shipping/returns policy
Print settings
FAQs
About Instagram Print
Social
Contact
Project 3. Team X.
T H E
P R I N T
F E A T U R E
22. Spec doc
User flow: printing from product menu
KEY
Action
START
Camera Roll
Checkout
Yes
Browse
Feed
Tap on
Print Icon
Select
Product
Create New
Print Project
New Print
Project?
Submit
No
Add Pics
Your Pics
Existing
Print Project
Follower’s
Pics
Review
Send Print
Request
Payment
Information
No
Access to
Print?
Yes
Yes
Shipping
Method
Shipping
Address
Checkout
No
Project 3. Team X.
Continue
Shopping?
Add to Cart
T H E
P R I N T
F E A T U R E
Edit
23. Spec doc
User flow: printing your photos
KEY
Action
Que
START
Checkout
Yes
Browse
Feed
Save
(to print
queue)
Select
Product
Tap on
Print Icon
Create New
Print Project
New Print
Project?
Camera Roll
Add Pics
Your Pics
Submit
No
Existing
Print Project
Follower’s
Pics
Review
Payment
Information
Send Print
Request
No
Access to
Print?
Yes
Shipping
Method
Yes
Shipping
Address
Checkout
No
Project 3. Team X.
Continue
Shopping?
Add to Cart
T H E
P R I N T
F E A T U R E
Edit
24. Spec doc
User flow: printing other’s photos and from projects
KEY
Action
Que
START
Checkout
Yes
Browse
Feed
Save
(to print
queue)
Select
Product
Tap on
Print Icon
Create New
Print Project
New Print
Project?
Camera Roll
Add Pics
Your Pics
Submit
No
Access to
Print?
Existing
Print Project
Yes
Follower’s
Pics
Review
No
Payment
Information
Send
Notification
Send Print
Request
No
Access to
Print?
Yes
Shipping
Method
Yes
Shipping
Address
Checkout
No
Project 3. Team X.
Continue
Shopping?
Add to Cart
T H E
P R I N T
F E A T U R E
Edit
25. Spec doc
Wireframe: Home/feed screen
NOTES
1.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.
1.0
2.0
a. Home Screen
Project 3. Team X.
T H E
P R I N T
F E A T U R E
26. Spec doc
Wireframe: Product menu screen
8.0
NOTES
NOTES
1.0
1.0
‘Tattoos’ Product Photo
On click, goes to (d) Select
Photos Screen.
2.0
Hamburger Menu
On click, Print Info Menu screen
slides up.
2.0
1.0
3.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
3.0
Print Nav Header
Anchored during vertical scroll.
4.0
‘Photos’ Product Photo
On click, goes to (d) Select Photos
screen.
6.0
4.0
‘Print Projects objects’ Icon
On click, (d) Print Projects screen
slides in from right.
‘Stickers’ Product Photo
On click, goes to (d) Select Photos
screen.
5.0
6.0
7.0
1.0
7.0
‘Mini-Book’ Product Photo
On click, goes to (d) Select Photos
screen.
8.0
Cart Icon
On click, goes to Cart screen.
9.0
b. Print (Product Menu) Screen
2.0
c. Print (Product Menu) Screen - bottom
9.0
Screen continues below.
See (c) Print (Product Menu)
Screen - bottom
Project 3. Team X.
T H E
P R I N T
F E A T U R E
27. Spec doc
Wireframe: Select photos and edit photos screens
NOTES
2.0
NOTES
1.0
1.0
1.0
Instructions
Additional Instructions for
User functionality.
2.0
Number indicator
Number above indicates
photo order, number
below indicated number
of photos in project.
3.0
Photo
On click, goes to Edit
Screen, slides from the
bottom.
4.0
Drag and Drop
On click and hold, goes
to photos drag to drop
new location.
5.0
Add To Cart
On click, goes to Cart.
3.0
Input Field
On click, Keyboard slide
up and cursor appears
1.0
5.0 2.0
4.0
6.0
3.0
4.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.
4.0
Print Source Header
Anchored during vertical
scroll.
Instagram Search
On Click, search bar will
come in from bottom.
6.0
Project 3. Team X.
3.0
Project Photo Indicator
Number will countdown
as photos are selected
indicating the number of
photos needed for a
particular project.
5.0
d. Select Photos in Print Project Screen
2.0
Select Photos
On click, check mark will
appear indicating that
Photos are selected.
5.0
e. Edit Photos in Print Project Screen
T H E
P R I N T
F E A T U R E
28. Thanx for your
kind attention folks!
uxpolas.tumblr.com
Project 3. Team X. 2014 UXDI Winter students: Angelynn Nakaguchi, Gregg Antonucci, Roxanne Mustafa, Lucas Polavieja