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();
      });
      

4. 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();
      });
      

5. 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();
      });
      

6. 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();
      });
      

9. 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:

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

Title: Landing Page
Description: The landing page is where staff will see a brief overview of the app.

Wireframes:
(Click on a diagram to expand)

Login Page

Interaction Flow Diagram: Login Page

Title: Login Page
Description: The login page is where staff will log into the app.

Wireframes:
(Click on a diagram to expand)

Customers Page

Interaction Flow Diagram: Customers Page

Title: Customers
Description: The customers page is where staff will be able to view, search, create, and update customer details.

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