PORTFOLIO

PORTFOLIO

GanpatiPule, India © Sarvang Mehta photography

SARVANG MEHTA – VICE PRESIDENT UX @ CITI

DOMAIN EXPERTISE: User Centered Design / Usability Analyst / Usability Testing / Information Architecture / Web- UI Design / Responsive Designs / Interaction Designs / Mobile Native & Hybrid App Design / Prototyping / HTML5 / CSS3 / Agile / SharePoint, TeamSite & Typo3 CMS / Illustrations / Branding / Identity Creation / Design Conceptualization / Interactive Media / Product Demos / Passion of Photography

User Experience Designer with strong UI technical knowledge. Being a bridge between Design and Technology Having true passion about User Experience Design, Information Architecture, Usability & UI Web Development. Download my Resume

Love to hear user stories and then convert the stories into tangible ideas. Love to wireframe, design, prototype and convert those thin lines to an valuable User Interface. Overseeing all aspects of User Experience Design from user research, strategy, context scenarios, workflows, sketches, Low & High fidelity prototypes, and user interface specifications, right the way through to end delivery and implementation.

Follow me on Twitter @sarvangmehta

SARVANG MEHTA - UX PRACTITIONER

Hello, I am Sarvang Mehta

User-Centered Design Process “Design Digital Products that Encompasses User Mental Model”

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION The project included defining Strategy & Goals by validating the problem, end user and project goals. Developing or updating target user personas, research into the context of use for products, focus groups, and usability testing for product. Mental Model by User Research, Interviews, Stakeholder Mapping, Competitive Analysis Capture user behavior, pain points, motivations, and needs from contextual inquires. Group into logical pillars. Map out product features for each pillar to identify gaps, opportunities, and feature bloat.

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION Red Route Analysis/Pain points Identifies user's thought process and desired reactions toward each task flow segment. The analysis show the context, problem, user's fears/motivations, and how the problem can be solved.

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION The project included organizing discovery, by User Story Mapping, exploring options, developing Wireframes & Prototypes Storyboards UX, Storyboarding is a tool that helps a user visually predict and discover a product experience. Product is as much a film as a film about how people will use it.

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION The project included organizing discovery, by User Story Mapping, exploring options, developing Wireframes & Prototypes Wireframes Visually communicate abstract concepts with users and team members to generate feedback.

Test & Repeat Test it with Users, Team members & Stack holders. Iteration

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION Internally validated ideas to commit, test with users with Rapid Prototyping or Hi-fi Visuals, Mock-ups or A/B Testing Rapid Prototyping or Hi-Fi Visual Get users involved early in the design process with quick and inexpensive paper prototypes. Uncover usability issues and validate design decisions based on actual user reactions.

UX Process: DISCOVERY – IDEATION – DESIGN – VALIDATION Validate for next iteration after all learning using various methods that are available. Plan for next Iteration, Validate & Learn Get users involved early in the design process with quick and inexpensive paper prototypes. Uncover usability issues and validate design decisions based on actual user reactions.

METHODS Accessibility Usability Testing Feedback Integration Iterative Design Retrospectives Release

MEASURES LEARN

BUILD

MEASURE

KPI’s & Metrics Log files Satisfaction Errors/Clicks Easy of Use or Difficult and more…

Principles of UX Design BE CONTEXTUAL It’s often easy to think of a user journey like a storybook. If you open most books to any given page and select a word, you’ll be met with an abundance of context on the page. You’ll usually see the title of the book, the chapter, the page number, and the word will appear contextually within a sentence, paragraph, and page. Ensure that users are contextually aware of where they are within their journey. BE HUMAN Be approachable, trustworthy, and transparent. Provide human interactions over machine-like interactions. BE FINDABLE Establish a strong information scent. Provide wayfinding signs. BE EASY Reduce the user’s cognitive workload whenever possible. Be consistent and clear, and establish a strong visual hierarchy. BE SIMPLE Establish a strong signal-to-noise ratio. Avoid distractions, jargon, and long loading times.

Expertise & Tools User Centered Design / User Analyst / User Testing / UX Design / Web - UI Design / User Research / Usability Testing / Mobile Sites / Adobe Suite / Prototyping / Wireframing / Axure / Balsamiq / Sketch / Interaction Designs / Information Architecture / JavaScript / JQuery / Bootstrap / Foundation / Design Concept / Agile / eCommerce / HTML5 / CSS3 / Responsive Designs

UX Project Management Skills & Tools: As UX designer’s my responsibility is to deliver the best possible user experience on time and within budget. And when budgets or deadlines are tight, the primary user-centered design tasks, such as user research or usability testing, are unfortunately the first to go. I have learned how to manage the design portion of a project - schedule and budget tasks and set measurable and realistic goals for UX and UX Team – they can ensure that user experience meets project requirements, and thus doesn’t get overlooked.

1

THE RIGHT TOOL TO BRING OUT YOUR INNER PM A big part of effective project planning comes from knowing of which tool to use. As a UX designer with more hands on with the scheduling and organization of a project, There are number of Tools I know but not limited: - Jira - Confluence - BluePrint - TFS and many more…

2

IMPROVING UX THROUGH AGILE PROJECT MANAGEMENT Having working in Agile can bring skills and expertise to well Project Management. Agile breaks down big problems into smaller units and tests and verifies them in regular iterations, a ‘repeatable work cycle’.

3

PROJECT COLLABORATION IS JUST AS IMPORTANT AS MEETING PROJECT DEADLINES Project management not only encourages a flexible workflow, it also stimulates communication and transparency within the team and with the client. Successful projects benefit from top-down and bottom-up communication, so everyone is on the same page with progress, challenges, and achievements, organized and collaborative project management to make sure all work is completed on time and within budget, and collaboration between team members and across departments to bring in more ideas and breed innovation.

WORK @ CITI

Business Goal Build a New Global Manager Experience available across all the Digital Platform Issues • Build a Web App along with an M site or Native app. If Native App then on which platform? IOS, Android or Both? • Cost of Developing and Maintaining M site or Native App • Different features & experience on Web app and M Site or Native app may create frustration with users • The number of Senior management who mostly use iPad expect to have seamless experience My UX Design Proposal • Proposed building Responsive application which has seamless User Experience across all the Devices and Platforms • Educate business and team about Responsive Design Concept, how an Single application can be accessible on different devices • Created working Prototype Demos for Business and team to experience it on actual devices • Keeping most of all the features and services available on Responsive application that would also help jumping to other connected applications Outcome • Business agreed to build a Responsive application but without doing any re-authoring activity • It was just the beginning, it had many challenges…

BYOD Device usage

10%

12%

78%

2%

Desktop/Laptop Tablet Mobile

BYOD Device OS list

16%

IOS Andriod

82%

Others


Work @ CITI Corp


Work @ CITI Corp

Challenge: No Responsive Intranet Brand Guidelines • • • •

Build a new Responsive Brand Guidelines based on existing branding standards Introduced 12 column responsive grid based designs Upgrade existing 5 Page Layouts to work responsively New navigation system for Tablet Portrait and mobile


Work @ CITI Corp

Challenge: No Responsive Intranet Brand Guidelines


Work @ CITI Corp

Challenge: Lightbox • • •

Existing application had many lightboxes and in 3 different sizes. Lightboxes didn’t show good user experience on smaller devices. All the lightboxes were opened as pages on Smart Phones and had breadcrumb to go back to previous pages Few Special features were only available on smart phones like directly calling while interacting with phone numbers


Work @ CITI Corp

Challenge: Lightbox • •

Some of the large lightboxes weren’t fitting Tablet on Portrait mode An intuitive message was shown on such lightboxes to let users know to view it on Landscape mode for better experience


Work @ CITI Corp

Challenge: Accessing linked non responsive applications • •

All the linked application weren’t responsive ready Only on smart phone it was made sure user’s are made aware of different user experience and let them to choose they would like to navigate or not

Achievements

• •

Project got release in June 2016 and got highly appreciation across the global specially the Senior Management love the experience on Mobile & Tablet much better then Desktop/Laptop Pune team was awarded No1 for Q2 2016 for developing the best Responsive User Experience intranet application


Work @ CITI Corp

WORK @ FIDELITY INVESTMENTS

iPad App – Investment Explorer (https://www.fidelity.co.uk/investor/mobile-apps.page) Released in March 2014

My role and responsibilities • • • • • • •

Requirement gathering with business Concept creation Creating wireframes using Axure Developing interactive prototype for Usability testing Branding implementation Defining Interaction Design review in App development

More details available on above link along with intro Video


Work @ Fidelity worldwide investments

iPhone app (https://www.fidelity.co.uk/investor/mobile-apps.page)

My role and responsibilities • • • • • •

Requirement gathering with business Concept creation Developing interactive prototype for Usability testing Branding execution Defining Interaction Design review in App development



Re-launch of Fidelity for Personal investing (https://www.fidelity.co.uk/investor/default-direct.page)

My role and responsibilities •

• • • •

• •

Implement the new brand guidelines which are the new corporate fonts first time on the web effecting the new title hierarchy, New personal investing branded logo, new call to action buttons and brand colours across the site. Developed frontend UI for 28 new custom build Teamsite CMS components to achieve the new look and feel. Implement new CSS only driven mega menu with space for marketing initiatives. Interaction to directly login from the master head. Worked with IAs, Business and other UX designers to achieve product drive IA for better customer experience and easy buying process. This included Card- sorting and Paper prototype. Main worked involved in creating Frontend UI, User interaction and Design reviewer when project went to UAT. Introducing new tools as PathFinder, HeadStart portfolios, Questionnaire to choose accounts, Retirement calculator, FundShop and The Select List.



Retirement calculator – Part of Personal investing relaunch (https://www.fidelity.co.uk/investor/pensions/retirementplanning/planning-tool.page )

My role and responsibilities • • • • •

Proposed the idea of creating a retirement calculator which uses can choose options from In the beginning there was option for only opt in each item once which later got enhanced to 10 times per option Worked with designers to achieve the layout which caters the requirements Build the full frontend UI, User interaction along with the calculation logic as per business Works as good as desktop on touch devices which was highly appreciated by business



HeadStart portfolio tool – Part of Personal investing relaunch (https://www.fidelity.co.uk/investor/pensions/retirementplanning/planning-tool.page )

My role and responsibilities • • • •

Build the full frontend UI, User interaction along with the Portfolio logic and allowing it to customize as per user needs It is build using jQuery and CSS All the content has been feed in though CMS Features includes hash taging for backward and forward movement of tool, jQuery charts, resetting portfolios, portfolio updates, etc.



PartFinder Funds tool – Part of Personal investing relaunch (https://www.fidelity.co.uk/investor/getting-started/thebasics/help-choosing-funds/pathfinder-funds.page )

My role and responsibilities • • • •

Build the full frontend UI, User interaction along with the Sencha developers It is build using Extjs All the content has been feed in though CMS Features includes selection of risk level, risk level questionnaire, Full fund information with option of directly buying in an account or add to the basket.



Fund Supermarket tool – Part of Personal investing relaunch (https://www.fidelity.co.uk/investor/getting-started/thebasics/help-choosing-funds/pathfinder-funds.page )

My role and responsibilities • • •

Build the full frontend UI, User interaction along with the Sencha developers It is build using Extjs Features includes Various types of filter, download, Comparing shortlist, Fund search, share..etc



FundsNetwork Re-branding (https://www.fidelity.co.uk/adviserservices/default.page )

My role and responsibilities • • •

Re-brand the FundsNetwork adviser site with new brand logo, title hierarchy, colour scheme and new look. Full rebranding happened with out a single code change through futuristic layouts which are manipulated through css. Re-branding which can takes months was completed in very short period



Integration of Shopping basket for retail clients (https://www.fidelity.co.uk/investor/default-direct.page )

My role and responsibilities • • • • • •

Worked with UX designers to get the different user journeys and scenarios. Explore the possibilities where user would like to add funds in basket Created high fidelity prototypes for Usability testing and studied the out come to enhance the user experience Defined the frontend user experience of adding and removing funds in cart Developed the full checkout page with various interactions as per business logics Keep enhancing the retailing feature in other various tools like Select list, Fund search, Fund evaluator, etc which all can add funds to cart for single checkout and opening new account, buy new funds in existing account or top up.



[email protected] https://in.linkedin.com/in/sarvang-mehta-b9560b2 @sarvangmehta +91 9871960932 www.uxpractitioner.com

THANK YOU

You can find me at: