
👋 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. 🥰
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 |
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
Inside these recommended directories, you could organize folders by date. For example, inside the comps folder:
comps
[Team Name]
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.
[Name, Contact Number, Role]
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 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.
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.
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
[Diagram]
Where are we now?
Where are we going?
How do we get to the future focus?
[Diagram]
The design of information architecture into interface.
Requirements:
Artifacts:
Requirements:
Artifacts:
Requirements:
Artifacts:
15 April 2013
26 July 2013
Suggested standard for naming files of most types of design artifacts.
This suggested standard aims to:
<project-name>_<project-type>_<artifact-type>_<designer-name>_<date>_<version>.<file-extension>
Example:
Usage:
Pointers:
Project types:
Artifact types:
Designer (free to change)
Date format: <YYYY><MM><DD>
Version format: <number><letter>
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:
Where to base our personas?
If the vision is about inclusivity and empowerment, who are the people covered?
Where do we spend money on promos and or campaigns? Support those efforts in targeting those personas.
Customer Journey and Funnels
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:
Applicant should only be informed of numbers 1 and 2.
Commenting is disabled.
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.
Actions are functionalities the user can utilize in a particular section.
Sections are places the user can go to.
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.
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 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.
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.
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:
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.
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:
It occurs during the Improvement Loop Design Process (ILP) when the Prototypes are being presented to and tested with the relevant audience.
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 |
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.
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.
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.
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:
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.
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.
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, 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.
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.
Collaboration with fellow Designers is a must to be able to fine-tune the Prototype as it moves along the process.
Testing with Users could answer significant design questions in the context of actual usage.
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.
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.
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 |
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 Roles belong to the Field of Product Design.
Tangent Roles are portrayed prominently across the stages of the Product Design Journey.
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:
The Work Efficiency Responsibility focuses on specializing in one’s chosen Discipline.
The Career Empowerment Responsibility focuses on managing the skills and career of the Designers.
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 |
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 |
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.
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 |
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 |
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 |
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.
Courses are divided into two:
Course Levels | Core Courses | Tangent Courses |
---|---|---|
Introductory | Basic | Basic |
Advanced | ||
Deep Dive | Advanced | Main |
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.
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.
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 |
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.
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.
The PDJ was developed from the following frameworks and processes:
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).
IDEO’s Human-centered Design takes a similar approach:
Inspiration → Ideation → Implementation
Define → Ideate → Prototype → Build → Analyze
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.
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:
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.