CASE STUDY
Control Panel Home Dashboard
Hypernode Control Panel serves features and tools to manage your eCommerce hosting. You can get the overview of all your servers, its settings like PHP, MySQL, NodeJS versions, access keys from SSH or FTP, or performance and metrics load like CPU, RAM etc.
Most of the customers are B2B customers – tech agencies managing multiple end customers’ online shops.
What problems are users facing on first page after logging in?
- Many agencies have habits of checking the servers but doing it one by one is very time consuming, they miss short summary of the servers
- Based on surveys and UserVoice, many people requested to see PHP version of all the servers
- On partners events many people were uninformed or not aware about new features release
- Non tech-savvy agencies or end customers couldn’t use CLI (command-line tool) and Control Panel had limited features so they have interrupted workflow.
- Many tech-savvy agencies decided to use CLI instead of Control Panel because of clear overview of all the servers
- Hotjar screen recordings shows that new customers feels lost as there is no clear guidance on first steps.
How the Control Panel looked before any of the changes.
Problem Statement
Control Panel doesn’t provide easy-to-analyze overview of all the servers, slowing customers’ workflow. We are short on communication about new updates leaving customers uninformed, thus losing the opportunity to increase the value of the product in their perception.
Solution
Create a home page in the Control Panel where current customers can see critical issues, important notifications, and latest releases. Also new customers can find tutorials and guidance on the first steps.
Inspiration, competition analysis
Before diving into design I like to look for different solutions to find best aspects of each. I had a look into:
- Mailchimp dashboard
- Binance homepage
- Capital.com and Grafana metrics
- Duolingo Gamification (to make Control Panel more attractive to visit often)
- Hotjar dashboard
- MaxCluster dashboard
Interviews & Research
I had a look into Hotjar screen recordings and our UserVoice to find relevant topics about the homepage and first steps of new customers.
Also, I was rewatching some of our customer sessions as the topic already appeared before while testing other features.
What I found out or heard:
- 5 out of 7 new customers are lost on first steps because there is no clear guidance what to do
- People tend to skip important settings as they don’t know the impact or security vulnerabilities (for example outdated php)
- 3 out of 5 interviewed developers often use CLI because they can see all versions at a glance, and CLI shows vulnerabilities while searching throughout the servers
- 2 out of 5 interviewed developers knew about latest releases, the rest didn’t hear even though changes were shared on social media and changelogs
Major improvements to the design
0. New homepage after log in
- Instead of landing on the list of servers have the „starting point” to any place of the panel
- Helps prioritize tasks
- Increases adoption of users
- Adding hierarchy to the information architecture
- Opens possibilities for the future
1. Adding "Critical issues" summary
- Helps customers to prioritize tasks
- Create a feeling of supportive software, not just a tool
- Create urgency of critical issues of security and performance aspects
2. Adding "Where to start" section for new customers
Goal-Gradient effect: The closer users are to completing a task, the faster they work towards reaching it.
- Quick guidance on first steps
- Decreases cognitive load of fresh customers
- Helping achieving the goal and building positive experience
- Videos are more convenient than documentation (Paradox of Active Users)
3. Adding PHP versions and main metrics to the overview
- Clean and quick overview
- Easily spot the issue of outdated PHP
- Faster action for overloaded servers
4. Create space for sales and marketing to advertise in the Control Panel
- Overview of last updates with access to changelog
- Places for promotions, upsells, and seasonal events
5. Modernizing UI
Aesthetic-usability effect: Users often perceive aesthetically pleasing design as design that’s more usable.
- They say consistency over quality, but if you are claiming to be up-to-date, modern company, your identity should reflect the times.
- Some love here and there can improve the perception of the product and increase the usability of the interface.
6*. Extra: updating log in page
- Log in page is a free place to put changelog updates, as every visitor goes through this page
- Creates positive experience at the beginning of the journey
Final Solution & Design
For final solution and design we completed 6 qualitative interviews, data analysis and many talks within development teams and stakeholders. Implementation scattered across months to complete, although we prioritized most pressing features by versioning the upgrade, which you can see in next section.
- Update log in page experience
- Update overview page UI and additional data
- Adding new home page with crucial summary
Versioning
The upgrade is comprehensive, thus we had to chunk it into pieces focusing on main goals and importance.
Home page before any changes
Version 1
- Added PHP version
- Added Status of activity
- Added CPU, RAM, disk metrics for quick problem identifying
Version 2
- Improving UX and Information architecture for quick finding
- Adding selling points
- Adding awareness by NEW tags in the menu
- Refreshing UI for aesthetic-usability effect
Version 3
- Adding default home page as a summary of critical issues, important notifications and latest releases
- Lowering the threshold for new customers
- Giving space for sales and marketing for better communication in the panel
If I had more time...
From Hotjar and Google Analytics data we know only 7% of all our customers are using mobile version, so it was never a priority to implement responsive features. Although, I raised a question if it’s a natural percentage as our customers work on desktop more, or, because mobile is not user-friendly, they just leave out without trying?
- Focus on implementing mobile designs so we can start gathering data on above question.
- Adding gamification to increase Control Panel usage (gather more data)
- Better adhere to WCAG standards
Thanks for reading!
If you have any comments, suggestions, or look for UX project, feel free to reach me out!