Portal Ticketing Service

Portal is a ticketing web application letting clients seek help from SOC (Security Operations Center) admins via support tickets. It also allows them to create assets, attach integrations with other services, and view their dashboard with data-filled widgets.

Portal is build using ReactJS and Redux. It utilizes the Material UI framework, an unofficial framework that's heavily inspired by Google's Material Design. Working with Material UI helps standardize the design.

Due to an NDA agreement, I am unable to display visual progress on this project, as it contains real data, including customer and client information.


Process

This project is actually a complete makeover of a previous iteration. It all started with early Sketch designs. From there on, we put it into code. As we continue to build it from the ground up, we also keep working on the design, too. That includes fonts, colours, icons, and more.

We also have regular meetings with the client to give status updates, discuss UI/UX changes, and fix whatever issues may arise. Sometimes we talk things out and take notes, and other times, we try to get creative on the white board.

Logic can become challenging and complex as you dive deep into a project. That is why it is very important to get it onto the board and try to rewrite it as simply as possible. For example, when you have three types of tags, you have to outline very clearly the conditions for being able to view those tags.

Other times, we have to simply outline a quick, rough plan to create mocked or live data. The more we have to work off of, the easier the process will be in the long run. Although you start with a blank slate, it does not mean you should stick to it. It is important to display actual data.

We can start with an idea and design around it, and it will work for the time being. However, we need to learn to adapt and change things as the project progresses. What worked before might not work anymore as new features are added, or certain parts of the user flow change. For example, using collapsible lists would look great on mobile, but on the desktop, there's just too much white space. You stare at that white void and it distracts you. One solution would be to use resizable tiles.


Wrap-Up

Sometimes, making decisions can be challenging, because there may be differing opinions over certain choices. However, things always work out in the end. It's a big, complex project that helps me learn a lot of new things almost every day, both in terms of design and coding. Portal has changed quite a lot over the past year, and it feels great seeing it blossom into something I can feel proud of.