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
- Visual Identity (except logo)
- Simplified style guide
- Web app
- Website
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.