Xperidia Private Manager

June 2017

As a developer for Xperidia, I worked on a project that I’m excited to share with you ! I built a dashboard page in HTML/CSS/JS that communicates with a PHP API, and integrates OAuth login with Steam and Discord. The dashboard page includes a navbar, 3 main blocks, and various animations to improve user experience. It have been completely re-designed to work on mobile and provide sleek animations !

Context

The previous system was outdated and not designed for mobile use. It was CGI PHP, which made it slow to use and difficult for users to navigate. Ws (Xperidia) wanted to create a new system that would be more user-friendly and compatible with mobile devices.

Realisation

As the developer of this project, I not only handled the frontend functionality but also took the lead in designing and crafting the user interface and user experience. I put a lot of thought and effort into creating a visually appealing and intuitive design that would allow users to easily navigate and interact with the dashboard. The overall look and feel of the dashboard were carefully considered, with attention to detail in areas such as animation and color choice to create a polished and engaging user experience.

Discord and Steam Account

The first block of the dashboard page fetches data from the PHP API and displays the user’s Discord avatar and linked roles between their Discord and Steam accounts. It has an interactive design and allows users to easily navigate between their accounts. The section also includes a hover effect that animates a gradient overlay over the avatar and role boxes, making it more visually appealing and funnier to use it !

Project Allocation

The second part of the dashboard page allows administrators to assign users to different projects and switch between them. The block includes a bouncing animation when loading to make it more engaging and to keep users entertained while they wait. The design is user-friendly and easy to navigate, making it simple for users to manage their assigned projects.

Discord Roles Block

The final section block displays the user’s Discord roles with their assigned color. It allows users to enable or disable them as needed. The block is designed to be intuitive and easy to navigate, allowing users to quickly change their Discord roles with minimal effort.

Conclusion

The new dashboard page I built has helped improve user experience significantly, especially for mobile users.

By designing a more user-friendly interface, integrating OAuth login, and including various animations and effects, the dashboard page has made it easier for users to manage their projects, view their linked accounts, and change their Discord roles. The new system is also faster and more responsive, making it more accessible and enjoyable.