Cloud Management Solutions

Cloud Access Security Broker (CASB) is a policy enforcement point that delivers data and threat protection in the cloud, on any device, anywhere.It uses cloud SAAS management solution for B2B (Business to Business), to help businesses manage to automate cost and security for their public cloud environments.

Overview

As the BitGlass team grew, it became increasingly important a consistent style and visual language across all area of the product. With nearly over a dozen of solutions, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

I was involved in identify the problems, provide the solution, and explain the entire design process to leaders. I also evaluate the designs by testing on groups of members to check if product meet member’s expectations.

CLient

Confidential

ROLE

Researcher
UX Designer

Deliverables

Prototype
Illustrations
Icons
Styleguide

TOOLS

Omnigraffle
Sketch
Invision
Zeplin

PRACTICE

Data Visualization
Usability Studies
Agile Methodology

The Problem

After looking at Jira and Zendesk support tickets & one on one stakeholder interview it was clear that BitGlass needed a new design language in order to make the platform consistent intuitive and delightful.

%

of support tickets on Jira are UI related and are due to inconsistent user experience.

%

of the clients complain that the platform is overloaded with information and looks obsolete.

Business Goal : Reduce user support tickets | Decrease training cost

My UX Approach

My Role

My role was to understand the needs of the customers, and redesigning the Details page to make it more efficient for use by different persona types identified for SAAS Cloud management solution.

Work closely with Product, Engineering, Marketing, and the Sales to identify and delivery key to get brief product experiences.

Ideate, hypothesize and rapidly test solutions to validate customer understanding

Evaluate user complain, feeeback and suggestion through user interview and Jira tickets.

Produce prototypes, wireframes and hi-fidelity designs to communicate and discuss concepts with Project Manager and Developers.

Represent design and the voice of the customer by giving the UI solution.

Design to incorporate existing design and component in every part of the product experience, to ensure an enjoyable and consistent learning experience.

Participate in weekly design rituals; stand-ups, sprint planning.

Collaborate with design teams across to contribute to improving systems of work such as design critique, design systems or research practices & processes.

Participate in documentation development processes such as user experience specifications, testing and evaluation.

My Design Process

A design system is a library of styles, themes, components, patterns and resources that make up the UI of a product. It is built with usability in mind, with all decisions based on user research, market analysis and data. There are many advantages of using a design system, here are some of them:

* Eliminates repetitive redesigning of UI elements, utilizeing system components and apply different themes, customizations and layers to it.
* High-fidelity mockups can be easily create for business and product teams to use for marketing, sales and product related requests.
* Developers do not need to worry about re-coding components, since they can reuse the same components and customize it to their needs.
* Product development time decreases since designers and developers can ideate, design and iterate faster.
* Inconsistencies within UI design are eliminated due to an universal standard across all products.
* Design updates later in the software development process are less frustrating, since we don’t have to re-design anything and developers don’t need to build from scratch.  

Fig: New engagement Dashboard module using Cloud Management Solutions.

Style Guideline

Grid

I use the 8pt grid system to space out the elements on a page. This means that ay defined height or width, margin or padding will be an increment of 8.

Colors

My primary palette is comprised of neutrals white, and purples. We are also committed to compiling with AA standard contract ratios.

#C5C5D1

#8585BD

#2E2545

#09E1C0

#7272FF

Typeface

IWe almost exclusively use Google Fonts as the base typeface across the entire BitGlass platform. Here is showcase different way to structure content

Aa

Poppins Semibold 32pt

Poppins Regular 24pt

Poppins Regular 16pt

Poppins Bold 14pt

Icons

To create Visual harmony the icons are created based on the Golden ration principle. Used in 2 sizes – 14 px & 16 Px.

All Together

While creating this components, I collected all components in a sketch master file, which we referred to throughout the design process. After a week we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, I created nearly 5 screens within just a few hours by using the framework our library provided.

The library was growing, we started organizing individual components into art-boards containing similar items, These dartboards were then organized by general category into:Navigation, Marquees, Content, Image and Speciality.

Later I planned on create an internal website to document the system that can be used by both the dev’s and testing team.

Problem Solved – Header Bar and Report Navigation

Out of all the problems solved I would like to showcase the primary two problem of header bar and report navigation.

Before – Header Bar

Main Menu categories were ungrounded in a flat hierarchy
More vertical space of top menu.
Many names were not Self explanatory.
Report navigation and user interface has been revamped.
Big Button name.

After – Header Bar

Top menu with the color so the logo get visible.
Shortcut menu icon for easy and fast navigation.
More contents fits in same size of screen compare from 3 to 5 reports.
Hamburger menu added.
keyboard shorts have been made available for power users.

Usability Testing

I tested the product at various stages of the project.

Lo-fi prototypes were tested with the stakeholders weekly to get feedback on the functionality, content, and interactivity of the product.

Unmoderated User testing – Different persona scenario testing was conduct to satisfying the user role and behavior.

Beta Testing – Before releasing the app, we tested it with BJP members of Banaskantha district, Gujarat. The app was used by them to coordinate work for Gandhi Jayanti event preparations.

Testing was done at every milestone of the project. Invision prototype were shared with stockholders to get early feedback. After numerous survey and user pilots company launched the platform in November 2019 for our partner clients.

Impact

Numberous hours of barnstorming, careful planning, sketching, designing and developing has brought the result desired for the BitGlass multi cloud management platform. we were proud to present the new face of the product to our clients. The final result of the Cloud Management Solutions is light, minimalistic, and an intuitive product personalized for each user persona to help them achieve everything the hoped for.

%

old client transitionsed to new platform

%

Decrease in training cost

%

Less support tickets

New Clients

Project Learning

Collaboration is key

The more eyes on a design, the more it is exposed to varying opinions, experience and critique and this can only ultimately improve it, at the very last, test it.

Process in essential

For a project that is vast, it gives you a roadmap navigate through what can be foggy route. This is especially useful when you’re starting out.

Portfolio

Related Work

AD-SERVER PLATFORM CASE STUDY

Centralized the management of Advertising operations such as sales, campaign management, reconciliation and billing across large networks of owned and affiliated web sites.

VISUAL DESIGN

My design roots stemming from graphic design, here are some visual design projects ranging from illustrations to email campaigns, that I have generated in the past years.

Thanks for watching !

I am available for hire or freelance

Email

Cloud Management Solutions

Overview

As the BitGlass team grew, it became increasingly important a consistent style and visual language across all area of the product. With nearly over a dozen of solutions, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

I was involved in identify the problems, provide the solution, and explain the entire design process to leaders. I also evaluate the designs by testing on groups of members to check if product meet member’s expectations.

CLient

ROLE

Deliverables

TOOLS

PRACTICE

The Problem

After looking at Jira and Zendesk support tickets & one on one stakeholder interview it was clear that BitGlass needed a new design language in order to make the platform consistent intuitive and delightful.

of support tickets on Jira are UI related and are due to inconsistent user experience.

of the clients complain that the platform is overloaded with information and looks obsolete.

Business Goal : Reduce user support tickets | Decrease training cost

My UX Approach

My Role

My role was to understand the needs of the customers, and redesigning the Details page to make it more efficient for use by different persona types identified for SAAS Cloud management solution.

Work closely with Product, Engineering, Marketing, and the Sales to identify and delivery key to get brief product experiences.

Ideate, hypothesize and rapidly test solutions to validate customer understanding

Evaluate user complain, feeeback and suggestion through user interview and Jira tickets.

Produce prototypes, wireframes and hi-fidelity designs to communicate and discuss concepts with Project Manager and Developers.

Represent design and the voice of the customer by giving the UI solution.

Design to incorporate existing design and component in every part of the product experience, to ensure an enjoyable and consistent learning experience.

Participate in weekly design rituals; stand-ups, sprint planning.

Collaborate with design teams across to contribute to improving systems of work such as design critique, design systems or research practices & processes.

Participate in documentation development processes such as user experience specifications, testing and evaluation.

My Design Process

A design system is a library of styles, themes, components, patterns and resources that make up the UI of a product. It is built with usability in mind, with all decisions based on user research, market analysis and data. There are many advantages of using a design system, here are some of them:

Fig: New engagement Dashboard module using Cloud Management Solutions.

Style Guideline

Grid

I use the 8pt grid system to space out the elements on a page. This means that ay defined height or width, margin or padding will be an increment of 8.

Colors

My primary palette is comprised of neutrals white, and purples. We are also committed to compiling with AA standard contract ratios.

#C5C5D1

#8585BD

#2E2545

#09E1C0

#7272FF

Typeface

IWe almost exclusively use Google Fonts as the base typeface across the entire BitGlass platform. Here is showcase different way to structure content

Aa

Poppins Semibold 32pt

Poppins Regular 24pt

Poppins Regular 16pt

Poppins Bold 14pt

Icons

To create Visual harmony the icons are created based on the Golden ration principle. Used in 2 sizes – 14 px & 16 Px.

All Together

The library was growing, we started organizing individual components into art-boards containing similar items, These dartboards were then organized by general category into:Navigation, Marquees, Content, Image and Speciality.

Later I planned on create an internal website to document the system that can be used by both the dev’s and testing team.

Problem Solved – Header Bar and Report Navigation

Out of all the problems solved I would like to showcase the primary two problem of header bar and report navigation.

Before – Header Bar

After – Header Bar

Before- Navigation

After- Navigation

Usability Testing

I tested the product at various stages of the project.

Lo-fi prototypes were tested with the stakeholders weekly to get feedback on the functionality, content, and interactivity of the product.

Unmoderated User testing – Different persona scenario testing was conduct to satisfying the user role and behavior.

Beta Testing – Before releasing the app, we tested it with BJP members of Banaskantha district, Gujarat. The app was used by them to coordinate work for Gandhi Jayanti event preparations.

Testing was done at every milestone of the project. Invision prototype were shared with stockholders to get early feedback. After numerous survey and user pilots company launched the platform in November 2019 for our partner clients.

Impact

old client transitionsed to new platform

Decrease in training cost

Less support tickets

New Clients

Project Learning

Collaboration is key

The more eyes on a design, the more it is exposed to varying opinions, experience and critique and this can only ultimately improve it, at the very last, test it.

Process in essential

For a project that is vast, it gives you a roadmap navigate through what can be foggy route. This is especially useful when you’re starting out.

Portfolio

Related Work

AD-SERVER PLATFORM CASE STUDY

Centralized the management of Advertising operations such as sales, campaign management, reconciliation and billing across large networks of owned and affiliated web sites.

VISUAL DESIGN

My design roots stemming from graphic design, here are some visual design projects ranging from illustrations to email campaigns, that I have generated in the past years.

Thanks for watching !