3-4 Create Wireflow for Web App
Your team will create a wireflow of your smart device's web app to show how someone would interact with it to complete a task. Wireflows are prototypes that allow you to design, test, and revise a website or app before coding it.
What is a wireflow? It's a combination of wireframes and a flowchart:
A wireframe is a sketch or mockup of a webpage or app screen (also called the user interface). A wireframe shows how elements are visually arranged in the user interface (such as: navigation menus, icons, text, images, buttons, etc.). Early in the design process, wireframes are simplified outlines of the user interface. Later in the process, more detailed mockups are created.
A flowchart is a diagram representing the steps in a process or task from start to finish. The flowchart includes steps completed by the user and steps completed by the system (i.e., the app). A flowchart might include decision points where the process or task can follow different paths. Flowcharts are helpful for figuring out how to design and program your app.
A wireflow is a sequence of user interface mockups (wireframes) showing the steps in a task flow (flowchart) as a user interacts with a website or app.
The easiest way to create a wireflow is by sketching a sequence of wireframes representing a task flow. There are also tools available (such as: InVision, Marvel, NinjaMock, etc.) to create (or import) wireframes and turn them into interactive wireflows (with clickable links, buttons, etc.) that can be tested with users.
EXAMPLE
Here is an example of a wireflow for a task in a smart light web app. This wireflow shows how the user interface changes as the user turns on a set of lights and adjusts the brightness of the lights.
As you can see, a wireflow can use simple screen mockups and still be effective for showing how a user interacts with the app. Each mockup also includes a brief description to help clarify what the user does and what the app does in response.
Your team will create a wireflow with 3-6 screen mockups to show how a person would use your web app to complete a specific task that involves interacting with your smart device.
As you decide what tasks your web app could include, keep in mind there are three main ways that your web app can interact with your smart device through Particle Cloud:
web app can receive and display data from smart device (by getting Photon variables)
web app can send data and commands to smart device (by calling Photon functions)
web app can receive notification alerts from smart device (by streaming Photon events)
The task that you select for this first wireflow should be core to the purpose and experience of using your smart device system. Therefore, do NOT select a mundane task such as: creating an account, logging into the app, etc.
YOUR TASK
Use this planning document to help develop the sequence of screen mockups for your wireflow.
Print and use a device template to sketch your wireflow. There are templates for a smartphone, tablet (7 inch or 10 inch), or desktop web browser. (You may need multiple copies of your device template to create all the screen mockups.) Be sure to include a brief description for each screen mockup to help explain how the user and the app interact.
Last updated
