OneStop
B2C design to help governments treat their citizens like VIPs
OneStop was created as the one stop shop for all Maryland government services. Its photo upload feature allows state residents to attach photos to forms before submitting them. A common use case would be to attach a photo to a license application.
Support tickets for OneStop's photo uploader were piling up. My team needed to figure out why and fix it fast.
I resigned a mobile friendly photo upload modal feature and reduced support tickets by 85%
UI/UX Designer
UI/UX Designer, Product Manager, Developer, SME
Feature Iteration
I use the following process when designing an MVP. My goal is to find the one thing my product can do uniquely well and then get it to market fast.
User research is the foundation of every great product. It helps me design solutions that feel delightful and intuitive. My first task is to understand my user and the pain points between them and their goal.
OneStop's users consisted of people accessing state government services, ranging from getting a real estate broker's license to registering for COVID vaccine appointments. This required us to cater to a large variety of user personas.
Nobody goes to a government website to have a good time. They want to get in and get out as quickly as possible. Most importantly, they don't want anything to go wrong.
I started by meeting with Enovational's customer support specialists to gather all the data and support tickets they had on the problem.
This was followed by a deep dive into the feature itself. I love diving into features. It gives me a deep understanding of the product and mindset of my user.
Each research phase ends with my team agreeing on a problem statement in writing. This clarifies our learnings and keeps everyone on the same page.
My photo uploader deep dive concluded the culprit was that photo uploads were done in line with the rest of the form. This allowed the possibility that photos could be accidentally edited as users scrolled through the page.
Accidental edits were resulting in dozens of support tickets when applications were rejected due to improper photo uploads, wasting time and money for governments and the people they serve.
The best solutions come from cross-functional skillsets working together. In the ideate phase I like to forget about titles and treat everyone as a designer to pitch in ideas and ask questions.
Ideation begins with writing down the question I’m designing for to ensure clarity. I like to start each question with the phrase “How might we upgrade our user's ability to…?” (conveniently acronymed to HMWUOUAT…), in this case, the question concludes with “upload and submit photos”.
With my question down, I start what I call a 'Walk and Think'. Walk and Thinks are ideation sessions where I set an idea quota, typically of 10, then start a monotonous task such as walking in circles and writing down ideas as they come to me.
Idea selection and generation are two separate processes in the brain, so for now, I focus on quantity over quality. A quota is necessary as well because it helps avoid satisficing... the process of finding an answer that's 'good enough'. But if I'm gonna treat OneStop's users like VIPs I don't want good enough, I want great.
I decided on using our design systems' modal component to create a confirmation screen for uploading and editing images. The modal appears automatically on upload and users must click the ‘Edit’ button to return and ‘Save’ to confirm.
The decision to use a modal for this feature was made because it creates a clear distinction in the user’s mind between editing and the rest of the form—like safety rails to prevent them from getting into trouble.
Leveraging Enovational's design system saves the development team time too.
I could have stopped there, but something was missing if I wanted to treat Eno’s users like VIPs. I added help text underneath the photo to subtly prompt users to confirm that this was how they intended to upload their photo. I like to think of it as a tailor putting a customer in front of a mirror to show them how their suit looks before buying.
I wasn't sure if it was necessary, but I like throwing ideas at the wall and testing to see what sticks. User testers loved it so the help text stuck around.
To ensure both minimalism and consistency I used the design of help text present elsewhere throughout the application.
At Enovational, user testing was done to validate both lo-fi and hi-fi designs. My team's tests were conducted virtually with the goal of validating the clarity and efficacy of our designs.
A key issue that arose during testing was mobile optimization. There was none, as our product had begun as a primarily desktop application and was still in its early stages. Many components used by the image uploader were nearly unusable due to sizing issues.
A key issue that arose during testing was mobile optimization. There was none, as our product had begun as a primarily desktop application and was still in its early stages. Many components used by the image uploader were nearly unusable due to sizing issues.
