You’re here because you realized - you aren’t happy with your website. Whether your brand concept changed, conversions dropped, or you simply decided to make your digital “home” fancy and trendy, you should tackle a website redesign with all seriousness to achieve truly outstanding results. It’s easy to mess things up without a defined website redesign strategy behind your actions.
If you want your website redesign to go smoothly and ultimately bring you closer to your business goals, keep reading this article. We’ll discuss what you should do before starting your website redesign process and provide you with a website redesign project checklist to ensure your revamp endeavor’s effectiveness.
What is a website redesign?
To start with, let’s make it clear what “redesign” means. If you just want to slightly change a website layout, does it mean you need to redesign or ...? Our designers always tell clients that before investing time and resources into the project, it’s better to decide what level of changes they expect a website would undergo. A website redesign implies significant changes of the “inner” and “outer” site elements like code, structure, visuals, navigation, and content. Done properly, the website redesign leads to bounce rate decrease, conversion growth, and user experience enhancement.
Redesign vs. refresh
You can compare a website redesign to a complete overhaul of a house when you leave only the basement and walls and build the rest of the construction from zero. And if you just want to repaint the bedroom walls, you will more likely only need to purchase paint and brushes, won’t you?
Whereas a website redesign can entail considerable alterations of architecture, functionality, visuals, and content, a website refresh focuses on minor renovations. For example, if you want to change how the site looks and feels, you can try a different color palette or typography, and that will refresh the UI. Or, let’s say, you conducted a UX audit and then decided to change CTA buttons’ shape and color, and increase the contrast between text and background to improve accessibility in UX. These modifications will also fall under the website refresh.
And now you may have a logical question - how can you understand if the redesign moment has come?
Is it time for a redesign? Let’s check!
You have two options - rely on your subjective feeling or refer to analytics. I would do both. If your site brings you leads who regularly convert into customers, there should be no need for total transformation. In case you feel (and the data proves) that things are not like you suppose them to be, that’s a time to think about giving your website a second chance.
Also, try answering the following questions:
- Does the current website version convert leads?
- Are there any technical issues with the website?
- Are you generally satisfied with the website’s performance?
- Is the site mobile-friendly?
- Is it accessible?
I imagine your answers “yes” and “no” made up a certain proportion. If you have more negative than positive answers - chances are the website redesign is what you need. Then, let’s talk about how to prepare for a website redesign.
Things to consider when redesigning a website
To make the redesign as effective as possible, you should make clear questions before starting a process.
- Define the most important pages
You can do this by finding how traffic and conversions are interrelated. It will be a sort of BCG matrix in terms of website pages.
High conversion, high traffic pages are your bread and butter. Any unsuccessful changes can lead to terrific consequences ending up in traffic and conversions decline. That’s why you should be very careful when implementing any adjustments, as they may do you a disservice.
High conversion, low traffic pages require the same caution. Even though the traffic is not high, these pages show good results from the conversion point of view.
There is something that doesn’t work for conversions in case of high traffic, low conversion pages. You can experiment with these pages as you don’t risk conversions anyway. And the pages with low traffic and low conversion have nothing to lose, so you’re welcome to make any modifications.
This exercise will help you understand which pages are “cows,” bringing you traffic and conversions that you don’t want to break.
- Identify bottlenecks in user experience
Any frictions in the user journey hinder customers from reaching their goals. Before starting redesign, it’s crucial to detect the obstacles users face when interacting with your website.
Here is what you should investigate:
- Where are those gaps in user experience?
- What do customers like or dislike about your product?
- Is there any significant difference between web and mobile website performance?
- Do people have difficulties performing desired actions? (for example, CTA buttons don’t work as expected)
- What are those FUDs (fears, uncertainties, doubts) that stop leads from converting?
You can get valuable insights from website analytics (like, for example, Google Analytics or Mixpanel) and from the applications that analyze customers’ on-page behavior and interactions with website elements (like Hotjar and Crazy Egg).
We have an extensive overview of UX audit tools in the dedicated article; please check it out.
Besides analytical software, users’ session recordings and on-site surveys, which enable users to send you instant feedback about what’s going wrong on the website, will also assist you in gathering customer data.
- Determine website performance indicators
Whatever design changes you implement, they should be tied to business objectives. Therefore, to check how redesign impacts your business, set key metrics that will indicate any improvements in business performance after the website overhaul.
If you sell from your website (and I assume, you do), then your key metrics might be:
- Monthly recurring revenue (MRR)
- Average order value (AOL)
- Conversion rate
- Churn rate
- Customer lifetime value (LTV)
In addition to quantitative data, customer satisfaction metrics will hint if your redesign works.
Customer Satisfaction Score (CSAT) - you can send a survey to your loyal customers asking if they find the upgraded website more user-friendly, attractive, and functional than its previous version.
Net Promoter Score (NPS) - if more users than before are going to advise your website to their friends or colleagues, it’s already a pretty good sign.
Customer Effort Score (CES) - the fewer efforts customers make to reach their goals on your website, the better interaction experience they will have, and the more likely they will thank you by making a purchase.
- Test the elements you want to alter
Before implementing the global changes in website structure and user interface, try A/B testing separate elements and check if they entail any performance improvements compared to the current website version.
For example, you can test:
- Logo, colors, and fonts
- Product pages design and content
- Home page eye flow
- Images, icons, and infographics
- Contact forms and checkout
- Design of links and buttons
Once you’re finished with the above, you’re halfway done preparing for a successful website revamp and ready to move to the next stage of the redesign process.
12 steps of a website redesign project plan
Since I promised in the title of this article there’ll be no fluff here, let’s move to the website redesign checklist straight away. Depending on your ultimate business goals, you can add or omit some steps; they’re not set in stone. Just use them as a reference to remind yourself what else you can do to ensure your website redesign project will be successful.
Step 1: Clarify website stakeholders needs
How can you understand whether the project is successful or not? You need someone to show you that signal flag saying you’ve achieved the goal. Before starting a website redesign project, clarify all stakeholders’ expectations and needs, and understand what benefits they intend to get from a revamped website. In case the stakeholder is you, there should be no problem. Going further!
Step 2: Analyze website performance
Your goal is to check current monthly performance and compare it later to the redesigned website indicators. Below are some metrics you can choose from depending on the relevance of each for your case.
- Number of website visitors
- Dwell (or on-page) time
- Bounce rate
- Best-performing and lead-generating keywords
- Number of leads
- SEO rankings for main keywords
- Domain authority
Once you’ve selected essential metrics you will refer to, I recommend coming to the next important step.
Step 3: Document current metrics
You can do it in a spreadsheet devoting one separate sheet to one web page of your site. It may look something like this table.
Also, to be on the safe side, it would be better to back up the recent version of the website before starting a redesign. This way, you won’t lose existing SEO content in case you decide to leverage it later on the updated pages.
Step 4: Set redesign goals
Setting proper goals is a halfway to success. Here are the most common targets of a website redesign. You can either focus on one key goal or achieve all mentioned below as they are going side by side.
Refresh website look & feel
The trends in design are changing pretty fast. In a year, your website will likely look outdated, losing to more in-trend competitors. If you plan to update the website appearance, you should decide whether it’ll be just a color and typography refresh or a complete website overhaul with changes in architecture, visuals, and content. Sometimes it’s uneasy to define whether you need a website redesign or refresh. We elaborate more on this topic in a separate article discussing when and how to redesign a website.
Enhance user experience
We aren’t making websites for ourselves but users. High bounce rate, low conversion, and short on-page time unobtrusively hint that there might be problems with UX. It’d be more effective to conduct a UX audit before redesigning to clearly understand where that bottleneck in customer experience is. You can do the UX audit with the help of your internal team or hire third-party consultants who have vast experience in auditing websites or apps UX by walking in users’ shoes.
Increase traffic
Website traffic heavily depends on search engine optimization strategy and content. Needless to say, a company’s blog full of relevant, up-to-date materials is a “must” for attracting high-quality leads. Also, it’s crucial to make regular website performance analyses in terms of SEO ranking for main keywords. From SEO perspective, the redesign’s goal may be to embed essential keywords in new web pages’ content.
Improve conversions
If website visitors don't take expected actions (leave contact data, subscribe, or purchase) and drop off a sales funnel on their way to checkout, more likely they have some difficulties interacting with a product. Then the redesign goal may be a customer journey enhancement, which should result in conversion growth
Step 5: Define your redesign budget
Let’s talk about the figures. According to Hubspot’s research 63% of marketers had no idea how much their website redesign cost. What does it mean? More likely, they went over budget that obviously frustrated stakeholders. Whereas it’s pretty difficult to gauge the exact amount you’d need to pay for the full redesign, you can start by setting a bottom line you won’t exceed when planning your project expenses.
Step 6: Define your buyer personas
Understanding who your customers are and what they are looking for on your website helps you provide people with relevant and timely information. What is also important is that you won’t bother users with offerings they don’t really need at the moment. Thus, they will feel cared for and more likely to return when ready to purchase.
The typical way of getting your target audience’s portrait is by creating so-called customer (or buyer) personas based on psychographic data and jobs these ideal customers need to be done.
According to the research Google conducted some years ago, people have four main intents when surfing the internet: “I want to know,” “I want to go,” “I want to do,” and “I want to buy.”
If the design and content on your landing page push visitors to the purchase whereas they just want to read about product characteristics, chances are high they’ll exit soon. Customer personas give you an idea of how to design and what content to focus on to improve business results when making a website redesign.
Step 7: Prepare content before the redesign
When researching materials for this article, I came across a phrase I liked very much. “Content is water; the design is a cup.” Cool, right? There is a universal truth in these words. You need a cup that will exactly match the amount of water. Otherwise, you risk having either a half-full cup or a puddle on the floor.
Also, you’ll definitely want to avoid a so-called “content gap.” The content gap happens when you attract your ideal leads to the website but, for example, don’t have a relevant case study to prove your competence in the lead’s industry.
Step 8: Research keywords and take care of redirects
You already know your most important pages. The next task is to protect them with a 301 redirect. Redirects are crucial to retain the traffic and link value of the current pages during the redesign process. Create a simple spreadsheet to map your old and new URLs and then pass the document to your tech-savvy staff to implement necessary changes.
What else you can do with your new pages is to natively embed essential keywords into the content to cover topics that probably didn’t have much attention on the previous website version.
Step 9: Build website hierarchy
I’ll be now Captain Obvious saying that a sitemap is a website map. Sounds plain; however, thousands of websites overlook logical hierarchy making their customers perplexedly wandering from one page to another. If your product is what a customer critically needs, they probably would be patient enough to find what they’re searching for. In the worst case, a user will drop out wishing you “all the best.”
Step 10: Sketch out new website interface
Once you build your sitemap, which we can imagine as a backbone, it’s time to create a “skeleton,” aka wireframe. It’s up to you and your design team, whether it’ll be just a simple freehand drawing or a high-fidelity wireframe created in a special tool. In any case, it should clearly show the place of each webpage element, such as shapes, boxes, text, images, and forms.
Step 11: Think out website layout (find the balance between beauty and usability)
And when you’re done with the wireframe, create a website layout that will convey your brand look and feel. That means you should decide on typography, color scheme, and textures. All combined, these elements build a brand identity and unique customer experience. By the way, did you know that color is accountable for 85% of conversion?
Step 12: Design & Development
You did a great job above. So, now leave designers alone with their muse and allow them to create the artwork. I don’t have any idea how this magic happens, but every time our designers send me the illustrations for the articles, I’m amazed by their stunning graphics.
Once the new design is born, the ball goes to the development team to breathe life into your website redesign project.
Design tips to improve website UX
As a design agency, we can’t leave you without the design tips that undoubtedly help to improve user experience and increase your redesign effectiveness.
So, working on your website redesign, try:
- Using fair contrast between text and background
- Optimizing your website from an SEO perspective
- Adding visuals and unique brand elements to make your website recognizable
- Considering voice website search option
- Making all pages mobile-friendly
Think, that’s it? Not really
Even though your fresh design may work pretty well for some time, keep an eye on changes in market trends, design practices, and customer preferences. As we all live in a fast-paced environment, chances are you’ll have to start your redesign process again in a year or so. Contact us if you need any help in your website redesign, and see you in our next articles.
Top Stories
Principles of Design Examples: Boost Your Design Skills
There are no universal solutions knowing which will automatically make your design beautiful and effective. Still, there are basic principles that can help you improve each of your creations.
For example, understanding the laws of color, the principle of unity, and the correct use of white space helped us to create a consistent and harmonious website for Handprinter, a unique project that prompts people to make positive impacts on the environment. (check out the case study).
It's difficult to define exactly how many web design principles there are and which of them are more important than others. The good news is that you don't need any special art education to understand them. Moreover, I guess you already know some of them and use them intuitively.
In this article, we are going to tell you about nine key principles of design. Each of them will be accompanied by principles of design examples to give you a clearer understanding. Let's start!
Hierarchy
The principle of hierarchy is achieved by putting elements on the page in the order of importance: elements that matter most are put first, less significant elements go after. As well, more important components are usually bigger, bolder, and sometimes brighter, so the viewer understands that it is something they should pay attention to.
Evernote
Evernote shows us an example of a hierarchy of a title, subtitle, and body copy. When we visit the website, we immediately understand that the title is more important in relation to the subtitle and the rest of the content on the page. In its turn, the subtitle is smaller but also stands out from the rest of the text. This way the hierarchy is created.
Apple
Apple's website shows a nice example of the principle of hierarchy in its "Compare iPhone" section. All the data about different iPhone models is placed in the order of importance. General information at the beginning is bigger, more contrasting, and has icons that support the text, while the copy of more detailed technical information is smaller and not so contrasting.
Contrast
Contrast allows you to attract the viewer's attention to the specific design element. To create contrast, you should put two completely different elements together. They can differ by color (classical black and white tones; bright and dull, etc.), size (small and large objects), font style (light and bold), etc. Contrast helps to properly organize the information on the webpage.
DocuSign
The first example of contrast in design is DocuSign. The white, bold headline on the DocuSign website contrast with the dark background, so that it becomes clearly visible and easy to read. As well the bright yellow CTA is impossible to miss because of the use of contrast.
Slack
The whole design of this popular cloud-based messenger is bright and contrasting, we can even note it "pops" with color. According to Andrew Wilkinson, one of Slack's designers, "to get attention in a crowded market, we had to find a way to get people’s attention." And they did it by using a lot of contrasting elements in their application and website as well.
ClientJoy
The ClientJoy (former Gridle) was designed by our team (check the case study).
Bright blue CTA on the white background is an example of how contrast helps to attract the reader's eyes to an important design element. As soon as the reader opens the website, they see the "Try Clientjoy for Free" button which stands out well.
Balance
Balance is the juxtaposition of elements that creates steadiness and harmony. The state of balance is intuitively comfortable for the viewer and makes the design look attractive and complete.
We can divide balance into symmetrical and asymmetrical.
Symmetrical means that the visual weight is equally distributed in all directions. You can imagine a vertical or horizontal line across an image or layout, and the visual balance still remains perfectly symmetrical.
Asymmetry is an intentional step towards creating a sense of movement in a design. It is usually expressed when different elements are unevenly distributed in the image or layout. And although one side outweighs the other, the viewer still has a sense of balance.
Hubspot
The elements on the left side and on the right side are mirroring each other. It is the simplest example of symmetrical balance.
Intercom
Illustrations on both sides of the layout are of equal visual weight which makes this part of the website layout a good example of symmetrical balance.
Appcues
The big image on the right is balanced with the text of the title, subtitle, and the CTA on the left. It’s the classical way to create asymmetrical balance - one bigger object is opposed by several smaller objects.
Proof
Different design elements are scattered through the whole layout and still together they create a balance.
Emphasis
The emphasis as a principle of design is put to enhance or decrease the importance of certain design elements. Contrast colors, size, space, lines, or shapes help to create emphasis.
DocuSign
Here the emphasis is achieved with the help of size and contrast. The reader immediately pays attention to the numbers as they are big and bold.
Carmax
Carmax's website has an interesting example of emphasis put on the "Find your car" CTA. First of all, the button is of contrast yellow color that stands out well from the white background. As well, the lady in the car is watching in the direction of the CTA and is pointing her hand towards the button and this way increases the emphasis.
Repetition
Repetition enhances the design by uniting the separate elements. Repetition creates consistency in the design. It can be reached by things like color, shape, font, or even texture.
Precog
The above example shows the repetition of headings. Each of them has the same font, style, and color which helps to unite blocks of information and show the reader that they are of equal importance.
Figma
Here you can see the illustration of the repetition of the blocks in the layout. This example from Figma's website is interesting as it shows not just a repetition of images on the right side, but a mosaic made of several pictures. It creates complexity and makes the repetition not so obvious.
White space
When you try to put too many elements on one page, the design becomes cluttered, difficult to perceive and concentrate on. To avoid this we use the white space principle of design. White space is a zone of a design that is not loaded with any text or visuals. It helps to create a focus on a certain design element and contributes to creating a simple, minimalist design.
Adobe
A lot of white space on Adobe's website makes the design "light" and minimalistic, and all the information on it readable and easy to perceive.
Gamaya
Another example of the use of white space is Gamaya's website, designed by Eleken. Thanks to this principle, each page on the website is clean and minimalistic, all the elements stand out and the page looks less cramped.
Unity
The next principle of design is unity - when each piece of design harmoniously match together.
HandPrinter
We've already mentioned Handprinter at the beginning of the article. It is a unique project designed by our team. Check the case study to learn more about it.
The color scheme, fonts, and illustrations across the whole Handprinter's website create a perfect example of unity that leads to harmonious and aesthetically pleasant design.
Pattern
We can explain the pattern in two different ways. First of all, the pattern is a principle of design when certain visual design elements like lines, shapes, or colors are repeated. The most common example of a pattern is wallpaper.
Secondly, we can call established design standards for certain elements a pattern. For example, we are used to the fact that navigation is placed in the header, and language settings are usually in the footer, and when you click on the logo in the header it will redirect you to the homepage. These are design patterns.
Brandalmanac
In the background of this website, we can see a pattern. It consists of small dots and stars floating around and it gives a reader the feeling of space. The logo of the website has a form of a planet, that's why the pattern on the wallpaper complements the overall website concept.
Movement
Movement is how design elements influence the direction of the viewer's eyes through the composition. This design principle helps to interest the reader and keep them engaged.
Memberstack
A dashed line that links three steps together prompts the reader to follow it and creates a movement in this design element.
As you open Google’s website all you see is a copy on the white background. Designers decided to add a small blue line that hints to the viewer that there is something more here when you scroll down the page. This tiny object creates a principle of movement.
Conclusion
To some extent, the design is a matter of taste. However, it is also a skill that requires constant mastering. Design is full of principles, techniques, and rules understanding of which will come to you with practice.
But if you're a beginner in this field, keep these nine principles we've discussed today in mind. Every time you see a poster, a website homepage, a logo or some other piece of design try to analyze what principles the designer applied when creating them.
Still, state skeptical about each “rule” and only apply it where appropriate. Design is constantly evolving and changing, and each specific case is unique and requires its own design solutions.
Check some more of our articles that can inspire you on creating your own great pieces of design:
Human-Centered Design Examples for Better User Experience
Designing Tools for Software Developers: What We've Learnt
Developer tools have been a rather small niche compared to other professional instruments, like design or sales tools. Some call it a typical “cobbler’s children” effect. However, with the rapid growth of the software development sector, things have changed. There are more and more offers on the developer tools market, and the potential is huge.
Our designers got to work with two products made for developers, creating UX design for them from scratch. After diving deep into the world of developer tools design, we discovered that there are so many challenges and issues specific to this type of software. This experience has led us to many insights, some of which we would like to share.
Why is user experience often neglected in developer tools?
The logic is very basic: developers have been active software users long before UX was a thing. As professionals, they easily recognize quality and put functionality before anything else when choosing a product to use (or so we assume). That is why many dev tools look complex and hard to understand for inexperienced users. There’s no point in making an app look sleek and pretty for people who know very well the “dark” side of the software.
Developers often tend to oppose themselves to the users. In this case, by “users” we mean people who interact with software on the very basic level, don’t get the things that are behind the user interface, and believe that most issues can be solved with the "Reset" button. Yet, developers become users, too, when they use the product. Of course, they would make less of the typical user’s silly mistakes, but the rules of the UX design apply to them as much as to any other person.
Also, product owners who make tools for “serious work” tend to invest less in design because they think that there is no need to make such products “fancy”. However, UX design is not about making things pretty.
Think of Adobe products as an example. This is not a developer tool, but it’s a product that most of us are familiar with. Different Adobe products, such as InDesign, Photoshop, Illustrator have quite a complex design that looks serious, professional, and a bit old school. Despite having different functions, all the products follow the same structure and logic so that designers who use all of them won’t get confused. These classical products were created in the nineties. In 2016, when Adobe XD, a tool for UX and UI designers, was launched, its interface was quite different, as the standards of usability have changed, too.
But when it comes to developers tools, good UX doesn’t necessarily mean modern and sleek UI. Let’s take Vim, a code editor developed decades ago that hasn’t changed its look much since then. You have to spend time to learn how to use the software, but it doesn’t seem a problem because, well, that’s part of learning how to code. What is important for developers compared to other solutiona, the tool is functional, light, and adjustable. You can change its look according to your needs.
And here is Sublime, a code editor developed in 2000s. It is quite fast and has introduced new features such as multiple cursors. Developers value it for neat UI and UX. Would you expect Vim and Sublime, two products from distant digital epoques look as different as first and last MacOS do? Let’s take a look: if you are not well familiar with these products, interfaces of both Vim and Sublime don’t look that different.
Most developer tools start with a programmer noticing they have a problem, imagining a way to fix the problem through software automation, and then writing the code that implements that automation. Building for yourself means you get to wear the hat of product manager, engineer, and customer simultaneously.
Beyang Liu, CTO, co-founder of Sourcegraph
Owners of products for developers are often developers themselves. Naturally, they are well-aware of the challenges that their colleagues face, and they have the ability to build a solution to solve them. So, they often end up testing the product themselves, and as a result, the product seems to have no UX flaws at all — because people who have been developing it know the logic and structure well and won’t be confused with the interface: their focus is to test functionality.
As a UX design agency, we always advocate for quality design based on proper UX research and user testing. It’s not just because our job depends on that. Here are some arguments for the importance of UX in tools made for the developers.
Reasons to pay attention to user experience in developers tools
Working efficiency. Good UX decreases the task time, making the work of a developer faster and more productive. This one reason could be enough, but we have a couple more.
High competition. In the past, having a unique technology or functionality was enough to be on top. Nowadays the market is growing faster than ever. No matter how unique your product is, alternatives will appear sooner or later (maybe even sooner than you expect). And that is when usability can play a crucial role, helping you to keep the market without having to lower the prices.
Product owners who think strategically don’t leave design for “later”. That is what our client SlamData did. They developed Reform, a product that can load data from any source and transform it into a comfortable-to-use form. When we started working on the design, we realized that there were no analogs to use as a reference: the idea was completely new.
Developers often launch their product without thinking much of the design because they want to reach the market before competitors do, but it’s a good idea to make a redesign before starting to lose clients.
Simplifying the onboarding. There’s no doubt that developers are tech-savvy enough to operate a complex user interface faster than other people would. But do you know how much time they spent practicing? They have been using this interface daily for many years. Every product owner wants the onboarding to be as fast and smooth as possible, and UI/UX design is a key to that.
Advantage at sales. We have to remember that not all developer tools are sold to individuals. Often the audience includes managers, directors, and other specialists who make the purchase decision. They might have a bit different perspective than developers, and it is likely that a good-looking app will have more points in their eyes (even if they don’t say it directly). A similar effect works with pitch decks: investors are more willing to trust a product with good design, which signals there has been real work input in the project.
This was the case with , a code security app. The founders of Tromzo are developers themselves and they had a very clear image of the product when they came to us. What they needed was a good-looking prototype that they could present to the investors. There are quite some code security apps on the market, so quality UX and UI are a way to stand out.
Developers are humans, too. Tools are made to make the work easier, so why not make the developer's working process more enjoyable? We all like user-friendly and good-looking apps in our daily life, so why do we make developers use those cluttered and clumsy designs at work?
So, how do you design tools for developers? Here are some pieces of advice that we found useful while working with Polaris and Reform by SlamData (with examples).
Three golden rules of UX design for developers tools
Organizing a large amount of information
In many dev tools, you will face large amounts of information. And these are not the things that you can hide in the burger menu: all of them are important for the proper functioning of the app. To not overclutter the screens, you have to use different ways of visual organization.
Here are some examples. In Tromzo, we used heatmaps to give a fast overlook of large depositories. Below there is a long table of vulnerabilities, which would be hard to analyze without some visualization. Heatmap draws the attention of the user to the most problematic repositories, teams, or projects by coloring them in bright red.
On the dashboard of Tromzo that contains a few blocks of information, we used separated cards for each and visualized trends with a graph. In addition, all the most important numbers are shown with big font sizes.
Another way of visualizing a complex system is intelligence graph: each separate element is shown in connection with team, project, vulnerabilities, and so on.
Keeping lots of data on one page
Developers often work with two monitors showing different data that they need to check regularly. Unlike “average” users who easily get lost when they have too much information in front of them, developers are used to it. Even more, some of them would consider it inconvenient to spend precious time switching between different apps or clicking buttons to get to another screen.
One of the solutions can be creating keyboard shortcuts, preferably the combinations that are familiar to the users of other popular software. However, there are more ways to fit big information clusters in an accessible way.
Look at the screen in Reform below: it shows a sequence of steps/choices for setting data conversion variables. We chose point-and-click card-based user interface instead of alternatives such as wizard pattern (each step opening on the new page, like when entering shipping and billing data in a typical online shopping process). This way, each variable is shown at the same time and can be changed within the same screen.
Minimalist colors and visuals
After all, this is a tool for professional developers, so the fewer distractions, the better. Don't use more than one bright color, keep fonts classic and readable, and avoid decorative elements. This advice comes very logically after the previous ones.
For both Tromzo and Reform, we've chosen minimal color palettes with neutral basic color and one accent. Green, red, and yellow are used occasionally when they have a certain function, such as signing the status of items in the list or showing trends: increase or decrease in indicators.
Final thoughts
Designing developer tools is a real challenge: complex software with lots of important information. It may look like “strictness” and “minimalism” constrain creativity, but we think it is the opposite: these requirements stimulate designers to find original solutions and create developer tools with the level of UX that they deserve.
Would you like to get a consultation from experienced UX designers about your product? Contact us!
Your email has been submitted successfully. Check your email for first article we’ve sent you.
