Kanban Zone | UX Page Redesign
MY ROLE: Product Designer
TOOLS: Figma, ChatGPT
DURATION: 60+ hours
major redesign driven by UX iterations with new content
This is the industry client project I completed for my Springboard UX Bootcamp and is a real client project with Kanban Zone.
Problem
Kanban Zone‘s pricing page outdated pricing page has low signup conversion rates. It had an outdated design and has low conversion rates. The client asked our team to improve conversion rates for product signup.
(The Kanban method, which aims to manage tasks and achieve specific objectives, originated in Japan.)
Solution
My team of three UX designers and I worked with CEO Dimitri Ponomareff to revamp Kanban Zone’s pricing page, modernizing the design, and designed a mobile-first experience.
Click to enlarge images.I am presenting simplified images for faster user scrolling.
All information in this case study is my own and does not reflect the views of the client. For privacy, I have modified the information to be non-confidential.
Product Demo
Existing Site
Redesigned Site
Role
As a lead product designer, I managed client requirements and lead design work weekly sprints. I led a team of three other designers and was responsible for creating project documentation, creating client product requirements(PRD), setting up weekly scrums, providing guidance, and handling all client communications.
What Others Do Well
Our team did product research on direct and tangential competitors. Mine included Asana, Monday, and ClickUp of their pricing pages.
We used ChatGPT to compare paid features from various competitors.
Asana
- Clean typography
- Selective user of color
- Mobile view accordion vertical UI
- Hover modals to indicate plan features on click (without leaving page)
Monday
- Intuitive mobile horizontal scrolling
- Consistent visual language with minimal indicators
- Strong CTA callout before details
Site UX Recommendations
use UX to highlight key information first and use modals for detailed information
- Highlight the desired featured plan with color and iconography for purchase
- Use modal to show specific detail information
Client Feedback
The client approved our UX recommendations for improving the scan-ability of the page.
The Ideal User
As a user, I want to find a work management Kanban-based plan for my org.
Oscar is a small business owner looking for a great Kanban-based plan without paying for the cost of a expensive plan like Asana.
How It Works
I conducted a variety sketch exercise to create designs for desktop and tablet. My main objective was to draw attention to the featured plan and ensure that plan details were easily scannable.
Wireframe Brainstorming
As the team leader and designer, I initiated the first iteration with a basic data structure. Drawing inspiration from Asana’s design elements such as clean shapes and rounded corners, I led the team in creating the second iteration.
Usability Testing – Wireframe
Mobile
1. Using this screen, how would you go about reading the page?
2. If you wanted to see all features in a plan, what would you do?
3. What do you think about the add-ons section?
Desktop
1. How would you compare the plans on this page?
2. If you wanted to see all features in a plan, what would you do?
3. What do you think about the add-ons section?
Mobile Concept Design
Desktop Concept Design
Wireframe Usability Test Results
- ✅ Most of our users were able to find the plan they wanted
- ❌ The users voiced the add-ons module was confusing for helping them decide which plan was best
- ❌ Users gave feedback the content seemed disorganized, indicating the existing UX content order and structure needed to be improved
Affinity map takeaways
- users found the order of information to decide on a plan was confusing
- information overload on each plan within the page
- overall the page was not easily scannable for key details
Usability Wireframe
User found add-on module confusing
Usability Wireframe Fix
UX solution to add-on module visibility
Improved Version – moved down further below plans
We presented both the wireframe and usability test to the client to back up our findings.
Client Feedback
The client agreed with our proposal that the optimized UX would increase conversion.
Client Requests (Mid-Fi)
Client Addition – Marketing Module
The client requested the addition of a marketing contact module for users to get in touch with customer reps.
Variation A – use of iconography as a graphic
Variation B – use of imagery as a graphic, client preferred
Plans Module Iterations
Variation A – My version
I attempted to modernize the UI from the literal translation of the old page.
Rejected Version
Variation B
Utilizing the Asana UI language keeping the existing UI content
Preferred version
As the project manager and UI/UX designer, I led my team in various ways. I set the page template and created interactive components, while the rest of the team focused on the UI detail work.
Add On Module Iterations
The client increased number of addon card products from 4 to 10 to expand product offerings at the time.
We chose a carousel to display the information as the best mobile-first UX solution.
Usability Test – High Fidelity Design
First High Fidelity Testing
We used the same testing script as the lo-fidelity test.
Desktop
Mobile
High Fidelity Usability Test Results
- ❌ Users missed the UX interaction to compare plans
- ❌ Users did not interact with the Add-Ons module
- ❌ Users did report having to scan through which information was the most important and that it was difficult to find the key information upon opening the page
ChatGPT was used to analyze key insights for deep features for user conversion.
Post User Test Changes
Original
Users reported having difficulty seeing the view plan to sign up for a plan via the Plans Comparisons module (page goal
Update
The Plans Comparisons module was moved up so the users could see the features to convert faster
Improved Solution ✅
Final Design
Site Improvements
❌ The existing site has confusing iconography and difficult typography to read
✅ The plans module looks modern and easy to navigate with relevant information.
❌ The existing site has seemingly random CTAs below the plans for UX content organization.
✅ The Add Ons Module is a modern carousel and easily scannable.
✅ Additional CTA callout at the bottom for user conversion.
❌ The Plans details gives too much irrelevant information and has poor visual design.
✅ The Plan Details Module is a modern collapsible accordion with key content.
Here is the final deliverable we gave to the client. We incorporated their request for final content and the Kanban design system.
Click to enlarge images.
Desktop
Mobile
Desktop and Mobile Data Accordions
Client Feedback
Initially, the client was hesitant about conducting UX testing, but with the support of our combined UX testing results, they were very satisfied with the design. We maintained the existing design system’s look of the page while giving it a visually appealing modern feeling that was user-friendly while accessible.
Live Product
The client made some minor changes and added some functionality updates (language selector) and the page is live. Subject to change by client since project went live circa 2022.
Outcome
Increased prodcut signup by 50%
Our design team does not have the exact web analytics, but analytics from App Store downloads and product user traffic reviews strongly indicate conversion increased by 50% and the redesigned page has been very well received with user feedback.