Design & Development for a Data-Collection Mobile Application
Roles
UX Designer
Developer
Toolkit
Figma
Adobe CC
Flutter
Yellowstone Ecological Research Center
Client
Overview
This mobile application was developed for the Yellowstone Ecological Research Center (YERC) for my Senior Capstone Project. This mobile application replaced their paper, data-collection system and is used by volunteers and staff to collect ecological data throughout Yellowstone National Park and the surrounding region. I originally designed the UI for this application in May 2022 using Adobe CC and developed the application with Flutter.
I have since returned to this project to redesign the UI by working through the UX design process. Because this was a capstone project for my degree in Computer Science and was completed in one semester I devoted more time to building the application than designing a beautiful UI. I have included screenshots of the original design below to show where this project began and to highlight my development as a UX/UI designer.
Original UI Design
Design Process
Personas
Developing two personas was my first step when redesigning this mobile application. Because the stakeholder had described to me what the potential users of this application would be like, I chose not to create personas in my first iteration of this project. During the redesign, however, I chose to create personas because I wanted to intentionally think through what benefits and drawbacks they would experience as a result of this new system.
Through developing these personas, I discovered that being able to submit dataforms from anywhere was a major benefit of having a mobile application. The existing paper system often required users to drive long distances to submit their dataforms. A drawback I discovered was that figuring out a digital system can be difficult for some users, especially those who have worked with paper systems their whole lives.
I concluded that two key features of this application were the ability to submit dataforms from anywhere and a user interface that was simple and intuitive.
Application Map
I began developing the application’s structure and flow by creating an application map. This helped me to outline the necessary screens and overall flow. As is discussed in the persona section above, keeping the UI simple is an important goal for this project. As a result, I sought to keep the screen count low.
User Flows
Next, I developed user flows for the two personas. These scenarios cover the main two functionalities of the application: creating a new dataform and editing an existing dataform.
This process also helped me to work through the process of selecting a sample type. In the initial application design, the stakeholder and I decided to place this selection in the top bar of the application. The current sample type was listed in the top bar and if the user wanted to create a dataform for a different type of sample, they had to first tap the ‘edit’ button, select the new sample type, tap away from the popup, and finally tap the ‘add’ button to create the new sample. I found this process clunky and confusing, so in my redesign I created a sample type selection popup that would appear after the user pressed the ‘add’ button. When the user selects their desired sample type, the corresponding dataform will open.
This new process is reflected in the ‘Create a New, Soil-Sample Dataform’ user flow above and the original design can be seen to the right.
Task Flows
I created a task flow for changing the sample type to further break down this new process. I also created a task flow for uploading a dataform to the cloud because this process was not covered in either of the user flows.
Low-fi Wireframe
I compiled what I learned from the previous steps into the low-fi wireframe which serves as a rough outline of the application.
Mid-fi Wireframe
Before I began creating my mid-fi wireframe, I first brainstormed the design of two key components: the saved dataform tabs on the home screen, and the input fields on the dataform screen. I used the original design as a starting point and worked towards a more clean and beautiful version.
