Front Development Status

Previously we covered our approach to developing our MVP prototype and our strategies to coordinate with design and research. As we are wrapping up development, we want to give you an update on the status of development and what we have accomplished in the past few weeks.

Recap

First, I will briefly review our technology stack and workflow. At the beginning of the project, we decided to inherit the tech stack of the previous version of Zensors UI, which is implemented using React in TypeScript. We kept our frontend prototype on its own development branch separate from Zensors development team’s so we can reduce much of the operational dependency. And for our frontend to communicate with Zensors backend, the majority of the communication would be in the form of GraphQL queries to Zensors GraphQL endpoint. This set-up allows us to experiment and develop our ideas freely, with very little dependency on the Zensors development team.

Workflows

Our original target going into the summer was to deploy an MVP prototype with a local co-working space partner. With this in mind, we have worked closely with our partners to identify how to tailor our prototype to best fit their needs. From our research, we have identified three core features for us to focus our MVP design and development on: question creation, question management, and data presentation.

However, now with the pilot deployment delayed, we coordinated with our clients again to figure out if we want to reprioritize our development effort. In that discussion, we decided to shift our focus to creating a more comprehensive set of workflows that are currently supported by the Zensors system. With this goal, we developed the following workflows.

Dashboard & notifications

This is the entry point of the Zensors experience. On this page, we present users with an overview of system status and available actions. On the top, we have large action tiles leading users to the most frequently used functions. The lower section visualizes data from running questions and allows users to customize what is shown as they see fit.

From our user study, notification is one of the most requested features. Although not supported by the Zensors system yet, we have created a mockup of notification page in this workflow.

Question creation

The purpose of this workflow is to guide users through the process of constructing a question for Zensors to answer and collect data. First, we ask our users to fill out information about the question, such as specific camera, the area of interest, sampling frequency, etc. To help improve the quality of user-generated questions, we prompt users to answer their own question in the review step, so they can go back and edit the phrasing if they notice any problems.

Question management

In this workflow, we provide users with tools to easily locate the question they’re interested in and explore the data collected for that question.

Camera management and set-up

In this workflow, we want to allow users to access information and apply actions on the cameras running in Zensors system. In camera details view, users will be presented with credentials of the camera, as well as a list of questions running on this camera. And to add a new camera to the system, we first input the name and type of the camera we want to add, then use the credentials generated by Zensors to link the camera to the system.

Impact

As Zensors getting closer and closer to a complete product, we want this MVP frontend to serve as a reference for how our team envision the user interaction flow to be. As this prototype is functional and integrated with Zensors backend system, we would love to see the Zensors development team adapt part or all of the frontend work we’ve done within their system, and possibly base their future frontend development on our work.

In addition to this frontend, another major piece of our deliverable is a set of polished screen designs that pushes the visual style one step further. We based these screen designs on the workflow specified in our MVP work, so the screen designs can be conveniently implemented on top of our functional frontend.

Coming up

In upcoming posts, we will be covering how we are wrapping up our design and research works and present our findings. Stay tuned for more Zensors action!