myTTB

Project: Alcohol and Tobacco Tax and Trade Bureau: myTTB - (a devision of the Department of Treasury)
Role: UX/UI Designer
Employer: Metric5
Tools: Adobe XD, Adobe Illustrator

Note: to protect proprietary information, sensitive information, indicators, and colors have been swapped

MyTTB is the new integrated and personalized online system for our industry members to transact business with TTB (Alcohol and Tobacco Tax and Trade Bureau), a bureau under the Department of Treasury. This portal offers a “one-stop shop” experience to access TTB online services.

My opportunity as a UX/Ui designer at myTTB was one of my most educational experiences.

A little summary of what I did at MyTTB:

My role as a UX/Ui designer with myTTB entailed couple things.

First is digitally mocking up forms. Nobody enjoys having to fill out long difficult forms, sadly it is a necessary evil for all of our applicants. It was my team’s goal with everything we created (digital forms, form component, and new online system) to put our applicant’s needs first, and to make their experience with our product as easy and seamless as possible.

Second is User Research. I had the privilage of working with talented and experienced Senior Ux Researcher who taught me everything from creating Moderator guides to effectively conduct user interviews to synthesizing findings using various tools such as Affinity mapping, personas and design studios. I was fortunate enough to have this mentorship, that really thought me how to determine what to prioritize when having to juggle multiple asks, in multiple different teams and be able to present findings in a progressive, iterative way.

Third is working with the development team. Maintaining a good relationship and trust with the development team is a skill!!!!! This means having good communication with the developers, working together with the developers to create a functional, user friendly, and ascetically pleasing product.

Form Mock-Ups

(Please note that all the sensitive information, titles, and names were removed, and replaced with placeholder or Lorem ipsum.) So in our line of work, our applicants have to fill out long, difficult, legally binding forms. Depending on the applicant, some have them to fill these forms out everyday, and others twice a year. So it is extremely important that we make our forms as user friendly as possible for all our variety of applicants.

One of my biggest jobs at TTB, was to help digitize forms and a lot goes into it. I worked on an agile team, with lots of Developers, Scrum masters, Ux Designers, UX researchers, Legal, SMEs and POs. We all played different roles to collectively produce a functional digital form.

People i’ve worked with :

Developers - A full-stack developer is a web developer or engineer who works with both the front and back ends of a website or application

Scrum Master - A Scrum Master is a facilitator for an Agile development team. They are responsible for managing the exchange of information between team members.

UX Designer (me!) - User experience (UX) design is the process design teams use to create products that provide meaningful and relevant experiences to users.

SMEs - Subject matter experts

POs - Product owners

This task could be given multiple ways.

1. Create mocks from scratch using paper form

2. Update digitized forms to meet current design standards

3. Continue mocking forms, where another designer left off.

Create mocks from scratch using paper forms.

This means that this form currently is not digitized. The UX team would take the paper form, and gather all the necessary people, and requirements for digitizing this form. This could involve BAs, Scrum Masters, SMEs, Product owners ,Copy specialists and as a team we would understand the form, understand the requirements, understand the LOE for developers, an crate a mock using either Adobe XD or sketch. While designing these mocks, designers would note all the developer notes that would benefit the developers on the left hand margin. After delivering those mocks to the appropriate people, Developers would pick up the page that has been mocked, and develop them in a testing environment. Designers and Developers go back and forth perfecting the page, until the developed page looks identical to the mock, and behaves as expected.

Update digitized forms to meet current design standards

Updating forms that have been previously developed is very common. This could happen because of a variety of reasons. A new team can pick up where a previous team has left off. A designer or developer may have left for a different role. Requirements or copy may have been updated. This scenario would mean understanding what needs to changed. This may or may not require completely new mocks. And this will almost definitely require teamwork with developers to getting outdated pages looking up to date.

Continue mocking forms, where another designer left off.

This is also a very common scenario. In this scenario communication with the previous designer(if possible) is very helpful. Both designers can communicate, and assure that all requirements are being captured. But if the previous designer is not available, it can involve all the steps stashed in “crate mocks from scratch” or it can be as easy as communicating with developers what copy has been updated.

UX aspect of this role:

The user experience design and user interface design aspect of this role comes in a couple ways.

1. User research (research, interviews, synthesizing data, and creating a curated product)

2. iterating on design components

User research:

There are many scenarios where our clients would come to us with a new ask.
For example let’s say they want us to create a secure to sync your client, with their foreign producer.

there are very many unknowns with this ask. It was my and the other members of the UX team job to figure out those unknowns are.

To :
1. research our client, and their foreign producer. We needed a better idea of who we were designing for, what their needs are, what their limitations are.
2, synthesize that research and come up with solutions and suggestions, either design solutions or copy solutions, or functional solutions. and
3. Present those suggestions and solutions, understanding and keeping them within our laid out scope, bandwidth.

There can also be scenarios where the design team will suggest beyond previously laid out scope/ constraints if the outcome is worth while, and offers an ideal user experience. This last process can involve re-scoping and adjusting timelines if Product owners give their approval to proceed with the out of scope product.

Design Components

Designing pages and components were one of my favorite aspects of this job. During this process we would work closely with developers, research the scope of the ask, and design accordingly.

This could mean something as complicated as creating a user flow that allows the boss to link all his/ her employees. Or something as simple as designing a button. Luckily my team was very advanced and had an established design system in place to make it easy to design within the parameters of color/ size/ fonts/ etc.