tithi jasani_ux portfolio

TITHIJASANIUSER EXPERIENCE DESIGN PORTFOLIO 2016

User Experience Designerharvard business school publishingEstablished UX design as the first stage of all web and mobile software developments, instituting a user-centered design approach for the company’s higher education department. Worked with content and development team to manage multiple projects and design phases using agile project management, maintaining WCAG 2.0 standards. Conducted in person user testing and created wireframes and high fidelity prototypes.

Freelance UI/UX DesignerfeebboManaged a full redesign of the company website. Chose images, color schemes, and writing copy. Rapid prototyping iterations included wire-frames for both mobile and desktop. Created functional interactive mock-ups for developers using InDesign.

Student Design Advisorenterprise works incubator uiucFacilitated brainstorming sessions with start ups such as ElectronInks and Intelliwheels to find innovative solutions. Provided industrial and UX support to various teams, ranging from concept development to packaging and user stories to clickable prototypes.

Empathic Designersource america design challengeDeveloped a new product for assisting paraplegics with typing. Collaborated with organizations that cater to the differently abled to understand the target user using empathic modeling and user testing. Placed fourth at the national level.

Freelance Graphic Designerpivot mediaRemotely communicated with clients to develop custom advertisements and marketing collateral.

Industrial and Graphic Design Internillinois sustainable technology centerDeveloped numerous product concepts through sketching, prototyping, and modeling for O’Hare International airport. Consulted and assisted graphic design team to create posters and decals.

10/2013 – 05/2015 Champaign, IL

09/2014-05/2015 Champaign, IL

06/2014 – 04/2015 Washington, DC

05/2014 – 08/2014 Champaign, IL

09/2015 – Present Boston, MA

07/2015 – 09/2015 Boston, MA

professional experience

BFA in Industrial Designuniversity of illinois, usa

mit institute of design, india2011 – 2015

Graduate Level Classes harvard university, usaSustainable Product DesignHuman Factors in Information System DesignSummer 2015

education

SoftwareSketchApp, Axure, InVision, Zeplin, InDesign, Photoshop, Illustrator, Solidworks, KeyShot, Sketchbook Pro, Premiere Pro, Keynote

MethodologyUI/UX, Wire-framing, Usability Testing, Empathic Modeling, Concept Sketching, Digital Rendering, Rapid Prototyping, Woodworking, Metalworking

skills

uxpa bostonMember08/2015 – Present

industrial design society of americaSenior Mentor08/2013 – 05/2015

design for americaIndustrial Design Advisor10/2013 – 05/2015

involvement

2 | Resume

User Experience Professionals of America (UXPA) Boston Conferencehttp://conference.uxpaboston.org/Annual user experience conference, faciliating talks and collaboration between people in tech, design and business around the Boston area.

MIT Hackathonhttp://hackingmedicine.mit.edu/Weekend hackathon focusing on tackling a white space in the medical industry. Each team was a mix of a designer, engineer, medical professional and business head.

Boston Design Weekhttp://www.bostondesignweek.com/Remotely communicated with clients to develop custom advertisements and marketing collateral.

Think Chicago Tech Conferencehttps://www.chicagoideas.com/special_programs/thinkchicagoTech and design networkorking event for the midwest USA. Encompased talks from prominent heads of companies such as CISCO.

UIUC Incubator Design Weekhttp://researchpark.illinois.edu/enterpriseworksConducting workshops on design thinking with start-ups enrolled at the incubator, and trying to iron out user needs and processes.

Usability Testing Workshophttp://colaburbana.com/Understanding the basics of user testing at companies-how to manage cost and time, making a script, talking to the user and data analytics.

05/2015 Chicago, IL

03/2015 Champaign, IL

03/2016 Boston, MA

10/2014 Champaign, IL

04/2016 Boston, MA

04/2016Boston, MA

events attended

Resume | 3

http://conference.uxpaboston.org/

http://hackingmedicine.mit.edu/

http://www.bostondesignweek.com/

https://www.chicagoideas.com/special_programs/thinkchicago

http://colaburbana.com/

This portfolio demonstrates my work as a user experience designer at Harvard Business School Publishing, Boston.

Click on each title to navigate to the project

Software for building personalized tests

eReader for viewing business cases online

Self-assessment tool at the end of every reading

Interactives to understand complex concepts

Visual design samples for marketing

HBP TEST BUILDER

HARVARD E-READER

PRACTICE QUESTIONS TOOL

INTERACTIVE ILLUSTRATIONS

MARKETING COLLATERAL

01

02

03

04

05

4 | Table of Contents

STRATEGY(Defining the problem, Roadmap)

RESEARCH(Interviews, Observation)

Project Start

ANALYSIS(Personas, Task Force, Current State)

INTERACTION DESIGN(Sketch, Lo-Fi Wireframes, Prototypes)

VISUAL DESIGN(Mockups, Style Guide)

UI DESIGN(Hi-Fi Prototypes, Spec Documents, Stamdards)

PRODUCT PLANNING(IA, Target State, Moodboards)

MY UX JOURNEY

HBP TEST BUILDERSoftware for building personalized tests

6 | HBP Test Builder

THE BRIEF

Building a web-based platform for educational professionals, such as professors, teaching assistants and staff to create detailed assessments that can be delivered to students via an LMS (Learning Management System) such as Blackboard, or as a Word document.

Questions in the tool are pulled from a repository of readings and can be further sorted, rearranged, copied and edited. Each assessment or test should be saved for further use.

The tool should have two versions-front facing for professors, and the back-end for staff and developers to add questions into the repository.

Softwares used: Axure for mock-ups, SketchApp for visual design, QuickTime player for user testing.

My role:

1. Doing preliminary research by talking to users about the pain points in assessment building.

2. Building personas based on research.3. Creating low and high fidelity wireframes and prototypes.4. Testing with internal and external users.5. Creating a functional spec for developers.6. Creating the visual design along with graphic designers.

HBP Test Builder | 7

STEP 1 - UNDERSTANDING THE USER

The biggest challenge of this project was to get into the minds of the user and understand their needs. After numerous surveys at Harvard, two user personas were created.


STEP 2 - USER FLOW

The next step included creating detailed user flows based on the personas, covering all possible pathways to achieve a single task.


STEP 3 - LOW FIDELITY PROTOTYPING

It was now time to start creating a very basic interface using the information derived from the user flows. This was done using paper, and testing it out with users inside the company.


STEP 4 - TESTING THE PAPER PROTOTYPE

The paper prototype was thoroughly scrutinized by using it under different user scenarios. After receiving feedback, specific pathways through the tool and modifications were made.


STEP 5 - BACKEND DEVELOPMENT

A sitemap was created to enable developers to start creating the basic architecture of the tool to ensure launch deadlines were met.


STEP 6 - WIREFRAMING

Using the results from this back and forth of paper prototypes, wireframes were created. At this stage, focus was given to navigation through the tool.


STEP 7 - TESTING THE WIREFRAMES

A clickable prototype was created using Axure to test out the wireframes with a focus group. Results were then used to improve the wireframes and redesign.


STEP 8 - VISUAL DESIGN

Working with a graphic designer, visual designs were created for each page of the tool, defining interaction states and transitions. The Harvard branding was kept in mind.


STEP 9 - TESTING AT A USABILITY LAB

The tool was developed, and then tested with various real users at a usability lab, using softwares such a Mor and Quicktime.


STEP 10 - TADAA!

After getting user feedback, alterations were made to the software before launching the product at various universities.


HARVARD E-READER

18 | Harvard eReader

eReader for viewing business cases online

THE BRIEF

This reader enables business students at Harvard and other universities to access cases and readings online, and use different functions such as highlighting and annotating, searching through the publication and viewing it offline. To begin, we studied current reader apps such as Amazon Kindle and iBooks to understand pain points.

The main purpose of the reader is to discourage students from distributing documents to students who have not paid for them, and also to discourage the use of paper. The reader can be accessed on any device such as a desktop, tablet or phone, and the sync feature allows the student to sync notes across all devices for easy access.

The entire UX process was followed for building this reader, but only the final design samples have been added to this portfolio.

Softwares used: Axure for mockups, Adobe InDesign for visual design, Morae for user testing.

Harvard eReader | 19

My role:

1. Studying existing readers to pinpoint white spaces.2. Building user personas and wireframes.3. Building a clickable prototype for a focus group at Harvard.4. Final design and spec.

OPENING UP

The reading opens up on the first page, as a part of a browser tab.


CLEANER READING EXPERIENCE

After three seconds, the header and footer bars disappear so that the user can focus on the actual text of the reading without getting distracted.


ACCESSING CONTROLS

By hovering at the bottom or top of the window the controls can be brought into view again. The first time a user does this, a tutorial begins. This can be skipped.


ANNOTATIONS

The most important part of the electronic reading experience is being able to take notes and sync them across devices. Text can be highlighted and sorted based on color.


SEARCH

Another important feature of an eReader is being able to search efficiently. The reader shows you the exact location and word highlighted.


OFFLINE AND PRINTING

All the other settings are collaped into one menu. The main functions inside this are offline viewing and printing. We want to discourage printing and is therefore less easily accessible.


NOTES

Notes can be accessed and sorted from the controls on the header bar. They can also be accessed by clicking on an existing highlighted note.


OTHER SETTINGS

Font size, color blind assistance and other features like managing offline content can be found here.


RESPONSIVE DESIGN

Readings can be accessed on any device. Controls can be accessed by swiping up or down on the screen. Annotations can be switched on by tapping the icon at the botton right to avoid confusion.


ACCESSING OTHER FEATURES

These features can be accessed similarly on the desktop by tapping the icons on the header bar.


PRACTICE QUESTIONS TOOLSelf-assessment tool at the end of every reading

30 | Practice Questions

THE BRIEF

The aim of this project was to create a tool which students could use to test themselves at the end of every reading. This tool is not graded, and is only used for self assessment. The data derived from this tool is used for data analytics on the back end to understand behavior patterns.

The focus of the interface was given to the questions itself, easy to access and answer and easy to see view the solution. Certain questions can be refreshed multiple times to change certain values. Challenge questions are also marked accordingly.The student should be able to move between sections of the readings with ease, and see their progress at all times. They can go back to the home page for feedback.

A responsive design was created for ease of access, and students often have time while commuting or on the go where they would like use this.

Softwares used: Sketch for prototyping and visual design, Invision for clickable prototypes and testing.

My role:

1. Looking at current apps for self assessment, such as the GRE. 2. Conducting surveys with students regarding what they would

want in such a tool.3. Shortlisting features based on budget and creating wireframes.4. Testing with users.

Practice Questions | 31

Home screen

Reading title

Instructions

Top level navigation


Expand menu

Hover


Status bar

Active form field

Activebutton state

Navigation between questions


Submit changes to solution

Highlighted for connection

Regenerating value highlighted

Highlight disappears after 1 sec

Navigation back to home


Solution box aligned with

answer

Can be moved to see input


Represents a challenge

question

Shows section name on hover

for ease


Extra information about the

reading upon clicking the

ibutton


Reading Title

Home screen

Instructions

Swipe up to see more sections


Expand to see questions


Navigation between

each section

Disabled untill attempt

Challenge question

Questions are clickable

Status of last attempt



Expand to see questions

Swiping down opens preview and

status of questions

Background is greyed out


Highlight for attention

Feedback

Selected state

Submit button becomes active


Can be closed or can move forward

Refresh

Two colors for instant feedback

Solution box slides up


INTERACTIVE ILLUSTRATIONSInteractives to understand complex concepts

44 | Interactive Illustrations

THE BRIEF

Certain concepts, such as complex financial algorithms and accounting information, can be hard to understand just by reading about them. This product helps supplement this information by creating interactive elements that students can play with to understand these concepts. These illustrations are scattered throughout different readings and can be accessed online.

The first interactive ideas come from the authors, who describe in words what they are envisioning. They are then passed on to the content team who mock up the ideas into very basic shapes with the help of the UX team. After this, these mockups are refined to form elegant visual designs and are tested with users.

Softwares used: Microsoft Office for mock-ups, Adobe Illustrator for design.

My role:

1. Meeting with content team to understand each business concept to device a basic mockup.

2. Converting the mockup to wireframes and resending it to the author.

3. Crearing a style guide to follow across all interactives that matches the branding of the company.

4. Creating responsive design.

Interactive Illustrations | 45

FINAL DESIGN EXAMPLES


MOCK-UP EXAMPLES

#212

Linear Combination of Two Random Variables

Expected Value of Z

15%

5%

25%

10%

20%

3%

6%

12%

15%

0

9%

0 0.20 0.40 0.60 0.80 1.00

00 0.20 0.40 0.60 0.80 1.00

13.92%

E(Y)

Standard Deviation of Z

Correlation between X and Y (ρx,y) Value of w

0 1-1 +1

σy

σyσy

E(X)

0.55

10.40%E(Z)

0.3

Let X and Y be random variables, and Z=wX+(1-w)Y

σz= w2σ2x+(1-w)2σ2

y+2w(1-w)σxσyρx,y

= 0.552×400+(1-0.55)2×169+2×0.55×(1-0.55)×20×13×

= 0.55

0.55

Expected value of X: E(X)=14Expected value of Y: E(Y )=6

Expected Value of Z

E(Z)=wE(X)+(1-w)E(Y)=0.55×14+(1-0.55)×6=

Variance of X: var(X)=σ2x=400

Variance of Y: var(Y)=σ2y=169

Standard Deviation of Z

Standard Deviation of X: var(X)=σ2x=20

Standard Deviation of Y: var(X)=σ2x=13

10.40%

0.3

13.92%


MOCK-UP EXAMPLES


MARKETING COLLATERALVisual design samples for marketing

50 | Marketing Collateral

ACADEMIC DOCUMENT

A document sent out to professors, to help them discourage students cheating by finding case solutions online. The information needed to be clear and precise, and presented in a way that was quick to grasp.

2

Online Case Solutions

Susan Harmeling February 2016

Susan Harmeling is Associate Professor of Management at Howard University in Washington D.C. and Founder and Principal of the International Case Method Institute (ICMI) LLC. She holds an MBA from the Harvard Business School and a Ph.D. in Entrepreneurship and Ethics from the University of Virginia. Susan is also a facilitator of the Harvard Business Publishing Case Method Teaching Seminars.

Marketing Collateral | 51

PROCESS INFOGRAPHIC

This infographic was created for the marketing team to demonstrate to the stakeholders strategies used inside the company.

52 | Marketing Collateral

MARKETING STRATEGY PRESENTATION

This presentation was used by the marketing department to illustrate usage of different softwares like SalesForce in a very simple and effective manner, for people who are unfamiliar with them.

Marketing Collateral | 53

CONTACT:

[email protected]/in/tithijasani

Portfolio - www.tithijasani.com

THANKYOU

http://www.linkedin.com/in/tithijasani

http://www.tithijasani.com