%201.svg){kind=logo}
Nomad is a data visualization tool for SafeReach that proves marketing attribution to clients. The current prototype uses a custom Google Data Studio connector to gather data from various touchpoints and generate a client-friendly report. To meet growing demand and enhance user experience, Nomad requires an overhaul as a native data visualization engine MVP application.
UX Design, UX Research, Brand Design
Safe-Reach clients have marketing analytics data spread across multiple different integration touchpoints (WooCommerce, Google Analytics, etc.), but have difficulty gaining insight from the wide range of platforms they use.
A web application that allows Safe-Reach clients to consolidate their analytics data from a wide range of touchpoints into one digestible report. Nomad simulates the profession of a data analyst through a simplified, user-friendly experience.
Safe-Reach works with two different client types: reseller agencies and direct brands. Nomad needs to accommodate for several sets of user permissions. There are 3 different types of users based on the marketing agency's structure:
Each client that exists in Nomad will need to have at least one administrator which will be able to manage their own users and integrations. To guide the wireframing process, I created a diagram to represent the platform's client/user hierarchy.
I conducted a comparative analysis to get an understanding of how other custom reporting platforms handle the report creation process. Most platforms required a high level of knowledge and experience with technical concepts and jargon surrounding digital marketing.
.png)
Before Nomad is able to generate reports at scale, it needs to have the relevant local records: clients, integrations, and users. We defined the user flows for:
We used ANT Design as a front-end component design framework and built on top of it to suit our needs. I compiled all of the Figma components I created during the process into a design system to make production and scaling easier. Feel free to scroll through the embedded file
%20(1).png)
I designed a login page that boldly expresses the branding of Nomad
.png)
Using Apex Charts as a front-end framework, we applied our own style guide to create a native library of interactive graphs to facilitate template-based report generation for our v1 users.
Using our custom graph components, we created several page templates from which users can select while configuring a report.
.png)
This is a permissions sharing modal that I designed for my current company's internal native visualization engine. With this modal, users can choose whether the report is visible to everyone in the organization, or invite only.
%20(1).png)
Using Figma's new variables feature, I configured light & dark versions of the reporting components & updated the existing design system with the new variable collections.
%20(1).png)
Figma variables allow me to link system colors to dynamic hex codes that enables me to create light and dark mode prototypes at scale.
.gif)
A deal is a financial contract that represents a set of marketing campaigns. I designed a view where users can monitor their marketing performance via high-level metrics. The deal view allows our clients to:
.png)
I designed a client-facing file uploader that processes sensitive PII information. When the client uploads a file with Personal Identifiable Information (PII), our file uploader will automatically submit that file through a PII-stripping process that maintains the customer's privacy.
.png)
I created my high fidelity mockups in Figma to allow the engineers to inspect the file and export the designs to code. I conducted a UX review of each front-end ticket to spec out any missing interactions that were not covered in the mockups.
I quickly adapted to our team's agile process and was efficient in bug hunting and managing deliverables through our Jira workflow.
To aid users in navigating the new platform, we implemented interactive tutorials throughout the platform to guide the user through each view.
.png)
Working in an early-stage startup, I learned a lot about managing a new product from user research all the way to high-fidelity design and development. Some key takeaways from this project are:
.jpg)