top of page

Design for AI Product Project 

Instructor: John Zimmerman, Qian Yang

Time Span: 5 Weeks, Jan 2019

Contribution: Concept, Research, UI/UX Designer

Team Members: Meng Wan, Zhe Zhao, Ally Liu

Adaptive UI Case Study

# Instagram

Silver.png

Overview

I worked as a co-researcher and product designer on redesigning the post creation flow of Instagram mobile app. The purpose of this project is meant to apply adaptive UI with machine learning to refine the posting process for influencers. The adaptive UI could help them have more efficient and effective posts.

It's a speculative project that applying what I learned from course Design for AI Product as a case study. No offense to Instagram product team 🤗

THE CHALLENGE

Prototype

How to make adaptive UI improving user experience with machine learning in Instagram?

Here's the clickable prototype

Target Audience

INSTAGRAM INFLUENCERS

Based on our research, we figured out there's a group of active users who identified as influencers contribute a lot of revenue to Instagram. Users who are rising influencers update their posts frequently and need to go through similar procedures to post every photo with an obvious pattern.

Persona Template.jpg

Current State

1. LONG PROCEDURE 

As the screen shots below, there's the current flow a user need to go through to post a picture. 10 Screens + 18 Clicks at least.

112.png

2. REPETITIVE TASKS

Influencers utilize the same filter, same photo size, similar caption for most of their posts. Especially for hashtags, to gain more traffic, influencers get used to typing as much as hashtags with similar content they can (up to 30).

scren.png

Design Concept

With the adaptation, influencers could post more efficiently by using fewer clicks and time. They could gain more exposure with the hashtags we recommended. In this way, they are more impactful than before. We believe adaptive UI could motivate influencers and bring more value to Instagram.

d.png

Adaptive Design

solution.png
scrren.png

Value for Instagram

value.png

Machine Learning 

How will Instagram collect signals?

The app needs to gather user’s behavior data when they edit their posts in order to determine whether to do adaptive UI or not. Including:

#

Frequency of using adjust image size button

Frequency of using filters and top used filters

Account type: business/normal

Hashtag number in the posts

Number of view besides friends

Average time length to complete a post

How can Instagram motivate people to provide these signals?

Title phrasing

In the new post page, we phrase our subtitle like ”your top filters”, “history hashtags” and “You might also like” this kind of historical description. From these descriptions, users are aware of what does the app make a prediction based on.

 

Proactive adaptation

The goal of adaptive UI is providing influencers a more efficient and effective posting process than before. Once influencers found the adaptation is time-saving and give them more exposure than before, they will match the final promotion as a consequence of adaptation and keep using Instagram to provide all kinds of signals as much as possible.

 

"Switch" feature provides feedback

In the hashtag session, we also have a “switch” feature. If a user is not interested in the hashtags we recommended, they could press the switch icon to switch another group.

1221.png

How confident does the system need to be to trigger the adaptation?

Triggering filter recommendation, preferred photo size default setting and nametags recommendation is rather easy because we take high frequency of use as the metric. People who are not influencers can also trigger this adaptive UI separately if they meet the requirement.  

As for hashtag recommendation, we think non-influencer users’ posting experience will be harmed if we directly show them lots of hashtags options. Therefore the system needs to accurately figure out influencers who need hashtag recommendations. 

How will a user recover from errors?

Our users can easily recover from errors by tapping on the expand button of each section to go back to the original page.

 

  • If the user doesn't want to choose her most frequently used filters, she just needs to simply tap on the expand button to go to the original filter page and select from more in the original posting flow.

666.png

​​

  • For hashtags error recovery, users can simply tap on the "hide" button to fold recommended hashtags and some trending hashtags if they don't like recommendation from system.

555.png
333.png

​​

  • If they don't like any of them, they can simply manually type the "switch" icon on the right. As a result, our system will remember their decisions and send feedback to a machine learning algorithm.

Takeaways

  1. Besides design for user's value, think from the business perspectives like how will adaptive UI create more revenue for Instagram.

  2. Make users be aware of the system are predicting and also show the evidence supporting the prediction, which lowers users' expectation.

  3. Don't forget to design a backup plan that could quickly recover from errors once errors happen.

Other projects you might also like...

bottom of page