High level Statement

The project aim to digitalize the process of lot drawing for pre-electoral usage. To simplify the manually drawing procedure, and enhance the overall experience.

Problem to solve

Can't visualize the drawing process, required to be more authentic

Complex co-current drawing steps for two difference set of data

Target Segmentation

There are total three different stakeholder to take part in the electoral preparation process. And there will be two end users are needed to interact with the interface.

The first type of users are "admin", who overseer the process of drawing Electoral Number order only without operate in any of it.

The second type of users are "officer", who in charge 1 or more districts of operation.

The last target group is candidate who are participate in the process.

Defining the user flow

Before moving to design interface, it is always important to understand the existing flow first and further optimize it later. It is clear that the drawing process is key journey for Officer user and the whole project. But the difficulties is that there are two type of drawing co-currently and alternatingly.

1. The electoral number for candidate

2. The advertising position number (Optional)

Which means before the drawing process. It is essential to have a clarity of which candidate are willing to participate drawing of advertising position. And the drawing process must show the alternatingly.

Additionally, there are a few more functional specification in the project. For example:

An undo action for drawing

Generating Report

As these are linear flow, it won't be covered here.

Solution

Candidate card design

Fig 1: The candidate option page and confirmation page

To help officers manage the advertisement option easily, a toggle button is added in each candidate card. And each candidate card are designed in a large size, in order to show a clear information to both officer and candidates who are at the same room during the process.

The confirmation page allows candidate and officers to confirm whether all informations are correct. And separate into two pools of drawing tickets. The one for advertisement position option is marked with grey outline as its original design in real life. Helping officer to understand quickly about how they work.

The micro interaction and animation for drawing process

Fig 2,3: The Drawing Animation of electoral number and advertisement position

In order to improve the authenticity of drawing process, a simulation of drawing process is added in the design. As it would be confusing and losting trust if the design shown the result directly without and "Process" is visualize to candidate.

The phenomenon is called labour perception bias, users inclinated to focus on labor and time inputs, disregarding the value of experience and expertise.

Full screen size of drawing screen

As you may noticed, the drawing screen is meant to designed in a full screen size without any scrolling. It is important to show all information clearly to all candidates. And the result of drawing are shown on the right side for users to review during the process.

Confirmation modal and result screen

Fig 4,5: The ending and result screens for drawing

And confirmation modal is design to enhance the experience of "Completion". All candidate will be see this modal after a few seconds of delay from drawing screen. Allowing them to have the final check on the result. And the officer will further navigate to the result screen for other actions to be performed.