Move.mil

Final designs

Background

I entered this project when it was about halfway through and spent the first few weeks learning the basics of HTML, CSS, and Javascript through online Lynda courses. I read up on the project background, learned more about the original moving process, and looked over the work and research that had been done up to that point.

I worked on several parts of the moving flow, iterating on existing screen designs after feedback from service members or starting from scratch after conducting research with government office employees. We were using the U.S. Web Design System for the components and visual styles, so I familiarized myself with the components to guide my designs.

Research and planning

Observing initial design user tests

Service members have a financial incentive that covers moving expenses as long as they have the receipts to be reimbursed. Their payment is based on the amount of weight they move, so they need to have weight tickets to prove the final amount. Part of the redesign included screens where the service members could upload a photo of their weight tickets and expense receipts.

I sat in on some user testing sessions with service members going through the initial screen designs another coworker designed. There was a lot of confusion with the receipt upload flow and a general lack of instruction or clarification for those that were still new to the moving process.

Sketches and notes

Taking the feedback I heard from the user testing sessions, I wrote down what changes were necessary and worked with a colleague to brainstorm a new layout.

The biggest change was putting any information the service member would need to know before they started uploading receipts on a separate page. That gave them time to gather the documents they needed or to ask any questions if they were confused.

Wireframing

Figma wireframes

I went into Figma and created screens for each state, including help links for the points that were the most confusing for new movers.

We went through several iterations to find the best way to make sure service members didn’t forget to upload both weight tickets and expense receipts. One design included a radio button list of which documents they wanted to upload, but during testing, the participant still forgot they had more documents to upload after the first batch.

The final design

Our second flow iteration started off by asking for weight tickets instead of giving a choice. After the service member finished uploading the tickets, we then included an interstitial page asking for expense receipts. From there, they could select yes or no, taking them to the next part of the flow. The page worked as a reminder for the service member, which worked a lot better and ended up being in our final design.

I also designed the look for the document summary, so it could be referenced along the way in case the service member couldn’t remember what they uploaded so far. It also helped them pick up where they left off if they decided to come back to it and saved their progress.

Prototyping

html & css

I built the prototypes using HTML and CSS in Dreamweaver. There was some Javascript written in to show the state changes in each part of the flow after an action is taken.

Since service members primarily use their phones for the moving process, all of the Figma designs were made for mobile. We used the USWDS responsive grid system so that it could easily be used for web.

I presented the prototypes on demo days to get feedback from the developers and service members. Once any final changes were made, they were handed off to the engineers.

Final implementation

As the developers built the page, we did design reviews along the way to make sure the page was looking and working the way it should be. Whenever the engineers were ready, we would have a final demo to show the client the work that was done.

Other designs I worked on

Service blueprint

Towards the end of the project, I created a service blueprint to give a comprehensive understanding of how the people, elements, and processes all tie together. It helped us get an overview of what areas of the process were covered by the new designs and what areas to work on next.

Accessorial fields

One part of moving included getting pre-approvals for accessorial charges. Each type of accessorial required different information that had to be submitted, so we sat down with the office members to go through each item in detail.

I created Sketch wireframes to show the field layouts of each accessorial and reviewed them with the office members. Tips were added to clarify what content is needed for certain fields or to shed some light on what the accessorial is in case someone was confused.

Office invoicing

After the service member is done moving, the transportation provider will submit an invoice to the administrative office for the accessorial charges. The office then reviews and pays the bill. However, the original design only allowed for bulk approval, which wasn’t ideal because there were cases when specific line items needed to be changed or denied.

I talked with people from both the transportation and administrative offices to figure out the best way to make invoicing easier. I changed the design to allow for an action to be taken on each line item and created prototypes to demonstrate what each office would see.