Screenshotbot: Visual Testing Made Simple

Improved a seed-stage product’s visual designs by refining its digital brand to help attract, and retain new customers.

Visit Screenshot’s website and Github Repository to learn more.

 

Project Overview

Screenshotbot helps products monitor their application’s development by scanning UI changes automatically. The existing product’s biggest challenge to date has been its client acquisition due to a confusing offering and understanding of how can Screenshotbot help developers, organizations and companies streamline their work and increase their efficiency. 

Some of the key solutions included a clear UX experience for new customers to understand the product right away, a revamp of their brand and marketing assets for clarity, and an upgrade to their visual mockups to be simple and intuitive.

 

Logistics

I worked as a product designer with a small team composed of a product lead and two founders. During a 4 week process, we came together to brainstorm, co-create goals, and produce a roadmap for execution, reviews, and expected outcomes.

Team

1 Product Lead

1 Product Designer

2 Founders (Sales & Dev)

Timeframe

4 weeks
February, 2021

My contributions

Wire-framing
Visual Design
Brand Refresh
Website Design

Problem Statement

Screenshotbot problems were at its core client acquisition — as explained by co-founder Arnold Noronha “so far we haven't had any success in getting customers despite getting a few sales calls.”

After reviewing the startup’s brand across their landing website, FAQs, documentation, Github, and Twitter presence it became clear that Screenshotbot’s offering, copy, and visuals were scattered and not cohesive — therefore leaving customers and users confused as to the real product offering.

Screenshotbot at a glance

Not a great indicators when users don’t understand what your product is nor what it offers.

Project Goals

Among Screenshotbot’s business goals were to improve conversion metrics, generate more sales and customer connections and ultimately expand the business through standard or enterprise-level support. 

Understanding these specific north starts from the start, our mighty design team was able to double-down on creating a quick and attainable product roadmap to merge user and business needs.

Design goals were established to create a seamless UX experience across marketing websites, highlighting ways to get in touch to learn more, while simultaneously providing intuitive examples of how the product works, integrations, and clear pricing charts.

Overview of design improvements to support business goals

Design Process

Screenshotbot’s brand overhaul included new design standards, design assets, typography, colors, marketing websites, and collaterals executed and delivered in a 4-week timeline in agile, and cross-collaborative methodologies. To ensure proper implementation, we integrated 1:1 design hand-offs with the developing founders during development where we conducted design QA/QCs and delivery of specs with UI redlines.

Design Solution

As a team, we recognized the need to bring consistency and cohesiveness to the Screenshot product and therefore start with a clear user experience for potential customers to understand the product right away. Next, we polished their logo, colors, fonts, and graphics.

Shortly followed by revamping various marketing websites including a landing, an about section for social proof, clearer documentation and FAQs, and integrations with clear CTAs and emphasis on lead-generation to get customers to get in touch for inquiries.

Last, we refined their product mockups by decreasing the cognitive load through simplification and abstraction.

See Screenshotbot’s website here

If you’d like to learn more about this project, the problem space, product & design process, or have any other questions, feedback, or comments — I look forward to hearing from you