Google analytics and social media insights are not handy: App screen UI Design

Table of Contents

Google analytics and social media insights are not very handy to me. And you? That is why I did this UI design to prove that.

This UI concept is a concept of Instagram Insights (Analytics of an App) and Google Analytics that I designed with Adobe XD. It is composed of some elements you know but the structure is new – now let’s get on it together, I am going to break it to the ground.

I use Adobe XD in different things including designs of banners I use in my blog posts. Recently, I made a post about that, you can check it out here.

I cannot say much about Adobe XD right now.
An Insights app UI design
Google analytics and social media are not handy because they don’t possess real time system – Photo by Kord Blog

Insights screen UI Design: Concept breakdown

Idea

This is the source of I-D-E-A; because I am lover of data analytics and statistics, the idea came from Google Analytics and Instagram Insights and post where I felt that I can design something like Google Analytics combined with social media Insights and post to create an innovative design with a compact look for phone.
Okay, if you are not understanding it right now I will reflect the idea in coming parts, but first let me break the design above into parts. Are you ready? I guess so.

Design breakdown

As I said, this is an idea based from two integrations Google Analytics and Social media Insights, those are the bases of my design because I realized that I can design a UI that is detailed which can prove what I meant by saying the tools are not handy, right?. From those integrations I added some tweaks of my own to improve the look and enhancement of view (a touch of creativity).
Let’s jump in details:

Scheme

This scheme is going to focus on raw materials and basic elements of the design which includes fonts, font sizes and colors. The picture you see below is the scheme I’m saying, do you get anything from there if you compare with the UI (first image).
App UI scheme
Scheme of my UI – Image by Kord Blog

Colors

In the image above (Scheme) you see a total of four colors that make a design with their respective indexes (HEX) but they are all based on a green except a white.
Color structure:
  • #026A67: It’s approximately to a Mosque green
  • #07B4AF: It’s approximately to a Bondi blue
  • #2ED6D1: It’s approximately to a Turquoise
Disclaimer: The names of colors said above are approximation, they are not 100% accurate.

Fonts

You have seen that UI has different fonts, a typography style of the texts which seems to be very influential to me because it affects the look of total UI. I think you understand poor font make degrade the design. Here is the fonts that I used, if you don’t have them you can download them and add them into your computer.
Fonts structure:
  • Schluber – Download it from here.
  • Helvetica – Download it from here.

Font sizes

This UI has different font sizes according to fonts:
   Schluber (pt)  
 
  Helvetica (pt)  
 186
 36 9
 42 11
 12
Where fonts were used:
 
Schluber font was used in header, because it is concentrated it would not be used for explanatory texts, whereas Helvetica font was used for some header and texts as you can see in the UI image.

UI structure

Image and header

  • The image is simple, it looks like a normal picture uploaded by app user (account owner), as it would look on Instagram or other images platforms.
  • On the right of image there is three dots icon that indicates that you can do more on the picture like copying its link, report abuse and other actions.
  • On the left there is back button that can allow you to leave the current post.

Action buttons

  • Like button: As any social media platform, like is a common feature that indicates that a viewer has appreciated or liked a post. As you can see on the right there is a heart icon in pink reddish color, that means the user has already liked the image.
  • Comment button: That conversation bubble below like button is a comment button where user can give ideas and opinions regarding the post.
  • Share button: Share button is used to share or refer post with friends and relatives on different external platforms.
  • Save/Bookmark button: Bookmark saves your post so that if it has some importance, you will be able to get back to it in the future without any search hustle.

Insights

Insights are the pivot part of this article because I have so much to say about it. In this section there is so much of information that I will emphasize in details. To make it understandable, let me say everything on its own.

Info

This is a part that will mention all features of the insights section, how you can use it, what is included. The icon is an “I” in a circle as you can see in the image below. It means that when you hit this button, you get all information regarding insights.
Info button
Info button – Photo by Kord Blog

Graphs, charts and numbers

The section illustrates all statics regarding images and its interactivity with the public. As you can see, insights have different numbers and graphs which are different. This section can be accessed by the post owner to know the performance of his/her picture in real time.
Insights section
Insights section – Photo by Kord Blog
In the section again there is a refresh button. This button allows the owner to refresh data because those data are in real time, they update instantly as soon as an action is taken, either an impression, an engagement or other.
You can see a close button (X) to the right of refresh, this is for closing the insights section. This serves that when owner of picture is done with looking on insights can be able to close those insights and remain with the post only.
Last on insights, is a home button (house icon) that enables to go home without using back button which takes time to go home.

Where the idea came from

If you didn’t understand the idea in the above section, let me explain in full.
As I mentioned before, I did this UI screen because of course I like to use insights on my account and especially on my blog. They help me to track its improvement by the time, I believe that’s the same case with your website or blog. But also I wanted to address how real time insights could be very useful and productive.
The first thing I didn’t like for both of those insights and analytics from social media and Google respectively, they are not in real time, you need to wait for such a long time to get updates. Then I said, “Let me create a UI that has something that looks like real time data updates” that can look easy and handy.
Other articles you can read:
 

Conclusion

I know this is a single screen, it is not satisfying for something like an app but this was very satisfying to me as I was focusing on a single part, so a single artboard was enough.
I have had so many ideas which can be found on my portfolio here.
I have mentioned every step from when I came up with the idea till the end; the components of the app, the color scheme of the design, the fonts and sizes. If you want to follow up with this design you can check out the fonts, I have dropped the download links in the above sections.
Disclaimer: This is not a front-end project that is interactive, it is just a design. Don’t confuse it with a live application.
I hope that this was helpful!
Are you a designer? What’s your favorite design software and why do you like it? Share with us your opinions.

Share this article:

Share on facebook
Share on twitter
Share on linkedin
Share on tumblr
Share on pinterest
YOU MAY ALSO LIKE

ABOUT KORD BLOG

TECH, LIFESTYLE AND EDUCATION BLOGGER

Welcome To Kord Blog, A blog where you can find reliable answers to your questions, enjoy the read and we like to hear from you.

If you like things like tech, lifestyle and education this is your blog. More to come!

SPONSORED LINKS
RECENT POSTS
CATEGORIES

0 Responses

  1. Wow. That's a load of info for me to comprehend. I just realise I need to do a lot of digging to catch up. So you've come up with a better form of analytics. Does it cost money to it you?

Leave a Reply

Your email address will not be published. Required fields are marked *

Microsoft Excel shortcuts book ccover

GET FREE ULTIMATE MICROSOFT EXCEL SHORTCUTS CHEAT SHEET

Stop wasting 64 hours every year. Use keyboard shortcuts instead – They make it very easy.

Get full access to a cheat sheet of 50+ Microsoft Excel shortcuts with illustrations into your inbox.