2279
Views
Update Customer - mobile

Update Customer – mobile

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

Re-cap of the requirements:

Here is a list of the requirements that we will be designing and building (this is a subset of the identified requirements for this project):

  1. Identify key characteristics of the current customers that use App-Makers services.
    1.  it("The Customer should have an Address", function() {
           var suburb = customer.suburb;
           var country = customer.country;
           expect(suburb).not.toBeNull();
           expect(country).not.toBeNull();
      });
      
    2.  it("The Customer should have an Industry", function() {
           var industry = customer.industry;
           expect(industry).not.toBeNull();
      });
      
  2. A record of each customer
    1.  describe("As an App-Makers employee, I want to create a customer record",
      function() {});
      
    2.  describe("As an App-Makers employee, I want to update a customer record",
      function() {});
      
    3.  describe("As an App-Makers employee, I want to retrieve a detailed customer record",
      function() {});
      
    4.  describe("As an App-Makers employee, I want to retrieve a list of customer records",
      function() {});
      
    5.  it("The Customer must have a first name", function() {
           var firstName = customer.firstName;
           expect(firstName).not.toBeNull();
      });
      
    6.  it("The Customer must have a surname name", function() {
           var surname = customer.surname;
           expect(surname).not.toBeNull();
      });
      
    7.  it("The Customer must have an email address", function() {
           var email = customer.email;
           expect(email).not.toBeNull();
      });
      
    8.  describe("Customer email validation", function() {
           it("should validate [email protected]",function(){
                var result = is_valid("[email protected]");
                expect(result).toBe(true);
           });
      
           it("should not validate someone@somewhere",function(){
                var result = is_valid("someone@somewhere");
                expect(result).not.toBe(true);
           });
      });
      
      is_valid = function(email){
           var reg_expr = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
           return reg_expr.test(email);
      };
      
    9.  it("The Customer should have a phone number", function() {
           var phone = customer.phone;
           expect(phone).not.toBeNull();
      });
      
  3. An indication of which customers have approached App-Makers from a referral
    1.  it("The Customer should have a referred indicator", function() {
           var referred = customer.referred;
           expect(referred).not.toBeNull();
      });
      
  4. The channel that new customers are using to contact App-Makers
    1.  it("The Customer should have a channel indicator", function() {
           var channel = customer.channel;
           expect(channel).not.toBeNull();
      });
      
  5. Solution Specific Requirements
    1. A user must be registered to access the system and the information contained within it.
    2. A user must be able to log-into the system from a mobile device, tablet, and laptop computer.
    3. When an attempted login fails, the user must be prompted to try again.

Creating a design flow based on the requirements

The requirements above can be grouped into two buckets:

  • User Authentication
  • Customer management

These two buckets give us two entities – Users, and Customers.

For simplicity, we’ll split each entity into it’s own page:

  • Login page – for user authentication – which maps to the Users entity
  • Customers page – to view, create, update and manage customer details – which maps to the Customers entity
  • PLUS a Landing page – to give our app a launching pad

Mapping the requirements to the interaction design flow

To make sure that we haven’t missed anything in our flow, we’ll map the requirements to the pages:

Page Requirements
Customers page 1. Identify key characteristics of the current customers that use App-Makers services.
4. A record of each customer
5. An indication of which customers have approached App-Makers from a referral
6. The channel that new customers are using to contact App-Makers
Login page 9. Solution Specific Requirements
Landing page There are no specific requirements for a landing page.

Lets get visual

At this point, we have a set of requirements, and a high-level interaction flow. Now, we can start to sketch out the UI patterns for our design.



Landing Page

Interaction Flow Diagram: Landing Page
App1-part6-1
Title: Landing Page
Description: The landing page is where staff will see a brief overview of the app.

Use Case Storyboard
App-Makers employeeLog 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.

When the Login button is selected:

  1. Navigate to the login page

Wireframes:
(Click on a diagram to expand)



Login Page

Interaction Flow Diagram: Login Page
App1-part6-2
Title: Login Page
Description: The login page is where staff will log into the app.

Use Case Storyboard
App-Makers employeeLog into the app.

An employee must be registered to use the app. Employees can sign-in using the ‘Log-in’ button.

On this page:

  1. Enter a valid username.
  2. Enter a valid password.
  3. Click the “Log in” button.
  4. Success – the customers page should appear after successful authentication
  5. Fail – an alert dialogue should appear stating the issue.

Wireframes:
(Click on a diagram to expand)



Customers Page

Interaction Flow Diagram: Customers Page
App1-part6-3
Title: Customers
Description: The customers page is where staff will be able to view, search, create, and update customer details.

Use Cases Storyboards
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 employeeSearch 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 employeeUpdate 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.

Wireframes:
(Click on a diagram to expand)

Awesome, we have our high level design sorted! In the next post we’ll go through the process of setting up the MEAN stack for development.

Part seven – Getting started with the MEAN stack

Functional Interaction Design – Part 6

2 Comments

Let me know what you think

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

  • Didi
    Reply

    Hi Shristi,
    first: you did a great job on bossable.com with your 360 degree view & tutorials on how to build a great web app based on mean stack!
    I have one question: do you use a specific tool for designing the interactive flow diagrams / wireframes? If so, which tool you would prefer?

    Cheers, Didi

    • bossable

      Hey Didi,
      Thanks for your kind words! 🙂
      I use Adobe Illustrator for process flows and wire-frames. For complex process flows, like business process re-engineering work, I use Microsoft Visio.