NetBase Pro is a simple but powerful web application that provides social insights into brands, competition, and category conversations on 300+ million social channels including Facebook, Twitter & Instagram etc. These insights help better understand customers and make well informed business decisions.

Deliverables
Web Application

Skills and Responsibility
UX & UI Design, Brand Identity, User Interaction and Testing

Tools and Software
Sketch, Invision, Adobe CC, Principle & Webflow

the challenge

Creating a lite weight simplified version for non-analysts users

NetBase has a highly sophisticated enterprise level App. However, this app was designed especially for Analysts who have received some training with the App. In an attempt to reach out to new markets and target customers who have little knowledge in the realm of social media analytics, a new app 'NetBase Pro' was envisioned.
This app, however posed a considerable challenge. The task of converting highly complex interfaces and interactions into simple and intuitive ones. For instance - how do you create a simplistic compare bar that has multiple layers of filters and sub-filters, date ranges and segment option available?

User Research

Appetite for Tools that Solve Key Use Cases Without a Big Time Commitment

Several issues became immediately clear after the research untaken by our team:
There was a huge market for a product like this amongst folks working in Marketing, PR / Communications departments.

However, the biggest pain pain was they don't have the time, manpower or finance for a big time commitment. Hence, a product like NetBase Pro would be a perfect solution especially since they see a huge value in the insights it would bring to the table.

Lastly, several existing competitive apps had very limited features. To excel in this market it was essential to add more features as a part of the MVP outline.

USER FLOW

IA and Flow from a User's Perspective

After brainstorming session with the team, I would sketch out new ideas for various screens and interactions. Then each round we consolidated our best ideas and presented to stakeholders to narrow down on the options, and further iterate on more granular details. Below is an example of the search and compare modal within the app.

LOW AND HIGH FIDELITY WIREFRAME

Building the Blueprint

Once the user flows were accepted by stakeholders, I moved on to create quick wireframes. The focus of this app is keep the interfaces and interactions simple and lucid, so these rough wireframes were then used for user testing. It provided information almost immediately of what needed to be fixed and which approach was correct. On the right is an example of 4 different wireframes used to test out the compare input modal.

BRANDING

Creating a 'Wow' Effect

Set up a system wide style guide to maintain consistency throughout the app and with the prior existing company apps can be a daunting challenge. NetBase Pro, needed a color palette that conveyed that it was fast, powerful and dynamic despite being a lite version. The company's core app used black as its primary color, so red was chosen as the primary color for this NetBase Pro. A secondary palette was also created for representing the data charts used throughout this app.

A type family that can be used for over 125+ languages was a requirement. At the same time, it needed to be compatible with several other font families such as Helvetica. This was because the modals with data sources coming from various networking channels would be represented in different font families.

Apps are comparable to ever evolving beings. Consequently, this style is constantly growing with new additions and editions being made on regular basis.

User Interaction

Defining the Complex Dialogues Between Users and Interactive App

Interface design is one aspect of interaction design. The latter often dictates the visual design rules, including icons and window design and style. I worked for the 5-D's of Smith and Silver while determining interaction of this app :

Words (1-D) e.g. in case of button labels—should be meaningful and simple to understand.
Visual representations (2-D) e.g. typography, diagrams, icons, and other graphics, should be a good supplement for words used to communicate information to users
Physical objects (3-D) - e.g. what physical objects do users interact with the product? - In case of this app, it ranges from 72" screens to iphones.
Time (4-D)- e.g. Designing content that changes over time such as sound, video, or animation
Behavior (5-D)—including action, or operation, and presentation, or reaction.

Animation

Creating An Engaging User Experience

Animations are great tools to enhance UX and win over customers. However, it is not limited to that. If rightly used animation can play a very vital role in directing the user to the right path of goal completions. In some cases it could be as minor as just gaining attention on a static page. On the other hand it is provide very vital information, for instance in case of on-boarding screen very quickly and effectively. In NetBase Pro I created some animations with similar thought behind it.

NetBase Pro