Simple, effective, and interesting
UI | UX | Web Design | Mobile Design | Respective Design
Redesigning the header and footer of a website and responsive mobile screens
Timeline
1 months
Team
CEO (Dimitri P), design manager (Chole R),
another designer (Eleanor Hinkle), UX designer/researcher(me)
Role
User Research / UI/UX Design
Tool
Figma / Google Slides / Slack / Zoom
Kanban Zone is a company that helps individuals and companies prioritize, streamline and complete their work faster without compromising the quality through proven Kanban techniques. However, the growing number of negative feedback on the header and footer of the company's website has caught the attention of stakeholders. This marked the beginning of this redesign project.
Problem
Users fail to find the useful information they need in the header and footer
Goals
1. Optimizing the existing Information Architecture and design system while keeping current clients familiar with them
2. It takes less time for current customers and new users to find what they want
3. Make the website more visually appealing while making it easier for users to use
4. Keep the mobile view consistent with the web view to avoid any confusion.
User research
Competitor analysis
Importance of call-to-action buttons
Most new users probably know very little about the Kanban tool, and a demo can help them better understand the tool and even lead to a successful purchase. For older users, it can help them see the benefits of the Kanban Zone tool compared to the current tool they are using and decide whether they want to switch to the Kanban Zone tool.
Well-organized information architecture
They provide sensible divisions and easy-to-understand categories. The solutions they can provide for different industries in different environments also help increase the satisfaction of new users.
Explanations below each term
Helping new users like me to expand fewer pages until they reach their final desired destination.
A sense of modernity and intelligence
Since the company provides collaborative and efficient tool services, it is necessary to create a sense of modernity and intelligence when users get to know the company. Other competitors either use icons or animations to add a smart feel to the site.
Complaints received from stakeholders and current clients
It’s so overwhelming!
I don’t know where to look at!
The website looks so boring.
I don't find the navigation helpful at all.
Heuristic analysis
We also performed a heuristic analysis of the current website to reveal the issues, and I discuss the detailed insights we found and solutions to those issues below.
Jump to the Interactive Prototype
Pain points and solutions
Restructure Information architecture
Pain points:
The user does not know what the product is
Too much content under one tab
Too many hierarchies confuse users
Goal:
Make a brief introduction
Reorganize the content under the tabs
Create better hierarchies for users to understand
Solution:
Decision 1
Add an overview section for product tab
Users expect to see an overview of the product under <product>
<overview> can help new users to know more about the product
Decision 2
Put <template> under <solutions>
Users are more likely to find <template> under <solutions> than <product>
Each tab contains less content to prevent overwhelm
Decision 3
Using icons, different font sizes, and styles to display a better hierarchy
Using the same color can decrease the distraction and provide a feeling of organized
Users can tell which is a section title and know if they are in the right place
Web view
Current version
New version
Pain points:
Similar hierarchies make users confused
Too much content on a smaller screen
The content is different from the web version
Goal:
Create different hierarchies to help users understand
Provide less content at once
Make mobile view consistent with the PC view
Solution:
Decision 1
Create three different hierarchies and two arrows
Provide users with a clear and better hierarchy to find information efficiently
Different hierarchies with different arrows
Decision 2
Create an expandable menu
Display less information at once on mobile screens
Users feel less overwhelmed
Decision 3
Use the same content of information architecture
Prevent confusion caused (e.g. <view all features> and <All product features>)
Make the respective screens more consistent
2. Mobile view
Current version
New version
Pain points:
Too many colors applied can confuse users
The current design does not grab the user's attention
Common designs rarely show what the product does
Goal:
Use few colors to decrease distraction
Design something that catches users' attention
Create a unique design that shows the key features
Solution:
Decision 1
Only use three colors for <log in> <sign up>
Decrease the distraction
Two colors for the standard state, one extra color added for hover state
Decision 2
Add graphics and icons to grab the user's attention
Added a wave design to the background to align with the footer's new wave design and other ongoing redesign work
Show the key features of the product
Decision 3
Replace old text buttons with standard fill buttons
Kanban zone also provides services to users, so current customers may need to contact the company frequently
New users may want to contact the company for more details and to personalize the product
Redesign key feature - Call-to-Action button
Current Version
New Version
Change the primary color
We suggest Kanban Zone change the primary color to another color that has a higher contrast to white (which is their background color) to make it WCAG compliant
We keep it a brighter color (instead of colors that pass WCAG AAA) according to the CEO's feedback
We emphasize that colors should only be used with large text to pass guidelines (we also choose larger font sizes for buttons)
Current version
Pick colors that WCAG compliant
Throughout our entire design process, we test contrast and fonts when we need to pick new colors
Make the website WCAG compliant
New version
Use color styles and variants
It saves a lot of time when we want to make a change in colors
While we don't have the opportunity to work with developers, we try to talk to developers about how to make their jobs easier
We use variants for web menus
Color style
Use components instead of copying and pasting
Makes the whole design more consistent
Save designer’s and developer’s time
Optimizing existing design system
Variant
Make the responsive screens consistent
Pain points:
The colors are different
Hierarchy is different
Content is different (<See all> and <All features>)
Goal:
Use the same colors
Use the same hierarchy
Use the same content
Solution:
Decision 1
Make the colors, fonts, icons, and content the same
Mobile View now has the same hierarchy as PC View
Avoid any confusion among users
Decision 2
Remove graphics for call-to-action buttons on mobile screens
The mobile screens are smaller than desktop screens, and graphics take too much space on mobile screens
Most users look at the phone screen to decide if they want to dig into the product, then they use the computer to see more details
Current version
New version
Outcomes and result
Project takeaways
Although I've tried to learn the brand attributes and the company culture by browsing its website and using the tool (We were using the Kanban throughout the whole internship experience to track the work progress), I still feel that I know little about the company. As we only have a simple style guide, for example, the font and the brand color of the company, we actually have to deal with many other things, including spacing, other colors we use, font size, margin, and lots of other things. Knowing more about the company can help us to build something that more match the brand attributes.
Interactive Prototype
Back to the solution
Read the case study
34%
reduction in task completion time
50%
increased in CSAT score on the navigation system