Your Guide to Digital Product Modeling: Learn to Create Effective Solutions
Here is the modeling stage of the project assignment for the 888344 Digital Innovation Development for Entrepreneurs course.
Although typically we observe, interview and base our modeling on how a user interacts with our product, with this project this approach may not be an option. Therefore we base the contextual inquiry on research and analysis, such as competitive analysis.
We can model the product or service that we will create or design in this course with diagrams and models. Here are some examples of modeling we can use.
Artefacts (or artifacts)
- Artefact – like a physical object (e.g. receipt, boarding ticket)
- Artefact – digital object (e.g. navigation menus, search bars, windows, images, and buttons)
- Simple Example: a receipt
- Digital equivalent? Do you have a record of purchase (a screen or pdf)?
A receipt is an artefact (source: sciencedirect)
What is an Artefact Model?
- artefacts are things used in work
- often the computer system interface is a key artefact
- examples would be bills, reports, menus, etc.
Real world example: Hospital
- current patient notes
- patient records
- forms requesting tests and reporting results
- bedside equipment monitoring vital signs
- a whiteboard where bed and patient status are displayed
- loose pieces of paper that nurses use to make their own notes, especially when a shift changes
- these could be verbal rather than written on paper
Components of an Artefact Model
- information – what the artefact actually details
- the items sold, the prices, the total, receipt number, etc.
- structure – may have different parts for different users
- student, teacher, finance, support, manager
- annotation – added information
- notes, post-it notes, handwritten notes or comments
- presentation
- colour, format, style, fonts
- used to denote importance and organization
- note
- changes over time
- when created, what used for, by whom
- breakdowns
A flow model with artefacts (source: sciencedirect)
Constructing an Artefact Model
Step 1 – collect the artefacts, and identify the significance
Step 2 – check you know the role of the artefact and the details it contains
Step 3 – annotate the model with the information from above
What is a Sequence Model?
- A sequence model shows the detailed steps performed to accomplish each important task
- It shows the different strategies people use, the intents or goals that their task steps are trying to accomplish,
- and the problems getting in their way
Sequence Model Components
intent (purpose)
- what is the sequence of events intending to achieve
- always one main intent
trigger
- the cause the actions
- the event that triggers the intent / purpose
- always one trigger
steps
- a series of steps that achieve the intent
- include sufficient detail for another person to understand what is involved without the need to refer back to you
- detail the whole system if you are building a new system
- include lower-level details if you are specifically designing a particular interface
- e.g. select week from on-line calendar
breakdowns
- using a lightning symbol highlight any issues
Completing a Sequence Model
Stage 1
- use your contextual inquiry & flow models
- identify each main task
- express each task as an intent
- each individual will have a set of intents
- people’s or group’s responsibilities can be used to identify intents
- each sequence model has the intent written in the top left
Stage 2
- identify the trigger
- it can be time-based
- e.g. bar bills passed to reception
- it can seem vague
- e.g. quiet time to send promotion offers to guests
- the trigger is the first step in the sequence model
Stage 3
- add and describe each step to the sequence
- link the steps with arrows
- review the model, review the steps
- are there any sub-intents?
- e.g. maximize bookings of the expensive rooms
- put these subsidiary steps on the left of the relevant steps
- identify and add breakdowns
- e.g. most suitable room already booked
Sequence Models Explained
A sequence model in contextual design is a diagram that captures the step-by-step actions, decisions, and interactions of users as they engage with a product or service. It focuses on the chronological order of these activities, highlighting the sequence in which tasks are performed. Sequence models are particularly useful for understanding the detailed processes users follow and the context in which they operate.
Drawing Sequence Models for Digital Products or Services
- Identify Key Tasks: Start by identifying the main tasks that users perform when interacting with the product or service.
- Observe and Document Steps: Observe users in action and document each step they take, including any decisions, branches, and iterations.
- Visualize the Sequence: Create a visual representation that maps out the steps in the order they occur. Use arrows to indicate the flow from one step to the next.
- Include Contextual Information: Add any relevant contextual information, such as user goals, emotions, and external factors that influence the sequence.
- Refine and Validate: Review the model with actual users or stakeholders to ensure accuracy and completeness.
Benefits of Creating Sequence Models
- User Insight: Provides a deep understanding of user behavior and the context in which they perform tasks.
- Identify Pain Points: Helps to identify inefficiencies, pain points, and opportunities for improvement in the user experience.
- Communication Tool: Serves as a valuable communication tool for designers, developers, and stakeholders to discuss and align on user workflows.
- Design Validation: Validates design decisions by ensuring they align with real user needs and behaviors.
- Improvement and Innovation: Aids in the development of more intuitive and efficient workflows, leading to better user satisfaction.
Difference Between Sequence Models and Flow Models
While both sequence models and flow models illustrate the steps users take, there are key differences:
Focus:
- Sequence Models: Emphasize the chronological order of user actions and decisions, detailing the specific steps and the context in which they occur.
- Flow Models: Focus on the overall flow of tasks or processes, often highlighting high-level stages and transitions without delving into the detailed sequence of actions.
Granularity:
- Sequence Models: Provide a detailed, step-by-step account of user interactions, including all decision points and contextual factors.
- Flow Models: Offer a broader overview of the process, capturing major stages and flows but not necessarily the intricate details of each step.
Usage:
- Sequence Models: Used when a deep, detailed understanding of user tasks and their sequence is required, often for improving specific interactions or workflows.
- Flow Models: Used for mapping out general processes, system architecture, or high-level user journeys, providing a big-picture view.
Example in Digital Products or Services
Sequence Model Example: For an e-commerce website, a sequence model might detail the user’s actions from searching for a product, reading reviews, adding to the cart, checking out, and receiving confirmation. It would capture each step, the user’s decisions, and any contextual factors like payment method selection or shipping options.
Flow Model Example: A flow model for the same e-commerce site might show the overall process of “browse products,” “add to cart,” “checkout,” and “receive confirmation,” highlighting the main stages without detailing each specific user action within those stages.
By using both sequence and flow models, designers can gain comprehensive insights into user interactions, from high-level flows to detailed steps, ensuring a well-rounded understanding of user behavior and needs.
Flow Models
What is flow?
- Flow is the smooth and engaging movement of users through a digital product or service.
- It is the user experience effortlessly accomplish their goals without unnecessary issues.
- Flow is derived from psychology, an optimal experience, a user is fully immersed in an activity, focused and feeling positive.
What is a flow model?
- A flow model is a visual representation or diagram that
- maps out the sequence of steps, interactions, and decision points
- a user takes within a digital product or service.
- It helps designers and developers understand and analyze
- the user’s journey,
- identifying key touchpoints,
- potential pain points, and
- areas for improvement.
- Flow models can vary in complexity, from simple flowcharts to detailed wireframes or interactive prototypes.
Flow Analysis
- Define User Goals: Understand what users aim to achieve with your product.
- Map Out the Flow: Create a flow model that outlines each step a user takes to reach their goals. Use diagrams or flowcharts to visualize this process.
- Identify Touchpoints: Highlight key touchpoints where users interact with your product and make decisions.
- Analyze Pain Points: Look for areas where users might experience confusion or frustration, and identify opportunities for improvement.
- Iterate and Test: Use the flow model to guide design iterations, and test changes with real users to validate improvements.
Examples of Flow Models for Digital Products
Website: E-Commerce (e.g. Amazon)
Flow Example: Product Purchase Journey
- Homepage: User lands on the homepage, sees promotions, and uses the search bar to find a product.
- Search Results Page: User browses through search results, applying filters to narrow down choices.
- Product Page: User clicks on a product, reads descriptions, reviews, and views images.
- Add to Cart: User adds the product to the cart and is prompted to continue shopping or proceed to checkout.
- Cart Page: User reviews items in the cart, checks for discounts, and proceeds to checkout.
- Checkout Page: User enters shipping and payment information, reviews order summary, and confirms the purchase.
- Order Confirmation: User receives an order confirmation message and email with details.
Flow Model Benefits
- Identifies key decision points and possible customer dissatisfaction stages.
- Helps optimize the checkout process to reduce cart abandonment.
- Ensures critical information is easily accessible at each step.
Online App: Banking
Flow Example: Transfer Funds
- Login: User logs into the app using biometric authentication or password.
- Dashboard: User views account balances and recent transactions.
- Transfer Money: User selects the “Transfer Money” option.
- Choose Accounts: User selects the source and destination accounts for the transfer.
- Enter Amount: User inputs the transfer amount.
- Review Details: User reviews transfer details and confirms the transaction.
- Confirmation: User receives a confirmation message and sees the updated account balances.
Flow Model Benefits
- Ensures security steps are clearly integrated without disrupting the user experience.
- Highlights areas where users need clear instructions and feedback.
- Identifies potential pain points in the transaction process.
Streaming Service (e.g. Netflix)
Flow Example: Watch a Movie
- Login: User logs into their account.
- Homepage: User sees personalized recommendations and trending movies.
- Browse/Search: User browses categories or uses the search function to find a specific movie.
- Movie Page: User selects a movie, reads the synopsis, and watches the trailer.
- Playback: User clicks “Play” and begins watching the movie, with options to pause, rewind, or adjust settings.
- Post-Watch: After the movie ends, the user is prompted to rate it and is given new recommendations based on their viewing history.
Flow Model Benefits
- Ensures a smooth transition from browsing to watching.
- Identifies areas to reduce buffering and improve playback quality.
- Helps enhance personalized recommendations and user engagement.
Flow Model Diagrams
Flow Model 1
Traditional flow models are based on users (circles), what tasks they perform (rectangles), and the interaction between the users (arrows). Note the ‘lightening’ symbol (under problem reports), this represents an issue in the flow.
Source: https://hci.cs.siue.edu/NSF/Files/Semester/Week4-1/PPT-Text/Slide10.html
Flow Model 2
Flow is used for user flow or flow diagrams in design. The concept of flow is the same. Choose the style you like and which suites how to represent your product design. Source: Figma.com
Flow Model 3
How you represent the flow is also fluid to your preference. You can use very low fidelity interfaces (pages, screens, etc.) and arrows to indicate direction for example. Source: https://online.visual-paradigm.com/diagrams/templates/user-flow-mobile-app/online-shopping-ecommerce/
Flow Model 4
Flow models can be complex, but if you wish others to use and understand your flow models then simplicity is preferred. Multiple simple models is better than complexity. Nevertheless don’t omit something important! Source: https://www.sciencedirect.com/topics/computer-science/flow-model
Completing a Flow Model
Traditional Model
Components of a flow model
- individuals
- actual individuals e.g. two receptionists– choose one
- use their job role e.g. receptionist 1
- central role – use an individual
- responsibilities
- responsibility of the individual e.g. booking room
- groups
- groups of people with the same responsibilities
- e.g. secretaries
- flow
- how people communicate to get work done
- includes forms, paperwork, speech, formal and informal
- artefacts
- tangible objects such as invoices, record books, paperwork
- intangibles such as agreements
- task, topic or action
- topic of a conversation e.g. request of a room
- breakdowns
- problems in communications & coordination
Hotel System Example
Step 1: Who is involved
- Show the individuals who do the work
- Choose a central person (e.g. receptionist)
- Use ellipse or bubble for each person
- Write their job title
- Add very brief descriptions of their responsibilities
- Do the same for groups
Step 2: What is involved
- Show the flow of communication between people
- use arrows
- label the arrows with the topic or artifact
- artifacts are shown in boxes
- add locations & shared information places if they are significant
- e.g. a noticeboard
Step 2: What should be involved
- Note breakdowns and problems
- note breakdowns with a red lightning flash
- label this with brief details of the problem
also,
- use boxes for parts of a system, screens or pages
- use arrows for the flow
- model what parts are connected
- what happens, to what
When we perform research and analyze systems, products or services, we find what is good, bad, essential and opportunity to improve.
We use diagrams to explain this clearly!