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.

• 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.

Speed Date Wireframe

ME Site Map/Blue Print v1 and Process Flow

BluePrintSample

FlowProccessSample

HoweContentTool

HPWireframe2

PedrosTemplate

PedrosTemplate2

Wireframe3

WireframeSample1

• 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

• 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

• Generate task flows, user-interface and functional requirements for the web employee Portal.
  Research audience needs, stakeholder expectations and business requirements.
• Work closely with executive directors, marketing, engineering, customer service, etc. to analyze stakeholder and end user needs.
• Technology used: Visio, HTML, Photoshop, JavaScript, CSS, Web sphere
• Usability Test Sample

UI Lead for the Web Publishing Content (WPC) tool of Hewlett Packard

• Strategically managed the creation of the WPC tool that allowed end users to become self-proficient in web designing and updating content on demand.
• Guided web site development team in implementing user centered design and usability testing methodologies during their web site design efforts.
• Responsibilities included analysis, developing user requirements and key personas, facilitating UI designs and usability testing.
• The WPC tool saved 40 Million dollars in resources to HP.
• Technology used: Visio, HTML, Photoshop, JavaScript, CSS, Web sphere

Senior Programmer Analyst

• Utilized analytical skills debugging code for worldwide web applications.
• Technology used: Visual Studio

Tier III Web Specialist

• Provided detailed web design support to multiple HP sites via teleconferencing (BLT Call Center) and live online training with the assistance of Microsoft Net meeting.
• Technology used: Front Page, Microsoft Net Meeting

Web Master

• Created over 500 critical websites within HP
• Streamlined and standardized HP’s Web Design Process for web masters of all business units at HP.
  Member of the Web Mastering Team of Hewlett Packard.
• Technology used: Dreamweaver, FrontPage, HTML, Photoshop, CSS, Flash, Action Script,  MCMS, Web Sphere, JSP, Microsoft Server NT, 2000 and 2003.
• Design Samples

• Flash Samples
  IT @HP Flash Sample
  Formula One Flash Sample
  America One Flash Sample
  Global Support Flash Sample
• Manual Sample
  CS online Web site access manual
• Classes given as an Instructor
  Intranet Front Page training for Portal integration

IT Support Specialist

• Served as first point of contact for call center in IT support department helping clients in the US and Overseas to resolve problems with personal computers using Microsoft Net meeting.
• Technology used: Front Page, Microsoft Net Meeting
• SPMS_Support_Model_Sample

Select Key Achievements at Hewlett Packard (HP)

• Recognized and Awarded for a new intranet Employee portal design (2005).
• Deployed Web Publishing Content tool (2005)
• Recognized and Awarded for new intranet portal design (2004).
• Streamlined and standardized HP’s Web Design Process for web masters (2003).
• Designed and released HP’s 1st Intranet Portal (2001)
• Developed and created sponsorship website for High Profile Clientele and Mainstream Events (2000)

NASCAR Formula One Race
Elite Photographer “Ansel Adams”
Sailing Team: AmericaOne
Women’s World Cup