Try Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\nA history lesson.<\/h2>\n\n\n\n
Before sharing the latest lessons learned, I\u2019d like to give you a glimpse into the world of Usersnap websites. Since it\u2019s birth, usersnap.com has seen a lot of different website designs, technologies, and content.<\/p>\n\n\n\n
So let me give you a bit of history of usersnap.com.<\/p>\n\n\n
\n![\"usersnap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-website-relaunch-2013.jpg\")
<\/figure>\n<\/div>\n\n\nJanuary 2013:
<\/p>\n\n\n
\n![\"usersnap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/Usersnap-website-relaunch-mid-2013.png\")
<\/figure>\n<\/div>\n\n\nUsersnap.com in mid-2013:
<\/p>\n\n\n
\n![\"usersnap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-mid-2014.jpg\")
<\/figure>\n<\/div>\n\n\nHow the website looked like in Early 2014:
<\/p>\n\n\n
\n![\"usersnap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-relaunch-2014.jpg\")
<\/figure>\n<\/div>\n\n\n…and in late 2014:
<\/p>\n\n\n
\n![\"website](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-2015.jpg\")
<\/figure>\n<\/div>\n\n\nHere’s how the website changed in 2015:
<\/p>\n\n\n
\n![\"website](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-website-relaunch-2016.jpg\")
<\/figure>\n<\/div>\n\n\nOur all new website since Feb. 24th 16:
<\/p>\n\n\n\n
Yet another relaunch?<\/h2>\n\n\n\n
So, you might wonder: Why – another re-launch?
<\/em>
Well. Our last major redesign happened in late 2014. That said, our recent relaunch was just a redesign and had nothing to do with the technology being used.<\/p>\n\n\n\nSince the end 2014, a lot of things happened. Usersnap grew its customer base as well as their number of employees. Especially the later factor made us re-think the way we publish our content.<\/p>\n\n\n\n
Making it easy for everyone on our team to contribute to our landing pages was our main incentive here.<\/p>\n\n\n\n
And since we just kept adding different design types to our existing landing pages, we decided that this is going to be a major relaunch.<\/p>\n\n\n\n
The branding goal: Same same, but better.<\/h2>\n\n\n\n
From a technology perspective, our goals were simple and clear – at least in theory. From a brand and marketing perspective, they weren\u2019t that obvious in the beginning.<\/p>\n\n\n\n
However, we knew that a fresher look of Usersnap and our product will help us in the long run.<\/p>\n\n\n\n
Dated October 27th 2015 I\u2019ve found this Google document in which we concluded the following goals for the upcoming redesign:<\/p>\n\n\n\n
\n- redesign usersnap.com in order to improve the user experience<\/li>\n\n\n\n
- unify the landing page design<\/a> – currently we have differently looking landing pages out there.<\/li>\n\n\n\n
- reduce the amount of landing pages<\/li>\n\n\n\n
- each page should solve a purpose (i.e. has a particular user in mind and should serve a particular point in the user\u2019s customer journey)<\/li>\n\n\n\n
- deploying new sites should be so simple that everyone can do it.<\/li>\n<\/ul>\n\n\n\n
New tool stack<\/h2>\n\n\n\n
When having a software – browser based – product, legacy code becomes an important issue over time. Especially since our website and domain usersnap.com is deeply connected with our web application.<\/p>\n\n\n\n
And because of that, changing simple and minor things on a landing page, lead to an inefficient process involving engineering power and therefore requiring too many people be involved.<\/p>\n\n\n
\n![\"tool](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/tool-stack-usersnap.jpg\")
<\/figure>\n<\/div>\n\n\nWe knew that we had to re-ask a lot of questions which haven\u2019t been asked in the past.
<\/p>\n\n\n\n
New workflow<\/h2>\n\n\n\n
It\u2019s not just that we changed our tool stack because of shiny new tools and toys. The major change in our tool stack was due to our new workflow. There was this clear need that the workflow for changing things on our website must be as easy as possible and must enable marketing people, as well as designers to change things.<\/p>\n\n\n\n
If you want to read more about how we set up our new workflows for deploying landing pages, I recommend checking out this sitepoint.com article<\/a> which I published a couple of days ago.<\/p>\n\n\n\n![\"learnings](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/03\/Learnings-relaunch.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
This article<\/a> gives you an in-depth look how and why we did certain things in regards to specific tools.<\/p>\n\n\n\nContent first? Design first?<\/h2>\n\n\n\n
When starting out with a blank page, people persistently start working on low fidelity scribbles and mockups without thinking about content first.<\/p>\n\n\n\n
It\u2019s a really hard game to not fall into the trap of sketching, drawing and designing in the first place. At least that\u2019s what I\u2019ve experienced.<\/p>\n\n\n\n
So starting out with the content which matters most to us, was one of the first tasks.<\/p>\n\n\n\n
(I\u2019d love to show you some of the first scribbles here – however, I am afraid that my writing is too bad to be showing anything ;))<\/p>\n\n\n\n
So here\u2019s the path we took in bringing this website live.<\/p>\n\n\n
\n![\"learnings-relaunch-website\"](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/learnings-relaunch-website.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
As you can see in the chart above, we really tried to focus on the content this time. During the process of designing and launching the site, we re-worked the content multiple times and focused on details as well.<\/p>\n\n\n
\n![\"usernsap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/usersnap-launch-team.jpg\")
<\/figure>\n<\/div>\n\n\nFor example, we\u2019ve set up our own dashboard which we only used for taking screenshots of our product.
<\/p>\n\n\n\n
Learning from our design process<\/h2>\n\n\n\n
After working on our content and information architecture we continued with prototyping. We created low-fidelity mockups with Moqups.com<\/a> and collected a mood board with different inspirations and ideas inside an own Usersnap project.<\/p>\n\n\n\n![\"usersnap](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/03\/usersnap_prototypes-moqups.jpg\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
After prototyping, our designer Pavel<\/a> started to first mockups in Sketch<\/a>. Sketch is a pretty awesome tool for UI designers. It’s light and easy-to-use.<\/p>\n\n\n\n![\"review](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/03\/usersnap-sketch.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n
Try Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\nLearnings from using a static site generator<\/h2>\n\n\n\n
If you\u2019re an active reader of our blog, you probably know that bugtrackers.io (a side project of ours) already runs on Hugo<\/a>, a static site generator. The experience with Hugo for bugtrackers.io made us choose it for usersnap.com as well.<\/p>\n\n\n\nHowever, we weren\u2019t fully aware of the consequences. Bugtrackers.io is a pretty simple website compared to usersnap.com. Making usersnap.com Hugo-ready required us to put our heads together and over-invest in the Hugo setup.<\/p>\n\n\n\n
There were a lot of bugs and issues which I guess simply occurred because we used Hugo for the first time for such an \u201cexpansive website\u201d.<\/p>\n\n\n\n
Become an information & technology architect<\/h2>\n\n\n\n
Building a website is like building a house. Without a good foundation, you and your project won\u2019t make it anywhere. So, better become an architect.<\/p>\n\n\n\n
The architecture comes into place when working on your content. But it also plays a key role while developing and prototyping.<\/p>\n\n\n\n
Making sure that your CSS files are well-structured is key here. Only use CSS where it\u2019s supposed to be.<\/p>\n\n\n\n
A re-launch is different than a launch.<\/h2>\n\n\n\n
Re-launching a website is always more complex than launching something completely new. The relaunch of usersnap.com required us to take a deep look into our technological basis and how we did things in the past.<\/p>\n\n\n\n
Redirecting URLs, making sure that our product is up-and-running and links are working was a major task.<\/p>\n\n\n\n
A checklist<\/a> of things which had to be checked before going live with Hugo on usersnap.com kept us from going nuts. There are so many things which you probably do not consider as relevant, but which do pop up just before going live.<\/p>\n\n\n\nHere\u2019s how our relaunch checklist<\/a> looked liked.<\/p>\n\n\n\nDo not underestimate things which you have never done before<\/h2>\n\n\n\n
During the process of relaunching usersnap.com, we encountered situations which we haven\u2019t encountered before. We used tools which we haven\u2019t used before. And we forced ourselves to set up a new workflow which we weren\u2019t used to.<\/p>\n\n\n\n
So there\u2019s a lot of new<\/em> here.<\/p>\n\n\n\nOne of the biggest learnings which we saw, can be found in this factor. Not being familiar with technologies, frameworks or workflows require a greater amount of time and resource than things which you\u2019ve always used to do.<\/p>\n\n\n\n
The importance of a proper CDN when relaunching<\/h2>\n\n\n\n
A CDN (content delivery network) is a system of distributed servers. Those distributed servers enable you to serve pages with a high performance and high availability.
We currently have 3 EC2s installed<\/a>. One is located on the West Coast of the United States, one is located in Dublin, Ireland and one is in Singapore. The main reason for that is that we\u2019re deploying our product to a worldwide user base and we have to ensure a good user experience everywhere in the world.<\/p>\n\n\n\n![\"cloud-saas-application-usersnap\"](\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2015\/07\/cloud-saas-application-usersnap.png\")
<\/figure>\n<\/div>\n\n\n<\/p>\n\n\n\n
Getting a caching strategy<\/h2>\n\n\n\n
A great caching strategy is also an important factor when it comes to performance. You can make use of various caching strategies. From short-term (seconds), to mid-term (minutes\/hours), to long-term caching (like forever).
We are caching forever, which requires a good strategy to do so (in order to make sure that everyone gets the current data available).
We make use of a single-file hashing, set up with hashly<\/a>. We added some custom scripts and modifications inside Hugo<\/a>. Et Voila. So when someone visits usersnap.com only files which have been changed since their last visit, have to be checked and loaded.<\/p>\n\n\n\nSet yourself a deadline<\/h2>\n\n\n\n
I guess this is the biggest takeaway for us as a team and a product company. As a project-driven company or agency, you\u2019re probably used to deadlines. They are everywhere. And they put you under pressure but give you a clear outline as well.<\/p>\n\n\n\n
Being a product company we might not be used to such clear deadlines.<\/p>\n\n\n\n
If a new feature isn\u2019t ready to be shipped on the set deadline, it isn\u2019t as bad as informing a customer that his website can\u2019t go live.<\/p>\n\n\n\n
But we knew that setting an internal deadline for shipping the new website is a key factor. So we did exactly that. And set a non-moveable deadline for our going live.<\/p>\n\n\n\n
Every single tool we used for relaunching our website<\/h2>\n\n\n\n
Before ending this blog post, I\u2019d like to give you a short overview of the tools used. I like being transparent and therefore I\u2019ve collected all the tools and apps we\u2019ve used to bring usersnap.com live.<\/p>\n\n\n\n
\n- Idea generation<\/strong>: Paper, pen & whiteboards<\/li>\n\n\n\n
- Mockups & Scribbles<\/strong>: moqups.com<\/li>\n\n\n\n
- Content strategy<\/strong>: Google Docs & Spreadsheets<\/li>\n\n\n\n
- Communication<\/strong>: Skype, Slack<\/li>\n\n\n\n
- Design<\/strong>: Sketch<\/li>\n\n\n\n
- Design feedback<\/strong>: InVisionApp<\/li>\n\n\n\n
- Text Editor:<\/strong> Atom<\/li>\n\n\n\n
- Web Hosting:<\/strong> AWS EC2, Cloudfront<\/li>\n\n\n\n
- Frontend Framework:<\/strong> GoHugo, brunch<\/a>, hashly<\/a>, bash<\/a>, bower<\/a>, npm<\/a><\/li>\n\n\n\n
- Development and Build Environment:<\/strong> Docker<\/li>\n\n\n\n
- Analytics:<\/strong> Google Analytics<\/li>\n\n\n\n
- Testing & QA:<\/strong> Usersnap<\/li>\n\n\n\n
- Continuous integration:<\/strong> Codeship<\/li>\n\n\n\n
- Other tools:<\/strong> hellobar, Google Tag Manager<\/li>\n\n\n\n
- Lots of coffee<\/li>\n<\/ul>\n\n\n\n
<\/p>\n\n\n
Try Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\nWrapping it up.<\/h2>\n\n\n\n
All in all, it\u2019s been a fun ride to bring usersnap.com live. Setting up a completely new web development workflow, making use of new technologies and redesigning the site requires quite a bit of resource, time and a lot of coffee \ud83d\ude09<\/p>\n\n\n\n
<\/div>\n\n\n\nThis article was brought to you by Usersnap<\/a> – a visual bug reporting software used by software companies like Facebook<\/a>, and Microsoft<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"Oh boy, it\u2019s been a crazy week. But not in a bad way. In a good way. In a really good way. A couple of days ago, we went live with our new website. The process to bringing our website live has been an incredible awesome roller coaster ride with so many learnings and insights […]<\/p>\n","protected":false},"author":16,"featured_media":4564,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-4549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","author_info":{"display_name":"Thomas Peham","author_link":"https:\/\/usersnap.com\/blog\/author\/thomas\/"},"yoast_head":"\n
Lessons Learned From Relaunching Our Website! - Usersnap<\/title>\n<meta name=\"description\" content=\"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Lessons Learned From Relaunching Our Website! - Usersnap\" \/>\n<meta property=\"og:description\" content=\"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\" \/>\n<meta property=\"og:site_name\" content=\"Usersnap Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/usersnap\" \/>\n<meta property=\"article:published_time\" content=\"2016-03-01T09:13:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-30T06:43:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Thomas Peham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tompeham\" \/>\n<meta name=\"twitter:site\" content=\"@usersnap\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thomas Peham\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\"},\"author\":{\"name\":\"Thomas Peham\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\"},\"headline\":\"Lessons learned from relaunching our website\",\"datePublished\":\"2016-03-01T09:13:01+00:00\",\"dateModified\":\"2025-07-30T06:43:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\"},\"wordCount\":1753,\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\",\"url\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\",\"name\":\"Lessons Learned From Relaunching Our Website! - Usersnap\",\"isPartOf\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg\",\"datePublished\":\"2016-03-01T09:13:01+00:00\",\"dateModified\":\"2025-07-30T06:43:55+00:00\",\"description\":\"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage\",\"url\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg\",\"contentUrl\":\"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg\",\"width\":700,\"height\":400,\"caption\":\"relaunching website usersnap.com\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/usersnap.com\/blog\/#website\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"name\":\"Usersnap Blog\",\"description\":\"Learn more about how to collect user feedback and build better products with the magic power of feedback.\",\"publisher\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/usersnap.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/usersnap.com\/blog\/#organization\",\"name\":\"Usersnap\",\"url\":\"https:\/\/usersnap.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"contentUrl\":\"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png\",\"width\":136,\"height\":26,\"caption\":\"Usersnap\"},\"image\":{\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/usersnap\",\"https:\/\/x.com\/usersnap\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b\",\"name\":\"Thomas Peham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g\",\"caption\":\"Thomas Peham\"},\"sameAs\":[\"https:\/\/x.com\/tompeham\"],\"url\":\"https:\/\/usersnap.com\/blog\/author\/thomas\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Lessons Learned From Relaunching Our Website! - Usersnap","description":"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/","og_locale":"en_US","og_type":"article","og_title":"Lessons Learned From Relaunching Our Website! - Usersnap","og_description":"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.","og_url":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/","og_site_name":"Usersnap Blog","article_publisher":"https:\/\/www.facebook.com\/usersnap","article_published_time":"2016-03-01T09:13:01+00:00","article_modified_time":"2025-07-30T06:43:55+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","type":"image\/jpeg"}],"author":"Thomas Peham","twitter_card":"summary_large_image","twitter_creator":"@tompeham","twitter_site":"@usersnap","twitter_misc":{"Written by":"Thomas Peham","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#article","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/"},"author":{"name":"Thomas Peham","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b"},"headline":"Lessons learned from relaunching our website","datePublished":"2016-03-01T09:13:01+00:00","dateModified":"2025-07-30T06:43:55+00:00","mainEntityOfPage":{"@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/"},"wordCount":1753,"publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"image":{"@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","articleSection":["Web Development"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/","url":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/","name":"Lessons Learned From Relaunching Our Website! - Usersnap","isPartOf":{"@id":"https:\/\/usersnap.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage"},"image":{"@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage"},"thumbnailUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","datePublished":"2016-03-01T09:13:01+00:00","dateModified":"2025-07-30T06:43:55+00:00","description":"We relaunched our website usersnap.com The process to bringing our website live has been an incredible awesome ride with so many learnings to share.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/lessons-learned-website-relaunch\/#primaryimage","url":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","contentUrl":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","width":700,"height":400,"caption":"relaunching website usersnap.com"},{"@type":"WebSite","@id":"https:\/\/usersnap.com\/blog\/#website","url":"https:\/\/usersnap.com\/blog\/","name":"Usersnap Blog","description":"Learn more about how to collect user feedback and build better products with the magic power of feedback.","publisher":{"@id":"https:\/\/usersnap.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/usersnap.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/usersnap.com\/blog\/#organization","name":"Usersnap","url":"https:\/\/usersnap.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","contentUrl":"https:\/\/usersnap.com\/wp-content\/uploads\/2020\/08\/Usersnap-Updated-Logo.png","width":136,"height":26,"caption":"Usersnap"},"image":{"@id":"https:\/\/usersnap.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/usersnap","https:\/\/x.com\/usersnap"]},{"@type":"Person","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/85bd1168f7e7c005c6cd2a4045e3d59b","name":"Thomas Peham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/usersnap.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c570afeda0ee367f5824a6762a0511ec7be061521c645ef29d34b976c183341d?s=96&d=mm&r=g","caption":"Thomas Peham"},"sameAs":["https:\/\/x.com\/tompeham"],"url":"https:\/\/usersnap.com\/blog\/author\/thomas\/"}]}},"_links":{"self":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/4549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/comments?post=4549"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/posts\/4549\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media\/4564"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/media?parent=4549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/categories?post=4549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/blog\/wp-json\/wp\/v2\/tags?post=4549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<\/figure>\n<\/div>\n\n\nJanuary 2013:
<\/p>\n\n\n
<\/figure>\n<\/div>\n\n\nUsersnap.com in mid-2013:
<\/p>\n\n\n
<\/figure>\n<\/div>\n\n\nHow the website looked like in Early 2014:
<\/p>\n\n\n
<\/figure>\n<\/div>\n\n\n…and in late 2014:
<\/p>\n\n\n
<\/figure>\n<\/div>\n\n\nHere’s how the website changed in 2015:
<\/p>\n\n\n
<\/figure>\n<\/div>\n\n\nOur all new website since Feb. 24th 16:
<\/p>\n\n\n\n
Yet another relaunch?<\/h2>\n\n\n\n
So, you might wonder: Why – another re-launch? Since the end 2014, a lot of things happened. Usersnap grew its customer base as well as their number of employees. Especially the later factor made us re-think the way we publish our content.<\/p>\n\n\n\n Making it easy for everyone on our team to contribute to our landing pages was our main incentive here.<\/p>\n\n\n\n And since we just kept adding different design types to our existing landing pages, we decided that this is going to be a major relaunch.<\/p>\n\n\n\n From a technology perspective, our goals were simple and clear – at least in theory. From a brand and marketing perspective, they weren\u2019t that obvious in the beginning.<\/p>\n\n\n\n However, we knew that a fresher look of Usersnap and our product will help us in the long run.<\/p>\n\n\n\n Dated October 27th 2015 I\u2019ve found this Google document in which we concluded the following goals for the upcoming redesign:<\/p>\n\n\n\n When having a software – browser based – product, legacy code becomes an important issue over time. Especially since our website and domain usersnap.com is deeply connected with our web application.<\/p>\n\n\n\n And because of that, changing simple and minor things on a landing page, lead to an inefficient process involving engineering power and therefore requiring too many people be involved.<\/p>\n\n\n We knew that we had to re-ask a lot of questions which haven\u2019t been asked in the past. It\u2019s not just that we changed our tool stack because of shiny new tools and toys. The major change in our tool stack was due to our new workflow. There was this clear need that the workflow for changing things on our website must be as easy as possible and must enable marketing people, as well as designers to change things.<\/p>\n\n\n\n If you want to read more about how we set up our new workflows for deploying landing pages, I recommend checking out this sitepoint.com article<\/a> which I published a couple of days ago.<\/p>\n\n\n <\/p>\n\n\n\n This article<\/a> gives you an in-depth look how and why we did certain things in regards to specific tools.<\/p>\n\n\n\n When starting out with a blank page, people persistently start working on low fidelity scribbles and mockups without thinking about content first.<\/p>\n\n\n\n It\u2019s a really hard game to not fall into the trap of sketching, drawing and designing in the first place. At least that\u2019s what I\u2019ve experienced.<\/p>\n\n\n\n So starting out with the content which matters most to us, was one of the first tasks.<\/p>\n\n\n\n (I\u2019d love to show you some of the first scribbles here – however, I am afraid that my writing is too bad to be showing anything ;))<\/p>\n\n\n\n So here\u2019s the path we took in bringing this website live.<\/p>\n\n\n <\/p>\n\n\n\n As you can see in the chart above, we really tried to focus on the content this time. During the process of designing and launching the site, we re-worked the content multiple times and focused on details as well.<\/p>\n\n\n For example, we\u2019ve set up our own dashboard which we only used for taking screenshots of our product. After working on our content and information architecture we continued with prototyping. We created low-fidelity mockups with Moqups.com<\/a> and collected a mood board with different inspirations and ideas inside an own Usersnap project.<\/p>\n\n\n <\/p>\n\n\n\n After prototyping, our designer Pavel<\/a> started to first mockups in Sketch<\/a>. Sketch is a pretty awesome tool for UI designers. It’s light and easy-to-use.<\/p>\n\n\n <\/p>\n\n\n If you\u2019re an active reader of our blog, you probably know that bugtrackers.io (a side project of ours) already runs on Hugo<\/a>, a static site generator. The experience with Hugo for bugtrackers.io made us choose it for usersnap.com as well.<\/p>\n\n\n\n However, we weren\u2019t fully aware of the consequences. Bugtrackers.io is a pretty simple website compared to usersnap.com. Making usersnap.com Hugo-ready required us to put our heads together and over-invest in the Hugo setup.<\/p>\n\n\n\n There were a lot of bugs and issues which I guess simply occurred because we used Hugo for the first time for such an \u201cexpansive website\u201d.<\/p>\n\n\n\n Building a website is like building a house. Without a good foundation, you and your project won\u2019t make it anywhere. So, better become an architect.<\/p>\n\n\n\n The architecture comes into place when working on your content. But it also plays a key role while developing and prototyping.<\/p>\n\n\n\n Making sure that your CSS files are well-structured is key here. Only use CSS where it\u2019s supposed to be.<\/p>\n\n\n\n Re-launching a website is always more complex than launching something completely new. The relaunch of usersnap.com required us to take a deep look into our technological basis and how we did things in the past.<\/p>\n\n\n\n Redirecting URLs, making sure that our product is up-and-running and links are working was a major task.<\/p>\n\n\n\n A checklist<\/a> of things which had to be checked before going live with Hugo on usersnap.com kept us from going nuts. There are so many things which you probably do not consider as relevant, but which do pop up just before going live.<\/p>\n\n\n\n Here\u2019s how our relaunch checklist<\/a> looked liked.<\/p>\n\n\n\n During the process of relaunching usersnap.com, we encountered situations which we haven\u2019t encountered before. We used tools which we haven\u2019t used before. And we forced ourselves to set up a new workflow which we weren\u2019t used to.<\/p>\n\n\n\n So there\u2019s a lot of new<\/em> here.<\/p>\n\n\n\n One of the biggest learnings which we saw, can be found in this factor. Not being familiar with technologies, frameworks or workflows require a greater amount of time and resource than things which you\u2019ve always used to do.<\/p>\n\n\n\n A CDN (content delivery network) is a system of distributed servers. Those distributed servers enable you to serve pages with a high performance and high availability. <\/p>\n\n\n\n A great caching strategy is also an important factor when it comes to performance. You can make use of various caching strategies. From short-term (seconds), to mid-term (minutes\/hours), to long-term caching (like forever). I guess this is the biggest takeaway for us as a team and a product company. As a project-driven company or agency, you\u2019re probably used to deadlines. They are everywhere. And they put you under pressure but give you a clear outline as well.<\/p>\n\n\n\n Being a product company we might not be used to such clear deadlines.<\/p>\n\n\n\n If a new feature isn\u2019t ready to be shipped on the set deadline, it isn\u2019t as bad as informing a customer that his website can\u2019t go live.<\/p>\n\n\n\n But we knew that setting an internal deadline for shipping the new website is a key factor. So we did exactly that. And set a non-moveable deadline for our going live.<\/p>\n\n\n\n Before ending this blog post, I\u2019d like to give you a short overview of the tools used. I like being transparent and therefore I\u2019ve collected all the tools and apps we\u2019ve used to bring usersnap.com live.<\/p>\n\n\n\n <\/p>\n\n\n All in all, it\u2019s been a fun ride to bring usersnap.com live. Setting up a completely new web development workflow, making use of new technologies and redesigning the site requires quite a bit of resource, time and a lot of coffee \ud83d\ude09<\/p>\n\n\n\n This article was brought to you by Usersnap<\/a> – a visual bug reporting software used by software companies like Facebook<\/a>, and Microsoft<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" Oh boy, it\u2019s been a crazy week. But not in a bad way. In a good way. In a really good way. A couple of days ago, we went live with our new website. The process to bringing our website live has been an incredible awesome roller coaster ride with so many learnings and insights […]<\/p>\n","protected":false},"author":16,"featured_media":4564,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":true,"inline_featured_image":false,"ub_ctt_via":"","footnotes":""},"categories":[8],"tags":[],"class_list":["post-4549","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development-blog"],"acf":[],"featured_image_src":"https:\/\/usersnap.com\/blog\/wp-content\/uploads\/2016\/02\/website-relaunch-usersnap-2016.jpg","author_info":{"display_name":"Thomas Peham","author_link":"https:\/\/usersnap.com\/blog\/author\/thomas\/"},"yoast_head":"\n
<\/em>
Well. Our last major redesign happened in late 2014. That said, our recent relaunch was just a redesign and had nothing to do with the technology being used.<\/p>\n\n\n\nThe branding goal: Same same, but better.<\/h2>\n\n\n\n
\n
New tool stack<\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\nNew workflow<\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\nContent first? Design first?<\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\n<\/figure>\n<\/div>\n\n\n
<\/p>\n\n\n\nLearning from our design process<\/h2>\n\n\n\n
<\/figure>\n<\/div>\n\n\n<\/figure>\n<\/div>\n\n\nTry Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n
Learnings from using a static site generator<\/h2>\n\n\n\n
Become an information & technology architect<\/h2>\n\n\n\n
A re-launch is different than a launch.<\/h2>\n\n\n\n
Do not underestimate things which you have never done before<\/h2>\n\n\n\n
The importance of a proper CDN when relaunching<\/h2>\n\n\n\n
We currently have 3 EC2s installed<\/a>. One is located on the West Coast of the United States, one is located in Dublin, Ireland and one is in Singapore. The main reason for that is that we\u2019re deploying our product to a worldwide user base and we have to ensure a good user experience everywhere in the world.<\/p>\n\n\n<\/figure>\n<\/div>\n\n\nGetting a caching strategy<\/h2>\n\n\n\n
We are caching forever, which requires a good strategy to do so (in order to make sure that everyone gets the current data available).
We make use of a single-file hashing, set up with hashly<\/a>. We added some custom scripts and modifications inside Hugo<\/a>. Et Voila. So when someone visits usersnap.com only files which have been changed since their last visit, have to be checked and loaded.<\/p>\n\n\n\nSet yourself a deadline<\/h2>\n\n\n\n
Every single tool we used for relaunching our website<\/h2>\n\n\n\n
\n
Try Usersnap for Website Feedback<\/h2>Try Usersnap Now<\/a><\/div>\n\n\n\n
Wrapping it up.<\/h2>\n\n\n\n