Designing User Journey (Cont'd)

User Journey Design (Continued)

In the previous article, we have covered a few user journeys related to these functions:

• Tag-based Time Tracking
• Manage Tags
• Manage Contacts
• Manage Currencies
• Manage Billing and Invoicing
• Manage Templates
• Manage Sequences
• Manage Invoices

In this article, we will continue with the remaining functions:

• Manage Transactions
• Manage Receipts
• Manage Documents
• Manage Taxation
• Manage Charts
• Manage Recurring Tasks
• Manage System Configs
• Manage Users

Manage Transactions

While most Transactions in the system are generated as a result of a Receipt, there may be instances where there is no documentation proof available but the payment has indeed happened. Whatever the reason is and whether the legality of it is questionable, as an app, we will not make any assumption and simply still offer the capability to manually record a Transaction.

Create Transaction

The user can create an Income Transaction or an Expense Transaction.

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

journey
    title Create Transaction
    section Create Transaction
        Go to Transactions: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Transaction

Normally, there should be no use case for editing a Transaction, especially one that is generated due to the generation of a Receipt. However, the user should be allowed to edit an entry in the unlikely event that the values are entered incorrectly. We assume that the user is absolutely certain of the impact of it, especially if the amount doesn’t match the corresponding Receipt.

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

journey
    title Edit Transaction
    section Edit Transaction
        Go to Transactions: 5: User
        Click "Edit": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Reverse Transaction

In the event that there is a refund of payment, the Transaction created for it can be reversed. This will create a new entry that offsets the original amount. We allow the user to input the amount to reverse, because it is possible that a partial refund has been made instead of the full amount.

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

journey
    title Reverse Transaction
    section Reverse Transaction
        Go to Transactions: 5: User
        Click "Reverse": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Delete Transaction

Normally, deleting a Transaction will not be allowed so that the transactions are properly accounted for. Instead, she should use the Reverse function to create a corresponding entry to offset the amount accordingly. However, the user should be allowed to delete an entry that is accidentally created if she’s absolutely certain of the impact of it.

Note that if the Transaction is generated due to the generation of a Receipt, then there is an association constraint and the user will not be able to delete this Transaction entry and must use the Reverse function or Void Receipt function.

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

journey
    title Delete Transaction
    section Delete Transaction
        Go to Transactions: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Receipts

Generate Income Receipt

After the user has issued an Invoice to her client and has received payment, she can generate a Receipt and a corresponding Income Transaction for the payment. This will be done in the Invoices page by using the “Generate Receipt” function.

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

journey
    title Generate Receipt
    section Initiate Generation
        Go to Invoices: 5: User
        Click "Generate Receipt": 5: User
    section Configure Receipt
        Select Receipt Config: 5: User
        Input Fields: 5: User
    section Preview and Generate
        Preview Receipt: 5: User
        Generate: 5: User

Edit Income Receipt

Because the generation of a Receipt will result in an Income Transaction being created, and there might have been other Transactions created in between the generation and now, it is not possible to simply edit the Receipt and the Income Transaction without messing up the Transactions amount summation.

For this reason, we will not allow the user to directly edit an existing Receipt.

Void Income Receipt

Instead, she will have to void it and generate the Receipt again. What happens is that the void action will also reverse the Income Transaction, so that when she re-generates the Receipt, it will not result in double entry of the income.

To make it more convenient, after voiding the Receipt, the user has the option to immediately re-generate a new one without going to the Invoices page and go through the Generate Receipt journey all over again.

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

journey
    title Void and Regenerate Receipt
    section Void Receipt
        Go to Income Receipts: 5: User
        Click "Void": 5: User
        Confirm: 5: User
    section Regenerate Receipt
        Click "Regenerate": 5: User

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

journey
    title Void and Regenerate Receipt (cont'd)
    section Configure Receipt
        Select Receipt Config: 5: User
        Input Fields: 5: User
    section Preview and Generate
        Preview Receipt: 5: User
        Generate: 5: User

Upload Income Receipt

For the case where the user receives payment via a third-party provider, and the Income Receipt is generated by the provider, the user can upload the document and the system will create a corresponding Income Transaction.

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

journey
    title Upload Income Receipt
    section Upload Income Receipt
        Go to Income Receipts: 5: User
        Click "Upload": 5: User
        Input Fields: 5: User
        Select File: 5: User
        Confirm: 5: User

Delete Income Receipt

The user may have accidentally uploaded an Income Receipt and needs to delete it. In this case, the user can do so via the Delete function, and the system will automatically create an offset Transaction for the deletion.

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

journey
    title Delete Income Receipt
    section Delete Income Receipt
        Go to Income Receipts: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Upload Expense Receipt

On the other hand, the user may also have expenses and want to upload an Expense Receipt from the provider. The user can upload the document and the system will create a corresponding Expense Transaction.

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

journey
    title Upload Expense Receipt
    section Upload Expense Receipt
        Go to Expense Receipts: 5: User
        Click "Upload": 5: User
        Input Fields: 5: User
        Select File: 5: User
        Confirm: 5: User

Delete Expense Receipt

The user may have accidentally uploaded an Expense Receipt and needs to delete it. In this case, the user can do so via the Delete function, and the system will automatically create an offset Transaction for the deletion.

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

journey
    title Delete Expense Receipt
    section Delete Expense Receipt
        Go to Expense Receipts: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Documents

Documents are automatically generated by the system, or uploaded by the user. These are raw files as a result of the actions mentioned earlier, so there is no Create, Update and Delete action available. If she needs to delete an uploaded Receipt, then it needs to be done through the Delete Income Receipt or Delete Expense Receipt journey. This is to ensure that the corresponding Transaction for each Document is properly accounted for.

However, the user can have a view of all the generated or uploaded Documents and download the raw files from a single page. Since the Documents may be tagged when they are generated or uploaded, she can also filter by Tags to download the raw files.

Download Documents

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

journey
    title Download Documents
    section Download Documents
        Go to Documents: 5: User
        Click "Download": 5: User
        Input Filters: 5: User
        Confirm: 5: User
        Save Files: 5: User

Tag Documents

Additionally, the user may also tag the Documents independently from the corresponding Invoice or Receipt for further categorisation.

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

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

Manage Taxation

Create Tax Table

For the purpose of tax estimation, the user can create a Tax Table with the relevant Tax Tiers and Tax Deductibles. This is a single user journey where the Tax Table, its Tiers and Deductibles are rendered in a single page so that the user does not have to navigate between multiple pages to setup everything.

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

journey
    title Create Tax Table
    section Create Tax Table
        Go to Tax Tables: 5: User
        Click "New": 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 Tax Table (cont'd)
    section Create Tax Tier (Multiple Entries)
        Go to Tax Tiers: 5: User
        Click "Add Tier": 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 Tax Table (cont'd)
    section Create Tax Deductible (Multiple Entries)
        Go to Tax Deductibles: 5: User
        Click "Add Deductible": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Tax Table

Since the Tax Table is for display purpose only, there’s no impact to other data if changes are made to the Tax Tiers or Tax Deductibles. As such, we will allow the user to edit all fields where needed.

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

journey
    title Edit Tax Table
    section Edit Tax Table
        Go to Tax Tables: 5: User
        Click "Edit": 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 Tax Tier
    section Edit Tax Tier (Multiple Entries)
        Go to Tax Tiers: 5: User
        Click "Edit": 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 Tax Deductible
    section Edit Tax Deductible (Multiple Entries)
        Go to Tax Deductibles: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Tax Table

Since the Tax Table is for display purpose only, there’s no impact to other data if it is deleted. As such, we will allow the user to delete the entry where needed.

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

journey
    title Delete Tax Table
    section Delete Tax Table
        Go to Tax Tables: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

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

journey
    title Delete Tax Tier
    section Delete Tax Tier
        Go to Tax Tiers: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

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

journey
    title Delete Tax Deductible
    section Delete Tax Deductible
        Go to Tax Deductibles: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Estimate Taxes

The Tax Tables are meant to estimate the taxes due to the Income Transactions and Expense Transactions created for the user’s business. She can view the tax estimation using one of the Tax Tables.

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

journey
    title Estimate Taxes
    section Estimate Taxes
        Go to Tax Tables: 5: User
        Click "Estimate Taxes": 5: User
        Confirm: 5: User

Manage Charts

Create Chart

The user can configure Charts to be displayed using either Work Logs or Transactions as data source, with the options to select the grouping category and filter by tags and date range.

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

journey
    title Create Chart
    section Create Chart
        Go to Charts: 5: User
        Click "New": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Edit Chart

The user can edit the options of a Chart and it will be re-rendered accordingly. Since there is no impact on other data in the system, the user can edit all fields of the Chart as needed.

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

journey
    title Edit Chart
    section Edit Chart
        Go to Charts: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Delete Chart

If the user no longer requires a Chart to be displayed, she can delete it.

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

journey
    title Delete Chart
    section Delete Chart
        Go to Charts: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage Recurring Tasks

Create Recurring Task

Suppose that the user wants to setup recurring Income Transactions or Expense Transactions. The system offers built-in task templates so that she can use them for this purpose. This will be done in a Recurring Tasks page.

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

journey
    title Create Recurring Task
    section Initiate Setup
        Go to Recurring Tasks: 5: User
        Click "New": 5: User
    section Configure Task
        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 Recurring Task (cont'd)
    section Configure Task Steps (Multiple Entries)
        Click "Add Step": 5: User
        Input Fields: 5: User
        Confirm: 5: User

Disable Recurring Task

The user may want to temporarily disable a Recurring Task, eg. when she suspends a third-party service subscription. Instead of deleting the task entirely, she can choose to disable it instead.

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

journey
    title Disable Recurring Task
    section Disable Recurring Task
        Go to Recurring Tasks: 5: User
        Click "Disable": 5: User
        Confirm: 5: User

Edit Recurring Task

The user may also edit a Recurring Task, eg. changing the description or schedule. However, the user should not be able to edit the task steps if the task has been run before, because those runs reference the steps and we will not be able to simply add or remove steps.

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

journey
    title Edit Recurring Task
    section Edit Recurring Task
        Go to Recurring Tasks: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

End Recurring Task

Instead of updating the steps of a task, the user will need to end the task and create a new one with new steps. This can be done by the “End Task” function.

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

journey
    title End Recurring Task
    section End Recurring Task
        Go to Recurring Tasks: 5: User
        Click "End": 5: User
        Confirm: 5: User

Manually Run Recurring Task

Normally the tasks will run by the configured schedule, but we will allow the user to manually run a task if it’s necessary, but we will not allow any change to be made to the parameters.

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

journey
    title Manually Run Recurring Task
    section Manually Run Recurring Task
        Go to Recurring Tasks: 5: User
        Click "Run": 5: User
        Confirm: 5: User

Delete Recurring Task

In the event that the user accidentally creates a task, if it has not been run before, then she can delete it.

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

journey
    title Delete Recurring Task
    section Delete Recurring Task
        Go to Recurring Tasks: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Delete Recurring Task Step

In the event that the user accidentally creates a step, if it has not been run before, then she can delete it.

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

journey
    title Delete Recurring Task Step
    section Delete Recurring Task Step
        Go to Recurring Task Steps: 5: User
        Click "Delete": 5: User
        Confirm: 5: User

Manage System Configs

The user can setup the System Config which will apply to the entire app throughout the effective period. The app will come with default settings, and the user can change them as needed. For simplicity, there will be no Create action, all changes are done as an Edit action. Since these settings are required for the system to function properly, there will be no Delete action available.

Edit System Config

Everytime the user makes a change, the system will automatically set the effective end date of the latest record, and set the effective start date of the new record created from the change.

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

journey
    title Edit System Config
    section Edit System Config
        Go to System Configs: 5: User
        Click "Edit": 5: User
        Change Fields: 5: User
        Confirm: 5: User

Manage Users

Create User

At the first time the user launches the app, she will need to create a new User record for herself.

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

journey
    title Create User
    section Create User
        Launch App 1st Time: 5: User
        Click "New User": 5: User
        Input Credentials: 5: User
        Confirm: 5: User

Login User

After creating a User record, the user can subsequently login to the app using the credentials created earlier.

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

journey
    title Login User
    section Login User
        Launch App: 5: User
        Click "Login": 5: User
        Input Credentials: 5: User
        Confirm: 5: User

Edit Profile

The user may then change her name or password in the Profile page.

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

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

That’s A Wrap

Finally, we have gone through all the user journeys of the app. The purpose of this exercise is to understand what are the various user workflows, so that we have a clearer idea how to design the system architecture and interactions.

In the process of writing the user journey diagrams, I also made a few changes to the data models and refined the requirements. This is not uncommon, because no one knows exactly every detail at the beginning, not even the end users themselves. It is through the process of design and analysis that we can find out the shortcomings of the earlier steps of the process, and refine them accordingly.

Which is why, I like to start with design and analysis first, instead of dive straight into implementation. When dealing with abstract designs, making changes is easy, I just have to update the Mermaid syntax or a few text. If I have started with implementation, I would have to delete many lines of codes, or even create database migrations to change the data schema.

This has been a fruitful exercise for me. Let’s move on to designing the sequence diagrams of the system!