Overview

Usersnap was mentioned in Forbes as one of the most successful and fast-growing startups from Eastern Europe. It’s a SaaS product representing a visual bug tracker that helps developers and startups to track and find bugs easily using visual annotated feedback system.

In the beginning of 2016, we relaunched our website Usersnap.com. The last time it’d been redesigned was 2014 and we figured that it was time to build a brand new website with the clean navigation and cohesive experience. Take a glimpse into my design process.

Challenge

On simultaneous meetings, we had a lot of discussions with stakeholders and development team of how we can make our website better and improve the experience of our customers and new visitors. The previous version of website was quite good and effective but we still had a number of moments to be improved:

Improve user experience

One of the primary tasks was to focus on user’s needs and goals along with our business objectives. So the new website should convey a clear explanation of how our product can solve problems of the customer, what are the killing features of Usersnap and if it’s valuable enough to stick around.


Social proof

I needed to provide a social proof representing to the customer that Usersnap is used by the effective and successful teams and startups. The visitor needed to see the stories of how our product is used, in which cases and how to benefit from it.


Increase convertion rates

I had to restructure the information architecture and navigation design in order to increase conversion rate. It can be achieved by improving the UX of the forms, enhancing the CTA elements and emphasizing the most important parts of content.


Develop cohesive style guide

The previous version of the website was built gradually by different parts and eventually we had visually scattered pages and unstructured chunks of code. Sone of my main tasks was to develop a unified and consistent visual style across all the pages and UI elements of the website.


User Research

Usersnap is a SaaS product that provides a B2B solution which means that our target user is not represented by half the world. Let’s imagine a user, we can call him Larry. He is a typical developer or an entrepreneur working in a startup or an IT company of whatever size. And one of Larry’s problems in the development workflow are the inevitable bugs and glitches that appear here a there across the work process. When he tries to assign these bugs to his teammates he can face his main pain. Most of the bugs can’t be explained clearly so the process of resolving the bugs turns into long chats of misunderstanding and figuring out what and how to do. And here comes Usersnap – the visual bug tracker, which helps to tackle bug tracking and fixing easily and in a short time.

This is how we create a value for Larry. And our main strategy is to deliver this value to all our customers in order to satisfy their needs and pains. And only after that we can get the value back from them in the form of positive feedback, loyalty and profit. So we should focus on our end customer and regard these questions as of paramount importance:

  • What are the biggest issues of Larry?
  • What makes a good workday for him?
  • Who else is involved in the process?
  • What are the other systems involved in process?
  • What makes a good UX for Larry?

So when a visitor comes to our website he or she should easily get an information and social proof of our product, learn the prices and make a decision about trying Usersnap.

Customer Journey Map

Information Architecture

Design Process

After user research and information architecture I continued with rapid prototyping. The interactive prototype created in Moqups tool allowed to test the idea and to play around with navigation and user flow.

After user research and information architecture I continued with rapid prototyping. The interactive prototype created in Moqups tool allowed to test the idea and to play around with navigation and user flow.

Every screen was reviewed and commented within our team in Invision – a perfect tool for creating interactive prototypes and design collaboration.

Style Guide

Every successful product should be recognizable and have a consistent visual representation throughout the UX. I developed a new Style Guide so Usersnap could follow the unified design language across all communications.

Implementing User Centered Design Principles for the Homepage

I’ve spent a lot of time pondering on the Homepage. This is the one of our most important landing pages so in order to be effective it had to answer these crucial questions for a visitor:

  • Where am I and what is this product about?
  • Why should I choose this product?
  • Is anybody else using this product?
  • How can I start using it?

Answering all these questions would allow us to provide a better UX and to increase the conversions rate. So I came up with the following structure:

HTML/CSS Markup

Finally we approved all screens and I delved into coding. I decided to base the front end on the PureCSS framework because of its lightness and versatility. I used Coda Editor for building the HTML/CSS code and CodeKit for rendering LESS files.

It was important for us that the markup for our new website was responsive, W3C-valid, cross-browsing and built considering “mobile-first” principles. After finishing the markup I passed it to developers and they adapted it for Hugo static engine which extremely affected the perfomance and speed of loading of the website. For version controlling we used trusted Github.

Even during coding we created a lot of tickets in Usersnap dashboard, created additional iterations across the user flow and updated various UI elements. That was possible due to the versatility of the markup.

Results

We gained a lot of positive feedback and more returning visitors

We received a lot of positive feedback about the new design from our customers and new visitors.


Increased conversion rates

The refined structure and UCD principles used in the design process brought good results. According to GA stats we increased the conversion rates of the homepage by about 20%-30%.


Less watinig, more satisfaction for users

We siginficantly shortened the loading time of the website by using Hugo static engine and optimizing the code and graphics, which has led to better experience from customer perspective.


Consolidated and cohesive experience

I improved the consistency of UI and usability by implementing a new design language and interchangeable UI modules.


Retrospective

What did I learn during the development process?

  • I learned a bunch of new technologies, fancy techniques, and other new stuff during the development process.
  • UX development process is endless. We should permanently research, test, build, and iterate for a better experience.
  • We should focus on pains and needs of our customer. Only then we will be able to a great product with a positive UX.
  • We should constantly move forward building the MVP and iterate it by adding new features which are required by our customers and come along with our business objectives.
  • By revamping our landing pages I learned how to follow the principle of progressive disclosure, which means that everything should progress naturally from simple to complex and we have to display only necessary info at any given time.