2023 · Royal Cheese Studio
2023 · Royal Cheese Studio
·
·
Ankpal · UI Re-design
Ankpal · UI Re-design
made easy with user-centric solution for
made easy with user-centric solution for
Accounting
Accounting
Ankpal
Ankpal
Role
Role
Product Design Intern
Product Design Intern
Team
Team
2 designers
2 designers
Duration
Duration
4 months
4 months
Surfaces
Surfaces
Accounting Software
Accounting Software
Stack
Stack
User Interface Design
User Interface Design
A cloud-based accounting software, Ankpal helps you access your accounts anytime anywhere, with speed & safety. It offers you a robust platform to manage accounting operations and gives you end to end financial services with the help of 20+ CAs.
A cloud-based accounting software, Ankpal helps you access your accounts anytime anywhere, with speed & safety. It offers you a robust platform to manage accounting operations and gives you end to end financial services with the help of 20+ CAs.
Visual Identity
Visual Identity
Card Design
Card Design
Filter Dropdown
Filter Dropdown
Alert/confirmation popup
Alert/confirmation popup
Sort dropdown
Sort dropdown
‘Add in the form’ popup
‘Add in the form’ popup
Discount Card
Discount Card
Primary
Primary
#FE2A31
#FE2A31
Secondary
Secondary
Dark Gray
Dark Gray
#27282D
#27282D
#9493A3
#9493A3
Mid Gray
Mid Gray
#F9F8FD
#F9F8FD
White
White
#FFFFFF
#FFFFFF
Colors
Colors
Typeface
Typeface
Regular
Regular
Medium
Medium
Semi-bold
Semi-bold
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9
0 1 2 3 4 5 6 7 8 9
Header 1:
Header 1:
Header 2:
Header 2:
Heading 3:
Heading 3:
Body 1:
Body 1:
Body 2:
Body 2:
Semi-bold 18
Semi-bold 18
Semi-bold 14
Semi-bold 14
Regular 14
Regular 14
Regular 14
Regular 14
Regular 12
Regular 12
Form Design
Form Design
If the same feature (creating forms) shows up differently across different screens, users will find consistency problem throughout the software
If the same feature (creating forms) shows up differently across different screens, users will find consistency problem throughout the software
The text fields contradict the principle of affordance
The look and sizes of the buttons are at variance
The arrangements of data in the form lacked order and legibility
The text fields contradict the principle of affordance
The look and sizes of the buttons are at variance
The arrangements of data in the form lacked order and legibility
The identification of the problems further led to creating the Information architecture to understand the structure and re-construct the software if needed. The IA remained the same with a few adjustments here and there. The little changes made a huge difference.
Our aim here was to make the software easy to navigate and provide clear hierarchy keeping in mind the use of 2 global navigation (top and left).
The identification of the problems further led to creating the Information architecture to understand the structure and re-construct the software if needed. The IA remained the same with a few adjustments here and there. The little changes made a huge difference.
Our aim here was to make the software easy to navigate and provide clear hierarchy keeping in mind the use of 2 global navigation (top and left).
Information Architecture:
Information Architecture:
Adding a global search and inter-connecting the features enhanced the user journey, making it shorter and quicker.
Adding a global search and inter-connecting the features enhanced the user journey, making it shorter and quicker.
Iteration 2
Iteration 2
Colors look dull and the global navigation can be better.
Colors look dull and the global navigation can be better.
Product Manager, Ankpal
Product Manager, Ankpal
Client feedback
Client feedback
Light color palette with a touch of red for the highlight
Light color palette with a touch of red for the highlight
Clean and well-informed data table
Clean and well-informed data table
Added Global search along with the ‘quick links’
Added Global search along with the ‘quick links’
Divided the left nav
Divided the left nav
Removed profile option from left and combined it with the user log in
Removed profile option from left and combined it with the user log in
Added a dropdown for sub-categories
Added a dropdown for sub-categories
Iteration 3 (Final)
Iteration 3 (Final)
Looks great. We link the dark light contrast, makes the software look lively.
Looks great. We link the dark light contrast, makes the software look lively.
Product Manager, Ankpal
Product Manager, Ankpal
Client feedback
Client feedback
Contrasting color palette
Contrasting color palette
Clean and well-informed data table
Clean and well-informed data table
Added global search
Added global search
Replaced ‘quick links’ with an option to create any data from the global nav itself
Replaced ‘quick links’ with an option to create any data from the global nav itself
Removed profile option from left and combined it with the user log in
Removed profile option from left and combined it with the user log in
Form Design
Form Design
Create Form:
Create Form:
Every form opens as a right drawer creating an overlay in the background, eliminating the need to open it on another page.
Every form opens as a right drawer creating an overlay in the background, eliminating the need to open it on another page.
A lot of forms looked complex and difficult to read through.
We couldn’t alter the amount of information in the form. Hence, to simplify and make it legible enough, we maintained balance and visual harmony amongst all the text fields and data.
A lot of forms looked complex and difficult to read through.
We couldn’t alter the amount of information in the form. Hence, to simplify and make it legible enough, we maintained balance and visual harmony amongst all the text fields and data.
View Form:
View Form:
On selecting any entity from the software, the user finds the details that were once filled int he form. We eliminated the need to open another page for this as well opening in a right drawer
On selecting any entity from the software, the user finds the details that were once filled int he form. We eliminated the need to open another page for this as well opening in a right drawer
Every sections acts as an accordion in case the scroll becomes long due to excessive information.
Every sections acts as an accordion in case the scroll becomes long due to excessive information.
Components
Components
Global Search:
Global Search:
Search bar allows the user to look for anything in the software
Search bar allows the user to look for anything in the software
On click, it widens into 2 sections:
Search dropdown- to search categorically
Text field- allows the user to type what they are looking for and also get recently searched suggestions
On click, it widens into 2 sections:
Search dropdown- to search categorically
Text field- allows the user to type what they are looking for and also get recently searched suggestions
Create New:
Create New:
Replaced ‘quick links’ option from previous design with ‘Create New’ in the header.
Replaced ‘quick links’ option from previous design with ‘Create New’ in the header.
It allows the user to create any data set from anywhere in the software.
It allows the user to create any data set from anywhere in the software.
Profile:
Profile:
We combined the Profile details, companies and log in into a right drawer.
We combined the Profile details, companies and log in into a right drawer.
It lets the user edit their profile details
Add or choose the company which they’d like to view the accounts of
Shows alerts related to their profile
Allows the user to sign out
It lets the user edit their profile details
Add or choose the company which they’d like to view the accounts of
Shows alerts related to their profile
Allows the user to sign out
One factor into re-designing the application was it’s visual appeal, it was lacking behind in terms of the look and feel. We knew we had to keep up with trends but also not forget the fact that it’s a software and complicating it visually would be a disaster.
One factor into re-designing the application was it’s visual appeal, it was lacking behind in terms of the look and feel. We knew we had to keep up with trends but also not forget the fact that it’s a software and complicating it visually would be a disaster.
These initial iterations were made based on color combinations and re-defining the global navigation. Here take a look:
These initial iterations were made based on color combinations and re-defining the global navigation. Here take a look:
Details of the Re-design:
Details of the Re-design:
Iteration 1
Iteration 1
Light color palette
Light color palette
Clean and well-informed data table
Clean and well-informed data table
Added Global search
Added Global search
Removed profile option from left and combined it with the user log in
Removed profile option from left and combined it with the user log in
Kept the left nav same as before, only added breadcrumbs on the top
Kept the left nav same as before, only added breadcrumbs on the top
Use of white tones
Use of white tones
Removed ‘quick links’ to adjust so many options on top nav
Removed ‘quick links’ to adjust so many options on top nav
Looks a lot like the previous design because of the similar visual appeal, add more colors.
Looks a lot like the previous design because of the similar visual appeal, add more colors.
Product Manager, Ankpal
Product Manager, Ankpal
Client feedback
Client feedback
One factor into re-designing the application was it’s visual appeal, it was lacking behind in terms of the look and feel. We knew we had to keep up with trends but also not forget the fact that it’s a software and complicating it visually would be a disaster.
One factor into re-designing the application was it’s visual appeal, it was lacking behind in terms of the look and feel. We knew we had to keep up with trends but also not forget the fact that it’s a software and complicating it visually would be a disaster.
These initial iterations were made based on color combinations and re-defining the global navigation. Here take a look:
These initial iterations were made based on color combinations and re-defining the global navigation. Here take a look:
Layout and Color Iterations:
Layout and Color Iterations:
Navigation & Data Tables:
Navigation & Data Tables:
The entire 3-level menu is on the left navigation making the left drawer look extremely complex
There’s no global search, only quicks links that aren’t very helpful either
The entire 3-level menu is on the left navigation making the left drawer look extremely complex
There’s no global search, only quicks links that aren’t very helpful either
The visual appeal of the data table seemed dull.
It lacked micro-interactions and display of information in a clear manner
No filters, complicated search for every column, no option to sort
The visual appeal of the data table seemed dull.
It lacked micro-interactions and display of information in a clear manner
No filters, complicated search for every column, no option to sort
Amongst all the other things, scattered features, conflicting and confirmation screens throughout the software appeared to be the major problems in users’ journeys. With all the new ideas jumping in our heads, we knew we to slow down to incorporate the design process properly.
Amongst all the other things, scattered features, conflicting and confirmation screens throughout the software appeared to be the major problems in users’ journeys. With all the new ideas jumping in our heads, we knew we to slow down to incorporate the design process properly.
As a result of the above mentioned UX strategies employed throughout the design process, we noted down the major areas that required design thinking:
As a result of the above mentioned UX strategies employed throughout the design process, we noted down the major areas that required design thinking:
Let’s dive into the Re-design:
Let’s dive into the Re-design:
Heuristic Analysis
for Conformity and Improvement
Heuristic Analysis
for Conformity and Improvement
Usability Testing with Current Users
for Real-world Insights
Usability Testing with Current Users
for Real-world Insights
Analysis of Customer Service Logs
for User Pain Points
Analysis of Customer Service Logs
for User Pain Points
Stakeholder Interviews
for In-depth Understanding
Stakeholder Interviews
for In-depth Understanding
Sequential Competitive Analysis as a Strategic Choice:
Our deliberate decision to leave competitive analysis towards the project's culmination stemmed from the context of a redesign. With the software already in user, our primary focus was on refining existing functionalities rather than being overly influenced by external competitors.
Sequential Competitive Analysis as a Strategic Choice:
Our deliberate decision to leave competitive analysis towards the project's culmination stemmed from the context of a redesign. With the software already in user, our primary focus was on refining existing functionalities rather than being overly influenced by external competitors.
Holistic approach to UX Enchantment:
Holistic approach to UX Enchantment:
To comprehensively grasp the underlying issues and user behavior, we employed a variety of robust UX methodologies. Our strategic approach encompassed the following key methods:
To comprehensively grasp the underlying issues and user behavior, we employed a variety of robust UX methodologies. Our strategic approach encompassed the following key methods:
Problem Statement
Problem Statement
To enhance the usability and user experience of the software to improve user engagement and satisfaction while addressing navigation and interface issues.
To enhance the usability and user experience of the software to improve user engagement and satisfaction while addressing navigation and interface issues.
Overview:
Overview:
Ankpal sought to enhance its user engagement and experience, addressing challenges that hindered seamless navigation and effective utilization.
Ankpal sought to enhance its user engagement and experience, addressing challenges that hindered seamless navigation and effective utilization.
The existing interface was cluttered and confusing, leading to user frustration and reduced engagement.
The existing interface was cluttered and confusing, leading to user frustration and reduced engagement.
Additionally, user feedback indicated pain points and unmet needs within the platform, necessitating a redesign to align with industry standards and best practices.
Additionally, user feedback indicated pain points and unmet needs within the platform, necessitating a redesign to align with industry standards and best practices.
