Make your software stack come alive

Stacktile helps development teams to understand DevOps tools and techniques and put them quickly into production. Furthermore, their web app allows software companies to provide interactive documentation to their prospective customers, increasing conversions.

The company also offers full-stack development services in addition to an open-source website/app monitoring system.

I was hired as a Product Designer. With my experience in branding and marketing, I was assigned to work on the brand and corporate website as soon as I finished a basic app redesign.

* Stacktile was acquired by another company based in Berlin.

Roberto Simões (Product Designer) Dr. Dan Levin (CEO) Michael Martinides (Project Manager) Fabian Schaffert (Software Engineer) Amr Osman (Software Engineer) Marco Canini Ph.D. (Technical Advisor) UX & UI Design Design System Branding Marketing Design Front-end Dev
Stacktile Hero image
TOOLS Sketch App Invision App Photoshop, Illustrator HTML, CSS, JS GIT Hotjar, Piwik

First things first

They had just designed a logo when I started, but only the logo. I had to at least define typography and color palette.

What is the developers' color? Black & Green? Ugh! A bold logotype needs a crisp typeface with character and many fresh colors and patterns with references to their world.

Even though I defined a soft and fun color palette, I still wanted to go further and create a unique feeling for the app's interface. I designed different backgrounds for each period of the day: one each for the morning, afternoon, and evening.

Since we didn't have the budget to buy an attractive font family, let's Google it! The fonts chosen were: Source Sans Pro for the titles and Inconsolata for the body and links.

Initially, I thought I would use the same fonts for marketing and the app. But when I started working on the marketing materials, I realized it wouldn't be as impactful as I wanted. So I just used Source Sans.

The next step was to document these decisions and create a design system.

Stacktile Design System picture

User Interface

The first thing I did was to suggest an urgent change in the usability of the app, to simply make the Command Line boxes already visible from the moment the user entered the page. Initially it was necessary to click on the server icon for the terminal window to appear.

Since I started working part-time, I created a prototype in HTML, CSS, JS instead of designing the screens using Sketch. This significantly speeds up the handoff to the engineers.

After I finished the app's redesign in HTML, I went back to a typical workflow. Designing wireframes in Sketch and then implementing them in the app using Github.

See the APP HTML prototype

User Experience

I created many questionnaires applied them to a group of users. Furthermore, I reviewed the Piwik analytics data and implemented Hotjar to refine user stories, journeys, and wireframing boards.

During the time I worked there, in addition, to designing and implementing new features, I did countless iterations like this to fine-tune the UX and UI of the application.

Stacktile UI User Flow
Stacktile UI mobile first
Stacktile UI questionary
Stacktile UI wireframes

Not always what
we expect happens

We created two landing pages with different designs for the web app launch to test which would convert better. I was optimistic that version 2 (screenshot attached) would be the winner. However, numbers showed that version 1 related better with the target audience.

Landing page #1

Landing page #2

Stacktile Landing Page

More services,
more landing pages

As mentioned before, Stacktile also provides full-stack development services; they also open-sourced the company's website monitoring technology. I designed two landing pages for each of those areas, and A / B tested them using the Convert app.


Solutions Landing Page
No cookies + Info Designed & Coded by Roberto Simões
-- Berlin, Germany