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.
This project aims to give KanbanFlow a fresh look and improve users' website navigation. At the user level, the primary goals are:
At a business level, the redesign of the website will:
The website is not getting enough traffic and is swallowed by top competitors like Trello, Asana or Notion.
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.
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:
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.
Expose KanbanFlow to a wider relevant audience that will ensure a significant increase in qualified organic traffic and conversions.
By refreshing the visual identity and the website's user experience, we can add new sections that will be more relatable to potential users.
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.
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 that 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.
Desktop
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, added social proof, and 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.
Desktop
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 gets 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 coresponding icon located at the bottom of the page.
Desktop
I asked users to perform the following task:
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.
Below, you can try out the final version of this project's interactive prototype.
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 that 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. In my research, this aspect was lacking, 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 need to be completed first, as well as sales and legal concerns that need to be clarified.
Biggest takeaways:
What should be improved:
