# Image recommendations for Android
## Table of contents
1. Why are we doing this?
2. User stories
3. Concept
4. Future
5. Appendix
## 1. Why are we doing this?
👉 // [From the [Image Recommendations MVP](https://docs.google.com/document/d/17jN_edEPcOSNAqTg8lskuEDDGc6lTAviVPNJZggGhbI/edit#heading=h.dwsttrujn2rx)] document.//
The Android, Structured Data, and Growth teams aim to offer image recommendations as a “structured task”. More about the motivations for pursuing this project can be found in the [4. IR_Planning & Spec](https://docs.google.com/document/d/1mm5ZW_1sZZj3nO_fl43rreGzVg7M6n5XOFcErsjmGN4/edit#heading=h.49jz98wb2hc6) document. In order to roll out Image Recommendations and have the output of the task show up on wiki, a MVP needs to be created to enhance the algorithm provided by the research team and answer questions about the behavior of our users to determine the potential success and needed improvements of this project.
## 2. User stories
### 2.1. Discovery
When I am using the Wikipedia Android app, am logged in,
and discover a tooltip about a new edit feature,
I want to be educated about it,
so I can consider trying it out.
### 2.2. Education
When I want to try out the image recommendations feature,
I want to be educated about the task,
so my expectations are set correctly.
### 2.3. Adding images
When I use the image recommendations feature,
I want to see articles without an image,
I want to be presented with a suitable image,
so I can select images to add to multiple articles in a row.
### 2.4. Positive reinforcement
When I use the image recommendations feature,
I want to be positively reinforced,
so I am motivated to keep using it.
## 3. Concept (MVP)
### 3.1. Discovery
### 3.2. Education
### 3.3. Adding images
### 3.4. Positive reinforcement ([Link to research deck ↗](https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g8abf83970e_0_0))
We’re going to focus on positive reinforcements on the **client side** to reduce technical overhead within the scope of the MVP. Despite the limitations, elements of positive reinforcement play a vital part in the project, as users contribute in an invisible way – they’re training the image matching algorithm. This chapter lists design experiments for client side elements of positive reinforcement mechanism. To be discussed with the PM and Android Engineering lead. //Disclaimer: The visuals below **are drafts** to illustrate the idea.//
#### 3.4.1. Animation and sound ([[ https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g8e6dfbbb97_1_100 | Slide 70 ↗]])
{F34011730}
After adding a certain amount of images, (a) success animation(s), paired with a motivational messaging via a [snackbar](https://material.io/components/snackbars) are displayed. The messaging could e.g. be used to explain how the user’s contributions are used for. Well-crafted copy is essential for this type of positive reinforcement.
#### 3.4.2. Progress indication / levels ([[ https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g8b15d94b3a_0_450 | Slide 50 ↗ ]])
{F34011753}
Progress bars and levels help in giving users a sense of achievement for their “invisible” contributions. This design exploration proposes to introduce levels, specific to the image recommendation task. It indicates users how many steps are left to reach a level. Users could be rewarded with a success animation once they reached a level, e.g. with the mechanism outlined in 3.4.1.
#### 3.4.3. Social connection ([Slide 12 ↗](https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g8b852a79e9_1_343))
{F34011784}
> Research on online communities indicates people are more likely to start participating if they see that their work will be seen, and in turn engender a sense of connection.
In this experiment, an indication of how many people have added contributions is added to the Suggested edits home screen. Assumably, this will need a server side query to determine how many unique users / or contributions have been made. Alternatively, this can be introduced as a global indicator in the profile stats section at the top.
#### 3.4.4. Awards ([[ https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g8b852a79e9_1_402 | Slide 14 ↗ ]])
| {F34011814} | {F34011817}
> Cultivate reputations – within Wikipedia via showcasing their expertise and credibility on self-curated user profile pages.
This concept requires design work for awards that are related to the “Add images” task. It can be pursued independently or combined with the positive reinforcement mechanisms outlined in 3.4.1. and/or 3.4.2. To be considered: native user profile pages do not exist yet in the Wikipedia Android app.
## 4. Future (Beyond MVP)
### 4.2. Future user stories
### 4.2.1. Article experience
When I read an article on Wikipedia,
I want to be notified when there’s no image in this article,
I want to be presented with a suitable image for this article, 
so I can select an image to add to this article.
### 4.2.2. Explore feed card
When I’m browsing the Explore Feed,
I want to see articles with no image,
I want to be presented with a suitable image,
so I can select an image to add to this article.
### 4.2.3. Connecting different types of tasks
When I successfully used the image recommendations feature,
I want to be presented with a way to add further information,
So I can add a suitable caption or tag to the image.
## 5. Appendix
### 5.1. Todos
- [x] Study Growth’s [prototype](https://o0cg2e.axshare.com/#id=l82nr0&p=page_1&sc=1&c=1)
- [x] Study Growth’s [research plan](https://docs.google.com/document/d/195EdTWYf98paQ_GiY3tF484cjhTjVBNTaQZhA0bHsFE/edit)
- [x] Lay out options for [positive reinforcements](https://docs.google.com/presentation/d/1L6DOn6nY8aTR0GgJNSYML4E4H4v0Za1E6ji3WsA7X9M/edit#slide=id.g824d2b4d48_0_0) on the client side (RS)
- [ ] Study Growth’s [usability test findings](https://docs.google.com/presentation/d/1g81-WljoL-aO72L24op2Fwt7Y7WsDGQesA0IQDCaZL8/edit#slide=id.p) (RS, RH)
- [ ] Explore design directions based on user stories (RS)
- [ ] Discovery
- [ ] Education
- [ ] Adding images
- [ ] Positive reinforcements
- [ ] Add “I’m not sure" options to designs
- [ ] How does Android deal with multiple languages? (RS)
- [ ] Indicate language in the image recommendations task?
- [ ] Consider ORES interest topics / categories (RS, RH)
- [ ] Natural language process models
- [ ] Integration of a survey? (RS, JT)
- [ ] Formulate analytics questions (RS, SN)
### 5.2. Open questions
- [ ] Naming:
- [ ] Suggested images vs image recommendations vs “Add images” (All)
- [ ] Provide source for illustrations used in prototype (RH)
### 5.3. Related links
- [4. IR_Planning & Spec Document - Google Docs](https://docs.google.com/document/d/1mm5ZW_1sZZj3nO_fl43rreGzVg7M6n5XOFcErsjmGN4/edit)
- [Image Recommendations MVP - Google Docs](https://docs.google.com/document/d/17jN_edEPcOSNAqTg8lskuEDDGc6lTAviVPNJZggGhbI/edit?ts=5fff0f18#heading=h.yu7o1kmumcc4)
- [Growth Structured tasks – Figma](https://www.figma.com/file/2SONd8P1tsexIB5coMOp8h/Growth-Structured-tasks?node-id=581%3A0)
- [âš“ T254768 [EPIC] Lead image SE task](https://phabricator.wikimedia.org/T254768)
- [Add image suggestions: Research Plan - Google Docs](https://docs.google.com/document/d/195EdTWYf98paQ_GiY3tF484cjhTjVBNTaQZhA0bHsFE/edit)
- [4. IR_Planning (Fall 2020) - Google Docs](https://www.notion.so/wikimediadesign/Media-Matching-Designer-Planning-ca24b5c5cfab47e68475722367db6a95)
- [Image recommendation - the story so far (Dec 2020)](https://docs.google.com/presentation/d/1dia3ovWc2wjpCF6W6ZfLOUZ76axuWZpVnT68RKxblNQ/edit#slide=id.gaeaa07abb9_0_59) by Cormack
- [Design Brief: "Add a link" structured task - Google Slides](https://www.notion.so/wikimediadesign/IR-35eb48041aea48f4ba07058b25e0f154) by Rita
- [Media Matching Design](https://docs.google.com/presentation/d/1mKRxbbEHeYyVe6QbT3XA28XW_KN9YQGBZTCrcHYrapk/edit#slide=id.g9bbb4816da_0_0) by Matthew
- [Add image - structured task exploration, Online Whiteboard for Visual Collaboration](https://miro.com/app/board/o9J_kkYR8-E=/) by Rita
- Resources (used in visuals)
- [File:Zidine - panoramio.jpg - Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Zidine_-_panoramio.jpg)