{"id":4021,"date":"2018-12-27T13:44:00","date_gmt":"2018-12-27T18:44:00","guid":{"rendered":"https:\/\/blog.mozilla.org\/ux\/?p=4021"},"modified":"2019-01-30T21:21:47","modified_gmt":"2019-01-31T02:21:47","slug":"a-bumpy-road-to-firefox-screenshotgo-in-a-foreign-market","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/ux\/2018\/12\/a-bumpy-road-to-firefox-screenshotgo-in-a-foreign-market\/","title":{"rendered":"A bumpy road to Firefox ScreenshotGo in a foreign market"},"content":{"rendered":"

Back in January 2018, we were assigned to lead a project called New Product Exploration to help Mozilla grow impact on shopping experience in Southeast Asia, and the first stop was Indonesia, a country I had not visited and barely knew!<\/p>\n

To quickly dive into the market and design a great product within six weeks, we adopted Lean UX thinking and continually fine-tuned the design process* that has proven to be successful in this journey. Furthermore, we also practiced the strategic approach, Playing to Win**, to fit the emerging markets aligning the business model\/goal. In short, we pushed forward and discovered by the following design process:<\/p>\n

1. Explore & learn: discover and prioritize user needs on shopping demands
\n2. Assumptions to validate: create and validate preliminary assumptions
\n3. Design & build prototype: develop the prototype by collaborative design
\n4. Test & iterate: field research with users by prototype to iterate<\/em><\/p>\n

\"\"<\/a>

Fine-tuned structure according to Lean UX process<\/p>\n

<\/p><\/div>\n

Explore & learn<\/strong><\/p>\n

Though Indonesia is just 5 hours-flight from Taiwan, I had little knowledge about its language, culture, value, etc. Fortunately, Ruby Hsu, our user researcher who had done extensive research and interviews in Indonesia, brought us decent observation and research findings as our starting point. Next, the team did extensive desk research to understand their shopping behaviors. With the research findings, we depicted the shopping journey to explore the opportunities and pain points.<\/p>\n

\"\"<\/a>

User journey is a sequence of events a user may take or interact with something to reach their goal<\/p><\/div>\n

 <\/p>\n

According to the shopping journey, we synthesized five general directions for further exploration:
\n– Price comparison
\n– Save to Wish list
\n– Save Money Helper
\n– Reviews
\n– Cash Flow Management<\/p>\n

For each track, we validated assumptions by quantitative questionnaires via JakPat, a mobile survey service in Indonesia. Around 200 participants, online shoppers, were recruited for each survey. The surveys offered us fundamental knowledge covered from their daily life to specific shopping behaviors across genders, ages, and monthly spending, etc. Surprisingly, the most significant pattern was that<\/p>\n

screenshot always served as a dominant tool to fulfill most needs, like keeping wish lists, promotions, shopping history, and cash flows, which was really out of our expectation.<\/p><\/blockquote>\n

Too much to do, but too little time. With so many different things going on, knowing how to prioritize effectively can be a real challenge. To have each member from different disciplines become familiar with the knowledge, we held a workshop to develop the problem statement and persona to represent what we have learned from our research.<\/p>\n

\n

\"\"<\/a>

Persona is a representation of a type of target users<\/p><\/div>\n

 <\/p>\n

 <\/p>\n

At the end of the workshop, the participants of the brainstorming session helped the team identify and assess risks and values as references to determine the exact location for each direction in the Risk\/Value Matrix. \u201cSave to wish list\u201d was the one with the lowest risk but the highest value considering the limited time and resources, which was the different logic of Lean UX.<\/p>\n

\"\"<\/a>

Risk\/Value Matrix prioritizes the potential ideas, which Lean UX believes the higher the risk and the more the value, the higher the priority is to test first<\/p><\/div>\n

 <\/p>\n

The team believed that creating a cross-channel wish list tool for online shoppers could be valuable since it could track original product information and discover the relevant items tailored to their taste.<\/p>\n

Assumptions to validate<\/strong><\/p>\n

We determined the direction. It is time to march forward. We invited representatives from all function teams to create hypothesis and assumptions. The workshop consisted of four parts, business outcomes, users, user outcomes and features. At last, we mapped all materials from those four aspects to create the feature hypotheses:<\/p>\n

We believe this [business outcome] will be achieved if [these users] successfully achieve [this user outcome] with [this feature].<\/p><\/blockquote>\n

\"\"<\/a>

Cross-disciplinary workshop<\/p><\/div>\n

Considering the persona, we prioritized and chose three hypotheses via risk prioritization matrix. To speed up the validation, we decided three most essential and developed surveys with storyboards accordingly to verify, which were \u201cuniversal wish list,\u201d \u201corganized wish list\u201d and \u201csocial wish list.\u201d<\/p>\n

\"\"<\/a>

Left to right: Universal wish list, Organized wish list, and Social wish list<\/p><\/div>\n

The result revealed that the high demands for the first two ideas but the last one required further validation for the potential needs. Out of our expectation again, how Indonesians used screenshots was still the highlight of the survey results.<\/p>\n

The screenshot was the existing and dominant tool they got used to capturing everything beyond shopping\u00a0needs.<\/p><\/blockquote>\n

Design & build prototype<\/strong><\/p>\n

With all the validated assumptions, we concluded to develop an app to help Indonesians make good use of screenshots as a quick, universal information manager across various online sources. Furthermore, they could get back to online sources through collected screenshots.<\/p>\n

At that time, we have to make our ideas tangible for testing. After the collaborative workshop with engineers on the early design and continuous feasibility check, I used Figma, a collaborative design tool, to quickly develop fundamental information architecture and interaction details. By co-operating and referring to the evolving UX wireframe, everyone showed their capabilities simultaneously.<\/p>\n

\"\"<\/a>

Collaborated UX spec via Figma<\/p><\/div>\n

\n

While Fang Shih, the UI designer, was busy with designing the look and feel into the visual spec, Mark Liang, our prototyper, was coding the infrastructure and high fidelity prototype with Frammer. Last but not least, Ricky Yu, the user researcher, took care of the research plan, recruiting and testing schedule in Indonesia.<\/p>\n

Test & Iterate<\/strong><\/p>\n

With everything prepared, we flew to Indonesia to meet the real users and listened to their inner thoughts. The research trip consisted of three sections. Among the eight recruited participants, the first four were interviewed for the validation of the unmet needs, which we put more focus on their screenshot behaviors, mental models. We took one day to iterate the design, then kept testing the rest participants for concept feedback, like the IA, usability.<\/p>\n

\"\"<\/a>

Overview of testing<\/p><\/div>\n

Each participant took various tasks for us to understand and learn their feelings, thoughts, and behaviors, such as demoing screenshots, prioritizing top features, etc. The entire research trip confirmed our observation about the screenshots to Indonesians:<\/p>\n

\"\"<\/a><\/p>\n

\u201cAlmost everything I screenshot,\u201d said one of our participants.<\/p>\n

Shaping the product<\/strong><\/p>\n

As the answers from the interviews analyzed, their screenshot behavior and pain points gradually emerged in each step of the screenshot process, including triggering, storing, and retrieving.<\/p>\n

Why did Indonesians like to screenshot?<\/em><\/p>\n

Apps provided a better experience than websites, even better prices in some e-commerce apps. Screenshots was a quick and universal tool to grab information across apps. Besides, with the unstable, slow, and limited data plan, they were more inclined to capture online live through an offline screenshot instead of a hyperlink, which might cost forever loading.<\/p>\n

What pain points did Indonesians have in storing and retrieving?<\/em><\/p>\n

Handy screenshots led to countless images in Gallery, which caused users hard to locate the needed screenshot. Even though the screenshot was found, the static image did not provide any digital data for relevant actions in the smartphone \u2014 for instance; users had to memorize the info on the screenshot and search more relevant content again.<\/p>\n

In conclusion, screenshots to Indonesians could be defined as a universal offline tool to capture information across various apps for further exploration online. However, they are looking for an app to find needed screenshots among numerous images readily and make good use of screenshots to explore related knowledge and content. The validated findings shaped the blueprint of Firefox ScreenshotGo \u2014 an Android app that helps Indonesians easily capture, manage screenshots and explore more relevant information.<\/p>\n

As for how we measured the market size and launched the product, allow me to spend another post to cover the details.<\/p>\n

\"\"<\/a>

Firefox ScreenshotGo is only available in Indonesia Google play store, but you can still install by following the instructions.<\/a><\/p><\/div>\n

\n

Why did Mozilla build Firefox ScreenshotGo?<\/strong><\/p>\n

It is a great question! Here I would like to briefly talk about how we adopted Playing to Win to delve into the answer. The strategic narrative focused on fulfilling Mozilla mission. Users screenshotted their online life across app silos who offered limited or manipulated information. Mozilla targeted to encourage users to go back to the open web to search more linked content freely with those screenshots as bookmarks.<\/p>\n

\"\"<\/a>

Strategic narrative<\/p><\/div>\n

\n
\n
\n
\n

*Lean UX process is a cycle of four actions, starting with \u201cResearch & learning\u201d, \u201cOutcomes, assumptions, hypotheses\u201d, \u201cDesign it\u201d and \u201cCreate an MVP.\u201d
\n**Playing to Win provides a step-by-step framework to develop a strategy.<\/p>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n<\/dd>\n","protected":false},"excerpt":{"rendered":"

Back in January 2018, we were assigned to lead a project called New Product Exploration to help Mozilla grow impact on shopping experience in Southeast Asia, and the first stop … Read more<\/a><\/p>\n","protected":false},"author":1642,"featured_media":4022,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[52898,9595,9577,5866,103,9594],"tags":[259,52901,317180],"coauthors":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4021"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/users\/1642"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/comments?post=4021"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/posts\/4021\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media\/4022"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/media?parent=4021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/categories?post=4021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/tags?post=4021"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/blog.mozilla.org\/ux\/wp-json\/wp\/v2\/coauthors?post=4021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}