Stacktile

Interactive documentation web app.

Project Background

Stacktile goal is to help teams more quickly and easily understand devops tools and techniques and put them into practice. Therefore they created a web app to allow software companies to provide interactive documentation to their prospective customers to increase conversions.

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

My role

UX-UI designer, and front-end developer

Tools

Sketch app

Invision app

Adobe Photoshop

Adobe Illustrator

Html

Css

jQuery

Bootstrap 3

Git

Team

Dr. Dan Levin (CEO)

Michael Martinides (Project Manager)

Fabian Schaffert (Software Engineer)

Amr Osman (Software Engineer)

Marco Canini Ph.D. (Technical Advisor)

Project Deliverable

First action

After being interviewed for the UX/UI position, they offered me a paid work day at their office to test my abilities. My mission was to propose a new visual identity, and if possible redesign one of the product pages.

My approach was to rewrite one of the application pages using the Twitter Bootstrap framework. After I had finished, I began to style the page. Right away, I noticed a big UX problem; the user had to click on the computer to open and start working on the terminal. I immediately solved this problem and continued to propose some visual changes.

I also suggested a touch of emotional design. Depending on the time the user visits the site, the background of the application changes color.

User Journey

User Questionary

Mobile First Wireframes

Same Page Wireframe Options

Second action: Web app UX and UI

I passed the test and got hired as Stacktile’s lead designer.

First of all, I created a questionary and applied it to a group of users, furthermore, I examined the Piwik analytics data, and also designed and refined user stories, user journeys, and wireframes.

During the time I worked there, I did countless iterations like this to fine-tune the UX and UI of the application.

Stacktile landing page iterations

For the launch of the web app, we created three landing pages with different designs, texts, and micro-copy to test which of them would convert better.

1st iteration

2nd iteration

3rd iteration

Solutions 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.