Designing User Journey

User Journey Design

Now that we have determined the domain models of the app, we will move on to designing the user journey, which is the flow of how the user will interact with the data models.

The most common interactions the user will have with the data models are what we call CRUD: create, read, update and delete. With these actions, we can guess that there will be corresponding functions on each data model to handle the CRUD requests.

In this exercise, we will go back to the 1st part where we list down the user requirements, and design the CRUD journey of each requirement. This will then inform us how to connect the various data functions to form the flow of each user journey, which will then be presented with a Sequence Diagram at the system level.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Design an App
    section Requirements Gathering
        Done: 5: Me
    section Domain Modelling
        Done: 5: Me
    section User Journey Design
        Todo: 5: Me

Tag-based Time Tracking

Create Work Log

Typically, the user will navigate to the Work Logs page, click on a “Start” button to initiate a new Work Log. Then she will input the start time and description for the entry. For convenience, the system may pre-fill the start time with the current time, but we provide the flexibility to change the time if say, this is a back-filled entry. She may also input the end time, content and tags if this is a back-filled entry, but if not, then she will submit the start time and description right away.

At the end of the work, she will go to the Work Log, and click the “End” button to complete the log. Now, the system may pre-fill the end time, but again, we allow the flexibility for the user to input the value. She may also input the content which can be a detailed log of the work done, and add a few tags, then submit the entry.

This completes the flow of creating a new Work Log.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Work Log
    section Start Work Log
        Go to Work Logs: 5: User
        Click "Start": 5: User
        Input Fields: 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Work Log (cont'd)
    section End Work Log
        Go to Work Logs: 5: User
        Click "End": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Work Log

It may also be possible that the user wants to update an existing Work Log, eg. when she notices a mistake in the content, or that she would like to refine the description. We will allow the user to do so via the “Edit” button. Then she can make changes to any of the fields, including the start and end time. Here we don’t restrict which fields are editable, because we want to give the user complete control over the log since this is what she will use to invoice her clients.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Work Log
    section Edit Work Log
        Go to Work Logs: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Work Log

In an unlikely case, the user may want to remove an existing Work Log, perhaps because she had the intention to start work and initiated a log, but was caught in unexpected situations and could not actually do any work, so she had to remove the log.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Work Log
    section Delete Work Log
        Go to Work Logs: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Tags

By default, whenever the user adds a Tag to the Invoice or any record that accepts tagging, the system will automatically create the Tag entry with the default styling. The user can then edit the Tag, or even create new ones without using them at first.

Create Tag

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Tag
    section Create Tag
        Go to Tags: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Tag

The user may also edit a Tag, eg. changing the description and styles. However, since the category and name form the composite primary key, we will not allow editing these fields.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Tag
    section Edit Tag
        Go to Tags: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Tag

In the event that the user accidentally creates a Tag, she may delete it. Again, if the Tag is already in use, then we will not allow deletion of it.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Tag
    section Delete Tag
        Go to Tags: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Contacts

Create Contact

Now let’s say the user has found a new client, and would like to setup invoicing for this client. Before she can do so, she would need to create a new Contact entry first.

For a start, the user may only need to input important information such as name, address, and contact details. The other fields are not needed for generating Invoices.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Contact
    section Create Contact
        Go to Contacts: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Contact

We also allow the user to edit an existing Contact, eg. when the client changes address or contact details.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Contact
    section Edit Contact
        Go to Contacts: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Contact

Normally, the user would not need to delete a Contact, especially if there’re already data associated with the Contact. So if the user attempts to delete an entry that already has associated data, the system will not allow the action.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Contact
    section Delete Contact
        Go to Contacts: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Currencies

The user may want to configure Currencies for the purpose of tax computation if the client uses a different Currency.

Create Currency

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Currency
    section Create Currency
        Go to Currencies: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Currency

If the user has made a mistake in configuring the Currency, she may edit it accordingly. Or if the Currency exchange rate is no longer effective, then she can update the effective end date.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Currency
    section Edit Currency
        Go to Currencies: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Currency

If the user has accidentally created a Currency, she may delete it, but only if it is not yet used by any configuration.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Currency
    section Delete Currency
        Go to Currencies: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Billing and Invoicing

Configure Billing and Invoicing

After creating a new Contact for the client, the user then proceeds to configure invoicing for this client. To make the user experience more seamless, we allow the user to configure invoicing for the Contact in the same Contacts page by just clicking on a “Configure Invoice” button, so there’s no need for her to navigate to a different page.

The page will render each config in a separate section, and the user can independently configure for each as needed.

To configure an Invoice, the user also needs to select the Invoice Template to use. For convenience, we let the user select from a list of built-in templates. If she needs to create new templates, then she can do so separately first, and come back to configuring for this particular Contact. For the Sequence, the user will need to create one separately first before being able to use it in the Invoice.

Along with the Invoice, the user may also configure the Income Receipt that will be generated for the Contact when payment is made. Similarly, there will be built-in templates available for use to generate the Receipt, but she will need to first create the Sequence separately before being able to use it in the Receipt.

Lastly, the user may also want to configure the billing structure for this Contact if she wants the system to automatically generate Invoice Lines instead of having to manually input them.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Configure Invoice
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Configure Invoice (cont'd)
    section Create Invoice Config
        Go to Invoice Configs: 5: User
        Click "New Invoice Config": 5: User
        Input Fields: 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Configure Invoice (cont'd)
    section Create Receipt Config
        Go to Receipt Configs: 5: User
        Click "New Receipt Config": 5: User
        Input Fields: 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Configure Invoice (cont'd)
    section Create Billing Config (Multiple Entries)
        Go to Billing Configs: 5: User
        Click "Add Billing Config": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Billing and Invoicing

Updating existing Invoice Configs, Receipt Configs and Billing Configs is allowed, but we will restrict the fields that can be edited. For example, we will not allow editing the invoice cycle or due date cycle configs, because then the previously generated Invoice associated with this particular instance will not make sense anymore.

If there is a major change in the invoice cycle, then the user should create a new Invoice Config and use it to generate subsequent Invoices.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Invoice Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Edit Invoice Config
        Go to Invoice Configs: 5: User
        Click "Edit Invoice Config": 5: User
        Change Fields: 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Receipt Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Edit Receipt Config
        Go to Receipt Configs: 5: User
        Click "Edit Receipt Config": 5: User
        Change Fields: 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Billing Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Edit Billing Config
        Go to Billing Configs: 5: User
        Click "Edit Billing Config": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Billing and Invoicing

It is unlikely that the user would need to delete an existing Invoice Config, Receipt Config or Billing Config, unless it is created accidentally and she wants to remove it. The user will only be able to delete entries that have no associated data.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Invoice Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Delete Invoice Config
        Go to Invoice Configs: 5: User
        Click "Delete Invoice Config": 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Receipt Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Delete Receipt Config
        Go to Receipt Configs: 5: User
        Click "Delete Receipt Config": 5: User
        Confirm: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Billing Config
    section Initiate Configuration
        Go to Contacts: 5: User
        Click "Configure Invoice": 5: User
    section Delete Billing Config
        Go to Billing Configs: 5: User
        Click "Delete Billing Config": 5: User
        Confirm: 5: User

Manage Invoice and Receipt Templates

Let’s say the user doesn’t want to use the built-in templates and wants to create custom ones for her clients, then she will go to the Templates page to configure them.

For convenience, we will list all templates in a single page, and use a type field to differentiate between Invoice Template and Receipt Template, since both types have the same fields otherwise.

Create Template

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Template
    section Create Template
        Go to Templates: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Template

The user may also want to edit an existing template, so we will allow for that. The user can go to the Templates page and click on the “Edit” button for the template she wishes to edit.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Template
    section Edit Template
        Go to Templates: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Template

The user may also want to delete an existing template, but we will only allow deletion of a template that is not used by any Invoice Config or Receipt Config. The user can go to the Templates page and click on the “Delete” button for the template she wishes to delete.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Template
    section Delete Template
        Go to Templates: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Sequences

Create Sequence

The user may also want to customise the Sequence for each Contact, and can do so in the Sequences page.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Create Sequence
    section Create Sequence
        Go to Sequences: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Sequence

Once a Sequence has been used in an Invoice or Receipt, it should not be changed anymore. Instead, the user will need to create a new sequence with a different starting number and change the other fields accordingly. So there will be no “Edit” action for Sequences.

Delete Sequence

A user may delete a Sequence that has not been used in any Invoice or Receipt. This can be done in the Sequences page.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Delete Sequence
    section Delete Sequence
        Go to Sequences: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Invoices

Generate Basic Invoice Based on Work Logs

Now that the user has configured how to generate Invoices and Receipts, we will have a function for the user to filter the Work Logs to generate a new Invoice. This will be done at the Work Logs page. Typically, the user only needs to include Work Logs for the Invoice, and input the invoice date and due date accordingly.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Generate Invoice
    section Initiate Generation
        Go to Work Logs: 5: User
        Click "Generate Invoice": 5: User
    section Configure Invoice
        Select Invoice Config: 5: User
        Input Work Log Filters: 5: User
        Input Invoice Fields: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Generate Invoice
    section Preview and Generate
        Preview Invoice: 5: User
        Generate: 5: User

Generate Invoice with Additional Invoice Lines

In the event that the Work Logs are not the only billable items, the user may add additional Invoice Lines for the additional billing items.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Generate Invoice with Invoice Lines
    section Initiate Generation
        Go to Work Logs: 5: User
        Click "Generate Invoice": 5: User
    section Configure Invoice
        Select Invoice Config: 5: User
        Input Work Log Filters: 5: User
        Input Invoice Fields: 5: User

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Generate Invoice with Invoice Lines (cont'd)
    section Add Invoice Line (Multiple Entries)
        Click "Add Line": 5: User
        Input Fields: 5: User
        Confirm: 5: User
    section Preview and Generate
        Preview Invoice: 5: User
        Generate: 5: User

Edit Invoice

If the user is not satisfied with the generated Invoice, she can edit the fields and re-generate the document. This will be done in a separate Invoices page. Note that since the existing Invoice has already filtered the Work Logs and used them for generating the Invoice Lines, it is not feasible to allow editing the data source, so we will only allow editing static fields like invoice date.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Edit Invoice
    section Edit Invoice
        Go to Invoices: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
    section Preview and Generate
        Preview Invoice: 5: User
        Generate: 5: User

Void Invoice

In the unfortunate event that the user has generated an Invoice incorrectly, instead of deleting it entirely, we will allow her to void it instead. This is for accountability reason, because there’s a Sequence in the Invoice, any missing number should be accounted for.

Once the user voids an Invoice, it can no longer be edited.

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
  "primaryColor": "#f4e3d7",
  "primaryTextColor": "#502d16",
  "primaryBorderColor": "#784421",
  "lineColor": "#784421",
  "secondaryColor": "#deaa87",
  "tertiaryColor": "#c87137"
}
  }
}%%

journey
    title Void Invoice
    section Initiate Void
        Go to Invoices: 5: User
        Click "Void": 5: User
        Confirm: 5: User

Wrap Up For Now

We’ve covered quite a bit in this exercise, let’s take a break for now and we will continue with the remaining user journeys in the next one.