👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
About Snippet
Commenting is disabled.
The Elements of User Experience by Jesse James Garrett is a powerful tool that a Product Designer can use. It demonstrates the planes that composes the User Experience Product from a user experience (UX) perspective.
It can be utilized as a framework for designing a product as demonstrated in the succeeding table. The elements act as the stages in design and development. On the other side of the table are the counterpart artifacts of the elements.
| Elements of User Experience | Artifacts | ||
|---|---|---|---|
| Product Design | Front-end Design | ||
| Strategy | Business Objectives, Customer Objectives | Product Requirements Document | |
| Scope | Features, Requirements | ||
| Structure | Information Architecture, Interaction Design | Diagrams, Flowcharts | Content |
| Skeleton | Information Design, Navigation Design, User Interface Design | Wireframes | |
| Surface | Sensory Design | Mockups | Presentation |
Related
Commenting is disabled.
30 July 2012
Project Folder is a folder directory structure (either in Windows or Mac system) that is recommended in organizing projects.
Download a zipped file of [Project Folder ZIP file].
Project Folder – root directory; rename to project name
- comps – contains wireframes, studies, mock-ups, artifacts, deliverables; images you send to Pdev for approval
- dev – contains HTML/CSS/JS files
- branches – contains the temporary/experimental development files
- trunk – contains the latest version of the development files
- docs – contains documents from Pdev such as Business Rules, Use Cases, screenshots, pegs
- raw – contains the source files of artworks, graphics (PSD, AI, PNG)
Inside these recommended directories, you could organize folders by date. For example, inside the comps folder:
comps
- wireframes
- 20121225 – contains JPG, PNG wireframes submitted to Pdev on December 25, 2012
Team name
[Team Name]
Role
The role of the team is to be a source of knowledge, inspiration, and expertise in user interface, visual, and front-end design in the context of digital product development.
Responsibilities
- to develop use case documents with the product developers
- to design user interfaces of products with emphasis on user experience
- to enhance user interfaces with creative visual design and illustrations
- to implement the design thru front-end development
- to enforce the design process of the team without lapse and discrepancy
- to value research and testing as part of the design process
- to be creative, experimental, innovative in approaching design as a solution
- to share our knowledge with other teams
Specializations
- Webtool design (webtools)
- App design (web and mobile apps)
- Illustration (characters, icons, typography)
- Communication design (branding, social media, websites)
- Front-end design (HTML, CSS)
- Information design (data visualization, presentations)
- Usability (usability of products, testings, user research)
Team members
Design lead
[Name, Contact Number, Role]
Senior designers
- [Name, Contact Number, Role]
Junior designers
- [Name, Contact Number, Role]
4 main focus of the team
User interface design
User interface design is
User interface design or user interface engineering is the design of computers, appliances, machines, mobile communication devices, software applications, and websites with the focus on the user’s experience and interaction. The goal of user interface design is to make the user’s interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often called user-centered design.
- the design of a product should help users in achieving their goals in the easiest way possible
- it should cater to experimentation/innovation in UI design
- it should cater to creativity in visual design
Visual design
The process of using words, symbols, images to communicate a message to an intended audience.
In the context of product developent, visual design enhances the user interface of a product using imagery, typography, colors in the purpose of making the product visually appealing and more usable to a targeted user.
- consistency with the brand using the style guide
- adherence to the creative brief and communications brief
- creativity in the context of the designed user interface (function over form)
Front-end design
Front-end development is the first level implementation of the design into code.
As designers of websites and applications, the technology behind the front-end development of such designed products must be ingrained because it sets the boundaries and possibilities of what we could actually design.
- portability – the usability of the design across platforms
- optimization – the employment of best practices in front-end development to produce a lean code without the unnecessary clutter
- scalability – the capability of the design to adapt to changes–towards a smaller or a bigger scale
- accessibility – the independence of content from its container; content must be “readble” by all kinds of users.
User experience design
User experience design in general is
The creation and synchronization of the elements that affect users’s experience with a particular company, with the intent of influencing their perceptions and behavior.
Source: A Project Guide to UX Design, Russ Unger and Carolyn Chandler, p. 3
- user experience focusing on the brand’s digital assets
- integrate usability testing in the process
- user research, interviews, personas
Key aspects of the team
- innovation
- creativity
- experimentation
- balance of users’ and business goals
- open sharing and development of knowledge
Strategy
[Diagram]
Current focus
Where are we now?
- User interface design: the technical aspect – information, navigation, interaction
- Visual design: the creative aspect – branding, style, “look and feel”
- Front-end design: the first-level implementation aspect – interactivity, prototypes
Future focus
Where are we going?
- User experience: the other half of marketing strategy in a product development context – usability testing, user research, information architecture
- Front-end development: the broader aspect of front-end design – includes JS, CMS, repositories, file transfers
Path
How do we get to the future focus?
- We start by including research and testing in our process
- We share our knowledge with others thru workshops and articles/blogs
- Each on begins practicing front-end design
The design process
[Diagram]
Phase 1: Interface design, information design
The design of information architecture into interface.
Requirements:
- Information architecture (e.g., site maps, flowcharts, functionality diagram)
- Use case document
- Service description document
Artifacts:
- wireframes
- created upon deciding an approach done in sketches
- the sketch in a higher level (high level sketch)
- demonstrates the
- layout of interface
- user interface flow
- interaction of user with interface to facilitate tasks, activities
- useful in presenting the product visually to internal teams such as product developers and back-end developers
- prototypes
- interactive versions of the sketch or wireframes
- certain areas are linked to specifc screens/elements to mimic the actual working product
Phase 2: Visual design, interactive behavior of elements
- upon finalizing the wireframes, the visual design based on the brand style guide, creative brief, and other documents from phase 1 will be applied
Requirements:
- Communication brief
- Creative brief
- Brand style guide
- Actual content
Artifacts:
- visual design studies
- more than one version of a mock-up that show different approches to visual design
- consider different elements presented in a style board (similar to mood board)
- design of interactive behavior of elements
- how will an element come into view upon user interaction?
- will it fade, will it fly out?
- transition between elements – fade, appear, disappear
- image mock-ups
- the development of a chosen study into a flat image
- resembles the actual product in an image format (JPG, PNG)
- shows the visual design of pages, screens, interactive elements (pop-ups, pop-overs, dialogs, icons)
Phase 3: Front-end design
- the implementation of the image mock-ups into HTML, CSS, and JS
- the integration of image assets and code (HTML + CSS)
- enables the designer to test the behavior of interactive elements
Requirements:
- front-end technical document (device, platform support, titles, descriptions, actual content, copies)
Artifacts:
- HTML – content
- CSS – visual design
- JS – interactivity behavior
- image assets – app icons, banners, social media and app store requirements
15 April 2013
- Choosing subject
- Do not choose people in the company or people involved in the project.
- Choose people that will use the product eventually
- Before the testing
- Prepare all the tools to be used
- Computers (Advisable is Mac, since it has built in webcam and audio recorder)
- Softwares:
- Silverback – Records the screen, voice and face reactions of the user http://silverbackapp.com/
- Microsoft Office
- Observers – they are the people involved in the project. Set 2 observers per tester. One designer and one developer.
- Rules for the observers
- Don’t help the participants; let them use the site naturally. Just incase they’re stuck and can’t continue, that’s the time you will talk and help them out.
- Note all the reactions of the user
- Rules for the observers
- Prepare the program and scripts
- Program
- Example Program
2pm – 2:30pm Introduction
2:30pm – 3:30pm Usability Testing
3:30pm – 4pm Closing Discussions (Comments/Suggestions)
- Example Program
- Script
- Introduce yourself
- Reassure to establish rapport ‘You cannot make mistakes, we are testing the site and not you’
- Clarify purpose of test, confidentiality issues
- Explain the flow of the test
- Program
- Prepare all the tools to be used
- Starting the test
- Sit the testers down and run through the first part of your script
- Turn on the computer, show them only the first activity and let them read it.
- Notice the user’s behavior (hestitates, worries, gives up, etc..)
- After they finished an activity, the observers can ask questions to the tester, make sure not to distract the other testers.
- The testers will work independently; they will not wait for each other. Once a tester is done with the activity, he/she can proceed to the next activity.
- After the test
- Make the tester answer the usability questionnaires.
- Gather as much as possible; ask overall impressions of the site.
- Ask for suggestions to provide insights from the real user to improve the site.
- Say thank you, give a gift or a token of appreciation if appropriate.
26 July 2013
Suggested standard for naming files of most types of design artifacts.
This suggested standard aims to:
- provide a preview of the file’s info thru the file name
- organize the versioning system of files
<project-name>_<project-type>_<artifact-type>_<designer-name>_<date>_<version>.<file-extension>
Example:
- Project: Chikka blog
- Type: website
- Artifact: Mock-up
- Designer: Dys
- Date: July 26, 2013
- Version: first
- App: Photoshop
- Exported image: PNG
Usage:
- chikka-blog_web_mu_dys_20130726_1a.psd
- chikka-blog_web_mu_dys_20130726_1a.png
Pointers:
- small caps only
- no spaces
- use dash ( – ) for separator within a segment
- use underscore ( _ ) for separator between segments
Project types:
- Website (desktop) – web
- Website (mobile) – web-m
- Android smartphone app – and
- Android tablet app – and-t
- iPhone app – ipn
- iPad app – ipd
Artifact types:
- Sketch – sk
- Wireframe – wf
- Mock-up – mu
Designer (free to change)
- Dys – dys
- Mike – mik
- Tess – tess
- Desiree – des
Date format: <YYYY><MM><DD>
Version format: <number><letter>
- always start at “1a”
- if only one person is designing two studies, name it “1a”, “2a”
- after exporting the design and a revision must be done, increment the letter, e.g., from “1a” to “1b” and so on
Commenting is disabled.
Commenting is disabled.
| Viewport Size | Viewport Orientation | Media Query |
|---|---|---|
| Smaller than mobile | 319px (portrait) | @media only screen and (max-width: 319px) |
| Mobile-first | 320px (portrait) | Default CSS Ruleset |
| Laptop | 1024px (landscape) | @media only screen and (min-width: 1024px) |
Commenting is disabled.
Personas are perfect tools for bringing empathy to the drawing board. Personas work best when validated thru multiple insight sources radiating from who the company is targeting — towards the actual users that evolves over time.
Personas must reflect, as much as possible, a profile of a real person. Identify the following:
- Needs
- Wants
- Goals
- Aspirations
Where to base our personas?
- Organizational Vision
- Customer Service Metrics
- Promos / PR Audience
- Marketing Framework
- Own Research
Organizational Vision
If the vision is about inclusivity and empowerment, who are the people covered?
Customer Service Metrics
- What are our customers’ immediate problems?
- What’s currently broken and needs to be fixed?
- Which features are most useful?
- Where are the drop-offs?
Promos / PR Audience
Where do we spend money on promos and or campaigns? Support those efforts in targeting those personas.
Marketing Framework
Customer Journey and Funnels
Own Research
If you think we are forming a new persona, do research and validate it. The exploration of a new persona, on the other hand, could be brought up to an earlier starting point with cross-team collaboration.
Commenting is disabled.
Commenting is disabled.
This is the new UI process (codename: UI Trial and Tribulation 2012) in examining an applicant for the design team:
- Show-off: Share portfolio of past and current works
- Homework: Sketch an idea (needs more info)
- Serious Business: Build wire frames – 1 hour max
- Fun Activity: Create a study – 1 hour max
- Nerd Time: Code the approved study (if he/she gets past #4) – 1 hour max
- Chitchat: Relax for interview – 3 minutes
Applicant should only be informed of numbers 1 and 2.
Commenting is disabled.
The Premise on Having a Study 1 and Study 2
Each study must communicate / hypothesize / propose two very different approaches / solutions (as opposed to having variations on the color and layout only).
Commenting is disabled.
The Now & Next Framework can be used in planning for the Information Architecture of a software-product (websites and webapps). Basically, it is ideal to prioritize the Now and follow it up with the Next.
Current Relevance (Now)
- Answering for the user’s immediate need
- Which things are relevant for the user to know (information)?
- Which things are relevant for the user to do (actions)?
- Is it supported where the user want to go from here (navigation, sections)?
Relevant Discoveries (Next)
- Supporting and cultivating the user’s multi-faceted nature.
- Which things might be of interest to the user — whether to know (information), to do (actions), to go to (sections)?
Actions and Sections
Actions (Act)
Actions are functionalities the user can utilize in a particular section.
Sections (Go)
Sections are places the user can go to.
Example
In this example, we demonstrate the Information Architecture of a Category page or screen.
| Current Relevance * Templates (items that are saved as templates by the user) * Favorites (items that are “starred” by the user) * Recents (items that are recently interacted upon by the user) |
| Relevant Discoveries * Categories or list of all items (it depends on how many items there are and / or how segmented they are — if they need to be categorized or listed flatly; categories can be headings only which can be navigated via drill-down) |
Commenting is disabled.
Commenting is disabled.
Commenting is disabled.
Commenting is disabled.
Frameworks
- Product Design Journey (PDJ)
- Project Communications Framework (PCF)
- Elements of User Experience Framework (EUX)
- Frontend Design Stages Framework (FDS)
- User Route Framework (URF)
- Project Flow Framework
- Brand Cohesiveness in Customer Experience Framework
- Now & Next Framework
- UI Review Framework (draft)
Processes
Concepts
Artifacts
Topics
Elements of User Experience
Commenting is disabled.
This is work in progress (WIP)
I’ll be making some updates on Conducting a UI Review.
Commenting is disabled.
Frontend Design Stages Framework begins from a design artifact such as a wireframe or a mockup. This is where the frontend designer will base the implementation process. Each stage has, at most, three rounds. Each round in sequence builds on top of the previous round. The stages are Plain Text, HTML, CSS, and JS.
| Stage | Round 1 | Round 2 | Round 3 |
|---|---|---|---|
| Plain Text | Convert | Group, Label | Structure |
| HTML | Structure | Group | Individual, Visual Content |
| CSS | Usability | UI Elements, Layout | Colors, Graphic Elements, Visual Content, Typography |
| JS | Usability | Layout | Visual Design |
I am creating tutorials in Frontend Design called RE:Creation which demonstrates the framework.
Commenting is disabled.
In tracking the users’ behavior within an app, a straightforward way is to look at where they go and what they click. This approach is useful in identifying drop-offs and success rates in completing tasks. Apart from this, it’s important to establish context on a particular task. We must know where a user came from and where he or she is going, before and after completing the main task, respectively.
- Entrance
- Main
- Exit
Entrance is the referrer or where the user came from. Main is the task flow. Exit is where the user went after completing the task.
Commenting is disabled.
A Project Communications Framework is a framework for discovering and delivering a design within a specified objective, scope, and timeframe. Within the timeframe are scheduled activities that ensure questions and assumptions become minimal during the delivery.
The Elements
- Objective
- Scope
- Timeframe (maximum of two weeks)
The Activities
- Kick-off
- Alignments
- Design
- Presentation
- Wrap-up
The Values
- Commit to a Schedule
- Align Early and Often
- Clarify
- Solidify
- Work Outbounds
- Reach Out
- Find Out
Design Is Communication
Our job as designers—both in the discovery and delivery stages—is all about communication.
Internally, during discovery, aligning early and often with leads, stakeholders, and users is invaluable in clarifying questions and assumptions that we have at the drawing table. New information that we could gather can be used to ensure that we are on the right track in designing with the objective.
Externally, during delivery and towards the product being in the hands of users, effective communication is one of the goals of the design.
Clarifying many assumptions and questions will solidify the base that our design is standing on. At this point that we could optimally continue our design work—when we are confident on our design decisions.
In some work environments, the balance between inbound and outbound communication is good. However, in work environments that are fast-paced, the open door policy invites outbound communication. Translated to designers, this means that we have to reach out to counterparts, point persons, and key people and find out about new information on the subject at hand. This proactive approach is one of the easiest ways to design quickly yet surely.
Presentation Components
- Header
- Project Name
- Description
- Purpose / Objective / Problem Statement
- Main
- Overview – the problem space, the solution
- Research, and Ideation – the process in which the problem and solution were explored
- Use Cases with Visuals – high level (big picture), low level (small picture)
- Conclusion / Findings – evaluation of the designer in regards to the project as a whole
- What’s Next? – to-dos for this project and overview of the next project
- Footer
- Deliverables – links to the project folder and deck
- Team – name and email of designers, leads, stakeholders
Example of Activities within a Timeframe
Week One
- Kick-off
- Alignment
- Design
Week Two
- Alignment
- Design
- Presentation
- Wrap-up
Version History
- 0.0.2
- Moved "What's Next?" to Main section; add "Design" to Activities; added descriptions in Presentation Components
- 0.0.1
- Updated Presentation Components section
- 0.0.0
- Initial draft
Commenting is disabled.
Genesis generally refers to the origin of a thing. In user interface design—especially in applications—the nature of it involves many things that are created, transitioned, and deleted. For example, this very page was created using WordPress. Once created, it materializes its identity – a page, in particular, and follows are many metadata and other properties that a page could have. Soon after, as needed, an editor could modify or delete it.
In this regard, I have standardized an aspect of Product Design that must be always present in Information Architecture and Interaction Design – the Genesis. It has the following elements:
- Creation
- Identification
- Modification
- Deletion
Commenting is disabled.
A Product Requirement Documents or PRD is the bible of the Product Designer when it comes to designing a specific product. It contains the mission and vision of the product. It contains key information of the people involved in creating the product. It contains the scope of the product. When you are lost, revert back to the PRD and update it with a product manager as often as necessary.
- Intro
- Product Name
- Author
- Purpose
Technical and business perspective
- People
- Background (names and contact information)
- Stakeholders
- Teams
- Foreground
- Target Market (Market research, demographics)
- Customer, Users
- Audience
- Tasks
- Use Cases
- User Journey
- Needs
- Information-seeking Behavior
- Experience
- Design Personas (User goals, pain points)
- Background (names and contact information)
- Content
- Content Objectives
- Root Definitions
- Document and Data Types
- Volume
- Existing Structure
- Governance and Ownership
- Context
- Business goals
- Funding
- Politics
- Culture
- Technology
- Resources
- Constraints
- Product
- Product Overview
- Similar Products, Competitors
- Functional Requirements
- Platforms, Benchmarks
References
- Product Requirements Document – Wikipedia
- Creating Personas – UX Booth
- Information Ecology – UXD
- Soft Systems Methodology
Version History
- 1.0.1 -
- Added Root Definitions in Content based on Soft Sytems Methodology
Commenting is disabled.
The Research to Requirements Design Process starts with researching within a problem space.
One activity that will help in the efficiency of this process is Design Sprint.
The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. Developed at GV, it’s a “greatest hits” of business strategy, innovation, behavior science, design thinking, and more—packaged into a battle-tested process that any team can use.
The Design Sprint
Commenting is disabled.
Author’s note: This document is being constantly updated; please expect revisions.
—
A Prototype is a mode of a Design Artifact whose main purpose is fostering the following:
- Innovation
- Collaboration
- Creativity 1
It occurs during the Improvement Loop Design Process (ILP) when the Prototypes are being presented to and tested with the relevant audience.
Prototype Fidelity
The fidelity of Prototypes depends on which stage of the journey the designer is in. During the User Interface Design stage, the Design Artifacts produced are mostly Wireframes. By nature, Wireframes could effectively demonstrate the user interface and content of the product. Testing for the usability using Wireframes must be focused on tasks.
| Stages | Artifacts | Prototype Fidelity | Test Criteria | |
|---|---|---|---|---|
| Delivery | User Interface Design (UID) | Wireframes, Interaction Diagram | Low Level 1, Low Level 2 | Usability, Content |
| Visual Design (VisD) | Mockups | High Level 1, High Level 2 | Usability, Presentation | |
Prototype Interactivity
The interactivity of Prototypes depends on what the designer is testing – is it the design’s navigation? Is it the design’s task flow? Is it the design’s usability? Is it the design’s content and layout? Is it the design’s visuals in relation to branding? Some of these test criteria warrant an interactive prototype to be able to replicate the actual experience of using the product.
| Stages | Artifacts | Prototype Interactivity | Test Criteria | |
|---|---|---|---|---|
| Delivery | User Interface Design (UID) | Wireframes, Interaction Diagram | Static, Interactive | Usability, Content |
| Visual Design (VisD) | Mockups | Static, Interactive | Usability, Presentation | |
During Design Sessions, there are notable differences between using prototypes and the semi-functional product in its staging environment. The latter provides the audience a realistic experience that, in turn, could enable them to provide more meaningful feedback.
Making a prototype interactive–with swipeable screens and clickable elements–require additional resources for development. The designer has to balance the expected value the testing of an interactive prototype will bring and the time it will take to accomplish and revise it.
Footnotes
Commenting is disabled.
Each process in the Product Design Journey is an opportunity for improving the Artifacts and thus, improving the design of the Product.
Phases
- Design Sessions
- Feedback Evaluation
- Design Improvement
The Improvement Loop Design Process involves conducting Design Sessions wherein the Artifacts—in the form of Prototypes—would be presented and tested with a relevant audience. The expected output of such sessions are Feedback that will then be evaluated to be useful for Design Improvement.
The process go in sequence—working within the team of stakeholders and designers—and towards users.
Sequence
| Design Sessions | Presentation | Collaboration (Design Critique, Heuristic Evaluation) | Presentation | Usability Testing | Presentation |
|---|---|---|---|---|---|
| Audience | Stakeholders | Designers | Stakeholders | Users | Stakeholders |
The key points in this suggested sequence are:
- Constant touch base with Stakeholders
- Collaboration with Designers
- Testing with Users
Design Sessions
The Design Sessions go back and forth between presenting and testing. Both are for the purpose of gathering feedback to improve the Design of the Product. The former’s other purpose is to enable the Project to move forward by gathering buy-ins from Stakeholders.
Presentation
Design Roles across the board ideally have Presentation Skills to conduct this particular Design Session—from making storyboards to designing the slide deck to effectively communicating the Design Decisions thru the Prototypes.
Collaboration
Design Critique and Heuristic Evaluation are activities to make the collaboration between Designers formal in the sense that the Feedback is structured and actionable as compared to informal conversations and show-and-tells.
Testing
Testing, on the other hand, involves a series of activities—selection of test participants, preparation of the test materials, conduction of the test, gathering the feedback for evaluation, and overseeing the implementation of the improvement—ultimately to be compared and measured against the previous iteration.
The aspect of effectivity and efficiency of Testing is in the hands of the User Researcher Role. On the other hand, the Observation and Evaluation Skills of a Designer—whose designs are being tested, whose questions are being explored, whose objectives are being discussed—are invaluable.
Audience
Stakeholders
The Stakeholders have a substantial voice in the forward movement of the project because ultimately they will approve the project if it will move towards the next stage of the process. Stakeholders are Business Managers, Product Developers, Project Managers, and Tech Leads.
Designers
Collaboration with fellow Designers is a must to be able to fine-tune the Prototype as it moves along the process.
Users
Testing with Users could answer significant design questions in the context of actual usage.
Feedback Evaluation
Depending on the type of Testing that was conducted, the Feedback could be as straightforward as a Designer could properly evaluate and implement or it could be as complex as datasets that need to be analyzed by User Researchers.
Conclusion
The Improvement Loop Design Process is a tool that leverages on the power of Feedback of a relevant audience. Also in this iterative process that User Researchers wield their expertise in moving Design forward for the benefit of the business and its customers.
Commenting is disabled.
This first phase of this process begins in Design Delivery stage which in this context we’ll refer to as the Prototype phase; the Design Handoff—or simply the Handoff phase facilitates the transition of the designs to the next phase. Finally, using the Artifacts from the previous phase, the Frontend Development commences—which we’ll generally call the Implementation phase.
| Phases | User Interface Design Artifacts | Visual Design Artifacts |
|---|---|---|
| 1. Prototype | Interface Diagram | Mockups |
| 2. Handoff | Interface Diagram, Design System | Mockups, Style Guide, Media Assets, Design System |
| 3. Implementation | Frontend Development Content | Frontend Development Presentation |
The items indicated in this process are Artifacts. In the Implementation phase, items are represented by abstract concepts because the Frontend Development is in a different realm. The principle of Separation of Content and Presentation enables the simultaneous progress of Design and Frontend Development.
Ideally, the goal in the Prototype phase is to handoff (for implementation) a design that is presented and tested based on the set Strategy and Scope. With this goal in mind, it is important to process feedback from stakeholders (people from business, product, engineering) and users before going to the Handoff phase.
Commenting is disabled.
Another straightforward process, the Interaction to Interface Design Process is the translation of the content inventory and interaction diagram into interface diagram—which is commonly represented by wireframes.
This process is the transition from Design Discovery to Design Delivery wherein user interface artifacts can already be used for frontend development, specifically pertaining to structure.
Commenting is disabled.
Based on the Product Requirement Document (PRD), a designer would translate its relevant content into Content Inventory and Interaction Diagram—which is commonly represented by Task Flows.
Commenting is disabled.
Design Discipline Roles
| Levels | Roles | Responsibilities | ||||||
|---|---|---|---|---|---|---|---|---|
| Work Efficiency (Craftsmanship) Track | Career Empowerment (Leadership) Track | |||||||
| Maker | Associate | Level 1 | Interaction Designer | User Interface Designer | Visual & Accessibility Designer | Product Designer | Design Tasks | |
| Level 2 | Senior Interaction Designer | Senior User Interface Designer | Senior Visual & Accessibility Designer | Senior Product Designer | Design Activities | |||
| Lead | Level 3 | Lead Interaction Designer | Lead User Interface Designer | Lead Visual & Accessibility Designer | Lead Product Designer | Design Process | Process Skills Development | |
| Level 4 | Senior Lead Interaction Designer | Senior Lead User Interface Designer | Senior Lead Visual & Accessibility Designer | Senior Lead Product Designer | Design Systems | Systems Skills Development | ||
| Manager | Manager | Level 5 | Interaction Design Manager | User Interface Design Manager | Visual & Accessibility Design Manager | Product Design Manager | Project Management | Team Management |
| Level 6 | Senior Interaction Design Manager | Senior User Interface Design Manager | Senior Visual & Accessibility Design Manager | Senior Product Design Manager | Company Activity Management, Industry Activity Management | Networking Activity Management | ||
| Head | Level 7 | Design Head | Design Business Development | |||||
Design Roles
It is important to identify roles that are crucial in a design team. It ensures that each part of the structure is being taken care of. These roles are divided into two:
- Core
- Tangent
Core Roles
Core Roles belong to the Field of Product Design.
- Interaction Designer
- User Interface Designer
- Visual & Accessibility Designer
- Product Designer
- Design Manager
- Design Head
Tangent Roles
Tangent Roles are portrayed prominently across the stages of the Product Design Journey.
- User Researcher
- Project Manager
- Product Developer
- Front-End Developer
Design Responsibilities
The Design Department is strategically structured in varying scope of responsibilities. Each Role plays a specific Responsibility.
Prior to the Lead Level, the Designer has the opportunity to explore a particular track which depends on her interests and strengths. One could continue levelling up in either of the two tracks:
- Work Efficiency Track
- Career Empowerment Track
Work Efficiency Responsibility
The Work Efficiency Responsibility focuses on specializing in one’s chosen Discipline.
Career Empowerment Responsibility
The Career Empowerment Responsibility focuses on managing the skills and career of the Designers.
Project Roles
| Roles | Levels | Discipline | |
|---|---|---|---|
| Lead | Lead | Level 2, 3, or 4 | Any |
| Hero | Associate | Level 2 |
Each Discipline must be represented. |
| Sidekick | Level 1 or 2 | ||
| Shadow | |||
Version History
- 1.0.8
- Changed "User Experience Designer" to "Product Designer" to provide for the horizontal progression
- 1.0.7
- Maintained the specialization track of design disciplines
- 1.0.6
- Added Project Roles
Learning is a crucial part of working in a company. It builds not just the company itself but it enriches the self – providing a lasting knowledge to the designer that she can carry over from project to project and even to different endeavors.
It is important to identify roles that are crucial in a design team. These roles are divided into two: core and tangent roles.
Core Roles belong to the Discipline of Product Design. Tangent Roles are portrayed prominently across the stages of the Design Journey.
| Roles | ||||||
|---|---|---|---|---|---|---|
| Core | Interaction Designer | User Interface Designer | Visual Designer | User Experience Designer | Design Manager | Design Head |
| Tangent | User Researcher | Project Manager | Product Developer | Front-End Developer | ||
Contribution-Management Framework
The non-variable that is the basis of this framework is the Level of employment (Associate, Lead, Manager, Head). It comprises the different roles of designers in a team.
The Contribution-Management Framework divides the Level into two: direct contribution and management responsibilities.
| Track | Level | Professional Responsibilities | Personal Responsibilities |
|---|---|---|---|
| Contribution | Associate | Design Tasks, Design Activities | Self-learning |
| Lead | Design Process, Design System | Training, Mentoring | |
| Management | Manager | Career Development, Team Management, Company and Industry Activities | |
| Head | Business Development | ||
In Contribution, the Associate and Lead Designers team-up to work on Projects. On the other hand, in Management, the Manager and Head manages the entire department – ensuring that Design is empowered in the People and Business level of the company.
Employment Levels
| Level | Role | Responsibilities | |
|---|---|---|---|
| Associate | Level 1 | Interaction Designer, User Interface Designer, Visual Designer | Design Tasks |
| Level 2 | Design Activities | ||
| Lead | Level 3 | UX Designer | Design Process |
| Level 4 | Design System | ||
| Manager | Level 5 | Design Manager | Career Development and Team Management |
| Level 6 | Company and Industry Activities | ||
| Head | Level 7 | Design Head | Business Development |
Learning Pathways – Technical Skills
Associate Level
| Levels | Interaction Designer | User Interface Designer | Visual Designer | |
|---|---|---|---|---|
| Level 1 | Role-specific | IxD Basic | UID Basic | VisD Basic |
| Level 2 | Role-specific | IxD Advanced | UID Advanced | VisD Advanced |
| Discipline-wide | UID Basic | IxD Basic | IxD Basic | |
| VisD Basic | VisD Basic | UID Basic | ||
| UX Design-focused | Design Process Basic | |||
| User Research-focused | User Research Basic | |||
| Project Management-focused | Project Management Basic | |||
| Product Development-focused | Product Development Basic | |||
| Front-end Design-focused | Front-End Design Basic | |||
Lead Level
| Levels | User Experience Designer | |
|---|---|---|
| Level 3 | Discipline-wide | IxD Advanced |
| UID Advanced | ||
| VisD Advanced | ||
| UX Design-focused | Design Process Advanced | |
| Organizational Management Basic | ||
| User Research-focused | User Research Advanced (Optional) | |
| Project Management-focused | Project Management Advanced(Optional) | |
| Product Development-focused | Product Development Advanced(Optional) | |
| Front-end Design-focused | Front-End Design Advanced(Optional) | |
| Level 4 | UX Design-focused | Organizational Management Advanced |
| User Research-focused | User Research Main | |
| Project Management-focused | Project Management Main(Optional) | |
| Product Development-focused | Product Development Main(Optional) | |
| Front-end Development-focused | Front-End Development Main(Optional) | |
| Management-focused | Career Development Basic | |
| Team Management Basic | ||
| Events Management Basic | ||
Discipline Crossroads
The role of an Associate focuses on specific Core Discipline (Interaction Design, User Interface Design, and Visual Design). As the designer goes along the learning path, she will move on to a role with wider scope – UX Designer which is in the Lead level.
At Associate Level 2, the designer begins to have opportunities to gain more knowledge on Tangent Disciplines (User Research, Project Management, Product Development, and Front-End Development).
At Lead Level 4, the designer delves deeper into the different Tangent Disciplines – moving on from introductory topics. At this point that the Designer already has the confidence either to trudge onto the Management Track or shift her focus onto Tangent Disciplines.
Learning Pathways – Soft Skills
- Presenting
- Facilitating
- Interviewing
- Collaborating
- Writing
- Communicating
- Sharing
Course Levels
Courses are divided into two:
- Introductory
- Deep Dive
| Course Levels | Core Courses | Tangent Courses |
|---|---|---|
| Introductory | Basic | Basic |
| Advanced | ||
| Deep Dive | Advanced | Main |
Related
Commenting is disabled.
The Product Design Journey Framework (PDJ) is a framework for charting the journey and identifying key processes in designing web products such as websites and web apps.
Product Discovery – Delivery
The Product Discovery begins with The Design Sprint and followed by experiments thru Research and Development. At this point, the Project’s Time, Budget, Scope (as seen in the Product Requirements Document), and of course the Product itself take shape.
The Product Delivery involves the commencement of making the Product come to life thru Design and Development. This is where it becomes possible to be launched in the market.
Reading the Table
In reading the table, one would usually go from left to right—from Product Discovery to Product Delivery. In each phase of Discovery – Delivery, one could read from top to bottom. In a particular Stage, there is a Process involved which in turn, produces the Artifacts. The Artifacts then, ideally, follows the Building Block concept wherein the succeeding artifact is built on top of the one that came first. Although it’s important to note that one could start at any stage.
| Product Discovery | Product Delivery | ||||||
|---|---|---|---|---|---|---|---|
| Design Discovery | Design Delivery | Frontend Development | Backend Development | ||||
| Stages | Research | Information Architecture, Interaction Design | User Interface Design | Sensory Design | Frontend Development Structure | Frontend Development Style | Development Stages |
| Processes | Research to Requirements Design Process (R2R) | Requirements to Interaction Design Process (R2I) | Interaction to Interface Design Process (I2I) | Interface to Sensory Design Process (I2S) | Design to Development Design Process (D2D) | Development Processes | |
| Improvement Loop Design Process (ILP) | |||||||
| Artifacts | Product Requirements Document (PRD) | Content Inventory, Interaction Diagram | Interface Diagram | Mockups, Style Guide | Frontend Development Content | Frontend Development Presentation | Product |
| Design System | |||||||
Example
As an example, in the Product Discovery phase, during the Research Stage, the research findings will go through a process called Research to Requirements Design Process (R2R). Logically, in order to move a step ahead, the process will produce an Artifact that will be used in the next stage—in this case, the Product Requirements Document (PRD). Then this Artifact will be the basis in the next stage—which is Information Architecture and Interaction Design Stage. The journey goes on in a similar manner.
A Note on Development
Since this framework is focused mainly on design, the closest stage from Design is Frontend Development. With that in mind, the Backend Development encompasses all stages and processes that isn’t frontend—including, but not limited to, database development, server development, and other development operations. It’s also important to note that as soon as there are locked-in requirements as seen in the PRD, development in the backend could commence. And needless to say that along the journey, collaboration among teams will influence the product.
Basis
The PDJ was developed from the following frameworks and processes:
- Elements of User Experience Framework (EUX)
- Improvement Loop Design Process (ILP)
- Product Discovery – Delivery Framework
- Design Discovery – Delivery Framework
Iterations for Improvements
The Design Process is commonly iterative. It is in the same reason that a sub-process is employed to improve the quality of the Artifact produced – it is called the Improvement Loop Process (ILP).
Other Design Processes
IDEO’s Human-centered Design takes a similar approach:
Inspiration → Ideation → Implementation
Define → Ideate → Prototype → Build → Analyze
Conclusion
The Product Design Journey is framed within the context of the Project and the Project’s basis are Time, Budget, and Scope. Standing on top of these basis is the Value which resides in the future. In order for us to get from present to future (to realize the Value), we have Discipline which encompasses the principles, processes, knowledge, resources, tools, and techniques by which will guide us in this journey.
References
- Discovery vs. Delivery by Silicon Valley Product Group
Version History
- 1.1.0 -
- In the PDJ table: expanded "Design System" to encompass Design Discovery, Design Delivery, and Frontend Development
- 1.0.9 -
- Removed deadlinks from "Other Design Processes" and "References"
- 1.0.8 -
- Added A Note on Development
- 1.0.7 -
- Added Design System as Artifacts of User Interface Design and Sensory Design.
- 1.0.6 -
- Opted to not force "Discovery" and "Delivery" on the Development stages—instead, categorized it into "Frontend" and "Backend" Development. Frontend Development Structure and Style being the counterpart of Design Discovery and Delivery, respectively.
- 1.0.5
- Reviewing the process; added Information Architecture with Interaction Design so that it will not be assumed out of the process; chose to use Sensory Design over Visual and Accessibility Design towards aligning with the concept of Universal Design.
- 1.0.4
- Linearized the stages of User Interface Design and Visual and Accessibility Design; the concurrency of those stages can be tackled in the strategy aspect and not in this framework.
Commenting is disabled.
On the Fly means “while in the process.” Particularly, modifying something during the process of a whole.
In Product Design, On the Fly concept pertains to the capability of the Genesis of a thing during a process.
Consider a simple form which asks for the type of industry you’re working in. Generally, the following are the possible interactions that you might encounter:
- if there’s a list already, you only have to identify which item applies to you
- if there’s no list available, you have to input the item that applies to you
- a combination of the two and with the On the Fly concept applied, you could input the item that is not on the list and have it saved in the system for later retrieval
The On the Fly concept gives users freedom to create items to use in the process while being in the process and not create the item separately from the process.
Commenting is disabled.
Mobile First is a concept in web development that originated from Luke Wroblewski. It places importance on shifting the primary focus of development from desktop to mobile due to its pervasiveness in modern technology.
In Product Design, this concept places importance on the hierarchy of information and interaction. Because mobile is light and small, it warrants conciseness in communication. In turn, as designers, we are “forced” to prioritize important UI elements.
Even in its name, the Mobile First concept says that it is only a part of a whole. The second, third, and subsequent approaches could accommodate the items below the hierarchy.
In Visual Design, when there is no deliberate decision to design for a specific device, design for a mobile device—particularly a 320px-width, portrait orientation mobile device.
Commenting is disabled.
Begin with the end in mind.
Stephen Covey
In Product Design, particularly in designing for the Elements of UX, this resonates well. It could help the designer focus on what is easily known and start from there.
In an app – what is it that the user creates and modifies?
Let’s take Facebook for example – one of the things that the user creates and modifies is a post.
Start with the post as an item when designing the Information Architecture, Interaction Design, and even the User Interface Design.
For one, because it is part of the main functionality so we want to focus on it.
To be more in detail, which part of the Genesis of an item should one focus, using the “End in Mind” principle? The created item, of course.
So if in doubt, design with the “End in Mind”.
Commenting is disabled.