MSN.COM - FOOD AND DRINK

Transcription

1 SACHIKO KUWABATA 305 BELLEVUE AVE. E. SUITE 403, SEATTLE, WA SACHIKO.KUWABATA[AT] GMAIL.COM SACHIKOKUWABATA.COM/IMAGES/PORTFOLIO_PRESENTATION_WEB.PDF

2 MSN.COM - FOOD AND DRINK PROJECT: Redesign of Food and Drink page on msn.com 2 URL: ROLE: I contracted as a Visual designer to join a team to help specifically build the Food and Drink vertical within MSN.com. I worked collaboratively with my UX lead designer side by side to update the look and feel of the Food and Drink vertical and create new UI/UX, as well as making it to multi platform design such as Tablet and Mobile experiences. WEB - HOME

3 3

4 4

5 Phone - examples 5

6 CHANGEPOINT 6 PROJECT: Visual/Interaction/UX updates on cloud based software to ensure the brand is aligned with the recent merging of the companies ROLE: Update UI Visuals and UX/Interaction solutions for additional functions on the cloud based project portfolio management software. I was hired as a visual designer with a set of extended wings as interaction/ux designer to join the team. PROBLEM: The team was mostly made out of engineers. The design of the product had not been updated since it was created 10 years ago. And over time, the UI/UX designs were kept updated by the engineers and was not consistent nor carrying the brand anymore. DAPTIV COMPANY MERGED TO BECOME CHANGEPOINT OLD UI EXAMPLES SOLUTION: I helped updating UI and some UX/interaction to match the brand refreshment, create consistent style throughout the product, daily communication with engineering team to create new CSS style for the whole site, also to create new design for new functions. 1. Creation of UI style guide 2. Re-set Typography, Color theme, 3. Re-construction of main nav, reconsider information architecture 4. Overall visual updates to create clean, modern UI, by removing old elements such as chromes, shadows, gradients, transparents 5. For new functions/screens, create markups and have user test 6. Help develop the agile environment within the team to sync up and constantly communicate as product updates/re-design is processing 7. Review user test/research and update accordingly

7 NEW UI EXAMPLES REDLINES EXAMPLE 7

8 NEW UI EXAMPLES Detail Cards 28 px Profile Image 2px 3px 4px 5px 8px 10px Individual Resource Detail Card Click name of individual resource Contains (Name) (Type) Skills Resource Manager Allocated hrs Unsent hrs Pending hrs Scheduled hrs Actual hours Total Requirement hours John Lennon Type: Developer Manager: Afton Jeffersondaryisaoknowatouhon Skills: CSS, HTML, JavaScript Total Allocation Total Unsent Total Pending Total Approved Total Scheduled Total Actual Arial-Bold Font-Size: 12 px Color: # px line: #00b4ff Font-Family: Arial, Bold Font-Size: 12 px Color: # Font-Family: Arial, Regular Font-Size: 12 px Color: # px line: #CCCCCC Font-Family: Arial, Bold Font-Size: 12 px Color: # Font-Family: Arial, Regular Font-Size: 11 px Color: # px dotted line: # px 300px 22px John Lennon 16px Type: Developer H: 18px Manager: Afton Jeffersondaryisaoknowatouhon Skills: CSS, HTML, JavaScript Total Allocation Total Unsent Total Pending Total Approved Total Scheduled Total Actual H: 38px H: 8px H: 28px H: 28px H: 28px H: 8px H: 8px H: 18px H: 20px H: 20px H: 20px H: 8px H: 20px H: 8px H: 20px H: 8px H: 8px Round corner radius: 3px background: #ffffff 1px line: #cccccc 1px line: #cccccc (Manager: Venetia Chew) Arial-Bold, italic Font-Size: 12 px Color: # (Manager: Venetia Chew) Type: Developer Type: Developer Total Allocation Total Allocation Total Unsent Total Unsent Total Pending Total Pending Total Scheduled Total Scheduled 2px 3px 4px 5px 8px 10px Total Actual Total Actual No Manager indicator Loading indicator Text wrap Sachiko Kuwabata Type: Developer Manager: (None) Skills: CSS, HTML, JavaScript Total Allocation Sachiko Kuwabata Type: Developer Manager: (None) Skills: CSS, HTML, JavaScript Total Allocation Joselyn Tokashiki Engstrom and Long Long Long Long Name Type: Developer Manager: Afton Jeffersondaryisaoknowatouhon and when name is long it wraps at 18px line spacing Skills: CSS, HTML, JavaScript 22px 18px 16px 18px 18px 18px 18px 56px H: 8px H: 28px H: 28px H: 28px Total Unsent Total Pending Total Approved Total Scheduled Total Unsent Total Pending Total Approved Total Scheduled Total Allocation Total Unsent Total Pending Total Approved Total Actual Total Actual Total Scheduled Arial, Regular Font-Size: 12 px Color: # Spinner: 16px height Total Actual Link styles: hover: #00B4FF Positioning within Resource Column Resource Plan Submit Requests Update Resource Plan Submit Requests Update Today Options Resources 5/5/15 5/5/15 Resources 5/5/15 5/5/15 5/5/15 5/5/15 5/5/15 Developer 240 Align 240 Developer Total Total John Lennon Paul McCartney H: 8px 9999 John Lennon John Lennon Paul McCartney Remaining Type: Developer 9999 Remaining Manager: Afton Jeffersondaryisaoknowatouhon Skills: CSS, HTML, JavaScript Total Allocation Total Unsent Total Pending Total Approved Total Scheduled Total Actual

9 TEDXTOKYO WEBSITE PROJECT: TEDxTokyo website redesign 9 URL: ROLE: Joined the TEDxTokyo media team in October as a volunteer communication designer. 1 designer (me) and 1 engineer to collaborate closely to start/finish this project. I created the design concept, sitemap, wireframe, exploration of design, design comps, redlines, style guide with icons set to hands off to the engineer. site-map wireframe user experience visual design execution icon design redline creation style guide creation top talk video speaker detail

10 about news events event landing 2013 event speakers

11 MLA / AUSTRALIAN BEEF PROJECT: MLA website redesign 11 URL: not yet published PDF INTERNAL PRESENTATION: ROLE: Adopted the site-map fand research report from the agency to create a complete redesign of their website yet stay within the brand look and feel. Creation of wireframes for few concepts, comp creation for all the templates for the site. The project had been handed off to the new designer and the engineer for the next step after I resigned from this company. user experience explorations wireframe visual explorations site interaction explorations prototype top how to enjoy how to enjoy / parts news / blog mla and you (life story) mla and you: mother and a child (life story) recommended recipe

12 SOCL PROJECT: SNS site Socl redesign, Microsoft Fuselabs 12 URL: ROLE: Socl is a SNS that lets you create, collect and share stuff you love/have interest by creating collages of images, videos, animated media, etc. My roll was to create the new visual design of this product to go on the public release. Work collaboratively with the UX and interaction designers and developers in the cross functional team to create structure of the site, wireframes, brain storm behaviors of UI elements, and execute the design, attend usability test and analyze user behaviors, make edits, and finally to create the style guide of with redlines to deliver the final comps to the developer team. It was a small team within Microsoft and each of us worked as community manager to create own account and interact with regular users to provide better experiences. wireframe visual explorations site interaction explorations prototype icon design redline styleguide

13 SOCL SITE COMPLETE TYLEGUIDE SET - EXAMPLE: 13

14 14

15 MICROSOFT WINDOWS PHONE 7 15 PROJECT: Windows Phone 7, East Asia version original UI ROLE: Executing UI design for the new Windows Mobile 7 projects for East Asia release in Japanese, Simplified and Traditional Chinese and Korean. Setting EA original visual design direction and defining/applying UX guidelines to consumer experiences. This includes creation of new typographic standard with mix of horizontal and vertical text orientations for double byte languages (Asian Characters). Include detailed tuning for letter spacing and line spacing that works for all 4 languages, working closely with UX and Typography and Research and multiple other teams. Our mission was to create this new typographic standard within the theme of METRO, the graphic principle of the Window s Phone 7. Also created a visual standard for IME (Input Method Editor, SIP) in 4 Asian languages with cross-functional teams (UX, Design Integration, Dev, Research, Typography, Geography etc). EAST ASIA VER. ORIGINAL UI SCREENS Vertical text orientation on Lock screen, , SMS, People Hub, Picture Hub, Music + Video Hub New algorithm for feed module with mixture of vertical and horizontal text orientations New UI for read card with vertical text orientation New UI for SMS read card with vertical text orientation UI LOCALIZATION Double byte characters type set Adjustment of font size, line spacing from single byte to double byte characters, IME SCREENS New IME designs for 4 languages which adopt the visual theme from the global version

16 VISUAL UI SCREENS: UI DESIGN LOCALIZATION & EAST ASIA ORIGINAL DESIGNS 16 Lock screen: vertical text Calendar screen: vertical text Start screen: vertical text Start screen: vertical text Start screen: vertical text side way

17 VISUAL UI SCREENS 17 list screen read card: vertical text side w/photo read card: vertical text read card redline: vertical text SMS: vertical text

18 VISUAL UI SCREENS 18 Calendar: vertical text for month display Schedule Office

19 VISUAL UI SCREENS 19 PEOPLE HUB SCREEN FEED: VERTICAL TEXT NAME ON FEED & MODULE ALGORITHM CREATION People hub is the one-touch access to facebook, twitter, Linkedin. Skim latest posts and pictures from contacts, dial, text or IM your contacts. Post your status etc., East Asia phone has it s original module design with vertical text orientation. Our role was to create the clean and functional new typography for East Asia market. As they have vertical text orientation in regular life style, we brought it to UI as the first generation in the smart phone history.

20 20 MUSIC + VIDEO HUB: VERTICAL TEXT MENU PICTURE HUB: VERTICAL TEXT MENU, VERTICAL TEXT NAME ON FEED

21 IME UI SCREENS 21 Japanese: 12 key Hiragana Japanese: 12 key Roman Alphabet Japanese: 12 key Emoji Japanese: 12 key Numbers and Symbols Japanese: Phone Japanese: 12 key Hiragana Landscape Japanese: 12 key Numbers and Symbols Landscape Japanese: 12 key Roman Alphabet Landscape

22 IME UI SCREENS 22 Japanese: 12 key Flower Japanese: 12 key Flick Japanese: 12 Flick Japanese: Qwerty Japanese: Qwerty Emoji Japanese: 12 key Flower Landscape Japanese: 12 key Flower Landscape Japanese: Qwerty Landscape

23 IME UI SCREENS 23 Simplifed Chinese with pinyin filter: 12 key Simplified Chinese: 12 key Symbol Simplified Chinese: Qwerty Traditional Chinese: Alphabet Korean: 12key

24 HEY MARSEILLES - FOLK BAND FROM SEATTLE, WA 24 PROJECT: 1st and 2nd Album & 7 record Covers, Website, Merchandise ROLE: Art Direction, Design Execution, Communication with Programers and Venders

25 2ND ALBUM, 7 COVER DESIGNS, MERCHANDISE DESIGN 25

26 WEB DESIGN, ART DIRECTION, COMMUNICATION WITH DEVELOPERS: UNDER CONSTRUCTION 26

27 27

28 1ST ALBUM COVER DESIGN (LOCAL RELEASE & NATIONAL RELEASE), MERCHANDISE DESIGN 28

29 MERCHANDISE COASTER DESIGN, LETTERPRESS PRINT PRODUCTION, PRODUCTION DIRECTION 29

30 ELDER AND ADULT DAY SERVICES PROJECT: Re-branding Identity, Logo, Print collateral, Website, Fund-raising Promo Video ROLE: Design, Art Direction, Communication with Programing team, Photographer, and Videographer 30 HERMES CREATIVE AWARDS 2010, GOLD PRIZE

31 WEBSITE AND FUND-RAISING PROMO VIDEO: 31

32 GRAPHIC STANDARD STYLE GUIDE FOR LOGO USAGE 32

33 NATIONAL INSTITUTE FOR REPRODUCTIVE HEALTH PROJECT: Conference kit design for 2008 National Summit. Trapper keeper (Silk-screening on plastic), interior set ROLE: Concept, Design, Art Direction 33

34 CONFERENCE KIT DESIGN FOR 2008 NATIONAL SUMMIT. TRAPPER KEEPER (SILK-SCREENING ON PLASTIC), INTERIOR SET 34 SUMMIT INTERNATIONAL AWARD 2009, GOLD PRIZE HERMES CREATIVE AWARDS 2009, GOLD PRIZE

35 BROCHURE DESIGN 35

36 VINSULA, START-UP INTERNET SECURITY COMPANY PROJECT: Identity Design, Logo, and Graphic Standard, Print collateral ROLE: Art Direction, Design Execution 36

37 37 CLIENT: Elliott s Oyster House PROJECT: Seasonal Promotion Collaterals ROLE: Art Direction, Illustration, Design Execution, Print Production

38 CLIENT: Holland America Line PROJECT: Monthly Direct Mail/Brochure ROLE: Collateral Design, Photo edits, Stock Photography Management, Print Production 38

39 IDENTITY PROJECTS 39 CLIENT: Smith & Sullivan Distillery PROJECT: Identity Design, Print Collateral Role: Art Direction, Design Execution CLIENT: Bauhaus Books & Coffee PROJECT: T-shirts Design with Alternative Logo ROLE: Art Direction, Design Execution

40 40 CLIENT: WORDY, a Seattle local writer PROJECT: Identity Design, Print Collateral ROLE: Art Direction, Design Execution, Print Production CLIENT: Richard Hugo House, local literature NPO that fosters writers, builds community and engages the Pacific Northwest in the world of writing. PROJECT: Identity Design for the Annual Fund-raising Dinner Event, Invitation design ROLE: Art Direction, Design Execution, Print Production