KanbanFlow

ROLE
Concept, Research, UX, UI, Testing
PLATFORMS
Mobile
INDUSTRY
Task Management
TOOLS
Figma
DURATION
6 weeks

Background

KanbanFlow is an online task management software that boosts individual and team productivity. While the tool has a simple interface and is easy to use, the website needed an upgrade. With an outdated user interface, content that needed to be restructured, and a user experience that required improvement, the entire redesign process was a significant learning experience.

What I did

1. User research - to understand how people interact with the current website and use other task management tools.
2. Competitive research - I analyzed the website structure and offerings of top competitors, such as Trello, Asana, and Notion.
3. Website navigation - introducing new pages and rethinking the entire website structure.
4. Wireframing - showcasing the new flows through low-, mid-, and high-fidelity wireframes.
5. Interactive prototype - creating an interactive prototype for the new flows.‍
6. Usability testing - evaluating ease of navigation and overall website structure and content, then iterating based on feedback.

Project goals

This project aims to give KanbanFlow a fresh look and improve users' website navigation. At the user level, the primary goals are: ‍

  • Understanding what the tool does as soon as the user lands on the website
  • Access to tool screenshots and demos to understand how it works
  • Exploring real use cases to increase product relatability
  • Signing up for an account and a free trial
  • Using the mobile app‍‍‍

At a business level, the redesign of the website will:

  • Improve the overall UI and UX of the website and bring it up-to-date
  • Increase organic traffic over the next six months by creating new use case pages
  • Revamping the feature pages and ensuring SEO optimization to increase keyword rankings
  • Facilitating the use of the mobile app through a dedicated landing page accessible from the main menu
  • Improve the layout of the pricing page to maximize conversions

The problem

The website is not getting enough traffic and is swallowed by top competitors like Trello, Asana or Notion.

Research

I have conducted comparative and competitive research and user interviews to understand how people use task management software, the challenges they face , and what they're most interested in. The stories that were collected became a strong foundation for the insights below.

Interviews

Method: Zoom calls ‍

The interviews aimed to help me understand whether and how people research and use task management tools and what they're looking for in a website before deciding whether to use a tool. Some of the questions were centered around: ‍

  • What task management tool are you using and how are you using it?
  • Tell me a bit about your research process on task management tools.
  • What gives you the confidence to try out a new tool?
  • Have you used any other task management tools? If yes, how do they compare to the current one?

Insights

I conducted competitive research and user interviews to understand how people , the challenges they face, and their motivations. The stories I collected became a strong foundation for the insights below.

Defining the problem

Expose KanbanFlow to a wider relevant audience that will ensure a significant increase in qualified organic traffic and conversions.‍

  • How might we attract new visitors to KanbanFlow while ensuring the retention of the existing ones?

The solution

By refreshing the visual identity and the website's user experience, we can add new sections that will be more relatable to potential users.

Feature prioritisation list

I placed all features into separate categories, based on urgency level, then went on to further prioritise those that needed to be displayed in the final flow.

Initial design

To deliver the goals mentioned above, I redesigned the entire homepage, updated the main menu to incorporate new website sections like use case pages under "Solutions,” and updated the entire pricing page and the sign-up process.

Once I understood the essential design elements, I incorporated them into detailed wireframes and iterated through multiple design versions in Figma based on feedback collected through testing.

Initial design

To deliver the goals mentioned above, I redesigned the entire homepage, updated the main menu to incorporate new website sections like use case pages under "Solutions,” and updated the entire pricing page and the sign-up process.

Once I understood the essential design elements, I incorporated them into detailed wireframes and iterated through multiple design versions in Figma based on feedback collected through testing.

1. Homepage‍‍

I completely redesigned the home screen, changed the copy and added a product demo above the fold as the interviewees mentioned that they usually like to see videos explaining how a product works. ‍

I also changed how product features are displayed and opted for cards the user can tap through left and right. I added a corresponding section on the homepage to advertise the new Solutions pages, which offer product use cases for different teams, and included a separate section on app integrations.‍

Social proof is crucial for building trust, so I included logos of potential clients and testimonials at the bottom of the page.
KanbanFlow Homepage redesign
2. Main navigation menu‍‍

The old navigation menu had a dropdown functionality that covered a small area of the above-the-fold home screen, resulting in a cluttered screen with a lack of focus. ‍

Upon tapping, the new menu opens on a new, uncluttered screen and includes all of the website's reorganized sections, including two CTAs.
3. Pricing‍

At a visual level, I restructured the old pricing page to give it a more dynamic feel and look. I used the dropdown functionality to showcase the different pricing plan options and added social proof. I reworked the FAQ section, maintaining the same dropdown functionality for a dynamic and elegant look. ‍

From a business perspective, I have also included a potential enterprise section that could become an integral part of the platform. This would boost revenue and offer a new business direction; however, setting up an enterprise section requires top-notch security, involves sales and legal work, and requires extra customer service. Whether this is feasible for the product is a decision taken at the executive level. ‍

Each pricing plan includes an overview of the available features, monthly/yearly prices, and who it best suits. 
KanbanFlow Pricing
4. Sign-up‍

I maintained a sense of simplicity for the sign-up screens, offering users the possibility to sign up with their email or via Google or Apple. Once they sign up, they’re redirected to another screen from which they can easily access the dashboard.
5. Feature page‍

The feature page was redesigned to offer bite-sized information to website visitors efficiently using a non-overwhelming display. By using separate cards, I ensured that each feature got individual attention, as opposed to the initial design. I also shortened the text and added an accompanying image. To ensure the user is not overwhelmed, I displayed the features in groups of three on mobile and desktop; if users want to see more, they can click the corresponding icon located at the bottom of the page.
KanbanFlow Features Page Desktop

Tab Content

This is a basic text element.

What I did

I asked users to perform the following tasks: ‍

  1. Locate the Kanban board feature page.
  2. Try the 14-day free trial from KanbanFlow.
  3. Go to the Dashboard, create a board, and the first task within that board.‍

Task success: 95% of participants reached the end screen.‍

Only one user had an issue accessing the dashboard screen and fully completing the flow. This was due to a technical error in the software I used for testing.

All other users encountered no issues in performing the tasks at hand. No further iterations were made.

Interactive Prototype

Below, you can try out the final version of this project's interactive prototype.

Conclusion

This project helped me understand what redesigning a website means from a design perspective. So far, I have only considered the marketing side of things and the impact a redesign would have on various channels. Considering what's currently working for the website and what needs to be changed is a vital decisional process. ‍

Considering all the information provided by the interviewees, I translated it into screens that empower users to have a seamless navigational experience and a pleasant UI experience. ‍

I also included a new website section, "Solutions," which would show the real-life audience this product addresses. This aspect was lacking in my research, so I had to operate based on assumptions. ‍

The new design also includes an Enterprise section—whether this would be feasible is a more extensive discussion. I aimed to increase future revenue, but from a technical point of view, significant security aspects, as well as sales and legal concerns, need to be completed first.‍

Biggest takeaways:‍

  • When redesigning, it's useful to make a list of what works and what doesn’t
  • Look at direct and indirect competitors for inspiration
  • Think about new sections that could be added to the website and how those could correlate with future revenue or traffic
  • Be careful so as not to take away too much of the initial product identity – users should be carefully and slowly rolled into the new design ‍

What should be improved: The current color palette is too strong; I would tone it down. I would increase the height of the top header and bring any icons and logo slightly lower on the page.

Next steps

  • Creating pages for the Solutions section
  • Redesigning the feature pages
  • Redesigning the mobile app page
  • Refreshing the UI for the KanbanFlow tool
VIEW ALL WORK

Say Hello.

hello@antoniasterian.com
© 2025, All Rights Reserved