Warren Township Mobile Application Redesign
In my Human Computer Interaction course, I designed a companion mobile application for the Warren Township, New Jersey Municipal website for users to access town information easier.
Identifying users, use cases, and user scenarios
First, I identified the users of this application: typically residents and visitors of Warren NJ
Then, I collaborated with a group to jot down all possible use cases of the application on sticky notes to help with the ideation process.
Written during this process:
“The purpose of this application is to provide users with all the information they need that can be given to them by the municipal government. This entails polls, public work guidelines, houses for sale/rent, landmarks, accidents & traffic jams, crime updates, etc. There will also be live COVID-19 updates during this time. The most frequented app resources will be on the homepage, and these resources will vary based on usability test results. The constant features that will be the most visible to all users will be contact information, emergency information, and upcoming events. Although I aim to optimize the information architecture as much as possible, there will also be a search function at the top of the page in case users cannot fin what they are looking for. My app will make accessing information easier for users by basing its information architecture on user workflow and thorough user research. Every placement of every function on the "Warren Township" app will have an evidence-backed purpose.”
Paper Prototype
Once I had a general understanding of who my users would be and how they might use the Warren Township application, I built a first draft, paper prototype using the software Marvel. This is a workflow map of how the first iteration of the application operates.
Usability Testing
I, then, had a potential user of the Warren Township application to participate in a usability test. I drafted a script and asked for him to speak out his thoughts as he navigated through the application.
Some major discoveries:
The user expects the most relevant resources to automatically appear on the homepage (i.e. this test took place in November 2020, so he mentioned that he thought “Voting Info” should be on the front page").
Buttons that do not redirect the user to a new page should be designed in a very specific way that is distinctly different from buttons that do redirect to a new page.
Low Fidelity Wireframe
Keeping the feedback from the Usability Test in mind, I built a low fidelity wireframe using the tool, Balsamiq.
Final High Fidelity Prototype
I based this high fidelity prototype on the low fidelity wireframe using Figma. I had to refer back to the qualitative research that I had previously conducted to consider how to incorporate color into the UI and how to design the features in more detail.
Link to clickable prototype: https://www.figma.com/proto/irB8lBDhQ6PSYdmu7pmHqQ/HCI-Prototype?node-id=29%3A680&scaling=scale-down