YEAR
JAN 2018- APR 2019
ROLES
Product Manager, Design Lead
RESPONSIBILITY
Innovation Lead, Roadmap, MVP Define, UX/UI spec, Data Analysis
Take, Organize and
Find Screenshots by Text
Firefox ScreenshotGo
An Android app that helps Indonesians make good use of screenshots as a quick, universal information manager across various online sources. As the design lead, my role was to plan and execute the design process to explore needs from Indonesia market, including research, workshops, design, and testing, etc.
TEAM
Researcher, Visual Designer
RESEARCH
Explore Shopping Journey and Persona
I was challenged to explore the most competitive but foreign market to me. The first step was extensive desk research to get us familiar with them. Based on the shopping journey we created, we launched five surveys on Jakpat, an online mobile survey service, to gather the understanding of various aspects of online shopping. After analyzing the data, screenshots seemed to be the primary way fulfilling all needs on the shopping journey.
In the workshop, PM, MKT, engineers, BD and UX synthesized key assumptions and hypotheses for validation. Also, considering the proto-personas, we prioritized and chose three hypotheses via risk prioritization matrix. To speed up the validation, I suggested storyboards in surveys, the quickest way to test without any engineering efforts. The result demonstrated the needs, but surprisingly, how Indonesians use screenshots was still the highlight of the survey results.
Shopping journey
Proto-persona
Surveys by storyboards
3 personas focusing on Indonesians' screenshot behavior
PROTOTYPING
Build Prototype through Collaboration
After the collaborative workshop with engineers for the early design and continuous feasibility check, I used Figma, a collaborative design tool, to quickly develop essential information architecture. At the same time, UI designer was busy at visual design, and the prototyper was building the infrastructure by referring to the evolving UX spec.
Collaborative workshop for early concept
Drafting spec for the prototype
Brainstorming workshop involves engineers for feasibility consultancy
TESTING
In-Field User Testing for Validation
With the prototype building with Frammer, UR and I planned a trip to meet the real users and listened to the very thought of them. We recruited 8 participants. The first 4 participants were for the validation of the unmet needs. We took one day to iterate the design, then kept testing the rest participants for usability. The entire trip confirmed our assumption: "Almost everything I screenshot," said by one of our participants.
TESTING
Estimate Market Size by Landing Page Test
Before proposing to the Executives, I utilized Playing to Win, a strategic planning tool, to support why Mozilla can invest to fulfill the needs and align our mission at the same time. Besides, I initiated to use a landing page to measure the demand and market size. In the end, we got almost 20% of conversion rate to convince the executives for more resources.
Playing to Win for strategy
Measure conversion rate by landing page test
Landing page test on major social medias
INTERACTION
When Doubts, Test, then Iterate Again
With the support of an official product team, I started with some sketches focusing on pain points: users are hard to find the screenshot they want right away. Based on the in-field testing, I dedicated to offering a smooth capture-and-retrieve journey of screenshots. I'll go into details about several highlights.
Wireframe spec covers from FTU to detailed feature sets
To quickly retrieve screenshots, organizing could be the first step. Hence, a single tap on the floating action button triggers a panel to sort or share right away. Assigning distinct visual styles also helps users readily distinguish the states of collection.
Another way that helps users locate screenshot is by keywords on the screenshot. Through Optical Character Recognition, I worked closely with engineers to offer a smooth experience for users interacting with the text on the screenshot.
While developing with doubts on interaction, I always prepared low or high-fidelity prototypes and recruited several Indonesians for a short usability testing. And iterate based on the result.
VISUAL DESIGN
Key Visual Style and Extend
At the later period of development, I was responsible for the visual design as well. Based on the context, I created illustrations for onboarding or presentation of the current state.
Screenshots for interaction details
TESTIMONY
A Google User
Wow, it's really good, right away, save it to the gallery, not many ads, it's not complicated thanks
“
Leonardo Tanuwijaya
This app changed my life for the better. The answer I'd been looking. Finally I can screenshot with only a tap, thanks.
“
Shangaranaara Ramakrishana
What!!!I have Never Imagined an app like this... simple wow and used daily 👍Thumbs up to the developer team
“
CONCLUSION
Thanks to the support of Indonesians, Firefox ScreenshotGo gets an average rating of 4.6. It's the most significant satisfaction as a designer that people appreciate the product that is changing their lives.
