Unfog

Years: 2021-2022

The Problem

Web analytics platforms provide valuable data about your website's performance. The number of page views, visitors, and time spent on pages are typical metrics that these services offer. Using this data, website owners can find ways to improve their website. Google Analytics is by far the leading platform in this space. However, Google collects excessive amounts of user data which they use internally for their own benefit. Google Analytics is also difficult for non-experts to use due to the overwhelming quantity of metrics provided and the technical jargon used.

I saw an opportunity to build a simpler web analytics platform with better visitor privacy.

My target demographic was small to mid sized companies or organizations with websites that had less than 30,000 monthly page views. The reasoning for this is because large businesses would need (and already have) a more advanced web analytics platform. My ideal customer would be someone with a fairly small website that didn't currently use a web analytics platform.

Research Process

Click to enlarge

I created a user flow diagram to define the onboarding process. All web analytics platforms require the user to install a JavaScript script on their website. This step is necessary but can be daunting for some users. To counteract this I made the rest of the onboarding process minimal. Specifically, we don't make the user verify their email, enter their payment details, or ask them for any unnecessary information.

Design Process - Wireframes

The design process was a challenge because I had to determine how to best display the visitor metrics. I started with very rough wireframes to conceptualize where the information is display and the format is it displayed in.

Separating the information among different pages would help to avoid information overload. We have 3 separate pages - "Current", "Trends", and "Goals". In the row below we have different time periods to pick from. Sometimes users want to only see the data from the current day, sometimes they want to see this week's data, etc. The "Range" text represents a date range picker button.

The Trends page is where all the graphs would be displayed so you can see changes over time. The user would be able to track the number of visitors (users) page views, etc.

The Goals page would show a basic visitor (user) funnel with goals. Unfog users could define goals for the website like "get 100 visitors in a day".

Design Process - High-fidelity Mockup

While designing the high-fidelity mockup I came up with a better way to separate the pages. The "Overview" page would give you the rundown of your site. The "Visitors" page would tell you about your websites visitors. The "Source" page would show where those visitors come from (ex: Google). Then the "Goals" page would remain the same. This would provide users a way to look at a specific aspect of their website at a time so they don't have information overload.

The UI consists almost entirely of charts and graphs. For the mockup I focused on the design for those UI elements and only needed to mock-up a single page. The other pages would be laid out the same way and use the same UI elements.

Design Process - Style and Branding

For the homepage of the website I focused heavily on enticing users to sign-up.