Portfolio 2018

PORTFOLIO USER INTERFACE | USER EXPERIENCE | BRAND | MARKETING

SHUBHAM SHREYA +91 750 755 1066 shubham.graphicdesign@gmail.com

ABOUT Paradigm is an app for investment beginners.

Aimed at the layman, it gives the user the power to manage, save and multiply their money, with a simplistic approach, devoid of finance jargons.

PARADIGM

SCOPE • Research • User Interface • User Experience • Wireframes • User Journey • Task Flows • Visual Design SOFTWARE: Sketch, Adobe Illustrator

Research

User Personas

User journeys

DESIGN PROCESS

Task flows

User Interface (UI) Design

Wireframe

Information Architecture

PAPER WIREFRAMES

Make an investment

User Interface Design

Paradigm believes in letting you create and control your money and give you the power to change your future.

User Interface Design | Details

User Interface Design | Details

User Interface Design | Details

ABOUT This is the design journey of an accountancy software, for a UK based company looking for an entire rebrand of it’s product.

ACCOUNTANCY

SCOPE • Research • Heuristic evaluation • User Interviews • Workshops • User Interface • User Experience • Wireframes • User Journey • Task Flows • Visual Design SOFTWARE: Sketch, Balsamiq, Adobe Illustrator

DESIGN PROCESS

Heuristic evaluation

Ethnographic research

Evaluation & user testing

User profiles & persona

User Interface (UI) Design

Use cases & scenarios

Wireframe

User journeys

Information Architecture

Task flows

Data analysis

Ethnographic research & workshop (London)

Information Architecture (IA)

User profiles

ACCOUNTANTS Language proficiency Domain expertise General education

English: Expert

BUSINESS OWNERS

English: Expert

ADMINISTRATORS

DESIGN IMPACT

English: Expert

• • •

Writing style and level Labelling and layout Alternation versions Documentation, training and help

Expert

Average to Expert

Expert

•

Qualifying degree

General degree to qualifying degree

Qualifying degree

•

Writing style and level Modality Wizards, tool tips Mnemonics, accelerators

General computer knowledge

Tech savvy

Tech savvy

Tech savvy

• • •

Age

25+ years

18+ years

30+ years

•

Font size, color, contrast

Functional, clarity in structure

• • •

UI structure, themes Tutorials, help Detail design, complexity

Expectations

Intuitive interface with clear functions

Easy to learn, helpful for the business

High-Level Wireframes

High-Level Wireframes

High-Level Wireframes

User Interface Design: Setting design language

• • • •

Brand extension by use of colours derived from logo San-serif font with multiple weights, for optimum readability Minimal icon style for clarity Flat UI to keep up with trends and general convention

User Interface Design

User Interface Design

User Interface Design

User Interface Design

ABOUT Disaster Assist is an app built to aid people at the time of disasters - case in point is natural disaster due to floods. It connects help seekers and help providers.

DISASTER ASSIST

SCOPE • Research • User Interface • User Experience • Wireframes • User Journey • Task Flows • Visual Design SOFTWARE: Sketch, Adobe Illustrator

Research

User Stories

Use cases

Wireframe

Information Architecture

User journeys

DESIGN PROCESS User Interface (UI) Design

Task flows

RESEARCH INSIGHTS • First responders are localites. Their knowledge about areas proves most useful • Overflow of supplies in some rehabilitation areas, while others have a lack • Many services and non-experienced help needed in most camps - but volunteers are not aware of the avenues • Theft and security issues • Lot of misguided and haphazard relief efforts

USER INSIGHTS • Reaching a safe zone (mostly home) is top priority. Victims want to know how much time it would take to do so in the current scenario.

• Communication with others about their and own safety is essential • Getting updates on what is happening damage as well as relief efforts

•

Internal groups started forming to tackle the situation, in the case of people who were stranded at public places like offices, stations etc.

• Would have liked prior intimation and action from concerned authorities.

• Localities were forming isolated rescue and help parties

INFORMATION ARCHITECTURE • The help provider can become the help seeker and vice versa. The design is done keeping in mind that the app can be a common platform for both these situations • App uses GPS data to pin-point location in case of emergencies.

• The app sends out a push-alert to all registered users in case of imminent calamities and issues a warning - asking people to turn on the location services. This helps ascertain the locations of the responders and potential victims and the operation zones • App onboarding sensitises users towards various features and when to use them

PAPER WIREFRAMES Homescreen

Volunteer - Services

Volunteer- Main

Services - display

Services - details

PAPER WIREFRAMES Homescreen

Volunteer - Supplies

Volunteer- Main

Supplies screen

Supplies - selected

User Interface Design

User Interface Design | Details

User Interface Design | Details

ABOUT Ivan’s Ice Cream was looking for an app design that would reflect their fun and colourful flavours and appeal to the youth.

IVAN’S ICECREAMS!

SCOPE • User Interface • User Experience • User Journey • Task Flow • Visual Design SOFTWARE: Adobe Illustrator

APP SCREENS

ABOUT The mobile application for a jet-fuel company needed to be redesigned taking into consideration the user’s environment.

JET. SET. FUEL!

SCOPE • User Interface • Visual Design SOFTWARE: Adobe Illustrator

BEFORE • • • •

Cluttered Indistinct Over-use of color Lack of visual hierarchy

AFTER

• • • •

OR

Simplified UI and UX Functional hierarchy of elements Use of icons for aesthetic balance Use of larger buttons with accurate labelling for better usability and accessibility

4

ABOUT Company Lorem was looking for an intuitive dashboard design for their multi-user web app, with customisable widgets and personalisation options.

DASHBOARD DESIGN

SCOPE • User Interface • Task Flow • User Journey • Information Architecture • Visual Design SOFTWARE: Adobe Illustrator

DASHBOARD UI

WIDGET CUSTOMISATION

ABOUT The following are brief overviews of branding projects undertaken at various times with multiple clients.

BRANDS ETC.

SCOPE • Branding • Logo design • Collateral design • Packaging • Marketing TOOLS: • Pen and paper!

• Adobe Illustrator • Adobe Photoshop • Adobe Indesign

Sharp Intelligent Digital Corporate Experienced Professional

Energetic Young Aspirational

Fun Youthful Delicious Unique

IXORA Branding and packaging work for a hypothetical brand Ixora, was featured in a two page spread of the book Infinite Pattern, by Sandu Publications, China.