Interaction Design Portfolio

Portfolio Abhishu Roy | UX Designer

Introduction I am a User Experience designer who is well versed with interaction design, usability and visual design for web application,software development and e-commerce.

I am armed with strong skill sets, a creative outlook and a professional design education which will allow me to meet the demands of a constantly changing world of technology.

Abhishu Roy | abhishu.roy@gmail.com | +91 8867822982 | +91 9431529695

Understand

Analyze

Create

At Fab.com, I work as a UX Designer for the enterprise Systems of Fab.com and Hem.com which is a subsidiary of Fab.com.

Both Fab and Hem are design centric e-commerce startup, Fab disrupted the market by providing quality designer products at affordable price. Where as hem provides custom designed furniture of superior quality at affordable price , along with off the shelf furniture and home furnishing products

I was involved across multiple project FAB involving all the sections of Fab backend Enterprise tools. That is CMS Content Management System, WMS Warehouse Management Systems broadly.

Also worked on enterprise System Of Hem that includes order management System, Producer/ Supplier Portal and Custom Furniture Backend.

Warehouse Management Systems This is one of the core system of any e-commerce company, this the heart of the e-commerce system were things like procurement logistic supply chain etc plug in.

I worked on a project which was part of this massive well built system which came to the team like a challenge. We wanted to reduce the time taken in between by our warehouse workers to look at a order, find it in the warehouse, pack it, bill it and hand it over to the shipping company.

Challenge here was to figure out were to pull the time out of this already super fast process. This involved detailed study of the process and observation. The solution we came up was automated system of packing box suggestion system which negates our user from wasting time to select the packing box that would best suite the order size. Consequently resulting in faster shipping.

NOTE : The following presentation shows only the final screens and glimpse of the workflow , as per the NDA .

Challenge The major constrain for this particular project was not only the physical process but was also a technical challenge. The device being used by the warehouse workers ran on windows I E. Which restricted many ways like using transparency or drag n drop for example.

Logout

Box Suggestion

Box Name

Units

Bins

Option 1

2

3|4|7

Option 2

3

2|11|14

Option 3

1

13

Option 3

4

Exception

Logout

Neque porr o quisquam est qui dolor em ipsum quia dolor sit amet.

Bin 1 2

Bin 1

Bin 3

Bin 6

1|2|2|5|6|12 | 15|16

Back Home

Next

Done Home

Internationalization The Fab business was based out of two separate domain Fab.us and Fab.eu that was though identical but served different geo and were based out different backend systems. The project was technologically n UX wise focused to unify both into one domain as well as a single backend.

At the heart of this was content localization process which touched almost all the systems of the content management system. The heart of this was a unified content editing and creation tool which would support the entire content localization process.

This was developed based on a previously existing content editing tool which sat within the Fab CMS.

NOTE : The following presentation shows only the final screens and glimpse of the workflow , as per the NDA .

Hem is home in Swedish, hem.com is a subsidiary of Fab.com. This company is mainly focused on custom designed furniture, lighting and home furnishing Both Fab and Hem are design centric e-commerce startup, Fab disrupted the market by providing quality designer products at affordable price. Where as hem provides custom designed furniture,lighting and home furnishing of superior quality at affordable price , along with off the shelf products.

I got chance to work for hem as founding team member and was given the responsibility of designing the custom furniture backend that would essentially support the consumer facing configuretor at the hem main website. Along with the order management system and producer portal.

Custom furniture backend This was one of the most challenging project, in terms of its size and complexity i have worked so far. This was completed in a record time of 100 days. The requirement was to device a system that would form piece by piece various basic parts of a furniture, such that it can be associate with all the possible combinations of material and finishes that could be physical produced by our manufacturing team.

Along with that since these furniture were destined to be modified and reinvented by our consumers, it had to take care of the max and min point until which it could be modified and calculate the price based on that.

This was a mammoth UX excise as it had to cater a range of internal and external users this project though has been launched in September 2014 is still a work in progress because of its complex nature.

NOTE : The following presentation shows only the final screens and glimpse of the workflow , as per the NDA .

Order Management System This Particular tool sits within the backend system, It is the most regularly used tool out off all the tools available in the backend. All the orders that consists of custom furniture orders that are placed in our front end along with our manual orders and B2b orders are processed through this particular tool.

Key function that happens here are producer allocation, production tracking, reclamation,manual orders and customer communication. It handles 3 different user set namely the manufactures via producer portal which is a sister portal,Hem admins/customer care for order management along with logistic handshake after which our it is handled by our cross docking management system.

NOTE : The following presentation shows only the final screens and glimpse of the workflow , as per the NDA .

Responsive Content Creation Tool With Hem.com we steeped into a fully responsive design and all our content and site assets had to primed and handled specifically. This was a time consuming task from the site curation perspective for an e-commerce site, that’s is one reason most off the e-commerce site have there site and mobile experience separate.

UX team noticed a opportunity in this, the site being responsive, was based upon grid system intensively. Cashing on the fact we decided to build a tool which has pre built templates site page were our admins can just go and fit in content saving development time on coding each time we wish to add new content.

Due to the size of the project and shorter time line this was handed in parts by different UX designer working together. I got the responsibility of understanding and design how a user would create a page other parts were how the user would narrow down to the part of the website n over all architecture and the remaining part was live preview.

NOTE : The following presentation shows only the final screens and glimpse of the workflow , as per the NDA .

Adobe Internship At Adobe XDI, I was part of the e-learning team as an interaction designer intern.

I was responsible for Adobe Presenter, which is a plug-in for Microsoft Power point.

It was undergoing a UI/UX redesign cycle.

The task in hand involves complete redesign on the ribbon and various other work flows originating from the ribbon like Quiz interaction, settings, inserts, etc and visual design up gradation to match up with the new Microsoft metro styling (Office 2013).

I was also part of an internal project, which aimed at developing an iPad application that enables content creation.

Adobe Presenter Adobe presenter is one of the legacy product of

content into video presentations, product

Adobe. It has been in the market for close to 10

demonstrations, training videos, and more on

years the current version available in the market

your own, right at your desktop.

was 9.2 version .

Get feedback by including quizzes and surveys.

Adobe Presenter is a plugin to MS Powerpoint

Publish

and helps you to easily create professional-

mobile devices, and track performance using

quality videos by capturing both yourself and

integration with LMSs.

to

video

portals,

your screen with a few clicks. Turn passive

NOTE : The following presentation shows only the final screens, as per the NDA .

desktops,

and

This is a screen shot of the existing UI Version 9 and close-up view of the ribbon the main interaction component

This is the final Proposal Version of the new design.

Before

After

Expresso A white board experience for ipad ,My Role -App icon and splash screen -Beta user testing help screen -Landing page and related workflow -New project creation workflow -Deletion workflow -Append workflow -Export workflow -Creation page and related workflow -Asset usage workflow - Record mode asset workflow - Pause mode asset workflow -Defining the hand gesture control

NOTE : The following presentation shows only the final screens, as per the NDA .

Visual Design Samples from Adobe Experience.

Teamgrid TeamGrid is a comprehensive People Management Application platform from Infologitech Systems (P) Ltd. The core offering is a cloud based platform that delivers People Management Solutions (PMS) seamlessly over conventional computers, Smart Phones, Tablets and Systems. TeamGrid leverages the latest cloud and mobile technology to offer such seamless solutions.

Design Brief Redesign the Logo and the Website keeping in mind the core values like value for money, accessibility and ease of use.

The new design has to be such that it does not make the current user feel alienated. This is because it is it is a product which is already in market and has a large user base. So it should not feel completely new.

User Persona It constitutes of a brief description on how the specified user type would use the product’s features. This helps in understanding the actual users more rationally.

User seem more real and are worth referring to during development.

Task Flowchart This gives us an over view of the tasks performed or expected behavior of the users in the website chronologically.

This helps driving various design decisions at various stages of development.

Mood Board It is a collection of images which allows to understand the complete ecosystem on which the product under development will work.

It is designed to be as close as possible to the real time scenarios so as to drive the development in the right direction.

Brain Storming This Activity helps organizing all relevant data and giving it a structure. All the major design decisions are taken in this stage and the initial wire frames are conceived .

Seamless people management system

HOME

ABOUT US

CONTACT US

DEMO

SIGN IN

SOCIAL NETWORK TABS

Seamless people management system

HOME

ABOUT US

CONTACT US

DEMO

SIGN IN

Comprehensive People Management

Application platform LORUM IPSUM

Feature

Feature

Feature

Feature USP

Feature

LORUM IPSUM

LORUM IPSUM

LORUM IPSUM

Feature

Feature

DOWNLODE BROCHURE

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

commodo metus vel odio vehicula

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

diam porta nec dignissim nulla

diam porta nec dignissim nulla

Feature

Feature

Feature

Lorem ipsum dolor commodo metus vel odio vehicula dapibus. Sed venenatis, libero ac imperdiet convallis, magna lorem facilisis est, quis commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec diam porta nec dignissim nulla

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

commodo metus vel odio vehicula

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet Lorem ipsum dolor Lorem ipsum dapibus. dolorSed venenatis, libero ac imperdiet convallis, magna lorem facilisis est, quis convallis, magna lorem facilisis est, quis sit amet, consectetur adipiscing elit.

Phasellus sit amet, consectetur adipiscing elit. Phasellus commodo purus ipsum vitae elit.Integer commodo metus vel odiocommodo vehicula purus ipsum vitae elit.Integer commodo metus vel odio vehicula enim nibh, facilisis a blandit a,cursus enim nibh, facilisis a blandit a,cursus dapibus. Sed venenatis, libero ac imperdiet dapibus. Sed venenatis, libero ac imperdiet in lectus. in lectus. Donec interdum velit nec convallis, magna lorem facilisis est,Donec quis interdum velit necconvallis, magna lorem facilisis est, quis diamelit.Integer porta nec dignissim nulla diam porta nec dignissim nulla commodo purus ipsum vitae commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

diam porta nec dignissimLorem nulla

convallis, magna lorem facilisis est, quis commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec diam porta nec dignissim nulla

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

commodo metus vel odio vehicula

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

diam porta nec dignissim nulla

diam porta nec dignissim nulla

ABOUT US

Contact Us

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

diam porta nec dignissim nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo metus vel odio vehicula dapibus. Sed venenatis, libero ac imperdiet convallis, magna lorem facilisis est, quis commodo purus ipsum vitae elit.Integer enim nibh, facilisis a blandit a,cursus in lectus. Donec interdum velit nec diam porta nec dignissim nulla

FORM

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

sit amet, consectetur adipiscing elit. Phasellus

commodo metus vel odio vehicula

commodo metus vel odio vehicula

commodo metus vel odio vehicula

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

dapibus. Sed venenatis, libero ac imperdiet

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

convallis, magna lorem facilisis est, quis

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

commodo purus ipsum vitae elit.Integer

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

enim nibh, facilisis a blandit a,cursus

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

in lectus. Donec interdum velit nec

diam porta nec dignissim nulla

diam porta nec dignissim nulla

diam porta nec dignissim nulla

Contact Us FOOTER

This allows for greater flexibility for making

dapibus. Sed venenatis, libero ac imperdiet

ipsum dolor diam porta nec dignissim Lorem nulla ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet, consectetur adipiscing elit. Phasellus

Lorem ipsum dolor

Wire frames act as the primary framework for interactions and visual design.

ABOUT US

sit amet, consectetur adipiscing elit. Phasellus

Wireframing

Lorem ipsum dolor

changes and performing evaluations. It also offers near-actual-product. Experience.

Prototype High fidelity prototypes enables product teams to analyze and comment on the technical feasibility of the design. It gives the designer an idea of what the product will look like eventually.

Oneorbit Oneorbit is a web based solution for school management, housing society management and clinic management; Each of these web based applications have two major feature, operation management and communication management with the consumers.

It is based on a common interface for the users/ customers to access services from multiple entities. The interface is being built in such a way that we can add additional businesses to the portal on an ongoing basis.

The primary idea being that the consumer continues to use a single interface to reach multiple

entities.

Each

of

the

additional

business will use the common core of ‘Customer communication management’ and only the required ‘Operations management’ functionality specific to that business will be built. Over the years, the portal will develop into a place where customers will receive services from multiple entities with a uniform experience as per their preferences.

Design Brief Create a user interface based on the idea of creating a web based application for schools.

This should be based around a common interface for users to access services from various entities. The interface has to be designed in such a way that new business can added to the existing businesses in the portal on an ongoing basis.

The primary idea being that the consumer continues to use a single interface to reach out to multiple entities.

The logo design has to be such that it feels approachable, user-friendly and inexpensive. It should graphically represent something that integrates different entities into one platform.

Social Network

Branding

BUCKETS

CONNECTIONS Social Network Branding

ID No Grants Given

Grants Wife Daughter Son Uncle

No Grants Given

Lorem ipsum dolor sit amet,

Wife Daughter Son Uncle

Psssword

consectetur adipiscing elit.

LOG IN

Sign up

No Grants Given

No Grants Given

No Grants Given

No Grants Given

No Grants Given

No Grants Given

Edit Grant List Name

Mobile No

App 1

App 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Give Grants

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Relationship

More .........

FOOTER

App 3 More .........

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

More .........

About Us

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

Last updated in October 2014

Thank You

Abhishu Roy | abhishu.roy@gmail.com | +91 7757045411 | +91 9431529695