sb, ux designer - portfolio

39
(Sarah-Beth Zoto, UX Designer)

Upload: sbzoto

Post on 27-Jun-2015

198 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: sb, ux designer - portfolio

(Sarah-Beth Zoto, UX Designer)

Page 2: sb, ux designer - portfolio

In-house creative services department servicing a hospital network of 18,000 affiliated

physicians, nurses, staff and volunteers.

Full-service boutique design firm assisting clients in the professional, retail and

technology industries. !

Marketing and branding agencyspecializing in collateral for the biotechnology, pharmaceutical and medical device industries.

My experience…

Page 3: sb, ux designer - portfolio

Information Architecture Interaction Design

Visual Design Content Strategy

Communications Design Conceptual Design

Brand Strategy

My specialties...

Page 4: sb, ux designer - portfolio

Point-of-purchase packaging system

Continuing education catalog template

Ad campaign to prevent scald injuries

Online classes and events registration

Online classes and events catalog

Physician search & results page

Responsive e-commerce site

Property management inspection app

Library eBook borrowing app

Native Mobile Apps Responsive E-Comm Websites Desktop Experiences Search & Results Pages Packaging Systems Ad Campaigns

My deliverables...

Page 5: sb, ux designer - portfolio

Happy Inspector App software to digitize property inspections.

Project Work with development team to add customize ratings feature to iPad app.

My Role • Information Architecture• Interaction Design• Visual Design!

Case Study

Page 6: sb, ux designer - portfolio

Scenario 1: Joe, a property manager of a multi-family home, is mid-inspection when he realizes the Entry-way Walls could use painting.

Joe selects Walls, then Edit Ratings.

Page 7: sb, ux designer - portfolio

Scenario 1, continued: He updates Fair icon label to Paint and applies this change to Entry Ceiling as well.

Page 8: sb, ux designer - portfolio

Interviews to Task Model: Happy Inspector's in-house customer service and sales teams helped me uncover user goals and process.

Page 9: sb, ux designer - portfolio

Wireframes: Utilized paper mockups to explore various user flows quickly.

Page 10: sb, ux designer - portfolio

Sitemap and User Journey: Determined overall app structure and the Edit Worksheet user flow.

Page 11: sb, ux designer - portfolio

Hi-fidelity Mockups and Animation Specs: Created deliverable to illustrate screen details with associated animations.

Page 12: sb, ux designer - portfolio

Scenario 2: Condo-unit property manager updates an active worksheet by selecting a new Rating Group from the Library and applying it to Walls and Ceilings in the Entry-way.

Page 13: sb, ux designer - portfolio

Scenario 3: Single-home property manager selects a Rating Group from the Library and updates it by creating a custom icon.

Page 14: sb, ux designer - portfolio

General Assembly User experience design course, 2014.

Project Create a mobile app that allows user to search and borrowing eBooks from the library.

My Role • User Research• Information Architecture• Interaction Design!

Case Study

Page 15: sb, ux designer - portfolio

Scenario 1: Margie likes to plan ahead and wants to select a date when the book will automatically download.

Page 16: sb, ux designer - portfolio

GA  Script    FOCUS  Main  question  

● How  is  finding  a  book  on  Amazon.com  better  than  at  the  public  library?  ● How  do  people  find  titles  they’d  like  to  read?  ● How  do  you  decide  if  a  book  is  worth  reading?  ● What  borrowing  process  makes  sense  for  the  library?    SCRIPT  Discovery  

● How  do  you  discover  new  books  to  read?  ● word  of  mouth,  friends,  amaazn  good  reads,  browsing  book  store/libary  ● look  for  in  a  book:  top  best  sellers,  how  they  pop-­up  when  purchase  people  also  also  liked…  ● read  description,  star  ratings,  read  pub  reviews  from  publishers  weekly,  carefully  browse  user  

reviews  (no  spoilers)  ● If  a  friend  recommends  a  book  to  you,  how  do  you  find  the  title?  Where  do  you  look?  (amazon,  

library,  etc.)  ● When  you’re  browsing  a  list  of  titles,  what  information  prompts  you  to  look  further  into  the  book?  

(ratings,    ● If  you’re  researching  a  subject  online,  how  do  you  decide  which  resources  are  most  relevant  ● How  many  books  do  you  read  at  the  same  time?    

Purchase  /  Reservation  /  Borrow  Transaction  ● What  was  your  last  experience  at  the  library?  What  did  you  go  for?  What  did  you  end  up  doing?  ● When  you  visit  the  library,  do  you  ever  ask  the  library  staff  for  reading  recommendations?  ● What  instances  might  prompt  you  to  borrow  a  book  from  the  library?  What  types  of  books  have  you  

borrowed  in  the  past?  (Have  you  ever  checked  at  library  before  you  bought  a  book)    Demo  Tasks  

● Find  2  different  books  to  read  on  a  plane  ride  to    the  weekend  from  a  library  then  on  amazon  ● Find  a  book  in  the  library,  find  a  book  with  a  similar  subject/category  ● Find  a  book  in  amazon,  find  a  book  with  a  similar  subject/category  

Industry Research: Understanding library lending and publishing restrictions provided insight on stakeholder challenges.!!We also uncovered important information about metadata associated with each title.!!User Research: We uncovered data that helped us focus our minimal viable product.

Researched challenges of eBook lending from publisher to library

Created a screener to find people who read eBooks and patronize the library on a regular basis

Conducted one-on-one user research to determine what information people value when searching for books

Results helped us formulate the information hierarchy on the search results and title landing pages

Page 17: sb, ux designer - portfolio

Task Model: General task flow determined based on user research.

Page 18: sb, ux designer - portfolio

Personas

Page 19: sb, ux designer - portfolio
Page 20: sb, ux designer - portfolio
Page 21: sb, ux designer - portfolio

DQM for Vans Independent skateboard shop partnering with Vans to sell limited edition products.

Project Utilize mobile-first approach to create a consistent responsive experience.

My Role • Information Architecture• Interaction Design!

Case Study

Page 22: sb, ux designer - portfolio

Site Map and Scope

Page 23: sb, ux designer - portfolio

Annotated Wireframes with Task Flow

Page 24: sb, ux designer - portfolio

Annotated Wireframes with Task Flow

Page 25: sb, ux designer - portfolio

Sharp HealthCare Hospital system in San Diego, CA.

Project Redesign online catalog of community classes and events.

My Role • Information Architecture• Interaction Design• Interface and Visual Design!

Case Study

Page 26: sb, ux designer - portfolio
Page 27: sb, ux designer - portfolio
Page 28: sb, ux designer - portfolio
Page 29: sb, ux designer - portfolio
Page 30: sb, ux designer - portfolio
Page 31: sb, ux designer - portfolio
Page 32: sb, ux designer - portfolio
Page 33: sb, ux designer - portfolio
Page 34: sb, ux designer - portfolio

Sharp HealthCare Hospital system in San Diego, CA.

Project Add vendor reservation tool to emergency room landing page.

My Role • Content Strategy• Interaction Design• Interface and Visual Design!

Case Study

Page 35: sb, ux designer - portfolio

BEFORE

Page 36: sb, ux designer - portfolio
Page 37: sb, ux designer - portfolio
Page 38: sb, ux designer - portfolio
Page 39: sb, ux designer - portfolio