Pedro Chang

User Experience Deliverables

admin — Fri, 08 Jul 2011 22:59:50 +0000

Flow diagram: illustrates the path/s the user can take through an application or site.

Flow diagrams account for user actions (clicking on navigation elements) as well as application behaviors, such as the messaging that is presented when a user tries to access a protected page without being signed in.

Flow diagrams are helpful for illustrating the number of steps required for the user to complete an action. Creating a flow diagram of an existing site can be a useful exercise for illustrating inefficient flows or accidental loops in the user experience.

“Wireflow”: a hybrid of a wireframe and a flow diagram.

Shows mini-wireframes of some page elements — like buttons or forms — within the context of a flow diagram.

Wireframe: a grayscale skeleton of the proposed page design.

A wireframe can be a basic sketch of a design solution, or a fully annotated and highly detailed specification. Wireframes sometimes indicate preferred interaction design (i.e. “open a popup layer”), but they do not dictate visual design.

Wireframes are a very efficient way to collect and synthesize design requirements, and obtain high-level approval, before investing time in visual design and programming.

Interactive prototype: A clickable version of the application (as HTML/Javascript site, or single compiled Help file).

If a picture is worth a thousand words, a prototype of a highly interactive application can be worth at least several pages of wireframes. The prototype allows people to see how animations, sliders, carousels and other interactive behaviors work, making the design and development process more efficient.

The prototype emphasizes the flow through the application, not just individual pages, so it can also help expose points of confusion, etc. that might not surface if the team relies only on wireframes.

Cisco Systems

admin — Mon, 11 Apr 2011 17:30:31 +0000

Cisco Systems, http://www.cisco.com, San Jose California 02/2011 – Present
Interaction Designer / User Experience, San Jose California

Gathering and Analysis of user and business requirements for the new Quick Quote tool for the Cisco Service Contract Center (CSCC).
Help develop an estimated Time line and project plan for the Tool
Develop a User Experience flow for the different personas Distibutor, Reseller and Internal costumer
Design Information Architecture for the Quick Quote tool.
Design and Develop wireframes mock up for the Quick Quote tool.
Worked closely with the Business Sector and IT to provide a solution for a better user experience on the Quick Quote tool.
Develop of HTML pages mockup for prototyping and user testing.
Help with user testing and implement feedback into prototype for a better user experience.
Worked closely with IT to implement the design prototype into development.

Portfolio UI Samples

admin — Wed, 21 Apr 2010 07:34:15 +0000

Speed Date Wireframe version 2

Speed Date Wireframe

ME Site Map/Blue Print v1 and Process Flow

Chang Design

admin — Tue, 02 Mar 2010 03:00:15 +0000

Web Consultant

Dedicated myself as an independent consultant providing web design, animations, web marketing, Web hosting recommendations, graphic design, page layout, logo design, color correction and photo enhancement.
Search engine optimization and web promotion through different media.
Technology used: HTML, PHP, Photoshop, FrontPage, JavaScript, CSS, Yahoo Stores, EBay Stores, Flash, Microsoft Server 2003, Network setups.

Client List:

CCICE
http://www.ccice.tv
UI/UX Design
Web Design
Recording of live video events
Publishing live video events
SEO and Online Marketing of the Website

Innovationtek
http://www.innovationtek.com
UI/UX Design
Web Design
Implementation of CMS using WordPress
Web Updates
SEO and Online Marketing of the Website

Women of Color Action Network (WCAN)
http://www.wcan.ws
UI/UX Design
Web Design
Web Events publishing
Web Updates

Papitv Inc.
http://www.papitv.com

Built Website prototype, storyboarding (mockup) of papitv.com next generation Internet TV.
Worked on design and User Interface.
Created guidelines and templates for the site.
Simplified navigation for a new kind of people portal. Designed graphics and layout.
Design of a site that involves watching TV, listening to Radio, download of ITunes and the capability to also be an online community site.

n&k Technology
http://www.nandk.com
UI/UX Design
Web Design
Web Updates

Richard Haro Drafting and Planning
http://www.harodraftingplanning.com

Web Design
IT Support

CMS Builds
http://www.cmsbuilds.com

Web Design Implementation
Flash Portfolio
PHP mail form

Caribbean Garden
http://www.caribbeangarnden.com

Web Design, Web Development, Flash Animation,ASP, JavaScript Animation

APO Med Consultant
http://www.apomedconsultants.com/
Web Design Implementation, Flash Site

San Francisco Giants men club
http://www.sfgmen.com
Web Design, Flash, Java Script Animation

Chang Design Inc.
http://www.changdesign.com

Luvsbrownies
http://www.luvsbrownies.com/

Web Design
Yahoo E-commerce Store Implementation
Constant Contact Newsletter Setup
Web Updates

VMWare

admin — Fri, 22 Aug 2008 09:13:40 +0000

Dedicated to create their Emails design for the Email Marketing campaign.
Work with Responsys to host their content and track their statistics.
Technology used: HTML, CSS, Photoshop, Dreamweaver.

Cadence

admin — Mon, 30 Oct 2006 12:19:10 +0000

Cadence, San Jose, California 08/2006 – 10/2006
Senior Web User Interface Designer

Work with Business Analysts/Content Providers/Product Managers/Developers to define project requirements managing, directing, and mentoring a team of designers in developing concepts, design, and functionality, presenting design concepts to Senior Management.
Requirements gathering, information architecture, content architecture, prototype development, Wireframes development and documenting the front-end requirements and style guides.
Technology used: XHTML, CSS, Dreamweaver, Photoshop, Flash and a Team of Developers to implement design on the Web sphere Portal and JSP pages following corporate guidelines.

Assignment: Redesign of their AEnet intranet portal

Assignment: Redesign of their IT intranet portal

Assignment: Redesign of their NDA intranet portal

Assignment: Redesign of their NDA External portal

Hewlett Packard

admin — Sat, 01 Oct 2005 11:45:37 +0000

Hewlett Packard, Palo Alto, California 10/1998-10/2005

UI Engineer for the intranet Portal of Hewlett Packard

Design, test and produce the site’s information architecture and visual design for the best online user experience with regard to usefulness, usability and business needs.