February 26th, 2018 by inflectra
A modern business website has to do so many things at once. It's this strange mix of full page billboard ad, store front, order hotline, technical manuals, newsletter, and more. Our website has evolved over the years to deliver on all of these while keeping pace with our products and the devices we use. We recently launched a redesigned site that clears away a lot of old HTML cobwebs, and give us a fresh new look we hope our visitors will enjoy. Here are our top five tips to redesigning a business website (something any business should do, in some form, regularly).
We ended up here:
After starting here:
And here's how we did it.
We had one overarching goal for this reboot: make it easier and faster for new users to find their way around, to understand who we are, and to see how our products can help them. We turned that into concrete steps for this first sprint (we've mapped out future sprints, just like we do for our products):
Our list of goals was a pretty big shopping list. We touched / heavily changed hundreds of files to deliver it. At the same time we viewed this as a minimum viable change. Changing just the "front" pages would have made the rest of the site feel disconnected (see Windows 10 Settings vs Control Panel... 2.5 years in). Not changing the navigation would have meant when we did, every page would need to be reviewed and changed again. Our solution was a good compromise. At launch there are lots of things we still want to improve, but its better to release a better site now, than an even better site later. In the balance between quality, quantity, and speed, we kept the quantity in check.
We've got this grand plan, but who should do the work? This felt like a classic case for outsourcing: someone to bring in fresh ideas and new design patterns, without diverting the team from our products.
So we decided to not outsource any of it and do it 100% ourselves. This makes sense, promise. Basically, it felt weird to think about another company creating our site. It's like asking a stranger to choose your cufflinks or jewelry for the day. No-one at Inflectra regularly wears cufflinks, but when we need to, we pick them out ourselves! So it is with our website. We wanted the website to really show who we are: in everything from the design, to the text, the feel, the icons, and the images. For a company who makes web apps it just makes sense.
We did it ourselves, but we didn't do this as a side project. This became the main job of the team (a mix of design, marketing, management, developers, testers) for the duration of the project -- roughly three months. It wasn't 100% all hands 100% of the time, but it was the priority project for all involved. This really helped push through fast and avoid tensions between competing priorities.
This was the right choice for us. Could it be the right choice for you? If you have all the skills in house (from design, to SEO, to development, to writing the words on the page) strongly consider it. Here are a few top reasons why (feel free to pitch these to your powers-that-be and let us know how you get on):
If you're a software company, likely the scariest part will be writing clear, short, text that reads really well. If you don't have a Don Draper to hand, don't be daunted. Give it a try, and let your budding authors out. Write one really long paragraph about how great one of your products is, then pass it to someone else to rewrite, then someone else to make it half as long, then take another stab at it yourself. Try to not be precious about any phrase, or particular word. If you end up with something you all love: repeat, repeat, repeat.
The writing process was a long and hard one. For us, it was part of a year long effort to sharpen our public messages. It took lots of brainstorming sessions, thesaurus use, learning from books, and getting inspired by websites we really like. We started off being as clear as possible about who we are as a company, and what we're here to do (this involved just about everyone, not just the web team). That framed how we thought about our customers and our products, which led to more brainstorms, and more throwing text at a wall (literally - we use whiteboards a lot).
Here's a rough take on how we ended up articulating who we are (and who we've been since the company began):
Those four bullets gave us the high level context for how to approach writing new text across the website. It also helped focus us on areas where we can speak more strongly to those bullets in the future.
Let's break this down into performance and features/content.
One blunt, but still useful metric, is page size. The home page of the old site was over 3mb (about average for a web page in 2017). It's now, with gzipping, almost 500kb (among the top performers for 2017). This is a massive improvement, but not nearly as important as actual page speed, which has more than doubled, and the gap is bigger still on mobile networks.
There are three main areas we worked on to improve these stats:
The above was only part of the effort by the team. Here's a few big takeaways from the developers/designers about designing the site:
That's a peek into our process. We hope it can help you on your own design or redesign project. If you want any more information about anything we've discussed, please drop us a comment below.
Ask an Inflectra expert:
SpiraTest combines test management, requirements traceability & bug-tracking
SpiraTeam brings your teams together, managing the entire application lifecycle
SpiraPlan lets you manage your programs and portfolio of projects like never before
Orchestrates your automated regression testing, functional, load and performance
The ultimate test automation platform for web, mobile, and desktop applications
The help desk system, designed specifically for software support teams
Cloud hosted, secure source code management - Git and Subversion
Exploratory testing capture tool that automatically records your testing activity
Let us deal with the IT pain so you don't have to. Or use on-premise if you prefer.
Our customers work in every industry imaginable. From financial services to healthcare and biotech to government and defense and more, we work with our customers to address their specific needs.
Our products do not enforce a methodology on you, instead they let you work your way. Whether you work in agile development, Scrum and XP, Kanban and Lean, Waterfall, hybrid, or Scaled Agile Inflectra can help.
If you want to learn more about application delivery, testing, and more take a look at our whitepapers, videos, background papers, blog, and presentations.
Customers use our tools to help automate repetitive tasks and streamline their business processes using our Robotic Process Automation (RPA) solutions.
We collaborate with a wide range of teams to bring our customers a range of services (including load testing, training, and consultation), complimentary technologies, and specialized tools for specific industries.
Learn how different organizations have benefited from using Inflectra products to manage their software testing and application develooment.
Outstanding support is the foundation of our company. We make support a priority over all other work. Take a look at our support policy.
Discover great tips, discussions, and technical solutions from fellow customers and Inflectra's technical experts.
If you can't find the answer you're looking for, please get in touch with us: over email, phone, or online.
We are constantly creating new videos to help customers learn about our products, including through in depth webinars, all freely available along with a wide selection of presentations.
We provide a number of resources to help customers learn how to get the most out of our products, with free online resources, virtual classrooms, and face to face.
Read about Inflectra, our manifesto, and values. Meet our incredible customers who are building awesome things. We are focused on their success using our tools.
The Inflectra Blog contains articles on all aspects of the software lifecycle.
In addition we have whitepapers,
background articles, videos and
presentations to help get you started.
Events are a big part of our awesome customer service. They are a chance to learn more about us, our products, and how to level up your skills with our tools.
We partner with educational institutions and individuals all over the world. We are also a great place to work and encourage you to explore joining our team.
Please contact us with your questions, feedback, comments, or suggestions. We'll get back to you as soon as possible.
When you need additional assistance (be it training, consulting, or integration services) our global certified solution provider partner network is ready to help.
At Inflectra, we are fully committed to provide our customers with the very best products and customer service.
We want to help developers extend and customize our tools to fit in with their needs. We provide robust APIs, sample code, and open source projects.