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 insights (Analytics of an App) 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.
 |
| Goog 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).
 |
| 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:
This UI has different font sizes according to fonts:
Schluber (pt) | Helvetica (pt) |
| 18 | 6 |
| 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 - 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 - 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.
6 Comments
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?
ReplyDeleteThanks Ovasabi, this is a showcase it doesn't really work. But I was trying to say that it can be good if it is implemented though.
DeleteI had to read your post a second time. So the issue you've overcome is that you can get REAL TIME tracking on your blog. That's so brilliant.
ReplyDeleteYes, you guessed it right.
DeleteCongratulations!!! It's not that easy to develop something so useful. I salute ur effort. google analytics is soon gonna envy you.
ReplyDeleteThank you so much, I believe they are going to do something about this issue.
Delete