Dashboard design is easy peasy, Said no one ever.
Some context before we start
- This is an assignment I received from a product company that rhymes with Swedenbread in November 2022 for the role of a product designer.
- I’m not revealing the name of the company now because I want to sound cool. ( I also don’t want to get into some unnecessary trouble.)
- You might find the name of the company if you read the article with intense focus 😎
- I’m going to start off by talking about Swedenbread so that you get some context.
What is Swedenbread?
Swedenbread is one of the largest salary processing provider in Sweden with a product called Swedenbread payroll which is mainly targeted towards businesses.
Swedenbread Payroll
Swedenbread Payroll, a leading provider of payroll management services, empowers companies to streamline their payroll process and enhance employee satisfaction.
A Vague Problem statement?!
Top 6 problems
1) Missing actions in the dashboard such as run payroll, addition and removal of employees.
2) New HR modules, Where/how do we can include them?
3) Low usage of cards (% of employee paid and payroll amount)
4) If a user wants to know to the status of their payroll/card orders they go to their main pages.
5) Users think that the 4 graphics about employees are clickable.
6) Users don’t know they can check more information in the card (arrows left-right).
- Possible features to add in the future — Leave management, Document management and send announcements.
If the above image and the problems don’t make sense, don’t worry as I’ve got you. I’m going to try to make it easier for you.
Before I solve the problem..
- Before I directly solve the problem, I had to mainly understand about the user since I was given no information about the user and had to figure it out on my own.
- I got an understanding of the user by going through the Swedenbread Payroll website.
Who are our users?
- For this assignment, our users are business owners and HR professionals. Their primary need is a product that streamlines their payroll process in the simplest and fastest way possible.
So far, we have a decent understanding of our users and the problem statement. It’s time to look at other competitors so that I can get a better understanding of similar products.
Looking at competitors to have a better understanding
- One major issue I faced in competitor analysis was that it was hard for me to see how these products actually work especially in the B2B (Business to Business) space as you would need details to use the product whereas in B2C (Business to Consumer), it was really easy as anyone could use these products/apps (Eg — Swiggy, Talabat, Careem, etc)
- I found a few dashboard screens for visual inspiration on a platform called Dribble but these were utterly trash in our case as it does not give us enough context to understand the product.
- I did find a similar product that rhymes with Howzat where I could watch their tour video on their website. While Howzat may not have given me valuable insights related to our problem statement, It did allow me to see how a user uses a dashboard so thank you Howzat ❤
Clearly looking at the competitors did not work in our favour which means it’s time to jump into the arena with the limited information we have.
The arena — Problem solving time
- The perfectionstic/procastinating nature within me wanted to solve other minor problems I noticed before solving the top 6 problems.
Minor problem 1 — Changes with the information on the bottom of the dashboard
- Regarding the information at the bottom, Is the link clickable?
- Can the user directly send a mail by clicking the link?
- If yes, then the user can complete the action in fewer steps which saves the users time & energy. ( I cannot click as I don’t have access to the product)
- But Is there an actual need for the information at the bottom of the dashboard?
- Since there is already a help section on the left side, I decided to remove it as users will click on the help feature if they require a need for it.
Minor Problem 2 — Changes with positioning of the logo
- Why is the logo of Swedenbread on the right?
- Majority of the website or dashboard has their logo on the left.
- I placed the logo on the left side of the dashboard because users are familiar with this layout from other dashboards. This leverages Jakob’s Law, which states that users prefer interfaces that work the same way as other interfaces they already know. This familiarity makes it easier for users to navigate the dashboard and find what they’re looking for quickly and efficiently
Minor Problem 3 — Changes with Available balance section
- Why is the amount in the available balance section written as 500,000.00 AED while the amount in the payroll history section written as AED 500,000.00 ?
- I’m used to seeing AED first and then the amount (I’ve observed this when I go for shopping with my parents and on other occasions.)
- In order to make the entire dashboard consistent, I’ve decided to change the amount to AED 500,000.00 in the available balance section.
Minor Problem 4 — Changes with user profile
- Currently, The product features and the user profile is on the left column which is inconsistent.
- I wanted to design dashboard in a way where the left column is solely focused on product features and the top nav is for the user profile so that there is clear distinction between the two.
Since you’re super observant, you might be wondering what happened to the verifier account term in the before image?
Well I’m glad you asked since that is the final minor problem.
Final Minor Problem — What the hell is a verifier account?
- I don’t know what is a verifier account and It was hard for me to understand since I don’t have access to the product. So I did the next best thing to make sense of it which is making assumptions.
- Assumption — There are two sets of users who are verifiers and non-verfiers.
- The difference between the two is that verifiers (Eg -HR administrator) have access to all features and functionalities within the dashboard while non-verifiers (Eg — HR assistant) have limited access based on their role and responsibilities.
- Now the question is how do I visually differentiate the two sets of users?
- To enhance clarity and user experience, I’ve introduced a visual differentiation between Verifier and Non-Verifier accounts:
- Verifier Accounts: Display a green premium icon alongside the user image. Green symbolizes safety and trust, aligning with the Verifier role’s elevated privileges and responsibility.
- Non-Verifier Accounts: No additional icon is displayed, maintaining a clean and simple appearance.
- This subtle visual cue provides users with instant recognition of account types, promoting a more intuitive and user-friendly experience.
If you are still reading this article, then kudos to you as most people don’t have the attention span to read a long article.
Time to solve the top 6 Problems
- I will breaking down the problem into 2 parts which are run payroll and employee addition/subtraction.
Problem 1.1 -Run Payroll
- Why should the run payroll deserve a place on the dashboard?
- Assumption — Run payroll is one of the most important features because the user (Eg — HR professional) would like to send or run payroll in the easiest or fastest way possible.
- Problem: Run payroll is a crucial feature, but accessing it requires navigating through a dropdown menu, hindering efficiency.
Solutions:
- Solution 1— Topnav placement: “Run payroll” is prominently displayed on the topnav, emphasizing its importance and facilitating immediate access.
- Solution 2 — Search bar: Users can quickly find “Run payroll” through the search bar.
Reasoning
- Multiple access points: Combining search and topnav placement caters to user preference and optimizes accessibility.
- Visual prominence: Topnav placement highlights the critical nature of “Run payroll.”
- Benefits — Increased efficiency and convenience for HR professionals managing payroll.
Problem 1.2 — Add/Remove employee action
Problem: Adding and removing employees is important, but its unpredictable nature necessitates a more efficient access solution.
Solution: Integrate an employee icon and notification icon on the topnav.
Rationale:
- Easy discovery and access: The employee icon provides immediate visual recognition and access to the add/remove employee feature.
- The notification icon informs HR of new additions or removal of employees eliminating the need for manual checks.
Benefit:
- Increased efficiency: Users can quickly add/remove employees, streamlining their workflow.
Problem 2 — Upcoming HR additions
Task : Integrate upcoming HR modules like leave management, document management, employee list into the existing dashboard
Solution : Integrate within the employee icon as all the HR modules are related to the employees.
Problem 3 — Low usage of cards ( % of employee paid & payroll amount)
- Low usage of cards/section for both % of employees paid and payroll amount indicates that there is a deeper problem.
Initial thoughts
- Why is there a low usage of these sections?
- Why is this section important? What value does it bring to the user?
- Why is the data shown in this way? Is there a better way of showing this data?
My Process
Assumption — The user only needs to see the stats of the present month mainly in order to avoid breaking the WPS rules and pay the employees on time.
WPS likely to Wage Payment System regulations. These regulations ensure that employees receive their wages on time and in full. By focusing on the current month’s payment data, HR professionals can ensure compliance with WPS rules and avoid potential penalties.
- Based on the assumption that users primarily need to view the present month’s stats to comply with WPS rules, I redesigned the layout accordingly. This includes adding a dropdown for users to check previous months’ stats. Additionally, I incorporated a payment status indicator (danger/warning, safe) to emphasize the significance of the situation.
Problem 4 — If a user wants to know the status of their payroll/ card orders, they go their main pages
- Currently if the user has to know the status of their payroll order or card order, they have to click on payroll first and then go to their respective pages
Initial thoughts
- What value does the status bring to the user on their respective page and what value does the status bring to the user on the main dashboard?
My process
- I’ve decided to included a status container so that the user can see the status within the dashboard rather than going to their respective pages thereby reducing the interaction cost.
Interaction cost refers to the effort and time required for the user to complete a task. By including a status container within the dashboard, users can quickly view the status without navigating to separate pages, reducing interaction cost and streamlining their workflow.
Problem 5 — Users think that the 4 graphic about employees are clickable
Problem: Users perceive the 4 employee graphics as clickable, despite being non-functional. Additionally, the section lacks a heading unlike others, leading to confusion
My Process
- I’ve decided to include a heading to maintain consistency across different sections in terms of UI and to give context to the user about this section.
- I’ve included a dropdown so the user knows what is clickable and what isn’t.
Problem 6 — Users don’t know if they can check more information using the cards
Problem: The current use of arrows in the interface hinders user understanding and engagement.
Initial thoughts
- Why are arrows there to visually represent the information?
- What other ways are there to visually represent the information?
- Why does the user not know they can check information using the arrows?
My Process
- Introduce Dropdowns: Replace arrows with dropdowns for increased flexibility and user control.
- Dropdowns enable exploration of data across different timeframes (week, month, year), offering greater insight compared to the limited control provided by arrows.
The Finale — Before and after
- Looking just at the above screens, it might be hard to notice the difference in terms of UI but man dashboards are not easy peasy at all.
What I wished I had done
I submitted the assignment in november 2022 but only decided to make it a case study 2 weeks back as I realized I had put so much effort into this and this deserves a place in future portfolio. My current skill level is better than the version of me last year.
- I would have thought more from the perspective of business even though I have very little information from the assignment.
- I would have thought more on the lines of product metrics.
- I wish I wrote this article sooner rather than waiting an entire year.
Lessons learned
- It’s easy to get overwhelmed so just take it one step at a time no matter how small.
- Initially I thought I couldn’t do the assignment as it was outside my comfort zone but now that I gave my best shot at this assignment, All I can say is growth only comes through stepping outside your comfort zone.
- Writing is easy but refining it to a point where any layman person can understand is hard and I tried to do that by writing this article.
- There are no shortcuts. The long way is the shortway (If that makes sense)
- You may not know it at the moment but looking back rejections are the best thing that could happen to you.
- Just keep going no matter what and you will reach where you want to reach.
Shameless Promotion (Forgive me)
- I’ve done personal projects related to Careem and Talabat so feel free to check these out as well.
- Careem project — https://bootcamp.uxdesign.cc/careem-banned-me-from-the-app-so-i-analysed-their-food-flow-to-join-their-product-team-d83c8e7e093f
- Talabat Project — https://bootcamp.uxdesign.cc/from-frustration-to-convenience-a-redesign-of-card-removal-and-talabat-pay-experience-40f42f86dd53
- I plan on writing more articles related to design and personal growth through my experiences so feel free to follow me on medium or Linkedin only if you’re interested!
- Linkedin link — https://www.linkedin.com/in/hamdan-rejees-5890891a7/
You’ve reached the end of this article
- I hope you enjoyed the read and I’m always open to hearing your feedback.
- Feel free to reach out to me if you just wanna say what’s up or ask anything.
- I hope you have a great day ahead and keep creating ❤
