Simple, effective, and interesting
UI | UX | Web Design | Mobile Design | Respective Design
Redesigning the header and footer of a website and respective mobile screens
Timeline
3 months
Team
CEO (Dimitri P), design manager (Chole R),
another designer (Eleanor Hinkle), 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
Challenge
It’s hard to conduct traditional formal user research since it’s a B2B product and without a research team
Satisfy existing clients, new users, stakeholders, and business goals
Redesign the website for a more user-friendly and visually appealing look while keeping it consistent with the existing visual guideline and brand attitude
Goals
Optimizing the existing Information Architecture and design system while keeping current clients familiar with them
It takes less time for current customers and new users to find what they want
Make the website more visually appealing while making it easier for users to use
Keep the mobile view consistent with the web view to avoid any confusion.
User research
Heuristic analysis of current website
Competitive analysis of similar website
Receiving feedback from current clients and stakeholders
Quick usability tests on new users
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 each 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
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
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
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 respective 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
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.
