Time Tracking App Design: How to Make an App That Increases Productivity

A dashboard is the first screen a user sees after signing in. It’s like a compressed quintessence of all the app’s pages or an overview of a product that should allow you, as a user, to instantly scan the essential information, understand the current state of your business at a glance, and give you fast access to the needed app functions.

Well, that’s what a good dashboard should be like, but how to design a dashboard that promotes quick decision-making?

As we at Eleken provide UI/UX design services for SaaS products, we had a chance to create more than a dozen of dashboards for a variety of different industries. We know that designing a nice dashboard may be challenging, so we've compiled a list of practical recommendations for you, based on our experience. You will undoubtedly find something useful here.

The way we start our dashboard design

Dashboard is an important analytical tool and to make it useful, you have to display only the most essential data to viewers. So, despite the desire to jump straight into the design, at Eleken we always take some time to understand why we are creating a dashboard, who is going to use it, and what information we need to put there. And that’s what we recommend before opening a design tool when creating dashboards.

So, below are four essential steps to create a dashboard.

Step 1. Define how the dashboard is going to be used

First of all, identify what your customers need a dashboard for (its purpose), and how they will use it.

Depending on the goal, there are three main types of dashboards: analytical, strategic, and operational.

Analytical

Using analytical dashboards the viewer may examine large volumes of data and identify trends. These dashboards often consist of complex charts that help find data insights. Analytical dashboards can be used to make forecasts, find answers to “why” and “what if” questions, highlight how trends change over time, and the like.

We can choose this type of dashboard to track the progress of ad campaigns, monitor a product's income throughout its lifespan, or see the country's population patterns over time.

Below is an example of an analytical dashboard we designed for Haven Diagnostics. It depicts contagion graphs with future projections and allows making forecasts.

Strategic

Strategic dashboards help executives to check the progress of KPIs. Data on these boards allows making long-term decisions.

Strategic dashboards frequently provide a timeline of performance (month, quarter, year).

For example, below you can see a strategic dashboard we designed for Enroly, a student engagement app. It shows the data on CAS (Confirmation of Acceptance for Studies), like how many students applied, from which countries, how they cope with their arrival milestones, and so on.

Operational

Operational dashboards usually help to carry out tasks connected to monitoring. They often include current data presented in several simple graphics. This type of dashboard updates very often and is mostly used to monitor the progress and performance of a system in real-time.

Here’s an operational dashboard with real-time information that we created for a customer experience platform. Its purpose is to help managers analyze chat performance and customer satisfaction.

To sum up

• Use analytical dashboards for analysts and executives to identify weekly performance issues, spot trends, establish analytics targets and gain an in-depth understanding of key processes.
• Use strategic dashboards for executives to analyze organizational KPIs, track monthly performance, and meet KPI objectives.
• Use operational dashboards for managers and their teams to track daily performance, and raise employee awareness and goal-tracking.

Step 2. Consider the users

In fact, this step is tightly connected with the previous one, but we decided to put it separately to emphasize its importance.

Whatever the purpose of your dashboard is, it should encourage the viewer to take action. So you need to know who your audience is to make them turn to your dashboard for insights.

Answer the following questions: 

• Who are the people that will view my dashboard?
• What data do they need to make decisions?
• What are their existing understandings of the metrics?
• Do they have experience working with data?
• What misconceptions may they have about visuals and color?

Keep in mind that the way you perceive your data is different from the way your audience does. Try to explore what your users are seeking for, and put their goals first.

Step 3. Define what metrics to monitor

Effective dashboards help users make better decisions by providing the right data and context. That’s why, if you learn what decisions they need to make, you’ll know what metrics to include. 

• Interview direct dashboard users to learn what decisions they want to be more informed on.
• Learn how they currently inform themselves on these decisions, so that you can understand users' goals and motivation. 
• Taking into account users' goals, think of all the decisions they need to make to reach them, and then single out those that need to be supported with data.
• Talk with the user to pinpoint the metrics that will inform their decisions and provide answers to their concerns.

Step 4. Choose the proper visualization for each metric

A chart makes it far simpler for a user to identify trends than countless spreadsheets do. To create a useful dashboard, you need to know which chart to use to depict a certain dataset.

Here’s a short dashboard guide that we use at Eleken to choose one chart over another.

Displaying a single value

• Single value chart to show a highly significant metric and help the audience quickly notice it.

• Single value with an indicator to show a highly significant metric that’s changed.

• Bullet chart to show a highly significant indicator in comparison to a goal.

Displaying several datasets

• Table to showcase two-dimensional data sets that may be categorized or break up big data sets that have a natural drill path. Include no more than ten rows in your table.

• Line chart to express continuous data, identify general trends and patterns, compare how they change over time, or make forecasts. Don’t compare more than four values on your line chart.

• Bar/column chart to show change over time, compare values that fall in the same category and express how partial values relate to a whole value. The starting value on the y-axis should always be zero.

• Pie/donut chart to provide information quickly and in digestible chunks. Beware that users usually find it difficult to compare sections, so use this chart type for a small number of slices. Also, show more detailed info about each segment as the user hovers over each slice with the mouse.

• Scatter plot/bubble chart to show how several quantitative variables relate to each other. Choose this chart for your dashboard if you have no other options, because they demand a lot of mental effort to process, even when the depicted information is simple and has additional context.

Step 5. Organize the dashboard

Now, with all metrics defined, your task is to properly locate them on a screen. Here are several dashboard design tips on how you can do it. 

• Start creating your dashboard prototype with paper sketches or using low-fidelity tools. Firstly try to visualize individual metrics, then try to group multiple charts together.

• To arrange charts together, try to start with a grid that will help you create a basic structure for your dashboard.

Image credit: designer-daily.com

• Place the most important indicators in the top left corner (as most people read from left to right).
• Make sure related metrics are grouped together so that users don’t have to search them across your dashboard.
• Mind the way you use the white space (the area between elements on your dashboard) - there should be enough of it to make the design light and not cluttered, but not so much that it becomes difficult to understand which charts belong together.
• To keep the dashboard consistent, reuse design elements in different charts over your dashboard.

The way we make dashboards simple and easy to comprehend

At Eleken, we’re the supporters of minimalistic dashboards. We believe it’s not a place where you can distract users with graphics, so everything has to be clean and clear (you can make sure it’s true by looking at some of our dashboard examples). And we know, you can make data easier to grasp at a glance with the help of the right use of color, typography, and layout. 

Here are several rules to keep the design simple.

Choose colors wisely

• Remember about consistency. If you chose a certain color scheme, use it for every chart on your dashboard. As a result, it’ll be easier to find relationships between data in graphs, tables, and charts.
• To prevent one set of colors from standing out too much from other groups, keep all of the colors in the same range of lightness and saturation.
• Use up to six colors in the layout, as using too many in one chart can hinder the user’s focus. 
• To generate contrast and emphasize some data, use color accents for the information you want to draw attention to, and neutral colors for other data.
• To show amounts or numbers of continuous data, it's better to use various saturations of one color, not different colors.
• Keep in mind that certain colors can evoke strong associations (like green for positive changes and red for problem areas), so don’t flip their meaning.
• Use additional visual clues, such as icons or labels, to further explain the significance of the chart colors.

Mind labels and typography

• Choose the appropriate fonts (Roboto, Inter, or SF Pro can be your safe choice).
• You can show how important certain information on your dashboard is with the help of headings and font weight. Yet, select a few typographic styles.
• Add a description or a formula to metrics that may be difficult to understand - this will help viewers correctly interpret a chart.
• Don’t use icons alone, accompany them with a label to clearly represent key information.
• To keep the chart legible, avoid over-stuffing it with axis labels.
• To make the labels on the chart easier to read, they should be positioned horizontally. Don’t rotate or put labels vertically.
• Put a legend under a chart on a desktop, and above the chart on mobile to keep it visible.

Put the information in hierarchical order with the help of layout

• Divide all charts you want to include in the dashboard into three groups depending on the importance and arrange them in descending order. Put the most critical data first, then trends that explain the previous insights, and then add details that help comprehend the issue better. This will make the board easier to read. 

• Focus the viewer's attention on important indicators with the help of color, size, and visual weight. 
• To make it possible for users to compare charts, make sure they don’t have to scroll through the dashboard. If there is some data below the bottom of the screen, your dashboard probably contains too much information and you should consider removing irrelevant charts.
• Eliminate anything that doesn’t communicate data.

Final recommendations

As with everything in your app, the dashboard should change and evolve over time to continue being useful for the audience.

• Gather user feedback to keep the dashboard up-to-date and find faults more rapidly.
• Schedule time to analyze the feedback so that you can identify trends and set work priorities.
• Check the dashboard's functionality frequently to determine if people still use it, if the data is still correct, and if there is a need for improvement.

And if you feel like your journey to a perfect dashboard will be much easier with a dedicated UI/UX designer in your team, we specialize in creating SaaS dashboards. 

Schedule a call to learn more about how we work.

Words “personalization” and “customization” are often used as synonyms. And it’s not surprising as they both exist to serve the same goal: improve user experience by adjusting features and content to specific user interests, needs, or problems. But, as we’re talking about personalization vs customization here, there is obviously a difference between the two.

As a UI/UX design agency, we had a chance to create personalized user experiences, and work on customizable features within products. Based on this experience, we can say that businesses, whose products are aimed to satisfy a versatile audience, should definitely know the difference between customized and personalized UX to apply them correctly.

So, let's define both terms and compare how companies improve user experience through customization vs personalization.

The difference

We’ve already said that both personalization and customization are aimed to create unique user experiences, individualizing information they see and this way making products or services more credible and tailored to specific user needs.

So what’s the difference between them? 

Personalization is done by the system/application that the user interacts with. The software gathers customer data (like purchase history, browsing history, location, job position, and so on) to recognize their wants, and uses predictive technology to adapt experience and content accordingly.

Customization is done by the user who adjusts the app on their own to meet their wants or preferences. The software gives users the opportunity to choose what features, content, layout, and so on they want to see.

Take a look at the image below to better understand the difference.

So, you want to listen to music in the background while studying. The result you will achieve with a customized or personalized experience will be the same: you will listen to classical music at a low volume. But the path to this goal will be different.

With customization, you adjust the volume independently. You clearly understand what you want and are in control of making the desired changes to improve your experience.

With personalization, the app guesses your need (by taking into account that you’re listening to music after midnight) and sets the volume low for you to improve your interaction with the system. As a user, you make no additional effort.

Here are some more examples to better understand the difference between customization and personalization.

Customization: 

• A music app asks you to choose genres you like to create your personal music feed.
• In your smartphone, you create different folders to organize your apps, change the skins, functionality, and push notifications the way you like.
• Using the dating app you change the information in your profile (like your age, pronouns, profile picture, location, and the like).
• In a social media application you hide some type of content or choose it to only be shown to your friends.

Personalization:

• An online store gives you product recommendations based on your recent searches.
• Banking app sends you an alert when your account balance falls below a certain limit.
• A cab booking app gives you quick access to the departure point for your previous trip.
• A project management software shows you different dashboards depending on the job position you have in your company.

Personalization or customization: what is better?

In one sentence, personalization and customization are equally useful as they put the customer in the center and make the business revolve around them. So, if your business requires dealing with customers, you should tailor an experience for them.

But of course, they both have advantages, disadvantages, and use cases where they work best. Let’s dive into more details.

First of all, let’s figure out why tailoring your product to specific user needs is important.

Here are some statistics:

• McKinsey Personalization Report states that personalization has the potential to increase company revenue by 40%.
• According to Smarter HQ, 90% of consumers are eager to give businesses access to their personal behavioral data in return for a more affordable and simpler experience.
• Epsilons research states that 80% of customers are more likely to buy from a company that offers personalized experiences.
• State of Personalization Report by Twilio says that unpersonalized user experience will cause a business to lose 62% of consumers' loyalty in 2022, up from 45% in 2021.
• Adobe says that customers are irritated by non-individualized content in 42% of cases.

As you may have guessed from these statistics, customization and personalization provide many benefits for businesses. Below are three of them.

1. They improve user engagement. Users want to receive content that matches their needs, and when you manage to give them exactly what they want, they feel that your company values and cares about them and their interests. As a result, customer relationships become stronger and users are more willing to interact with your product.
2. They encourage customers to come back. Personalizing and customizing provide a distinctive and more personal experience for every user, increasing brand loyalty and encouraging them to choose you over competing brands.
3. They increase conversion. You may draw in leads with a high possibility of converting by using tailored content to target specific categories of users. Additionally, it will save your sales department the time and effort they would normally spend cultivating cold leads.

Now, let’s discuss when businesses should use customization and personalization, as well as their advantages and disadvantages.

Customization

Customization improves the user experience by giving customers control over their interactions. It allows users of your website or app to choose exactly what they want to see, ensuring that you are only presenting the content they are interested in.

That’s why customization would be a simple first step you can take to adjust user experiences if your brand is just launching into the market. But to make the customization of UX work effectively, businesses have to ensure that users understand their goals and wants well.

The advantage: as users are in control, they can receive precisely what they want. Additionally, unlike with personalization, users are not so concerned about privacy matters.

The disadvantage: most users don’t know their true needs and lack the motivation in making an effort necessary to customize the UI to suit their preferences.

Personalization

As personalization is based on user data that the system collects over time, it can be effective when users aren't aware of their needs and have to sort through a great amount of information.

Companies usually choose to enhance a product’s UX with personalization when they have several clearly defined buyer personas with different needs, or when they have reliable tools, enough sufficient data, and resources to provide users with individualized experience.

The advantage: personalization makes the user experience simpler and more convenient without requiring any effort from users.

The disadvantage: when it comes to personalization, user privacy is an issue. Some people find the experience confusing, even terrifying since the system collects information about their preferences, especially if the content they get is very accurate.

As the final point here, I’d like to mention that you should be very careful when tailoring your product to the users’ needs, as the line between “enough” and “too much” is actually fairly thin. Extra customization or personalization can make the process of interacting with your product tedious, excessive, or even creepy. That’s why try to define how much personalization is enough for your specific case.

Real examples of personalized and customized UX

Personalization and customization are already widespread across brands of different sectors and sizes and there’re many different approaches to providing a more compelling customer experience with their help.

Here are some customization and personalization UX examples that show how different companies implement these concepts.

Spotify - personalized playlists

In order to retain users in the app, Spotify offers each customer a tailored listening experience with the help of AI.

A “Discover Weekly” feature allows users to receive personalized playlists based on their streaming history, listening patterns, and favorite artists from all of Spotify's active monthly users. The company's discovery and recommendation AI engine creates these lists, allowing users to discover new music and artists even if they don’t know what they want to listen to.

‍

Reddit - relevant posts for each user 

Reddit has a great amount of helpful, interesting, and sometimes weird content on their platform, and they are doing their best to make sure each user gets the content they like in their feed. Customization and personalization help them with this goal.

• Customization: The user can choose what content they want to see or vice versa to avoid by adjusting Feed Settings on Reddit.

One more example of how Reddit uses customization is the “What are you into?” pop-up that appears during the sign-up process. This way, the platform starts discovering your interests to be able to offer relevant content from the very beginning.

• Personalization: Reddit analyzes info about their users (such as location, and device info) plus their activity (communities they join, votes, browsing info, and the like) to make intelligent assumptions about what posts may be interesting or useful to a certain user.

Netflix - using A/B testing to provide the best personalized experience

Every action that Netflix does is informed by data and guided by sophisticated AI algorithms. To make sure that the information shared on its platform reflects the users’ wants precisely, the company is constantly testing and brainstorming new ideas.

This is why Netflix benefits greatly from its personalization features.

The fundamental component of Netflix's data-driven strategy is A/B testing. To assess how consumers respond to the recommended adjustments, each of these tests offers them a choice between two alternative versions of the same experience. This is one of the reasons that two users of its platform won’t have the same experience.

For example, if you’re into horrors, over some time (when a platform learns your habits and preferences well enough), your recommendations on Netflix will be mostly related to this genre.

Even the thumbnails for the videos are tailored to the user. For example, depending on whether you mostly watch romantic movies or prefer comedies, you'll see a different cover for the movie Good Will Hunting. 

Airbnb - giving personal recommendations based on user location

Airbnb uses location tracking to recommend places and activities that you may find interesting based on the place where your stay.

For example, it may advise hotels close to you, or show you the locations you may visit, where to dine, surf, do shopping, and so on. As well, based on your previous searches, the software can suggest what places are worth visiting.

All the above-mentioned companies are real giants in their industries. Now, I want to give you some examples from our experience to show that not only well-established companies can benefit from tailoring their content to specific user needs, but smaller businesses can successfully implement customization or personalization too.

Gridle - optimizing the workflow with customization

Gridle (now Clientjoy) is an all-in-one cloud-based CRM system that provides full client lifecycle management automation to small and midsize businesses. Our task on a project as UI/UX designers was to rethink the look and feel of the software to make small businesses more efficient in interacting with their clients.

To make the right design decisions and also understand and prioritize users' needs correctly, we conducted six one-hour user interviews. As a result, we found out that one of the users' wishes was to see “custom fields and some other customization” in the new Gridle version to get better at managing their clients.

Here’s how we implemented customizable features in the software to help users feel more professional and confident while using software:

• When sales managers build a sale funnel, they can choose a more convenient way for them to display it: Kanban columns or lists.

• Users can choose the attributes they want to see in a client database and use filters to quickly find the data they need.
• Users who work with invoices can select customizable invoice templates that let them quickly add the necessary client information.

As all our ideas of customization were informed by insights from user research, the user feedback about this new revamped version was very positive.

Acadeum - role-based personalization

Acadeum is software that allows universities to share and sell online courses. Eleken was hired to redesign the platform while making it consistent with the existing design system. 

A part of our work included creating a personalized user experience within the platform. Here’s how we implemented it:

• For the system to be able to provide the most relevant course recommendation to the user, newcomers are asked to give answers to several questions as part of the sign-up process. This way each individual receives their own personalized experience.

• Acadeum is used by different types of users (for example, advisors, student consultants, institution admins) that have different requirements for the platform. To tailor the app to their requirements, users can select their role, and depending on it, the platform will give access to information that fits their needs most.

Textmagic - customization for a simpler user experience

TextMagic is a SaaS text messaging platform for businesses that’s been on the market for more than 20 years already. When they came to Eleken, they wanted to develop products for their new Marketing Suite with SMS and email marketing campaigns and live chats.

Adding a lot of new functionality to the platform may end up with a poor and confusing user experience. One of the methods we used to reduce the complexity and design for simplicity was the customization of certain features.

• Support manager who operates live chats can customize chat widgets so that they stay consistent with their brand.

• We created an easy-to-use drag-and-drop editor and added the possibility to edit the HTML for TextMagic users to easily customize their email campaigns.

Populate - saving doctors’ time spent on documentation with personalization

Populate is a healthcare startup that wanted to cut down the time required for documentation, this way helping clinicians spend more time engaging with patients.

Populate offers a solution that combines AI-powered technology with consistent UX design for generating visit note templates depending on the problem a patient has.

1. A patient independently fills in their personal information including the history of illness before visiting the doctor.
2. AI processes this information and generates a personalized template taking into account specific patient cases.
3. As a result, a doctor receives a ready-to-use visit note template that contains only the necessary fields and nothing extra.

To design a template that would perfectly suit the doctor’s needs and truly simplify their work, we were constantly testing our designs with potential users.

For customization and personalization start with learning your users

The successful implementation of customization or personalization is based on thorough user research. You have to learn what your customers actually want or struggle with and carefully plan how to tailor your app according to those needs.

But neither personalization nor customization can improve a user's experience of a product that already has issues with its UX. For example, in case your users have trouble finding relevant information because of a complicated app’s structure, the solution may be not to give them highly personalized recommendations but to improve the product architecture first. 

And this is where you need to find someone to provide you with high-quality UI/UX design services  so that you can identify the problem correctly and develop a proper strategy to solve it together.

Eleken can become your dedicated design partner. Contact us for a free consultation.