Visual Design Lead, UX Design, Front-End Development
Enterprise-Level Web Application
For years, this government agency had relied on version control and entering data into manual files to coordinate and plan travel and package shipments for thousands of employees across the globe. In an increasingly technology-driven world, it was imperative that they made this process more efficient for their employees – not just for ease of use, but to prevent loss of data as well.
Accenture Federal Services and our design team worked together to create a scheduling application that could streamline travel planning for both couriers and supervising officers – and could update content in real time. Powered by ServiceNow, the new application would give users the ability to not only monitor current travel, but forecast for future travel and track past trips.
Since the creation of this application would affect the workflow and daily lives of thousands of users all over the world, it was imperative that we understood the needs of the couriers and officers directly.
Our UX team worked closely with Accenture's business analysts and client-side representatives to create user surveys – and conduct interviews to hear from users directly on what they needed most. We leveraged this feedback into a wireframe prototype that addressed both mobile and desktop workflows.
Since most of the couriers' time is spent traveling across the globe, a large priority for our team was crafting an experience that felt just as natural and seamless on a government-issued mobile device as it might feel on a laptop or tablet.
After conducting an extensive user research process, our results led us to creating six main functionalities to best address user needs:
A large portion of our design team’s focus was centered around 508 compliance. Given that we were designing a government application, it was imperative that we abided by accessibility laws. We made sure the entirety of the application maintained a high enough visual contrast ratio that made it usable for users with different variations of color blindness.
Another critical priority was creating a robust design system that would not only work for current use cases, but would accommodate future enhancements and additions, too. This meant designing elements with a flexible and modular approach.
We worked through each design sprint with an agile-like mindset. I would design the interface of new client asks in Sketch, prototype them in InVision, and move quickly to HTML and CSS, where I utilized a combination of Bootstrap and Flexbox to create a modular structure that would allow for different column and row combinations (depending on the user’s home post). We wanted to make sure that the layout would adjust naturally based on different types of content shown across the hundreds of posts worldwide.
This meant that I had to structure the CSS in a very modular way. The stylesheets had to be created with as many “utility classes” as possible, rather than relying excessively on “component classes.” This was done so that our codebase could be as scalable, consistent, and maintainable as possible – not only for the entirety of the project, but for future enhancements down the line as well.
Once the HTML and CSS were successfully integrated into ServiceNow, our design team and Accenture’s business analysts tested the product with initial focus groups to give the new application a trial run with real users, in real time. Based on the feedback we got from testing with users in several different countries, we made iterations to our live instance that addressed those issues before we completely went live.
Next Case Study