Before programmers begin coding a software solution, successful software-development teams will leverage a UX designer to specify how the user will interact with the system, to include which screens the user will see in what order as well as the content and purpose of each screen. In addition, the team will leverage a UI design to specify each screen’s look and feel with respect to colors, layout, fonts, and more. Often, these designers will create simple wireframe mockups of the screens and flows.
The following diagram illustrates a sample screen mockup:
Figure 15. The diagram illustrates a sample screen mockup
In this lesson, you will create wireframe mockups using Visio, LucidCharts, or even PowerPoint for the following system:
A customer arrives at the e-commerce company’s mobile or web landing page, wherein they log in to the system. The site will then display the products available for sale from which the customer can place an order for one or more products. When finished shopping, the customer can check out and complete their purchase. After providing their bill-to and ship-to addresses, the customer enters their credit card data. Upon credit card authorization, the company ships the product. The customer may then place another order, leave, or later return to the site.
Hint: The wireframe mockups should include at least the following:
Landing page with login
Product presentation page
Check out screen with a shopping cart
Bill-to and ship-to screens
- Credit card input screen
- Thank you for your order screen
- Length: 6-8 wireframe documents for the required screens within a Word document.
0 comments