Voter Registration Application
An intuitive voter registration app for officers to efficiently manage registrations across Singapore on polling day.
Client:
Singapore Elections Department
Role:
UX Designer
Activities:
User Stories, task flows, wireframes, UX writing, prototyping, usability testing
Tools:
Miro, Adobe XD
Sections:
Understand, Ideate, Validate
Due to the confidentiality of this project, I am unable to share full details.
01 / Understanding the requirements
In this section:
- Requirements Gathering & User Stories
Requirements Gathering & User Stories:
My primary responsibility in this project was to design the user flows and screens for a tablet-based voter registration application. Another tech company handled the development and implementation.
Unlike typical website redesigns that start with user research and competitor analysis, I was given a set of twenty-two user stories to review and clarify with stakeholders.
User research was out of scope, and while I asked stakeholders about pain points with the previous interface, the feedback had a limited impact on the new design, as the flows were quite different.
To prepare for the clarification and alignment sessions, I reviewed the user stories, documented key questions, and consolidated a list of essential functionalities and potential scenarios to ensure everyone had a clear understanding of the app’s needs.
Here is an example of the user stories:
As an…
Officer
I want to…
Complete the set-up of device and checks in no longer than 5 minutes after launching the application.
Acceptance Criteria
- Log in successfully
Pass diagnostic tests e.g., internet connectivity and barcode scanner.
02 / Ideate
In this section:
- Task Flows
- Wireframing & UX Writing
Task Flows:
To better visualize the individual steps outlined in the user stories, I created task flows for each scenario and flow. By mapping out these task flows, I gained clarity on the user interactions and sequences, helping me identify the screens to wireframe.
There was one happy flow and ten unhappy flows. Once all the task flows were mapped out, I presented them to stakeholders and the tech team for validation, ensuring alignment before proceeding with the wireframing phase.
Here is an example of a task flow (not final):
Wireframing & UX Writing:
I created over 100 wireframes, using task flows as a guide to design intuitive, user-friendly interfaces tailored to the needs of the end-users. I also wrote clear and concise UX copy to enhance the overall experience, ensuring users could easily navigate through various functions and tasks.
A standout feature was the automatic progression to the next registration, eliminating the need for officers to manually press “done” in the happy flow scenario. This design choice was made to reduce the workload for officers handling the registration of over 100 people.
All wireframing and prototyping were done using Adobe XD.
03 / Validate
In this section:
- Iterative Usability Testing
Usability Testing:
After designing the screens, I conducted 10 usability testing sessions with election officers to evaluate the effectiveness of the new designs. Every task flow was tested, and I also simulated real-life scenarios by testing the physical setup of devices, such as linking the barcode scanner to the tablet and ensuring the clarity of instructions for officers.
The testing results showed that users easily understood the flows and found the screens intuitive. Based on their feedback, I made minor adjustments to the copy before moving forward with development.
Once the wireframes were finalised, I worked closely with the creative designer to enhance the aesthetics of the user interface. However, because the application’s focus was on functionality, the overall design remained closely aligned with the wireframes to maintain usability and clarity.
