Simple, effective, and interesting
Redesigning the header and footer of a website and respective mobile screens
INTRODUCTION
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.
My role
Visual and interaction designer
Work with senior manager
Work with Eleanor Hinkle
Tool used
Project duration
1 month
What to do and how to do
Before starting working on the project, we had a meeting with Kanban Zone team to know better about the problem they want to solve and the goals they want to achieve. It’s my first redesign project, and I know how hard it can be. The core thing about redesigning is to know the user pain points (it’s mainly stakeholder’s pain points for this project). During the meeting, we listened to their thoughts, complaints, and goals.
Project type
UX internship project, web design, mobile design
Zoom
Figma
Google Slides
Revealing the problems
To know the pain points better, we use the website from the user’s and designer’s perspectives and then combine it with the information Kanban Zone team shared with us.
Look at old designs
To discover specific issues about the old designs, we first looked at the old menu. I found the menu was underutilized and users don’t helpful to them. Users reported frustration with the overwhelming and disorganized information when they needed to find something. And the menu with unnecessary multiple colors applied results in a lot of focus and distraction, making it difficult for new users to discover the importance of different information. Also, the dull and Wikipedia-like design creates an atmosphere away from high-tech.
Then we looked at the old footer. The old footer is inconsistent with the header due to different colors. The dark gray on a light background also creates a serious feel. And there are also alignment issues.
Next, we looked at the old mobile screens. Mobile headers are completely different from web headers and are more like another greyed-out version. Obviously, other issues are similar to the web version issues. So the only thing we had to do was to make the mobile screen consistent with the web page after we finished the website redesign.
Discover pain points
Since we were a small team with no research team and the need for the site redesign was so urgent, we only had a month to complete the project. And we also didn’t have the budget for user interviews, so we had to do informal user research as soon as possible. The complaints we are currently receiving are mainly from stakeholders and current users. To get a better idea of what new users think, I simply asked a few friends and family to complete a quick usability test and get feedback from them. I let users use the old menus, footers and mobile screens, then let them do simple tasks like "Imagine you're new to Kanban and you want to know some basic information, what would you do?", then document the user flow and the time spent.
Users fail to find the useful information they need in the header and footer
By analyzing my findings through the research and previous complaints received, I was able to summarize three user pain points. First, for users, it took lots of time to find what they need. Second, they still know little about the content of the service, as well as the brand attributes. The absence of graphics or icons related to productivity tools and the basic design without animations are not associated with the effective and visual company culture. Third, for the company, the Call-to-Action buttons, which are ‘watch a demo’ or ‘talk with experts, don't grab the user's attention. It can lead to a loss of potential users if these buttons are not standing out.
Quick competitive analysis
Additionally, in order to have a design that complies with industry web standards, I did a quick competitive analysis of the relevant sites.
Overall, I found the importance of call-to-action buttons (not the free trial ones because they are important to most websites). 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. Then I noticed that their information architecture is well organized to help users find information efficiently. 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.
When I tried to search for functions related to visualization charts, I found that I spend far less time on the Kanbanize website than on the Swift Kanban website. The explanations below each term can help new users like me expand fewer pages until they reach their final desired destination. Also, since a 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.
The goals
1. Helping users find what they need as quick as possible.
2. Helping users to get to know the tool and the brand better.
3. Using colors, illustrations and animations to make the website more interesting.
OUR SOLUTIONS
Today, Kanban Zone continues to provide multi-team coordination services and tools to help them to accomplish work faster and effective, as well as visualizing the big picture to make better decisions. We design the menu and footer that meets the same need of Kanban Zone's client: Simple, effective, and interesting.
Before working on the project
The informational architecture, in my opinion, plays an important role in the success of a menu. We checked the revised informational architecture, but still find it inefficient. Then we modified it and asked our client to give any feedback, for example, anything he wants the users to look at first and anything he feels can be faded. Below is the first version of the informational architecture, and we would continue to modify it from time to time to match the information provided.
The next step is to check the style guide and other part of the website, for example, what are their brand attributes? Does the website keep the rounded or sharp style? Although we were not on the high fidelity stage, it’s always better to have a sense of it.
Lastly, Eleanor and I were mostly working solo on other projects, so we created a basic work plan to make things more organized and easier.
DESIGN STARTS
Creating wireframes
The start is always a difficult thing. For this week, we still knew little about our client's preference. So we mostly worked on providing basic screens that matched with the standard web design, for example, placing design elements in the correct places that most users are familiar with, reorganizing rows and columns to make sure they are correctly vertically and horizontally aligned, and creating mobile screens that are consistent with the desktop screens. Eleanor and I firstly created basic screens for the desktop screens, then combined our ideas and created the detailed wireframes.
Since we were not sure about our client's preferences, we created multiple versions of some particular screens to let them make decisions on them. I personally preferred those screen designs that show information to users from step to step, but we were not sure if the Kanban Zone team would want to do it at one time.
Working on the high-fidelity screens
From the meeting we had with the Kanban Zone team, we noticed that they placed great emphasis on simplicity and efficiency. Therefore, we created screens that contain fewer things but are more organized. We deleted extra colors and only kept the brand color for CTA buttons, besides black and gray for the text. To add fun to the website, we abandoned the traditional box way of designing the footer and adapt it to the wave design (But we still kept one box design in case our clients prefer the secure way).
Adjusting the location of tabs and removing search icon
Less information creates a feeling of organized
The search bar is unnecessary since the navigation has contained all information
Adding icons to make the website interesting
They can also help to make the titles stand out
Having two levels of arrows
Users can tell the different important levels from the different designs of arrows
Adapting the footer to a wave design
The original gray box design looks too boring
Adding a contact button
Users can find ‘contact us’ more easily
Accomplishing the prototype
Key screens of final product
Our original plan was to complete all the mock-ups in the third week and work on interaction for the last week. But after meeting with the Kanban Zone team, we found out that we had lots of problems to fix, so we made lots of changes for the last week. Our biggest challenge for the prototype is how to create the animation of expanding and switching menus. Both of us mostly worked on mobile screens before, and lack of knowledge and ability to create desktop screens. We learned from YouTube and other designers' work, then discussed it with each other and completed our work. Other than those problems, we even suggested changing the brand color for accessibility. Luckily, the team took our advice.
For the simple changes that need to be made for CTA buttons, Eleanor and I created many other versions, and the last version actually combined ideas from both of us.
Adding graphics to the CTA buttons
Too many rectangles without decorations make the menu looks so boring. The graphics can help to add fun and show part of the content of the tool to the users.
Adding hovering effect to the sections
Helping users to find where the mouse is and add some fun.
More gentle waves
Before, the wave takes too much space and the steep shape can bring users a feeling of insecurity.
Changing the link and CTA color to blue
Alike colors can distract the users and fail to make the free trial button stand out.
Replacing the pure black text color
Pure black brings a feeling of sharpness, and we want to bring users a feeling of they can handle anything, so we replace it with a lighter black color.
FINAL PRODUCT
Project takeaways
Scope and constraints
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.
Outcomes and results
Less time to find what they need
More effective information architecture
Learn more about the company
The Kanban Zone team and other stakeholders are satisfied with our work. The CEO of the Kanban zone team even told us that he was shocked by our work, as he didn't expect us to have such a high level of completion. To be more specific, they feel it easier to find what they need, the menu was not overwhelming as before, and the website becomes more interesting now. The other thing I learned is the importance of collaborating, the designs that are praised are all made by us together, incorporating ideas from both of us, and these are the creativity that cannot be achieved by working alone.