top of page
gradient.png
KZ Logo.png
kanban mock.png
What is Kanban Zone?

An online Kanban tool with customizable templates to help user:

Processing-pana.png

 Streamline work processes

Improve communication

Achieve better outcomes

My Role

Over the course of one month, we revamped the platform's homepage.  The resulting redesign successfully expressed the Kanban Zone's unique value and improved its user engagement across all devices.

Worked as:

design icon.png

Product Designer

My Focus:

Mobile Version

My Team:

Feedback

Report

Collaborate

Collaborate

Stakeholders

Design team

team.png

Dev/Marketing team

Stakeholder interview

At the outset of the project, we conducted a stakeholder interview to gain a deep understanding of Kanban Zone's business goals and the problem we aimed to solve.

"The messaging on the homepage is too educative"

"Differentiate Kanban Zone with its competitors"

"Encourage users use the CTA button on the website"

Homepage evaluation with 6 users

Once we identified the problems and business goals, we want to gather insights from users. To accomplish this, we recruited six participants to evaluate Kanban Zone's current homepage. I conducted interviews with each participant to learn about their feelings toward the visuals and text on the site, and to identify any unhelpful information. The insights we gained from the interviews highlighted several issues:

1. Users were unclear about the practical application and appearance of Kanban Zone.

2. Users experienced a slightly disjointed and clunky navigation experience on the homepage.

3. Users were uncertain about the unique selling points of Kanban Zone and how it compared to other tools available on the market.

thinking.jpg
Design Challenge
How might we improve user engagement and accessibility on the product homepage?
How might we effectively communicate the product's unique value and selling points on the homepage?
Competitive Analysis

Kanban Zone is one of many Kanban tools available on the market. In order to gain a clear understanding of our product's strengths and weaknesses compared to other options, I conducted a competitive analysis that included two primary competitors and three potential competitors. By taking a comprehensive approach, we gained a more reliable and comprehensive understanding of the market landscape.

Comparison chart for finding homepage improvement

KZ Competitive Analysis 1.png

Identify Kanban Zone's unique value

KZ Feature comparison.png
Initial Solutions

After gathering insights from stakeholders, users, and competitors, I collaborated with another designer to synthesize the results. We identified the following solutions for the Kanban Zone homepage redesign:

  1. Show the actual picture of Kanban Zone in the HERO section, which can help users better understand its practical applications.
     

  2. Content should be simplified to highlight the product's unique selling points and add more calls-to-action (CTAs) to encourage user engagement.
     

  3. Add a competitor comparison table to showcase Kanban Zone's unique value and differentiate it from other similar products on the market.

Visualize Solutions in Wireframe
KZ Wireframe-1.png

Display the product picture prominently at the top of the homepage to provide users with an immediate visual representation of our product as they enter the website.

Incorporate additional Call-to-Action buttons to motivate users to explore our product further.

After meeting with stakeholders, we identified three primary selling points for Kanban Zone and provided a brief description for each one below.

KZ Wireframe-2.png
KZ Wireframe-3_edited.png

We aim to incorporate a competitor comparison chart to highlight Kanban Zone's distinctive value and set it apart from other competitors.

We turned our solutions into wireframes to provide a more detailed representation. We held a meeting with the stakeholders to present our wireframes and gather feedback on the new design. Here is some feedback from stakeholders:

  1. Find appropriate metrics for a comparison chart.
     

  2. The mobile version to be more center-aligned and spaced out.
     

  3. Prefer to add some blue color and curves to the hi-fi version to enhance the flow and make it more visually appealing.

Prototype my Solutions

After incorporating the feedback for the wireframe, and following Kanban Zone's style guide, we proceeded to create a homepage prototype. Once we finalized the interface, we presented it to stakeholders for feedback and refinement. 

Solution 1
  • Use a HERO image to show what our product looks like.

  • Increase the amount of CTA buttons from 1 to 3 ( the last one at the end of the page to reemphasize)

  • Add some catchy illustrations to capture user attention and spark their interest in clicking the link.

Before

WechatIMG521.jpeg
WechatIMG522.jpeg

After

Solution 2

We simplified the homepage content by reducing 8 feature introductions to 3 main selling points of Kanban Zone. We also designed a comparison chart to showcase our product's advantages and help customers understand why they should choose Kanban Zone. 

3 main selling points

Mobile Version Hi-fi 3.2.png

Comparison Chart

comparsion.png
Additional Improvements

To better showcase our product, we moved the testimonial section from the top of the page to the bottom. The three awards featured on the previous homepage were all from the same organization. To improve our credibility, I asked for two additional awards from different organizations to showcase on the homepage.

In our final meeting with the stakeholder, they expressed their concern about the layout of the comparison chart. The initial design had a lot of text and color overlap, making it difficult for the front-end developers to work with. In order to ensure everyone can work efficiently, I transformed the comparison chart to two new sections. 

Stakeholder feedbacks for refinement:

  1. Improve the HERO image to make it more impactful and visually appealing.

  2. Work with the marketing team to figure out a better copy.

  3. Find a solution to allow users to interact with the content WoWs in a more engaging way.

  4. ​It's hard for the front-end team to create the comparison chart.​
Refine & Final outcome

Before

Refinements 1 & 2

After

Updated the HERO image on our website to prominently showcase our product's appearance.
I also added a “See it in action” button, giving users the option to view how our product works.

Differentiated two CTA buttons with white and green colors and emphasized the "Try for Free" button to make it stand out more prominently.

Added a "Watch video demo" option at the end of each content WOW. This will allow users to see each selling point in the action. Additionally, I included a prominent "Try for Free" button to encourage users to sign up and try our product.

Refinements 3

Before

Mobile Version 5.png

After

kzz.png
Refinements 4

The comparison chart had text and color overlaps, so it was challenging for the development team to work on. Therefore, I decided to eliminate the chart and concentrate on extracting the distinct advantage of Kanban Zone.

comparsion.png
The Final Design
kz.gif
Result & Reflection
Result

After launching the redesigned product homepage, overall accessibility improved, resulting in an 8% increase in user sign-ups for the company.

Reflection

Reflecting on my first multi-platform project, I found making all elements and content work well on both mobile and desktop versions to be both exciting and challenging. If I were to start over, I would focus on designing a flexible layout that could adapt to different screen sizes from the beginning. In addition, I learned that as a designer, I need to balance creating a user-centered product with meeting stakeholder expectations and making it easy for other teams, such as front-end developers, to work with my solutions. Overall, this project has taught me valuable lessons that I will carry with me to future projects.

Next step

As we move forward, there are a few potential improvements that we can make to the current design. While we didn't have enough time to implement these changes in the current iteration, we will consider them for the future:

  1. Create some product animations to replace the video on the content WOWs. It will help the customer understand how Kanban Zone works even though they didn’t watch the demo video.
     

  2. Conduct usability tests with the users to identify further refinement, and check the conversion rate of all CTA buttons. 
     

bottom of page