Ethan.Z
01
Overview
Duration:
1 months
Dec 2022 - Jan 2023
Team:
2 Designers, 1Product Manager, 2 Developers
Tools:
Figma, Photoshop, Slack, Miro
My Role
Kanban Zone is an online Kanban tool with customizable templates to help users streamline work processes, improve communication, and achieve better outcomes. Upon joining, my mission is:
-
Redesign the homepage to enhance user engagement.
-
Conduct user research to provide informed design solutions to showcase the product’s unique selling points.
-
Collaborated with the product manager, designers, and engineers to achieve improved outcomes.
Problem
Kanban Zone's website contents are too educative to show its unique selling point, which causes low user engagement.
Outcome
-
Improved homepage user engagement leads to an 8% in user sign-ups.
-
Effectively highlighted Kanban Zone's unique selling points on the homepage, setting it apart from competitors in the market.
A brand new homepage designed to showcase Kanban Zone's unique selling points and engage users to experience the product.
A dynamic HERO section to show the product in action
Create content that emphasizes the unique selling points of Kanban Zone
Emphasize the product's versatility and compatibility
Context
02
About the product
What is Kanban Zone?
Kanban Zone is an online Kanban tool with customizable templates to help user:
Streamline work processes
Improve communication
Achieve better outcomes
Discovery
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"
User Research
03
Interview
Homepage evaluation with 6 users
Once we identified the problems and business goals, we recruited six participants to gather user insights on Kanban Zone's current homepage. I interviewed each participant about their feelings toward the site's visuals and contents to identify potential improvements.
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 what makes it stand out.
To encourage users to sign up for Kanban Zone..
How might we effectively convey the product's unique selling points on the landing page and enhance user engagement?
Ideation
04
Competitive Analysis
Understand the product's strengths and weaknesses
To clearly understand our product's strengths and weaknesses compared to other options on the market, I conducted a competitive analysis that included two primary and three potential competitors. By taking a comprehensive approach, we gained a more reliable and thorough understanding of the market landscape.
Comparison chart for finding potential improvement
Initial Solutions
Convert research insight into protential design solution
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:
-
Show the actual picture of Kanban Zone in the HERO section, which can help users better understand its practical applications.
-
Content should be simplified to highlight the product's unique selling points and add more calls-to-action (CTAs) to encourage user engagement.
-
Add a competitor comparison table to showcase Kanban Zone's unique value and differentiate it from other similar products on the market.
Design Exploration
05
Wireframe
Visualize Solutions in Wireframe
We turned our solutions into wireframes to provide a more detailed representation. We met with the stakeholders to present our wireframes and gather feedback on the new design.
-
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 more Call-to-Action buttons to motivate users to explore our product further.
We aim to incorporate a competitor comparison chart to highlight Kanban Zone's distinctive value and set it apart from other competitors.
After meeting with stakeholders, we identified three primary selling points for Kanban Zone and provided a brief description.
Here is some feedback from stakeholders:
-
Find appropriate metrics for a comparison chart.
-
The mobile version should be more center-aligned and spaced out.
-
Prefer to add some blue color and curves to the hi-fi version to enhance the flow and make it more visually appealing.
Concept Validation
Prototype my Solutions
After incorporating the feedback for the wireframe and following Kanban Zone's style guide, we created a homepage prototype. Once we finalized the interface, we presented it to stakeholders for feedback and refinement.
How do we improve homepage user engagement?
-
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
After
How do we convey the product's unique selling points on the landing page?
​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
Comparison Chart
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.
Evaluation
06
Design Critique
Evaluate prototype feasibility and effectiveness
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 feedback for refinement:
-
Improve the HERO image to make it more impactful and visually appealing.
-
Work with the marketing team to figure out a better copy.
-
Find a solution to allow users to interact with the content WoWs in a more engaging way.
- ​It's hard for the front-end team to create the comparison chart.​
Design iteration
07
Refinement #1
-
Updated the HERO image on our website to showcase our product's appearance prominently. I also added a “See it in action” button, which allows users 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.
Before
After
Refinement #2
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.
Before
After
Refinement #3
The comparison chart had text and color overlaps, making it challenging for the development team to work on. Therefore, I decided to eliminate the chart and concentrate on extracting Kanban Zone's distinct advantage.
Final Outcome
06
Project ​Impact
Enhanced user engagement
After launching the redesigned product homepage, users can easily differentiate Kanban Zone from other solutions on the market, resulting in an 8% increase in user sign-ups for the company.
The Final Design
Takeaways
07
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:
-
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.
-
Conduct usability tests with the users to identify further refinement, and check the conversion rate of all CTA buttons.