843
Views
0

Once we’ve locked in a set of requirements, we can start designing! We’ll begin by creating a list of use cases, and storyboards (scenarios).

If you haven’t already, check out the other posts in this series: It’s easier than you think, lets build a web app

 

Our primary user flow will look something like this:

App-Makers employee: logs into the system, creates customers, searches for customers, updates customers,  creates email templates, sends emails to groups of customers.

App-Makers Administrator: sets up users of the system.

 

For each Use Case – we’ll put together a storyboard:

Use Cases Storyboards
App-Makers employee: Log into the app.

An employee must be registered to use the app. Employees can sign-in using the ‘Log-in’ button. This button should appear on the home page.

 After selecting the Login button:

  1. Enter valid email address.
  2. Enter valid password.
  3. Click “Log in” button.
  4. Success – dashboard should appear after successful authentication
  5. Fail – Alert dialogue should appear stating the issue.
App-Makers employee: Create a Customer

Employees can create a new Customer by using the ‘New Customer’ Button.

 After selecting the ‘New Customer’ button:

  1. Enter customer First Name.
  2. Enter customer Surname.
  3. Enter customer Suburb.
  4. Enter customer Country.
  5. Enter customer Industry.
  6. Enter customer Email.
  7. Enter customer Phone.
  8. Enter customer Referred Indicator.
  9. Enter customer Channel.
  10. Click “Save” button.
  11. Success – success notification
  12. Fail – Alert dialogue should appear stating the issue.
App-Makers employee: Search for a Customer

Employees can search for a customer by using search filters.

 Select the search input box:

  1. Enter search criteria
  2. Enter Filter criteria
  3. Matching criteria will be displayed.
App-Makers employee: Update Customer details

Employees can update customer details by selecting a customer record (may require filtering first to locate the correct record).

 Select a Customer record to edit:

  1. Update customer details e.g. (referral)
  2. Click “Update” button.
  3. Success – success notification
  4. Fail – Alert dialogue should appear stating the issue.
App-Makers employee: Create an Email Template

Employees can create a new Email Template by using the ‘New Email Template’ Button.

 After selecting the ‘New Email Template’ button:

  1. Enter Email Subject.
  2. Enter Email Body.
  3. Select mapped fields.
  4. Click “Save” button.
  5. Success – success notification
  6. Fail – Alert dialogue should appear stating the issue.
App-Makers employee: Send an Email to a group of Customers

Employees can send an email to a group of customers by selecting the relevant customers and adding them to a group.

 After selecting the ‘New Group Email’ button:

  1. Filter the list of customers to find the relevant ones.
  2. Add one or a selection of customers to the group.
  3. Check and Remove Customers from the group.
  4. Select the relevant email template.
  5. Click the “Save” button to keep the customers in the group.
  6. Click the “Send” button to send the email, or schedule it for a later time.
  7. Success – success notification
  8. Fail – Alert dialogue should appear stating the issue.
Admin: Set up new users

Administrators can add a new employee to the app

 Add a new user in the app.

 Now that we have an idea of how we’d like App-Makers employees to use our app, we can further support the storyboards by developing wire-frames. Storyboards and wire-frames are often created in parallel, and changing one normally leads to changes in the other.

In the next post we’ll create preliminary mockups (wireframes), to get a virtual walk-through of how we want our app to behave.

Functional Interaction Design – Part 6

Use cases and storyboards – Part 5

, ,
| Web Apps | 0 Comments
Previous

Behaviour Driven Requirements – Part 4
Next

Functional Interaction Design – Part 6

Let me know what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.