Introduction
Chatchamp is a SaaS solution that aims to empower business owners, especially of small and medium e-commerce websites, with a guided selling service of the new digital era. The smart digital assistant can provide customers with professional & fully automated consultation anytime, anywhere. As a result, both the conversion rate of the website and the satisfaction of the customers will significantly thrive.
The product is on a constant learning curve, though. In this blog I am going to make a recommendation on how the product can improve the beauty in its design, while maintaining or even enhancing its usability/convenience. The version that I performed the redesigning process on is the November 5th-2019 release.
Redesign Chatchamp “Campaign” page
For each of the following points, I highlight the difference between the “Before” and the “After” versions:
1. The bottom menu bar (with 12 different options/functions) is transferred to a vertical menu bar, with the ability to flexibly float and expand out when user hoovers their mouse over to the right margin
This increases significantly the beauty by utilizing the spacious white space on the right, which was wasted in the original design. Moreover, the 12 different functions do not have to be cramped within a tiny narrow space like in the original design anymore. At the same time, high level of convenience is maintained and even strengthened, since user can easily access this menu bar just by hoovering their mouse over the right margin where the contracted menu bar lies.
User can also easily close the vertical menu bar when they need to focus more on the main dashboard area (see below). And when they need to use this menu bar again, they can conveniently access it just by hoovering their mouse to the right over the contracted menu bar.
2. Better design of connection tracking bar: which clears confusion
In the original design, the connection tracking bar (highlighted in red), which checks if all the question blocks are connected with each other or not, have an identical design over all nodes, without making a clear distinction about which node is already connected to the whole chain (therefore user does not have to do anything further) and which node is not yet connected (therefore user is still required to perform some additional actions in order to bind this node with others). The only distinction is a small dash (“-”) inside the node instead of a number, which means this node is still separate from the whole chain. However, this tiny dash is very hard to notice, especially for first-time users and users with vision impairment. The new design fixed this by showcasing a clear “ticked/checked circle” for nodes that are already connected to each other, which gives an utmost clear sense of completeness; whereas retaining a grey color for nodes that are not yet connected to the whole chain, which indicates that something is still not quite done. In that way, it is significantly clearer for users to easily, instantly notice which node is already fine and which node still needs working on.
3. Better, clearer design of Progress Tracker: which inherits from some of the best Progress Tracker designs for SaaS application, giving a clearer sense of a process moving forward
In the original design, there was no connecting line between the three steps. The new design enhanced this by adding a connecting line between any two adjacent steps. Additionally, this line will be filled with color (which should be the same as the color of each step node) as it runs through from the very first step to a certain step in the overall process.
4. Better, more conventional design of the location of user’s avatar (given that the user is already logged in): which enables user to immediately, easily find their avatar even on a new screen that they have just visited for the first time
The reason is I placed this avatar symbol at a conventional, familiar position in my improved design, with which users have been accustomed to for a long time. Moreover, a notification centre is also added.
5. Better, more logical and more beautiful redesign of the “Campaign Options” block
Most people often lay eyes on an object from top to bottom and from left to right (except for some extreme cases like in the case of Japanese people). This should therefore be the logical order for users to view a content on the whole screen, as well as in any block of such screen, in order to achieve the optimal perception of information in users. The new design executed this principle better by first presenting the message, then the “Call-to-action” button on the left, and finally a warning message that follows the button next to it on the right.
6. The navigation bar on the left can also be flexibly contracted/collapsed: which gives user more space to focus on the main content of the dashboard when it is their primary purpose
In addition, I also enhanced quite a few UI elements, so as to render the look of the application more beautiful and more modern.
The Figma link to all wireframes can be found here: https://www.figma.com/proto/SQsqn6hM4wxDZ3HnBNSC5n/ChatChamp-design-improvement?node-id=183%3A339&scaling=contain