UI Design

Traffk hired me to re-design their UI  for their platform. I was asked to design for future scalability of features and client customization. They needed general purpose, log in, CRM,  Reports, and Communications pages. The constraints for this project were the time line and lack of insight into the interactions, so I began by determining some use cases to help map out the flows for these users. Below, you can see some of my initial flow charts and sketches.

After numerous iterations and sign offs  from the stakeholders, I delivered the final UI which can be seen below.

This screen capture above displays the landing page.

I designed the global header/navigation to be customizable for each client that uses the platform. So if Google were to use this software, they would be able to upload their company's logo in the top left corner. I wanted to maintain Traffk's brand/presence while clients were using this platform, so I added the Traffk Logo in the middle.


In the second image above, the global header drops down to present the subcategories a user can enter into.

This image above displays the Reports landing page. At first, all reports will be listed with the ability to "hide" or "collapse" each category for an easier view/navigation. Each card containing a specific report can be exported or allow for multiple selections on multiple reports if a user needs to export more than one.

Within the filters drop down, Traffk needed a way to categorize filters. So as you can see above, one filter labeled "PHI" has two categories within.

User's are able to select a filter and see the filter next to the CTA button. This will help with recognition and navigation of reports. The user can then quickly de-select a filter.

The image above shows the CRM landing page with a listing table to sort through individuals. I really like the way Gmail designed for multiple selections or "select all", so I borrowed the idea in case a user needed to select all or select multiple persons to export.

Once a user selected a report or an individual from the CRM, they can do many things with them, so the image above illustrates a "wizard" or "stepper" for when a user must complete steps to reach their end goal.