Portfolio – Communication Design (2015–2021) by Hardik Shiroya

portfolio Hardik Shiroya 2015 – 2021

I am a Communication Designer.

My areas of work are Graphic Design, Branding, Animation & Film Making, and UX Design.

Phone +91 98985 10107 Email hardikshiroya21@gmail.com Linkedin /hardikshiroya Behance /HardikShiroya

Professional Experience

Owner & Freelance Designer

AUG 2019 - Present

Visiting Faculty

NOV 2017 - Present

Sr. Visual Communication Designer

SEPT 2015 - JULY 2019

Rockfinch Studio, Ahmedabad

Skyblue Institute of Design, Ahmedabad

Streebo Inc., Ahmedabad

Education

M.Des. (Communication Design)

2013 - 2015

B.Tech. (Mechatronics Engineering)

2007 - 2011

7.51/10 CPI DAIICT, Gandhinagar

56% UVPCE, Ganpat University, Mehsana

Areas of Interest Teaching

Art Direction

Illustration

World History

Public Speaking

Branding

Animation

Mythologies

Research

Editorial Design

Sequential Art

Children Tales

Visual Culture

Typography

Sketching

Semiotics

Content

1 Technik Spirits Inc.

Branding

6

2 Khichdi Etc.

Branding

12

3 Dakshination

Branding

20

4 Patiala Platter

Branding

30

5 Cornerstone Aroma

Branding

36

6 techXchange 2019

Print

40

7 John Energy Ltd.

Print

44

8 Marc Chagall Poster

Print

50

9 Cloudoffis Technologies LLP

Animation

54

10 SuperRecords

Animation

58

11 Recycle Rewards

Animation

62

12 Urban Khichdi

Animation

66

13 Sampoorti

Branding

68

14 Streebo Interactive Services Video

Animation

76

15 Streebo DXA Video

Animation

78

16 Streebo IDE – Product Design

UI/UX

80

17 Oklahoma Gas and Energy

UI/UX

90

18 Streebo Chatbot – Product Design

UI/UX

98

19 PNB Housing Finance Ltd.

UI/UX

102

Technik Spirits Inc. Manufacturing

Making the Invisible, Visible!

Brand Identity Animation

Technik Spirits Inc. is a manufacturer of medical air systems providing comprehensive solutions for the generation of medical gases. Ever since the original founders decided to start off as air compressor manufacturers, the company has grown from a modest business to a multi-disciplinary engineering firm over the last four decades. Their new mission is to deliver air to medical sector in the simplest, smart and efficient way.

They approached with the initial request of designing business card and letterhead, but the problem seemed larger. They were undergoing a transition from being a traditional company to an innovative one, and that was a rebranding indicator. For example, their old logo was complicated and had no story. We started by defining their brand personality – Youthful, Innovative and Refined, which clearly identified their products and fresh approach. These personalities helped in providing visual directions and further strategies. It was concluded that the best way to identify the brand is through air flow, unique medical sector niche or the brand’s initials, wherein air flow seemed to be the right identifier. They already had one of their product, Integrex’s logo in place and wanted the same colors to form a system.

Website www.technikspirits.com

6

With launch of their state-of-the-art medical compressor system – Integrex, we saw an opportunity to bridge the gap between the product and customers through an explainer video. The goal of the video was to simply introduce their product, showcase its system blueprint and highlight its features and benefits. Whiteboard animation was selected as the style to educate the prospects about the product rather than being salesy. This format worked well because it’s simple, clear and had informative storytelling qualities.

Hardik Shiroya

Brand Personality & Stylescapes YOUTHFUL

We are active and energetic. That means we are always up on our feet to work hard and smart.

INNOVATIVE

We build state-of-the art products to provide medical industries with a more efficient, practical, enduring and flexible systems.

REFINED

We are considerate about the well being of our clients’ patients. We are therefore meticulous about the output and quality of our products, yet keeping them simple and clear.

2015 – 2021

7

4x 1x

4x

1x r

1x 60˚

1x r

60˚

0.25x

0.25x 0.5x

0.25x

0.25x

0.5x

0.25x

0.5x

5x

Old Logo

8

New Logo

Hardik Shiroya

2015 – 2021

9

10

Hardik Shiroya

Integrex - Whiteboard Animation Video Link

cutt.ly/ElWSQPp

2015 – 2021

11

Khichdi Etc. Restaurant

Transitioning a homely traditional dish to a modern day restaurant.

Brand Identity Animation

The history of Khichdi is traced since Vedic civilization to the Mahabharata times, from the Mughal era till date. From Chanakya to Chandragupta Maurya, from Greek historian Megasthenes to Moroccan scholar Ibn Batuta, from Russian adventurer Nikitin to French merchant Jean Tavernir, all have described how Khichdi was a part of contemporary food in their writings. Believed to be one of the most bendable dishes of Indian cuisine; Khichdi can take every dwelling from the Chef’s armor and yet retain its essence with the highest grade. In that sense, Khichdi isn’t merely a dish but an entire cuisine in itself.

Khichdi etc. was a thoughtful experimentation by a passionate group of people to serve this dish with desi and international touches. They wanted to create a brand where deliciousness would meet healthiness. A brand so casual, fun and homely that can be enjoyed by all age groups – from kids to adults.

Website khichdietc.in

A pictorial representation of simmering Khichdi in a bowl contrasting with organic elements that can be found in their kitchen served best as their identity, reflecting their core values of being contemporary yet transitional. Apart from the fact that the commonest khichdi is yellow, the bright color also added a fun personality, with dark brown for most of the spices used in preparation. The brand identity, with types, shapes and lockups, was simple, bold and modern to have an eye-catching appeal for their facades and sign boards, and memorable for their customers.

Instagram @khichdietc Facebook @khichdietc

12

Hardik Shiroya

2015 – 2021

13

Logo Animation Video Link

bit.ly/2jPNGWJ

2015 – 2021

15

16

Hardik Shiroya

18

Hardik Shiroya

2015 – 2021

19

Dakshination Restaurant

Penetrating the competition with welcomes and values.

Brand Identity Packaging Animation

Dakshination is a South Indian fast food hub and restaurant.

It serves hygienic food at affordable prices. We wanted to reflect the same with its identity and overall personality.

The icon had to be simple, welcoming and should be a direct and clear picture of South India. The final elephant icon was selected and the logo was also named as “A humble welcoming”. The style of icon, typeface, content and packaging - all had to speak in one language - casual and fun.

Instagram @dakshination_india Facebook @daksinationindia

20

Hardik Shiroya

Brand Attributes and Keywords AFFORDABLE

YOUTH–CENTRIC

MODERN

BRIGHT

SOUTH INDIA

POCKET–FRIENDLY

RELATABLE

BOLD

QUICK SERVE

ELEPHANT

DIRECT

CULTURAL

NO NONSENSE

BANANA LEAVES

CLEAR

NEW

CASUAL

COCONUT

SIMPLE

CONTRAST

HYGIENIC

KATHAK

MINIMAL

EYE CATCHING

2015 – 2021

21

22

Hardik Shiroya

2015 – 2021

23

24

Hardik Shiroya

26

Hardik Shiroya

2015 – 2021

27

Logo Title Sequence Video Link

cutt.ly/flWPOcs

28

Hardik Shiroya

2015 – 2021

29

Patiala Platter Delivery-Only Food Service

How do you show the North Indian-ness in food culture?

Brand Identity Packaging

Patiala Platter is a food chain with delivery-only services that serves basic North Indian cuisine. The brand’s major target customers are youth. Our goal was to build a new visual identity that communicates the brand values distinctively as a delivery only services of North Indian meals. The idea was to reflect desi Indian art (eg. dhaba culture, truck art) with bright, bold colors to evoke the sense of peppy Indian food.

A lot of research went into studying the Indian truck and kitsch art, that turned into a broad range of design concepts and iterations. Play was a major part of the process as was implicit to the brand itself.

Facebook @patialaplatter

30

Hardik Shiroya

Brand Attributes and Keywords NORTH INDIAN

PEPPY

BASIC CUISINE

BRIGHT

AFFORDABLE

BOLD

FAMILIAR

LOUD

OLD

COLORFUL

YOUTH–CENTRIC

EYE

DHABA CULTURE

CATCHING

TRUCK ART

FUN DAZZLING

KITSCHY

CASUAL

QUIRKY

FRIENDLY

VERNACULAR

ADVENTUROUS

2015 – 2021

31

1A

1B

1C

2A

2B

3A

4A

4B

5A

Logotype Explorations

32

Hardik Shiroya

2015 – 2021

33

34

Hardik Shiroya

2015 – 2021

35

Cornerstone Aroma Scented Therapeutic Candles

Helping a passionate small business to start their journey.

Brand Identity Packaging Photography

Cornerstone Aroma is a small business run at home by a passionate female solopreneur. When the craft was about to be turned into a business, it needed an immediate identity and packaging labels that were visually simple yet communicated the client’s creative and humble personality.

The vision of the business is to stay small and cater the passion in form of gifts – candles that change your mood.

Website cornerstonearoma.com Instagram @cornerstonesroma Facebook @cornerstonearomanr

36

Hardik Shiroya

2015 – 2021

37

38

Hardik Shiroya

2015 – 2021

39

techXchange 2019 Annual International Conference

Induce dialogues on Indian Startups’ current and future scenario on a global stage.

Editorial Design

TechXchange is a joint initiative of the FICCI UK and High Commission of India in UK, supported by various government agencies. The programme is aimed at promoting and providing a global exposure to mature startups from India and the UK to help them begin their journey of globalization. Their event, techXchange 2019, held at London in September 2019, required hand over of the tech startup’s annual report at the conference. A new theme (colors, layouts, images) was created for the report to bring a fresh perspective. Various charts, infographics and illustrations were added as a part of content adhering to the same theme.

Website techxchange.org.in Instagram @techxchange2020

40

Hardik Shiroya

2015 – 2021

41

2015 – 2021

43

John Energy Ltd. Engineering Services

Indicating urgencies and educating safety protocols in the HSE sector.

Print Identity

Established in 1987, John Energy Limited is a leading Indian company catering to the upstream & mid-stream Oil and Gas Industry, providing engineering and management services, safety trainings and technically qualified professionals.

Their main focus is to educate and influence employees so that they can embrace health, safety and environmental policies, practices and procedures, and set quality & HSE performance objectives, measure results, assess and continually improve processes, services and product quality, through the use of an effective management system. With this commitment towards health and safety, they required a series of posters to educate the employees about dos and don’ts, ethical behavior, critical situations and reactions, work and environment guidelines. While these posters would form part of their workplace, a mascot was also designed to help communicate the same at various workshops.

Website johnenergy.com

44

Hardik Shiroya

2015 – 2021

45

46

Hardik Shiroya

2015 – 2021

47

IR

HEA L

TY FE A

EN

V

48

S

H T

N E ONM

Hardik Shiroya

T

2015 – 2021

49

Marc Chagall Poster Event Promotion

Looking through an artist’s lens and recreating an artwork.

Print

50

This project was undertaken as a part of academic exercise with an aim to research on chosen artist’s style, analyzing and including all the design elements that appear repeatedly in the artist’s artworks. Marc Chagall was one of the celebrated Parisian artist of his time and I selected him out of curiosity – his dealt with cubism and expressionism at the same time with informal use of space and pure hues. After a research report was created, the next step was to reflect Marc Chagall’s style in my own way and create a poster – paying tribute to the artist. The exercise was to learn to look at the work and develop a visual language with compositional techniques and meanings. The poster was displayed at the campus design studio – a small exhibition open for visit to every students and faculty. It was loved and appreciated by many, and I received few kind words and praises. The challenge I faced was with the print process because of its large format. Initially, testing and color check was done until the right result was achieved.

Hardik Shiroya

2015 – 2021

51

Marc Chagall (1887-1985) Russian–French Artist

I and the Village (1911)

Listening to the cock (1944)

Paris through the window (1913)

52

Hardik Shiroya

2015 – 2021

53

Cloudoffis Technologies LLP Financial Technology

The power of storytelling through motion to explain a complex concept.

Animation

Cloudoffis is a product company that caters to Australian financial sectors. Their system is built of 3 products that provides automated solutions and can integrate with standard compliance softwares. They had created a comprehensive infographic for the initial sales cycle. But with such a complex system, they faced problems in explaining it to their clients. A video that can break the infographics and help explain it through a story was thought of as a solution.

The goal of the video was to simplify, clarify and present an overview of their solutions’ ecosystem without getting into details. The video also communicates how and when the system can help in real workflows to users.

Website cloudoffis.com.au Facebook @cloudoffis YouTube @cloudoffis

54

Hardik Shiroya

2015 – 2021

55

Storyboard

Video Link

cutt.ly/1lWPNCq

56

Hardik Shiroya

2015 – 2021

57

SuperRecords Financial Technology

A targeted brand story – presented in a sip of coffee.

Animation

SuperRecords is an outsourcing company that caters to Australian financial sectors. They provide teams and specialists to help with mundane, redundant and everyday tasks so that financial professionals/companies can focus on growing business of their clients. Their target customers were clear – Accountants, Financial Planners and SMSF Administrators. While building their digital presence, they faced challenge in communicating their brand story and services for these different set of customers. Different web pages were created for each group of customers to convey dedicated information, but it was not enough. They required a unique way of telling a story that was interesting and, quickly and easily consumable. That’s where we came in. We collaborated with their marketing team to work on 4 videos – one for home page and rest for individual audiences’ pages.

All the videos will just give a targeted overview instead of going deeper into details like products and workflows. The video successfully answered the questions – Who we are, How we help you, Why us and What do you get, all in a short time frame!

Website superrecords.com.au Facebook @superrecordsAU YouTube @SR Social

58

Hardik Shiroya

2015 – 2021

59

60

Home Page Video

cutt.ly/lmetPnH

Accountants Page Video

cutt.ly/6metCfx

Financial Planners Page Video

cutt.ly/bmetNi3

Hardik Shiroya

2015 – 2021

61

Recycle Rewards Sustainability

Helping communicate benefits from keeping environment clean.

Creative Direction Storyboard Illustrations Animation (partly)

Recycle Rewards is into sustainability business. They have an on-request waste pickup service, from where the waste then goes to recycling plants. They claim to replace ‘pastiwalas’ and giving more benefits to customers. Our goal was to capture the pain points of customers and showcase how Recycle Rewards can solve them by highlighting the differentiating factors. The idea was to quickly tell stories of their different customer base. Including cartoon characters added a fun and friendly tone to communicate rather very direct and serious message. We worked with their marketing team for story and script, and various nationwide voice over artists for the project.

Website recyclerewards.in Facebook @recyclerewardsin YouTube @Recycle Rewards

62

Hardik Shiroya

2015 – 2021

63

64

Hardik Shiroya

Video Link

cutt.ly/JlWP8KQ

2015 – 2021

65

Urban Khichdi Restaurant

Something to fill the awkward silence while awaiting a meal.

Animation

Urban Khichdi is all about serving healthy and long lost traditional Indian recipes with a customized touch. They required a logo animation to be loop-streamed on displays at the outlets for promotion, and more importantly, for customer to have something to watch while they await their meal. The idea behind the video overreached from a simple logo animation to a brief process of creating Khichdi. The video turned out to be in nice runtime to be used as an intro for other longer formats.

Website urbankhichdi.com Instagram @urbankhichdi Facebook @urbankhichdi

66

Hardik Shiroya

Video Link

cutt.ly/LmysG3F 2015 – 2021

67

Sampoorti

Agricultural Equipment

Putting out brand values through consistent connections.

Social Media Print

Sampoorti is a young and dynamic brand committed towards empowerment and prosperity of nationwide farmers by delivering value with their products. A series of campaigns were implemented on social media to inform about offers and products, inspire to work smarter and simply connect the farmers with the brand. These successful campaigns increased social media traffic, brand interaction and revenue. The touchpoints included social media and various print materials.

Website sampoorti.in Instagram @sampoorti Facebook @sampoorti

68

Hardik Shiroya

Social Media Posts

2015 – 2021

69

Styleguide 0F7A48

Shapes

Products

PRIMARY / BG / TITLE / HEADING

019247

B7B504 Photography

SECONDARY / BG

PRIMARY / BG / SUB HEADING

SUB-HEADING

PARA / BG ALT

BG ALT

BG

1B1B1B

666666

E7E7E8

F6F6F6

Icons

LINE ICONS

Gill Sans Avenir Next Raleway

70

title / heading

sub-heading / para

alt

Lorem ipsum Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim

Hardik Shiroya

Newspaper Insert

2015 – 2021

71

Packaging Sticker

72

Hardik Shiroya

Diary Inserts

2015 – 2021

73

Machine User Manual

74

Hardik Shiroya

Streebo Interactive Services Video Interactive & Digital Services

Promoting services for new-age digital success with the right voice.

Creative Direction Storyboard Illustrations Animation

Streebo Interactive Services was initiated by Streebo Inc., seeing an opportunity to help clients with post product delivery success. Consisting of a small team, Streebo Interactive strived to be a full service digital marketing and interactive services agency, where bunch of marketers, tech geeks, designers and storytellers combine content strategy, digital communication and analytics in creating meaningful customer experiences. The video was created to promote the services and to convince the prospects with the fact that why digital agency services are essential for today’s businesses. The story starts with current scenario with real challenges and ends with how Streebo Interactive can help.

The style of frames and animations had to be fresh, fun and creative just like the team that drives the services.

Website streebo.com YouTube @Streebo Inc

76

Hardik Shiroya

Video Link

bit.ly/2As0Sbo 2015 – 2021

77

Streebo DXA Video Information & Technology

Repeating success stories by telling one to the world.

Creative Direction Storyboard Illustrations Animation

Streebo Inc. partnered with IBM to solved the business challenge and carried out some of the complex integrations for a leading credit co-operative society of India. It was a huge success for Streebo with their product Digital Experience Accelerator (DXA) on local grounds. They wanted to promote this success story among IBM representatives, existing and new customers to bring in more similar business. The digital transformation case study was converted in a video format showcasing the brand and product as the hero of the story.

Website streebo.com YouTube @Streebo Inc

78

Hardik Shiroya

Video Link

bit.ly/2B55oIY 2015 – 2021

79

Streebo IDE – Product Design Digital Product

Building an integrated no-codelow-code platform that can be operated by LoBs. UI Design UX Design Design Management

Website streebo.com

80

Streebo Inc. helps enterprises with their digital transformations, and they do so by using a set of three nocode-low-code platforms built on IBM technologies. These platforms have to work together to create the output but it was not a seamless journey for the developers. They have to experience difficulties like long waiting time because of using different platforms at the same time, system lag, customization problems with the ready codes, creating new assets and reusing them, unable to see real-time outputs while coding, integrating new features and functionalities.

These were some initial pain points listed down by project managers and their teams. They approached the inhouse design team, led by me, with a request to create a single platform for development that include all the necessary features, workflows for all levels of resources, and should be easy to use by a user with low or no coding knowledge.

We collected all the documents from the team, but treated them as on a want base rather than a need base. Taking a step back, we asked lot of questions to define the problem statement – what are we building and why are we building?

The project had to be user centric and we identified the users as both development teams and non-development teams. The reason was two-fold. First, if non-developers can do it, then developers can easily do it. Second, this product was to be offered to clients who doesn’t have an inhouse IT team, and any non-technical member can built or modify their products. The user research was done among the internal development teams including all the identified stakeholders, which helped discover new issues and insights. The final product was named as Integrated Development Environment (IDE), though the suggested names were Streebo App Builder and Streebo Design Studio.

Hardik Shiroya

Design Process, Activities and Deliverables: 1. Planning and Definition

b. Ideation Sessions to list possible solutions

a. Mapping Stakeholders and Users

c. Presentation of Insights and Ideas to Stakeholders

b. Conducting Stakeholder Interviews

c. Checking and Highlighting points from initial documents d. Defining Problem Statement

e. Mapping UX Strategy and Project Roadmap 2. Discovery and Research

a. Detailed Competitive Analysis of 4 Products b. Contextual Inquiry with Users based on preplanned tasks c. Conducting Design Workshop to collect feedback, via emails and feedback box

d. Iterating Solutions based on Stakeholders’ Feedback 4. Design

a. Building a smooth Navigation System for user workflows b. Designing Wireframes to study and organize required information and features in each state of the workflow

c. Designing a high-fidelity prototype (UI) with a new style-guide 5. Validate

3. Analysis and Synthesis

a. Sorting and Categorizing collected data via Affinity Diagramming

2015 – 2021

a. Presenting prototype to the Stakeholders

b. User Testing based on workflows and tasks

81

Affinity Diagrams

82

Hardik Shiroya

2015 – 2021

83

Notifications Profile

Design

Quick Options Bar

Preview Run

Avatar

Save

Emai Id

Save & C

View Profile Button

Show/Hid

Product Updates

Share

Settings

Downloa

Sign Out

Global Se Copy Paste

New Application Import Application

Duplicate Delete Undo Redo

Your Projects

Project n

Project Name

View 1

Outline P

Date Created by: Name

Files Pan

Edit Deploy

Dashboard

Share Export (Nitros File) Duplicate

View 2

Delete

Compon

Launch View Responses Update History

All Projects Search Project Sort Filter Grid View / List View Next Previous

Component

Basic

Project ABC

Styles Fields

General ID Label Floating Label Placeholder Required Field

Multi-line entry

84

Text Field Text Field Toggle Text Field Toggle

Position Type Top Bottom Left Right

List Number Field Number Field Number Field Number Field

Size Width Height Responsive Resize

Number Field Number Field Toggle

Advanced Tooltip Hint Max Characters Display rows Change input to uppercase Show in View Responses

Text Field Text Field Number Field Number List Toggle Toggle

Validation Format Error Message Icon

Text Field Text Field List

Preset Styles Select Preset Save Preset

List Button

State Normal

List/Tabs (Normal, Hover, Active, Disable)

Label Padding Top Bottom Left Right

Placeholder Padding Top Bottom Left Right

Input Padding Top Bottom Left Right

Font Family Weight Style Size Line Height Letter Spacing Alignment Color Opacity More Options

Font Family Weight Style Size Line Height Letter Spacing Alignment Color Opacity More Options

Font Family Weight Style Size Line Height Letter Spacing Alignment Color Opacity More Options

Field Box Padding Top Bottom Left Right

Tabs Number Field Number Field Number Field Number Field

Layers Pa List List Icon Buttons Slider + Number Field Slider + Number Field Slider + Number Field List Select Block + dropdown Slider + Number Field Icon Button Background Fill Type Color Opacity More Options

List Select Block + dropdown Slider + Number Field Icon Button

Border Size Fill Type Border Type (top, bottom, all etc) Color Opacity Radius More Options

Slider + Number Field List Select Block + dropdown Select Block + dropdown Slider + Number Field List Icon Button

Shadow Dist X Dist Y Blur Color Opacity Inner Shadow

Slider + Number Field Slider + Number Field Slider + Number Field Select Block + dropdown Slider + Number Field Toggle

Hardik Shiroya

Sel

View 3

Propertie

View 4

Tabs of a

Layout V

Normal

Padding (Label)

Access Services Fonts (Label)

Activity log Chat Settings

EVENTS

Page

Close

de Panels

List of all Panels

ad

earch

e

Panel

nel

nents Panel

anel

es Panel

OnPageLoad

When a page initially loads in the web browser

OnWindowResize

When a page initially loads in the web browser and whenever the browser window is resized

OnWindowScroll

When the browser window is scrolled in any direction

OnWindowScrollUp

When the browser window is scrolled up

OnWindowScrollDown

When the browser window is scrolled down

OnPageClick

When the page's background is clicked

OnPageDoubleClick

When the page's background is double-clicked

OnPageContextMenu

When the page's background is right-clicked

OnPageMouseMove

Fires continuously as the cursor is moved around the page

OnPageKeyDown

When a keyboard key is pressed

OnPageKeyUp

When a keyboard key is released

Flex/Component

Form n

Page n

Create New Form Create New Page Delete Duplicate Settings

OnClick

When a Flex/Component is clicked

onHoldClick

When a Flex/Component is clicked and held for one second

onDoubleClick

When a Flex/Component is double-clicked

OnContextMenu

When a Flex/Component is right-clicked

onInvalid

Called when a data item goes from being valid to invalid.

onValid

Called when a data item goes from being invalid to valid.

OnMouseEnter

When the cursor is moved over a Flex/Component

OnMouseOut

When the cursor is moved off a Flex/Component

OnMouseDown

When a Flex/Component is clicked, while the cursor is pressed down

OnMouseUp

When a Flex/Component is clicked, upon the release of the click

CSS folder

OnMouse Move

Fires continuously as the cursor is moved while over a Flex/Component

Assets folder

OnKeyDown

When a keyboard key is pressed while typing in a Flex/Component

HTML Files

OnKeyUp

When a keyboard key is released while typing in a Flex/Component

New File

OnMove

When a Flex/Component is moved by a Move action

New Folder

OnRotate

When a Flex/Component is rotated by a Rotate action

Import

OnResize

When a Flex/Component's size is changed by a Set Size action

Export

OnShow

When a Flex/Component is shown by a Show or Toggle Visibility action

OnHide

When a Flex/Component is hidden by a Hide or Toggle Visibility action

OnFocus

When a Flex/Component gets browser focus by being clicked or tabbed to

OnLostFocus

When a Flex/Component loses browser focus by being clicked or tabbed away from

OnLoad

When the Flex/Component initially loads in the web browser (fires after OnPageLoad)

OnSelected

When a Flex/Component is set to its selected state with a Set Selected action or when a checkbox or radio button is clicked

OnUnSelected

When a Flex/Component is set to its unselected state with a Set Selected action or when a checkbox or radio button is clicked

Project Folder

JS Folder

Delete

Search Component Recently Used (Last 4) Display Items

Section Text Page Navigation

Fields

Image

OnSelectedChange

When a Flex/Component's selected state changes due to a Set Selected action or when a checkbox or radio button is clicked

Tabs

OnSelectionChange

When the selected option in a droplist or list box changes

Line

OnTextChange

When the text on a text field or text area changes, either by a user typing in it or with the Set Text action

Single Line Entry Multi-Line Entry

Flex Only

Number

OnDragStart

Currency

OnDrag

Fires continuously while a Flex is being dragged

Date

OnDragDrop

When you stop dragging a Flex (fires when the mouse is released, not when it stops moving)

Time

OnSwipeLeft

When a Flex is swiped from right to left

Email

OnSwipeRight

When a Flex is swiped from left to right

OnSwipeUp

When a Flex is swiped from bottom to top

OnSwipeDown

When a Flex is swiped from top to bottom

OnScroll

When a Flex with scrollbars is scrolled in any direction

Survey

OnScrollUp

When a Flex with scrollbars is scrolled up

Choice Slider

OnScrollDown

When a Flex with scrollbars is scrolled down

Numeric Slider

onCollapse

Called when the Flex is collapsed.

Table

onExpand

Called when the Flex is expanded.

Drop Down Check Box Select One(Radio Button) Select Many(Check List)

Specialized

Attachment

When you begin to drag a Flex

Button

Table Only

HTML

onAdd

This event is called after an entry is added to the table. The newly added item data is available from the variable itemBO.

Website

onEdit

Called after an existing row is edited by the user. The item that was edited is available from the variable itemBO.

Media

onRemove

Called after a row is deleted from the table by the user. The item that was deleted is available from the variable itemBO.

Timestamp

New Ones

Password

Tabbed Folder only

Link

onTabSelected

Called after a tab is selected.

Payment Integration Form Component (Reference)

Graph

Pie Chart Line Graph Bar Graph Column Graph Doughnut Chart Area Graph

Templates

Custom Preset

Create New Flex Delete Duplicate Hide/Show flex or layers Save Layer as Component Preset

Basic Styles Interactions

all open files

View

Quick Options

Show/Hide Bounding Box Show/Hide Guides Snap to Guide (On/Off) Zoom In

Information Architecture

Zoom Out Fit to Screen or Default magnification values Align Component Options

Canvas

Show Guides

2015 – 2021

85

Low-Fidelity Prototype (Wireframes)

86

Hardik Shiroya

2015 – 2021

87

High-Fidelity Prototype (UI Screens)

2015 – 2021

89

Oklahoma Gas and Energy Engineering and Power

Optimizing user experience for leading U.S. Oil and Gas major.

UI Design UX Design

Oklahoma Gas & Electric is a regulated electric utility company that serves over 750,000 customers in Oklahoma and western Arkansas.

They assumed their current website was not up to the mark and approached us with the request to increase the usability and look & feel. This request was ambiguous and we needed to find the exact issues. We ran analytics, desk research, expert reviews, stakeholder interviews and competitive analysis to define the pain points. We also considered their customer service reports and business diagnostics. Some of the major issues with their existing website were identified as no personalization for different customers, scattered content with no flow or hierarchy, difficult to navigate and broken links, with all the issues incorporated under four categories – Navigation, Content, Functionalities and UI. A revamp was inevitable with such issues on hand, which means shutting down the current website and replacing with a whole new one. The client agreed to take this as a step by step approach.

We delivered a list of solutions that included minor changes with big impact that can be taken care of first and then major changes with major impact in the next phase. Further, we created an information architecture based on the insights, followed up with wireframes and UI, and validating them by conducting a remote usability test with stakeholders.

Website oge.com

90

Hardik Shiroya

My scope of work included:

•

Competition Benchmarking

•

Site Audit, Desk Research & generating insights from Online Analytics Data

•

Generating Insights from Field User Research data

•

Defining and conveying pain points

•

Conceptualizing & designing a flow, in accordance with the insights, in the form of Information Architecture for different stakeholders, and keeping in mind taxonomies

•

Designing a low fidelity wireframes for the important pages

•

Constructing Remote Usability Test

•

Responsive UI design for following the client’s brand guideline

2015 – 2021

91

Consolidated Findings Navigability

Content

• Complex navigation

• Content needs to be

• Difficulty in finding

• Information is not

• Mandatory sign ins

• Inputs fields are not

structure

information

optimized within pages organized correctly validated

• Improve linking Functionalities

UI

• Insufficient options for

• Inconsistent visual

• Sign in/sign up process

• Color composition not

• Missing alerts/

• Internal spacing & font size

• Enterprise search

• Visual engagement needs

user settings

improvement notifications refinement

92

experience balanced

not well defined to be improved

Hardik Shiroya

The principal navigation was segregated according to the three category of users – Residential, Business and Investors. These user journeys proved affective for the company to provide personalized information and utilities.

2015 – 2021

93

94

Hardik Shiroya

2015 – 2021

95

96

Hardik Shiroya

Customer Feedback & Comments “The revised principal navigation for displaying targeted content was found more convenient.

Revised Home page is neat and better with the Quick Links.”

– Karen, OGE “The way ‘Customer Support’ page is laid out would be very useful to customers and help reduce customer calls. The prominent ‘Register’ on the Home Page looks bigger and better now and the overall improvement on initial ‘Signin’ area near hero banner would help reduce customer queries.”

– Tony, OGE “Easier to find information on power outages with revised tab structures. The revised principal navigation segregated as Residential, Business and Investor is good.”

– Brett, OGE “The ‘Auto populate’ functionality while reporting an outage online is very helpful. The revised tab structure on the ‘Ways to Pay’ page makes it easier to look at all the payment options.”

– Susan, OGE “Keeping FAQs as a first section in ‘Customer Support’ is helpful.”

– Bill, OGE

2015 – 2021

97

Streebo Chatbot – Product Design Digital Product

Designing a Voice User Interface (VUI) with all-in-one features.

UI Design

Streebo Chatbot is an AI-powered solution for enterprises that enhances the user experience through engaging and intuitive conversations. The initial product was a result of experimentation by developers and it lacked any professional design aspects. I collaborated with Product Manager and development team to gather the current and future scope of the product, which led to the decision of thoughtful redesigning. I was employed to implement endto-end design processes (UX, UI and Interaction Design) to create a newer and better version of the product.

Website streebo.com

98

Hardik Shiroya

Modules & Features included in the design:

•

Voice Conversation along with Type and Chat

•

Using Avatar of Chatbot to give the bot a human personality

•

Simultaneous Multi-chat

•

Webviews for longer interactions

•

Quick Answers to eliminate confusion & enhance smooth conversation

Giving provisions to use Emoji’s and GIF that defines how do you end or start from the completion of an action. It also aids in analyzing the tone of the user for the bot to reply accordingly.

•

Delayed response animation to avoid hanging the user

•

•

•

Shortcuts and Escape options to avoid breaking the flow

Defined Imagery Style in terms of illustrations, icons etc.

•

Graphical representation of statistical data.

•

Persistent Menu as Hybrid Menu that match user’s mental model of provided functionalities

•

•

Inclusion of actionable interactions (Radio button, Checkbox, Sliders, Selection UIs etc.) as and wherever required.

Facility to insert/attach all media: Photo & video from camera and device, supported formats of documents, locations.

•

Future Roadmap: Video chat and Facial Recognition

2015 – 2021

99

Screen Size Pixel Density Aspect Ratio

: 1334px x 750 px : 100% MDPI : 9:16

background-color: rgb(255, 255, 255); box-shadow: 0px 4px 8px 0px rgba(233, 236, 245, 0.004);

24 64

42

52

40

98

40

38

38

font-size: 16px;

font-size: 24px;

12

font-family: "Nunito Sans"; color: rgb(49, 52, 66);

font-family: "Nunito Sans"; color: rgb(179, 186, 200);

40

font-weight: bold; line-height: 1.2;

line-height: 1.2;

24

text-align: center;

24

37R

37R

28

font-size: 34px; font-family: "Nunito Sans"; color: rgb(49, 52, 66);

28

8R

line-height: 1.2;

37R

24

4

MAX 546

border-width: 2px; border-color: rgb(242, 243, 245); border-style: solid;

28

background-color: rgb(242, 243, 245);

font-size: 28px;

28

font-family: "Nunito Sans"; color: rgb(65, 92, 244);

2

font-weight: bold; text-transform: uppercase; line-height: 1.2; text-align: center;

26

35

50

24 37R 74

38

24

37R

24

37R

border-width: 2px;

28

28 37R

border-color: rgb(65, 92, 244); border-style: solid;

MAX 546

border-radius: 37px; background-color: rgb(65, 92, 244);

border-width: 2px;

font-size: 34px;

border-color: rgb(242, 243, 245); border-style: solid;

font-family: "Nunito Sans"; color: rgb(255, 255, 255);

background-color: rgb(242, 243, 245);

line-height: 1.2;

rgb (65,92,244)

rgb (242,243,245)

rgb (49,52,66)

rgb (179,186,200)

ULTRAMARINE BLUE

ANTI FLASH WHITE

GUNMETAL

ASH GREY

415CF4

F2F3F5

313442

B3BAC8

rgb (86,109,240)

rgb (240,94,86)

rgb (88,188,224)

rgb (59,209,104)

ROYAL BLUE

SUNSET ORANGE

PICTON BLUE

UFO GREEN

566DF0

F05E56

58BCE0

3BD168

Max 410

font-size: 28px; font-family: "Nunito Sans"; color: rgb(49, 52, 66); font-weight: bold; line-height: 1.2;

28

24 8 24

font-size: 24px;

28

34 12

border-radius: 8px;

font-family: "Nunito Sans"; color: rgb(138, 145, 157);

12

line-height: 1.2;

26

background-color: rgb(255, 255, 255); box-shadow: 0px 5px 10px 0px rgba(233, 236, 245, 0.004);

17 46 46

12 108

42

28

37R

54 34

24

17

74 72

font-size: 24px;

background-color: rgb(255, 255, 255);

border-width: 2px;

box-shadow: 0px -2px 4px 0px rgba(233, 236, 245, 0.004);

border-color: rgb(211, 217, 230); border-style: solid; background-color: rgb(255, 255, 255);

font-family: "Nunito Sans"; color: rgb(211, 217, 230); font-weight: bold; line-height: 1.2;

)

rgb (211,217,230)

rgb (138,145,157)

Basic Conversations & Functionalities – Video Link COLUMBIA BLUE

GREY BLUE

D3D9E6

8A919D

rgb (233,236,245)

rgb (255,255,255)

GLITTER

WHITE

E9ECF5

FFFFFF

cutt.ly/zmysdLI

Multi-Chat Mode – Video Link

cutt.ly/5mysjqE

Voice Conversation Mode – Video Link

cutt.ly/5myslvQ

2015 – 2021

101

PNB Housing Finance Ltd. Finance

Designing easy workflows for multi-users to increase productivity and transparency.

UX Design

PNB is a leading Indian company in financial sector and their Housing Finance department’s employees and affiliates were still using paper forms and documents to manage the process of fixed deposits. It was time to go paperless and undergo digital transformation to increase productivity, accounts management and transparency between all stakeholders – Admins, Brokers, Agents and Customers. It was important to study the entire workflow and individual journeys of these users to create an integrated concept.

The major challenge was to break down the FD application process into small steps and its easy and quick completion with success.

Website pnbhousing.com

102

Hardik Shiroya

My scope of work included:

•

Understanding the overall process of fixed deposit account generation and renewals of existing accounts through desk research, competition benchmarking and client feedbacks.

•

Understanding the role of the stakeholders involved in the process: Agent, Broker, Customer and Admin Offices.

•

Designing a well thought user journey considering all the scenarios.

•

Co-ordinating with Business Analyst and creating a step by step workflow in low fidelity

2015 – 2021

•

Suggesting and including all required modules that aids in their business strategy.

•

Designing a sample UI to handover to the visual design team.

•

Reviewing UI design and presentation for client approval.

•

Creating and showcasing interesting and subtle animated interactions and new functionalities for data selection.

103

ADD NEW FD ACCOUNT

PRODUCT DETAIL : Enter Applicant Details, Deposit Details, Broker Code &Branch

CUSTOMER PROFILE : Enter Applicant Details ADD JOINT DEPOSITER/NOMINEE Is the Applicant minor?

NO

YES

Add Guardian Details

YES

Is it a joint Deposit Account

NO

Add max 2 Joint Account Holder

Is any Joint Account Holder minor

Add Guardian Details

NO

Add Nominee

YES YES

Want to Add Nominee

YES

Is Nominee Minor

NO

NO

NO

Want to Add Nominee

YES

Add Guardian Details (if not First Applicant/pre viously added)

SUBMISSION OF FORM : E-Sign max 2 depositors through OTP via Adhaar PAYMENT METHOD: Select Payment Method and Enter Payment Details BACK TO ADD NEW FD ACCOUNT

104

Hardik Shiroya

Splash Animation

Complex Data Selection

cutt.ly/Cmysb1G

cutt.ly/ymyscWF

2015 – 2021

105

Hardik Shiroya