Overview

Bugtracker.io is a side project of Usersnap. Usersnap is a visual bug tracker, which makes life of developers and their clients much easier by allowing them to find and fix bugs easily via visual communication and collaboration system. Working with our clients we gained a lot of useful and insightful information and stories about bug tracking so we decided to create a website dedicated to this topic. We didn’t expect such a successful result.

Challenge

As a UX/UI designer I was given the following tasks:

  • to implement the UCD principles in creating of the UI with a consistent navigation, and easy-to-read content
  • to consider the importance of the content and to create a UX focused on the readers
  • to develop a visual style for the website and related materials
  • to provide a clean, valid and responsive markup so that anyone could consume the content from any device in any circumstances

Target Audience

Like it’s pointed on the homepage of bugtracker.io, we all browse websites and use different applications every day. All that stuff is designed, coded and tested by real people like you and me. And for sure every developer or user at least once stumbled upon a bug or glitch while using or developing an interactive system. Therefore many of these people are interested in getting the valuable insights of how to optimize and improve bug-tracking process.

My Role in the Team

I was responsible for the following moments:

  • establishing of UX strategy based on user centered design principles
  • developing of visual style and high-quality pixel perfect design
  • providing a valid and responsive HTML/CSS markup

INFORMATION ARCHITECTURE & PROTOTYPING

Firstly I had to define the information architecture and to test the navigation. So developed prototypes using Balsamiq for prototyping and Invision for visual collaboration.

Design

After testing and iterating different versions of prototype I started to create the pixel-perfect UI in Photoshop. As I mentioned above we had to remember that in our case the content is the crucial. So I had to implement the principle of user centered design and make sure that the visual language is consistent, the navigation is clear and intuitive and the content is well designed and legible. I worked on the typography, colors, margins and proportions so the content would be visible and readable.

Responsive Markup

I had to create a markup that would be responsive, valid and look fine in all popular browsers. I decided to use Bootstrap framework because it met all these requirements. I used Coda Editor for writing the code and Codekit for rendering the LESS files. And we used Github for version control.

Results

New visitors & more conversions

We attracted a lot of attention by providing interesting information about bug tracking and generated a significant amount of traffic to our main website.


Positive feedback

We gained a lot of positive feedback about the design and insightful content of the website.


Perfomance

We used bootstrap framework and Hugo static engine which allowed to increase significantly the load speed of the website.


Important Takeaways

Lessons I’ve learned:

  • UCD principles are crucial especially when designing a website which is focused on the content
  • Prototyping allows to understand how a product behaves and what are its flaws
  • In order to launch a successful product we should always consider interests and needs of the customer