/
Product design

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

0

mins to read

It’s not just a coincidence that there are so many articles, courses, and techniques on how to manage your time. In any business or job, especially for a startup or freelancers, your most valuable resource is time. You track time to understand how many projects you can work on, learn whether you’ll manage to complete tasks on schedule, see how productive your employees are, charge your clients accurately, and so on.

While in the past, people used a pen and a notebook as the only time control system, now time tracking applications have replaced this manual method.

This is how people used to track time in the past. Image credit: blog.justworkshours.com

Apart from obvious benefits, such as increased productivity, and more efficient time management, time tracking tools allow you to find better work-life balance (which is especially relevant for those who work from home) and learn how to accurately charge for your projects.

But how to create such software that’d bring all the above-mentioned benefits of time tracking?

When our SaaS design team was working on time tracking app design called Tymewise, we came to the conclusion that “first and foremost, a tool designed to track time should value customers’ time they spend to figure out how the tool works”

With this idea in mind, we wanted to design both functional, and user-friendly software with a clear UI. And in this article, we’re going to share what we’ve learned on the way to this goal. 

What are must-haves for efficient time tracking software?

To cut a long story short, to bring value to its users, the time tracking system has to be visually appealing, user-friendly, and contain only essential functions. Now let’s dive into more details about what characteristics a good time tracker should possess.

Core functions

When users only start searching for a tool that can help them control time, they already have some expectations about what the app’s supposed to do. Meeting those expectations is crucial because if your time tracking app has features customers want to see, they take it for granted, but in case you forget about at least one of them, it leads to strong user dissatisfaction. 

Here’s a list of the most important functions:

Timer

Timer’s task is to measure how long it takes you/your employees to complete different tasks.

For better convenience, make sure your software provides a possibility to filter the measurements according to tasks, projects, tags, and others.

For example, for Tymewise, to provide the best way to track time spent on projects, we at Eleken designed a clear and easy-to-use Timer screen that is not overloaded with any unnecessary information. You can name the task, choose if it’s billable or non-billable, create tags, and start a timer with one click on a contrast green CTA button (or enter time manually).

As well, the screen contains a quick overview of the weekly progress in two modes: chart statistics and calendar (see pictures below).

timewise
timewise

The timer feature allows to:

  • Increase productivity. By monitoring and then analyzing the time that you spend on various activities/tasks you can define the greatest time-consumers/distractions and based on this information understand how to improve your workflow.
  • Make better profits. Learning how much time you spent on different tasks within one project lets you figure out what jobs take the most resources and what projects are more profitable. This knowledge helps you put the right priorities on tasks that bring more profit.

Reports

As we’ve already mentioned, to come up with ideas on how to improve productivity and eventually profitability, you have to analyze the data you track. For this reason, gathering analytics and generating reports is the next must-have feature of a time tracking system.

Time reports functionality usually provides information on:

  • The total amount of work time spent daily/weekly/monthly
  • Reports about specific tasks/projects and your employees’ contribution to them
  • List of tasks you’ve worked on and time you’ve spent on them

Getting back to our Tymewise case, to make complex analytical data easy to perceive our product designers thought out different ways of visualization: bar charts for the daily summary and table/pie chart for per-user (project, client, group, user, or tag) data.

As well, except for total time spent, users can view the amount of money earned on the Report screen, and see how the indicators have changed in comparison with the last week in percentage terms. And of course, we included "Save" and "Export" functions to work with data outside the app.

timewise

Reports transform indecipherable loads of data into usable information that allows you to:

  • Evaluate your/your team’s performance to understand if you manage to reach set goals or to identify what prevents you from achieving them.
  • Decide if you need to expand your team not to make your current employees overwork.
  • Find work-life balance. Regularly monitoring what you spend your time on can promote creating a better-organized daily routine and prevent from living like this:
Freelancer’s work-life balance without time tracking app. Image credit: instagram.com/designershumor

Generate invoices

This feature is especially relevant for those who charge their clients hourly. Based on your settings (hourly rate, billable time) time tracking app makes calculations and automatically generates invoices.

Here’s how the generating invoice feature looks at Harvest: you just choose the client, decide what hours/expenses you want to invoice, and review the generated bill.

Invoices
Invoices

Ability to generate invoices:

  • Saves time. You don’t have to create invoices manually.
  • Brings transparency to your clients. You don’t have to explain to your clients why they were charged this or that way.

Project management

Though there are various comprehensive solutions for project management on the market nowadays, adding basic project management functionality to your time tracking system will bring a lot of value to small businesses and freelancers.

Basic project management functions allow you to:

  • Add team members and set their roles
  • Create and assign tasks
  • Make time estimations for each task
  • Track your/specific employee’s activity
  • Track the project’s overall progress

For instance, let’s take a look at how easy it’s to manage projects in Tymewise:

  1. Choose a specific project
timewise
  1. View quick statistics of project’s progress 
timewise
  1. Go to the Task tab and click “Add task”
timewise
  1. Monitor general project activity, and more
timewise

Project management features in time tracking apps help users keep track of all their projects, deadlines, employees, and goals.

Integrations

Third-party integrations make time tracking apps more effective. They play roles of extra features that your users might need. Some of the most popular add-ons may be accounting tools, project management software, CRM system, messengers, emails, GPS trackers, and more. 

Most time tracking systems now provide numerous integrations to their users. For example, here is even not the full list of Time Doctor’s, an employee monitoring tool, integrations:

Integrations

The availability of trusted integrations makes your app more universal and valuable.

To sum up this whole section about core features, I want to say that it doesn't matter how many add-ons your application will include, the main thing is that it performs the basic functions that are important to each customer properly.

Design simplicity

Having basic functionality alone won’t make your product valuable. A good time tracking app should be fast and easy to use. You will not use an application that requires you to click five buttons that will take you through five submenus to just start tracking your time. The software should be simple enough and fit seamlessly into your workflow.

And here we'd like to again mention the lesson our team learned when working on the UI/UX design of Tymewise: users don’t have to waste time every day managing the app that is supposed to help them spend their time more efficiently. An intuitive and human-centered design is what can bring harmony between the functionality and usability of your time tracker.

For that reason, we didn’t want to choose between important features and simple design. We designed all tabs in the Tymewise app to be clear and self-explanatory. Each of them replicates Reports’ main page design to keep overall consistency and not confuse users with different styles.

Tymewise’s UI Kit

Responsiveness

When 9-to-5 office work is not an option anymore, people are often on the go, and clients are scattered all over the globe, businesses have to run 24/7. The ability to access the app from any device at any moment allows you to get real-time information on projects’ progress and employees’ performance.  

For instance, Toggl, a popular time tracking system, provides intuitive mobile and web design for its time tracker.

Image credit: clockify.me

Designing a mobile app for your time tracking software makes you flexible and mobile.

Now that you understand how time tracking software is supposed to work, let’s see what will help you make such a tool.

What do I need to design an effective time tracking application?

To design functional and easy-to-use time tracking software you will need a devoted design team, and a well-established product design process

We’ve already discussed how to find a designer for your SaaS product in one of our articles, and here we want to share with you what we consider to be the most crucial ingredients of your app’s success.

Study the market

Perhaps, each of our projects starts with competitor research. Competitor analysis helps to understand the situation in the industry, find the niche and define in which direction to move. 

When designing Tymewise, to answer the question “What is the best time-tracking app?” we analyzed the successful decisions and mistakes of perhaps more than a dozen existing solutions, determining what is popular in this market segment and what new can be offered.

Here is a short overview of the most well-known rivals in the time tracking industry:

Clockify

Clockify
Pros
  • User-friendly interface
  • Provides a lot of benefits for teams, allowing businesses of different sizes to take advantage of their free version
  • Offer many features for managers, like reporting and backend dashboards to track how the time was spent, project overviews to see how much time employees devote to a project
Cons
  • No inbuilt invoice feature

Toggl

Toggl
Pros
  • The ability to specify the customer and the project for each task
  • A variety of filters when generating reports
  • The ability to highlight projects with different colors
  • Accessible via all popular platforms
Cons
  • Billable hours feature isn’t included in a free plan
  • Working hours are not presented clearly
  • Difficult to view in detail the user's activity

TimeDoctor

TimeDoctor
Pros
  • Precise time tracking
  • Integration with a variety of applications such as Trello, Slack, Asana, GoogleApps, GitHub, Bitrix24, Zoho CRM
  • Works with all popular platforms: Windows, Mac, Linux, Android, iOS
  • Detailed reports about employees’ performance
Cons
  • Browser extension has limited functionality
  • Doesn’t have a free plan 

Harvest

Image credit: sprout24.com
Pros
  • Integrates with many tools while providing simple time tracking and reporting functionality
  • It’s free to use (unless you have more than two projects)
  • Has a browser extension, that makes it super easy to start and stop the timer
  • Has inbuilt invoice functionality
Cons
  • Complex user interface (it takes too many steps to create a new project)
  • Confusing reporting

Once you’ve analyzed the rivals, it’s easy to decide what features to “borrow” and what new to add.

Study your users

Next, it’s time to support and supplement the insights we got from market research with real users’ needs. Your task here is to understand how the time tracker is supposed to satisfy specifically those people, for whom you create it.

There are a lot of UX research methods, but In Eleken’s opinion, the best way to learn from your customer is to talk to them personally. That’s why, for Tymewise, we conducted precise user interviews and examination of user interaction with similar products.

Besides defining in what context people are going to use your product, user research helps to come up with a logical and convenient app structure. 

Decide on the app structure

Based on the learnings from competitors and user research you can build a detailed plan on how time management app UX design will work. Connect together your product vision with user needs and technical requirements.

At Eleken we visualize the structure with the help of:

  • Customer journey maps - present touchpoints between a user and an app and describe what a person feels/wants at each interaction
  • User flows - show the steps users take to complete some specific tasks within your product
  • Wireframes - present the location of design elements on each screen and show how they are connected

Think out the visual part

When designing the UI for a time management app, try to keep it minimalist, clear, and simple to save users' time they spend on managing the app. 

Analyze design styles from the entire industry, collect the best ideas into a mood board and start thinking out the details (icons, typography, buttons, and so on). 

The final point (that we decided not to single out into a separate section) is to put together all the mentioned components to receive an actionable and usable time tracking app.

As a small takeaway

Time tracking has gone digital, and whether you are a freelancer looking to track hours, or a CEO wanting to manage a remote team, you need software that keeps your business running effectively and on time. If you can’t find a suitable solution on the market, maybe it’s time to create your own one! 

Our designers will gladly help you make a convenient, intuitive, and visually appealing time tracking tool that improves productivity. Contact Eleken today.

Kateryna Mayka

Author

Table of contents

Top Stories

Product design
/
0
min read

How to Design a Dashboard That Helps People Make Decisions

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.
bar chart design example in a dashboard
  • 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.
the use of pie charts in dashboard design
  • 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.
the use of scatter charts in dashboard design
Image credit: ppcexpo.com

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.
designing a dashboard layout with the help of a grid
  • To arrange charts together, try to start with a grid that will help you create a basic structure for your dashboard.
designing a dashboard layout with the help of a grid

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.

Product design
/
0
min read

Must Have: Personalized vs Customized in the User Experience (With Lots of Examples)

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.

personalization vs customization example

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.

difference between personalization and customization  kew points

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.

personalized Discover Weekly playlist by Spotify

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.
customizing 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.

What are you into pop-up customizes UX for Reddit users
  • 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.

personalized suggestions on Netflix
Image credit: netflix.com

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. 

how Netflix personalizes video thumbnails
Image credit: netflixtechblog.com

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.

How Airbnb uses location to give personalized recommendations
Image credit: design.google

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.
customizing the view of a sales funnel for a client management system (Kanban)
customizing the view of a sales funnel for a client management system (List)
  • 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.
customizable invoice templates design

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.
customization UX example as a part of a sign-up process
  • 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.
role-based UX customization example

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.
maintaining brand consistency with customizable chat widgets
  • 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.
customizable email campaigns design example

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.

personalization example for a healthcare startup

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.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.
Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Success!

Your email has been submitted successfully. Check your email for first article we’ve sent you.

Oops! Something went wrong while submitting the form.