Articles

Case Study: Redesigning Todoist for Android

,

Todoist is a to-do list app that 25 million people rely on every day to keep their lives organized. As part of the Doist design team’s goals for 2021, we aimed to redesign the Todoist Android app to take advantage of the latest Google Material Design guidelines.

In this post, we cover the design decisions and processes behind redesigning the Todoist Android app for Material Design. We explore the Design and Android team’s collaboration practices that brought the app update to life, which resulted in winning the Material Design Award 2021 in the large screen category. Let’s get started!

Opportunity

When we started the project, our design implementation on Android was ready for a major overhaul. The last milestone redesign on Android was initiated after the release of the first Material Design guidelines in 2016. Since then the team successfully worked on continuous improvements to the Android app, but we saw the opportunity to improve Todoist on Android on a more holistic level.

We set out to clean up instances of older UI components, colors, and text styles and update them with the latest Material Design components. We observed that some interactions and navigational patterns had become inconsistent with what users were expecting on newer Android devices and were eager to modernize this experience. With new hardware and software changes in mind, we set out to make the experience on larger phones and tablets even better, so Todoist could take full advantage of the latest generation of devices. Material 2 and 3 provided an incredible new framework to rethink the current app experience. With this in mind, we set out to challenge what a modern Android app should look like and innovate on top of the default user experience.

Solution

The team set itself the goal of redesigning our Todoist Android app and aspiring to make it the best-designed productivity app on Android. The project was ambitious and scheduled to take several months to complete. We set ourselves the following targets while working on the project:

  • Review the current implementation and older design specs.
  • Study the latest Material Design Guidelines and assess what is relevant for our project.
  • Research great Material Design apps and case studies and learn from their execution.
  • Define the new Todoist Android app design language and document the changes.
  • Design and development work together to assess the proposed solution and implementation.
  • Test an early version of the new app internally to gather feedback and make adjustments.
  • Invite beta testers to the new app to gather feedback and make adjustments.
  • Refine the app and address core issues before launching to the public.

Review

The project was kicked off by reviewing the current Todoist Android app implementation, noting down what areas needed to be fixed and what was up to date. While reviewing, we took screenshots of the app implementation for reference. This way we could easily see the current state of the app and compare it to the new design proposals that would be created. Once the review process was finalized, we had a comprehensive overview of the current state of the app and the layout, component, and styling changes we wanted to make.

Study

We continued the project by studying the latest Material Design Guidelines, assessing the components and practices that were most relevant to Todoist.

When the project kicked off in February 2021, Material 2 was the most recent version of their design system. Since Material 2 had already been released for quite some time, we anticipated that design changes to Material would be announced soon at the Google I/O event in May 2021. Rather than wait, because we expected the changes to be iterative, we pushed ahead with our work.

We identified 25 components and UI patterns that we wanted to change across the app. The changes included buttons, forms, menus, sheets, navigation drawer, app bar, system bars, text and color styles, and more. We started by creating a table view in a Dropbox Paper document with the component changes and references links to Google’s Material Design Guidelines.

This components list was a starting point for discussion to plan the scope and complexity of the changes. Close async discussions between the design and development team in Twist and Dropbox Paper comments helped us make decisions about scope and complexity early on and set a solid foundation for the project.

Research

In the initial Material Design study, we also researched inspiring Material Design apps, Material studies, Play Store apps, and Google Workspace apps to learn from their execution.

We started out by studying the Material Design Award Winners 2020 and tested out the products that were showcased. The showcased winners struck a good balance between implementing the Material Design Guidelines while maintaining their own product’s brand within the system. This balance between Google’s guidelines and the Todoist brand was also key for us to get right and so we strived to find this mix across the work we created and implemented in the project.

Along with the MDA winners, we researched the Material Studies that Google produced to showcase what apps could look like with branding and Material Design guidelines applied. It was a great reference to see how far components could be customized while maintaining the core platform principles. The Reply case study in particular offered valuable insight to us as its content type and layout came closest to Todoist. It showcased how components like the app bar, navigation drawer, and large screen layouts worked while being customized.

We continued our research by searching the Google Play store for inspiring app examples. Google Tasks, Press, Periodic Table, and Kayak stood out to us as the level of polish and quality of the apps were on par with the experience we were aspiring to create.

Sometime later in the project when Material You was released (more on that later), we stumbled upon the Google Workspace apps blog post which previewed Material 3 changes that Google was introducing to their own products. It offered a great glimpse at what was to come before the Material 3 Design Guidelines were officially released. This post sparked new internal discussions and further design explorations that we considered for future Todoist Android updates.

Design Spec

As we started to define the new Todoist Android app design language and document the changes, we opted to create a design framework, focusing on creating components rather than designing every screen in the app. This allowed us to consistently apply the design system in the app. We did so by using the previously defined component list that we created during the review and study process.

Core screens from different areas of the app were chosen to demonstrate how the components could be applied. We chose to mock up the Todoist project view, navigation drawer menu, project view edit screen, settings, and project detail view, among others. These screens gave us a good overview of how buttons, forms, drawers, lists, and other components would work together and in different states; selected, pressed, disabled, etc.

During the project, we were transitioning our Doist design system to Figma and started creating our first components in the new Doist Product Android Library. We started by using some components from the Material Design UI kit – Components library from the official Google Figma resource file and added them to our Doist design system. We then continued to build up the Product Android Library file with our Todoist-specific components such as task list & board views, detail views, sheets, colors, typography, etc.

We continued by documenting color and typography changes that were based on the Material Design guidelines. The design team opted to implement a new Design Token framework that would share the same values between our design system and the development implementation. The development team would output the values they had in the current implementation and the design team would analyze which values were needed and which could be merged, changed, or deleted. This informed the new Design Token color and typography system which we then documented and discussed with the team to implement. Later in the project, we were happy to see a similar token system introduced by Material 3 in the latest guidelines which validated our thinking and principles behind the new design system.

The design documentation expanded to hold other edge-case mockups that could sit alongside the design system. We documented different responsive screen experiences between phones and tablets against the previous implementation. Additional sections were created to document the motion that should be used for certain components and screens by referencing existing Material Design guidelines examples or prototyping custom motion in Principle and After Effects. The design spec also touched on haptic feedback that should appear on touch targets, how dark mode should work across the new components, documenting Todoist themes within the new design language, and more.

Design Implementation

At Doist, the benefit of the squad is that cross-team collaboration is built into the make-up of the team. Designers, developers, support, and product managers work together in a squad to deliver the project. This close collaboration from the start is key to bridging the gap between scope, estimations, design, development, and delivery. The squad discussed their findings on a daily basis and came up with the best plan of action together.

Designers started by creating components in Figma and shared them with developers in Dropbox Paper. We used screenshots to document the current implementation next to the new designs and linked to the default Google Material Design components. This allowed the team to compare all references in one place. Developers shared their feedback, adjustments would be brainstormed together as the designs were iterated.

Designers on the project would share their work in progress on a weekly basis with the rest of the design team in a design review Twist thread. Here details about the designs were discussed, alternatives mocked up and bigger picture plans made. Design reviews brought up topics like FAB (Floating Action Button) placement, theme options, accent color usage on components, consistency with other platforms, navigation options, and shadow elevation. After thorough discussions and alternative mockups were presented, the design team aimed to find the right balance between Material Design and Todoist brand guidelines. The development team, also part of the design reviews, gave their feedback on the solution and raised technical complexities early on.

Eventually, the design was stabilized and consistencies updated across components and mockups. The design spec was kept up to date so the development team could always review the latest designs in Figma.

Testing

As soon as the development process started, the Android team provided early screenshots and videos in Twist threads while they were implementing the design spec. This practice allowed us to review the app implementation early and often. Designers could review the development work and share feedback in Twist, which resulted in getting the implementation to a high quality. Alongside Twist discussions, the team set up a Todoist project to track ongoing issues and fix bugs. Designers logged new issues, developers would solve them and share the new implementation for designers to review.

When the team had the first stable version of the Android app, we shared it internally at Doist to get more insight and feedback. Other Doisters could access the redesign via a feature flag that could be turned on in the app settings and test the new version for however long they wanted. The feature flag system allowed people to give us early feedback on the design decisions we made and report bugs. Feedback was submitted by the wider team through a dedicated Twist thread and designers and developers could discuss how best to address the feedback during the active project implementation.

After we refined the app implementation further and addressed early feedback we opened up the app update to our beta users. Here users had access to the new Android redesign and were able to give us feedback. Our support team gathered feedback and shared it with us in a dedicated Twist thread. The squad aimed to analyze every comment and looked for patterns where we could make tweaks and improvements to the user experience.

As part of these tweaks, we made changes to how the bottom bar and navigation drawer worked. Some users reported frustrations with the way the new bottom navigation and menu drawer worked. In its first implementation, the drawer was half raised when opened and had to be swiped up to be raised again to see the full content list. This was an issue for some users as it was slower to get to the content below the list. So we decided to fully raise the drawer by default when opening. We also made it easier to open the navigation drawer by sliding up from the bottom app bar. This was a small shortcut but it enabled users to get to their content faster.

Material You

While we were in the testing phase and about to wrap up the project, Google unveiled Material You, and sometime later the Material 3 Guidelines were published. With the newly announced resources, we went back to study the latest guidelines and references we could find to see where the Todoist Android app redesign fits in and which adjustments we might need to make now or in the future.

Dynamic Color was a big new feature that was announced as part of the Material You update. As Todoist supports many different themes the Material You Dynamic Color feature seemed like a good fit for our product. We decided to prioritize this feature and implement Dynamic Color light and dark themes as part of our Todoist theme settings options.

To implement Dynamic Color, the development team started off by creating a demo prototype that utilized the Dynamic Color system and showcased how we could select from a range of color choices that the system defined based on the wallpaper choice. From there, we tried to incorporate system behavior in our design mockups. We designed a range of different color mockups and components to see which ones could fit with which components. We then came up with a color system that worked for the Todoist app and the new themes. These new Dynamic Color themes would sit alongside our current theme options in the Todoist app settings. From here users could choose between Dynamic Color Light and Dark themes.

Along with Dynamic Color, the team also created a customizable bottom app bar, allowing users to set up the app in a way that’s most convenient to their workflow. The location of the Dynamic Add Button can be changed to the center, left, or right corner of the screen. The order of the Menu, Search, and Notification buttons can be rearranged to best fit the ergonomics of the user’s dominant (left or right) hand and optimize their navigation patterns.

Launch

As critical beta feedback was addressed and stability tweaks were made, the squad felt ready to release the new Todoist Android app to the public. The team logged the issues that could not immediately be addressed for future reviews and updates.

The design and marketing team readied the launch by creating What’s New banner artwork and copy that are displayed within the app when launching the update. The Doist marketing team also created release notes and shared the app update announcements on our social channels. The brand and product design team worked together to create custom image assets and copy that summarised the project work in a simple and beautiful way.

What’s Next: Material 3

After a successful launch of the redesigned Todoist for Android app, Google contacted Doist to announce that Todoist was selected as the Material Design Award 2021 winner in the Large Screen category. The team was excited to be recognized for their hard work and it felt like we achieved the goal we had set out to accomplish.

Internally, designers and developers continued to study and discuss the Material 3 updates. The design team started exploring mockups and design changes inspired by Material 3 and Google’s Workspace app updates. Some of our current Todoist explorations include changing the FAB styling, updating the app bar, further removing elevation shadows, and more. Here is a preview of what a future Todoist update could look like.

We hope these insights into Doist’s design process and collaboration practices have sparked your interest. Thank you for reading and stay tuned for future design updates!

Takeaways

  • Study the Material guidelines, Material Design winners, Material studies, and Google Workspace apps to make informed design decisions when designing your next product or app update.
  • Evaluate which Material Design components and practices are right for you and implement them into your product.
  • Carefully balance the Material Design guidelines with your brand guidelines to create a unique and consistent experience between your product and the platform it lives on.
  • Collaborate with your Android developers early and often to ship app updates efficiently and increase the design implementation quality.
  • Use design components and build a design system along with practical mockups to create an efficient design spec.
  • Consider how the latest Android features fit into your product and which have the most impact on your users before deciding to implement them.
  • Test and review builds with your internal team and external beta users to get valuable feedback and make adjustments before releasing them to the public.
  • Create announcement artwork to showcase your latest app or feature update along with a clear description to share in-app and on social media.

Source

The post Case Study: Redesigning Todoist for Android first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

How to Use Hand-Drawn Elements in Web Design

,

What stands out as an incredible web design project for you? Do you count your creation as a success if it’s modern, minimal, and accessible? Maybe you’re the kind of designer that’s constantly experimenting with the latest dynamic design tools or state-of-the-art technology. Perhaps your websites are vivid, animated, and brimming with unique components?

Sometimes, creating the ideal design means thinking carefully about what you want to accomplish for your client. The purpose of your web creation has a significant impact on the components that you need to consider. For instance, if you’re hoping for a highly emotive and human design, it may be worth combining some of your sleek lines and graphics with hand-drawn elements. 

The Value of Hand-Drawn Graphics in Web Design

Hand-drawn elements are just like the other components of web design; that way may use to express individuality in a cluttered digital environment. In a world where everyone focuses on futuristic and virtual creations, hand-drawn elements can pull attention back to the importance of humanity in your content. 

As web designers, we know that visual components often impact people more than text-based content. Illustrations are highly engaging functional elements that capture audience attention and convey relevant information. 

The main difference between hand-drawn elements and graphics built with vectors and other digital components is that one appears to be more influenced by the human hand than the other. Even if your illustrations are created on a screen, just like any other web design component, it pushes an audience to see something more straightforward, more natural, and authentic. 

For a brand trying to convey innocence and humanity in its personality, hand-drawn design can speak to the part of the human psyche that’s often unappreciated by web design. Perhaps more than any other visual, the content reminds your audience that there’s a human behind the web page. 

The Value of Hand-Drawn Features in Web Design

Any image can have a massive impact on the quality of your web design. Visuals deliver complex information in an easy-to-absorb format. In today’s world of fast-paced browsing, where distractions are everywhere, visuals are a method of capturing attention and delivering value fast. 

However, with hand-drawn elements, you go beyond the basic functionality of images to embrace the emotional side of the content. Benefits include:

  • A memorable experience: Web illustrations are becoming more popular among leading brands like Innocent Smoothies and Dropbox. However, the time that goes into these components means that they’re still scarce. If you want to stand out online, illustrations can help you do that. 
  • Brand personality: One of the most significant benefits of hand-drawn web design is showcasing your brand personality. The blocky lines of imperfect content that go into illustrated images highlight the human nature of your company. So many businesses are keen to look “perfect” today to make the human touch much more inviting. 
  • Differentiation: As mentioned above, hand illustrations are still rare in the digital design landscape. If you’re struggling to find a way to make your brand stand out, this could be it. Although there needs to be meaning behind your design, the result could be a more unique brand if you can convey that meaning properly. 

Tips for Using Hand Drawn Elements in Web Design 

Hand-drawn components, just like any other element of visual web design, demand careful strategy. You don’t want to overwhelm your websites with these sketches, or you could end up damaging the user experience in the process. 

As you work on your web designs, pulling hand-drawn elements into the mix, think about how you can use every illustration to accomplish a crucial goal. For instance:

Create Separation

Hand-drawn design components can mix and match with other visual elements on your website. They work perfectly alongside videos and photos and help to highlight critical points. 

On the Lunchbox website, the company uses hand-drawn elements. This helps make the site stand out, and it provides additional context for customers scanning the website for crucial details.

Engage Your Audience

Sometimes, hand-drawn elements are all about connecting with end-users on a deeper, more emotional level. One of the best ways to do this is to make your hand-drawn elements fun and interactive pieces in the design landscape. 

One excellent example of this is in the Stained Glass music video here. This interactive game combines an exciting web design trend with creative interactive components so that users can transform the web experience into something unique to them.

Highlight Headers with Typography

Sometimes, the best hand-drawn elements aren’t full illustrations or images. Hand-drawn or doodle-like typography can also give depth to a brand image and website design. 

Typography styles that mimic natural, genuine handwriting are excellent for capturing the audience’s attention. These captivating components remind the customer of the human being behind the brand while not detracting from the elegance of the website. 

This example of hand-drawn typography from the Tradewinds hotel shows how designers can use script fonts to immediately capture customer attention. Notice that the font is still easy to read from a distance, so it’s not reducing clarity. 

Set the Mood

Depending on the company that you’re designing for, your website creation choices can have a massive impact on the emotional resonance that the brand has with its audience. Hand-drawn elements allow websites to often take on a more playful tone. They can give any project a touch of innocence and friendliness that’s hard to accomplish elsewhere. 

A child-like aesthetic with bright colors and bulky fonts combines with hand-drawn elements on the Le Puzz website. This is an excellent example of how web designers can use hand-drawn elements to convey a mood of creativity and fun.

Animated Elements

Finally, if you want to combine the unique nuances of hand-drawn design with the modern components of what’s possible in the digital world today, why not add some animation. Animated elements combined with illustrations can help to bring a website to life. 

In the Kinetic.com website, the animated illustrated components help to highlight the punk-rock nature of the fanzine. It’s essential to ensure that you don’t go too over-the-top with your animations here. Remember that too many animations can quickly slow down a website and harm user-friendliness.

Finishing Thoughts on Hand-Drawn Elements

Hand-drawn elements have a lot to offer to the web-design world. 

Even if you’re not the best artist yourself, you can still simulate hand-drawn components in your web design by using the right tools and capabilities online. 

Although these features won’t fit well into every environment, they can be perfect for businesses that want to show their human side in today’s highly digitized world. Hand-drawn components, perhaps more than any other web design feature, showcase the innocence and creativity of the artists that often exist behind portfolio pages and startup brands. 

Could you experiment with hand-drawn design in your next project?

Source

The post How to Use Hand-Drawn Elements in Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

10 Homepage Design Comparisons to Inspire Your Business in 2022

,

Looking to give your homepage a well-needed design update in late 2021 or 2022? Not a bad idea; first impressions are crucial when it comes to business websites. But, fixing your homepage and website design is no easy feat.

Web design trends are evolving faster. Blame the ever-decreasing user’s attention span. The average visitor now spends just 0.5 seconds scanning your homepage to form an opinion about your brand and decide whether to click through or bounce.

Increased user expectations and uncertainty in the user’s response, which is highly impacted by the site’s first impression, are other reasons to consider. This is why the designs which were trending in 2019 are no longer viable in 2021 or 2022.

We have curated the ten best examples of homepage designs to inspire your business in 2022, including a rundown of the best strategies and tips.

Let’s start by highlighting why homepage optimization is necessary for 2022:

Why Your Homepage Will Be So Important in 2022

Your website — especially your homepage — is your brand’s first chance to attract, build trust with, and connect with visitors.

According to recent statistics on why website design is important:

  1. 38% of visitors will stop interacting with a website if they think the layout isn’t visually appealing or intuitive. This creates a higher bounce rate and fewer conversions.
  2. 94% of a visitor’s first impression is based on website design (including colors, fonts, layout, navigation menus, etc.).
  3. 46% of people base a business’s credibility on the aesthetics of its website. Brands with less-than-stellar homepage designs are seen as less trustworthy than companies investing in the visitor experience.

Think of it the same way as walking into a brick-and-mortar store. Visitors are more enticed by a carefully curated ambiance of neatly stocked shelves and welcoming employees than a store that’s dark, messy, or seemingly unfriendly.

Using this logic, your homepage’s above-the-fold section is where you’ll greet visitors and reel them in for more.

10 Homepage Design Comparisons (2019 vs. 2021) To Inspire Your Business Website Design in 2022

Homepage design has come a long way since 2019. In this section, you will explore how.

These homepage designs crush it above the fold. Take just a few of these tips to heart, and your website will be poised to attract leads and conversions — no matter which industry you’re in.

1. Netflix – Crafting The Perfect Call To Action That Reduces Friction With An Additional FAQs Section

Most businesses make the mistake of adding a CTA button that first persuades the user to click on it and then asks for the visitor’s email address.

Netflix also did the same in its 2019 design.

However, Netflix combined both steps in its 2021 homepage design.

The new, improved 2021 homepage design asks for the user email address right up front along with the CTA button.

Here is a good comparison of both the designs:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The design encourages visitors to enter their email address right when they land on the homepage. As a result, form submission is much easier when the user has started the process. Hence, Netflix makes it easier for visitors to move along their conversion funnel nicely by reducing the friction.
  • The 2021 design also has a nice FAQ section that provides quick information about the company’s services and improves the overall user experience.
  • FAQs also help increase the organic presence of the website in the search engines because Google presents snippets from the FAQ section in the form of an answer box in the search results.

2. Spotify – Revamped Color Combinations For Improved CTA Visibility And Using The ‘Rule of Three’ For Heading Text

The older 2019 Spotify homepage design used light pink and orange colors in its home page main area. The CTA color was green, but if you look closely, the CTA lacks visibility.

The new 2021 design uses blue and green colors with a much larger font size for the main heading. The colors are attractive, and the CTA is visible clearly.

Here is the comparison of the Spotify homepage 2019 design vs. 2020 design:

2019 homepage design

Vs.

2021 homepage design

Key Takeaways:

  • Blue is the most versatile color, and green is the perfect choice for the CTA button. Spotify used universally accepted color combinations to redesign its homepage and made the CTA more visible.
  • The main heading is also made larger than it was in the 2019 design, and it follows the rule of three in writing which is effective and satisfying. It uses just three words in the main heading to allow the human brain to process information as a pattern that is more memorable.

3. Hulu – Give Priority To Your Brand Name And Hide Pricing

If you compare the Hulu 2019 vs. 2021 Hulu homepage, the brand name has been prioritized and shown as the main heading.

Moreover, the older homepage had pricing information everywhere, which has been reduced intelligently in the new design.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The brand name ‘Hulu’ is displayed as the main heading of the homepage, which helps to build audience trust.
  • The older design persuaded the users to pick a paid plan even though they had a free trial option—this discouraged users from trying their service. The new 2021 design encourages users to try the platform for free. In addition, the packages have prominent CTAs that mention “try for $0”. This design move improves conversions on the website.
  • The new design makes it easier for the visitors to select a viewing plan with easy comparison of the three available plans. The best part is, customers can start all the plans for $0. It’s a win-win situation for the users, and they can quickly pick a plan to start watching Hulu.

4. Nextiva – Reduce Visual Noise And Add Pictures In Menu To Improve UX

Nextiva realized the importance of reducing visual noise in its newly designed 2021 homepage. Visual noise happens when you use too many colors to attract user attention. Different colors compete with each other resulting in diluted customer observation.

In the old 2019 homepage, Nextiva used orange, blue, and green as the primary colors, while in the 2021 revamped design, they have used blue as the main color.

Here is a comparison of the two designs:

2019 homepage design

vs.

2021 homepage design

Moreover, the older homepage didn’t have an image in the product menu, but the new 2021 homepage improves the UX further.

Below is a comparison:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Nextiva used blue as their base color for the homepage design and removed orange and green colors to reduce visual complexity. This is an excellent change to keep the user’s attention focused. Notice the green colored bar at the top of the homepage in the 2019 version now replaced with blue.
  • The 2021 design has a clean look compared to the 2019 design, which looks scattered with too many different elements, including CTAs that confuse the users.
  • The product menu does an excellent job of linking intelligently to service pages such as phone systems and video meetings. The image of a smiling lady attracts users to click on Nextiva’s products to learn more about them. Improving UX is an impressive way to reduce bounce rates and increase time on site.

5. GoToMeeting – Avoid Lengthy Sign Up Form, Educate Users About Your Products, and Add Images That Depict The Current Needs of The Audience

GoToMeeting does a great job educating the users about their product by adding more content on the homepage that comprehensively explains their product features.

Moreover, they have replaced the older hero image with a new picture that portrays the changing needs of their audiences. Nowadays, there is a rise in work from home culture due to Covid-19. Hence, the photo and the heading text clearly target the needs of their users.

Here is a comparison of the 2019 vs. 2020 homepage of GoToMeeting:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The 2019 homepage design had a sign-up form on the homepage, which GoToMeeting removed in the 2021 design. People hate to fill in so much information right when they land on the home page. Hence, GoToMeeting did the right thing by removing the signup form from their homepage.
  • The hero image steals the show of the 2021 redesign because the picture of a working mom with her kid playing studying in front of her is a great way to portray the current needs of the society when over 60% of the employees are working from home. Audiences can quickly relate their working environment with the hero image leading to more sign-ups.
  • The older 2019 design was confusing, and it made little effort to help the users understand the different features of the product. The new 2021 homepage design has a product features section that explains the different features of the software. When users are educated about the product, they earn the confidence to try the product.

6. Zillow – Apply Hick’s Law To Allow Visitors To Take Faster Decisions

Zillow does an impressive job of applying Hick’s Law in allowing visitors to make faster decisions. Hick’s law states that the more options you present to the users, the faster they will decide. Therefore, it is a major factor in improving website usability.

The old 2019 homepage design of Zillow offered too many options to the users, like they want to buy, rent, or sell a property. The users first select either one of the three options and then enter the zip code to start their search.

The new 2021 homepage design changed that. Now, Zillow offers users a single option. They only need to enter the zip code to get started.

By reducing the number of actions that users need to take to just one, the homepage design eases the overall decision-making process of the site visitors.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The new homepage design has a simple search bar that persuades visitors to take prompt action.
  • The Hero image is placed smartly behind the search bar to depict the needs of the users accurately.
  • The homepage does have three different panels for buying, renting, or selling a home when the users scroll below. The old design is missing that. The new design removed so many options above the fold and kept just a single option for the users to encourage more users to search properties on the site.

7. Plex – Placement of Prominent Calls-to-Action On Homepage

The CTA is a key element of every website. It helps the users decide on their next action and helps to convert the visitors into leads.

Plex lacked an optimized CTA placement in its 2019 home page design. Hence, the 2021 design received an uplift to better place the CTA for increased visitor engagement.

Take a look at the home page designs of Plex from two different years. If you compare the two home pages of 2019 vs. 2021, the primary difference that will grab your attention is the CTA.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The call-to-action buttons are more prominent and have actionable texts.
  • The number of CTA buttons is increased to two to encourage users to take action.
  • The additional CTA button is wisely placed at the center to get immediate attention.
  • Note that the color choice for the button is also bright and highly contrasts with the background yet matches the color theme.
  • The old heading text ‘Stream Smarter’ was confusing because it didn’t help the users understand what Plex does. Hence it is now revised to ‘Watch Free Movies and TV on Plex.’ The new text is easy to understand and has the word ‘Free’ to increase the number of visitors clicking on the CTA.

8. Dropbox – More Above The Fold Content And Change of Fonts

Dropbox has significantly worked on its main content, which is clearly visible in the comparison homepage design images of 2019 vs. 2021.

The 2021 homepage is seen fixing faded, minimalistic, and less engaging content in the older homepage.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Sans serifs, with their clean readability, are included for longer bouts of the homepage.
  • Bold sans text is doing the job of drawing user attention effortlessly.
  • The color contrast of the text with the background is increased, which improves the visibility.
  • The right side image of a laptop is replaced with a screenshot of the software, which intrigues users to know more.

9. Cisco – Moving Blocks To Outsmart Competitor Websites

The homepage design of American technology company Cisco has seen a drastic change in 2021; it deserves to appear on this list. The company website smartly represents an appeal for future development through its killer homepage design.

Here is a comparison of the old 2019 homepage design vs. the new moving block design of 2021:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The home page contains moving blocks with news from the blog. As you hover over the image, it widens up, and a CTA button appears. The blocks represent a design of the future which the competitors might find hard to replicate.
  • Every block has a CTA, which was missing in the 2019 design. Each block represents a specific Cisco service and caters to the different needs of the visitors.
  • The new design is elegant and cleaner with lots of information.

10. Slack – Product Video On Home Page For More Conversions

Slack has made it easier for the users to understand the product well by using a video on the homepage.

The 2019 design has an image, while the 2021 design has a video that helps the visitors understand how the product works.

Here is a comparison of the 2019 design vs. 2021 design:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The inclusion of a product video leaves a great impression in the minds of the visitors and shows them what your product does.
  • Video helps Slack to make its value proposition clear and super fast.
  • Video has a strong correlation to conversions, and they work well as compared to hero images. Slack used a hero image on the homepage in 2019, but they replaced it with a video in 2021.

Final Thoughts on Using These Homepage Designs for Inspiration in 2021

By making it to this point in our guide, you now have plenty of inspiration to run with when upgrading your homepage. You should also have a better understanding of how powerful this tool may become for your brand.

So now it’s time to brainstorm how to use these ideas for your own 2021 homepage design. First, jot down the key points from this guide and honestly assess how your website currently compares.

Accomplish this task, and your brand might see an uptick in website traffic and conversions. It may even earn a spot in a roundup of killer website designs just like this one.

Source

The post 10 Homepage Design Comparisons to Inspire Your Business in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par