Overview
Building a multi-application design system helps the Steampunk team build high-quality and consistent user interfaces and experiences across the DCMA products. This is the first time DCMA and Steampunk are using PowerApps as a development platform, which emphasizes the importance of a consistent UI foundation for further app creation.
Along with modernizing its applications, DCMA wanted to update its employee intranet. Steampunk wanted to use this opportunity to illustrate its design skills by creating an aesthetically pleasing page. Additionally, due to time constraints, the team focused on the internal applications but still needed help designing public-facing pages.
I was responsible for organizing the style guides and design system, creating wireframes for eTools and the public-facing application form. I conducted UX research and created mockups and prototypes.
Role
User Experience Design and Research
Timeframe
June - Aug 2022
Team
DCMA team at Steampunk
Design System
The five applications Steampunk is working on lack a formal design system. The fast-paced environment caused disorganization for styling. As a result, each application existed as its own separate identity with each designer creating their own source of standard UI elements, components, and modules. The organization of key components was critical for the success of the design system. For the applications, the key components included brand logos, typography scales, color systems, button styles, and iconography.
Quick style guides for each of the applications. They needed to be simple and straightforward for quick delivery to developers. Later they would serve as inspiration for formatting the design system.
Process for choosing new icon set
Icons
The team was using the standard provided icons in PowerApps due to time constraints. The main goal was to find an icon set that had a more modern feel while still being professional. Several icon sets in various styles were found to compare. Sets such as the rounded Flaticon set were not chosen because they were too round and looked too young. After discussing the choices with another designer a final set was chosen. The final set has a professional feel while the rounded design still gives the icons character. They also have a thicker outline giving the icons more weight compared to the PowerApps icons which were light and hard to see.
Typography
A type scale based on display headings, paragraph styles, and other supporting styles was introduced. Lato is the official font for the Department of Defense so to keep consistent with DOD guidelines we applied their typography to the applications.
Breakdown of typography using Lato as main font
Left: Orginal application colors
Right: Recommended application colors
Color System
The color system was designed to create a consistent look and feel across products. The official Defense Contract Management Agency and Department of Defense brand colors influenced the palette. One issue was the lack of distinctive colors between applications. Four out of the five applications used blue as a primary color. Seeing all the similar colors made the team realize that new colors needed to be implemented. Further color palettes were explored to determine a new color system.
When deciding on new colors, it was essential to keep them professional, so when exploring different colors I opted for muted desaturated tones. In the end, I recommended changing application 1 to a desaturated rose color. I lightened the colors of application 2. Application 3 and 4 are part of the same system so I wanted their colors to be similar but distinctive. For application 5, I recommended using a deep desaturated purple instead of dark blues. The new colors I recommended create a greater differentiation between the applications while still maintaining a professional feel.
Final Style Guides
Based on the quick style guides and existing designs a more comprehensive style guide was created to consolidate the look and feel of the applications.
Final style guides using recommend colors
E-Tools
DCMA currently has 60+ applications. Their current homepage lists all the applications on a single page. The current layout forces users to scroll until they find the application they want. Steampunk was tasked with designing an organization system for the applications creating a more user-friendly experience for DCMA employees.
Current layout of DCMA's etools
Discovery
There was very little discovery for this project. Steampunk was assigned this project at the last minute and given very few details about the client's needs.
Notes complied during card sorting
Card Sorting
We conducted a card sorting session in Lucid Chart to break down apps and identify overarching themes and functions. The categories are different ways the apps could be sorted for users based on the capabilities or limitations of the platform. To decrease the number of application cards, one possibility was the idea that some applications, such as the training ones, could be turned into links in an update or news panel.
Understanding the user
In optimal circumstances, the client and potential users would be interviewed to help better understand their needs and wants. Below are questions we would like to ask the client:
- Which apps are used the most?
- Which are the most important?
- Which are the most important ones that don't get used enough?
Ideation
I created mockups using Sketch. The first round was focused on various ways to sort and display the applications and the second round focused on adapting the previous designs into the constraints of Microsoft Sharepoint.
Initial Mockups
In my initial mockups, I focused on finding ways to organize all the applications in a user-friendly and aesthetically pleasing way. I brainstormed general ideas for the structure of the organization system.
I placed the most used applications in the top part for ease of use. Below the most used apps section, I designed a variety of ways the applications could be organized. The following designs use various filtering methods to allow the users to find the applications they need. These methods range from filtering by first letter, most recent applications used, and categorizing applications using predetermined groups. Each organization system saves the user's time, reduces the complexity of the original page layout, and enhances the discoverability of all the applications.
Initial mockups with various filtering systems
Microsoft Sharepoint Mockups
At this time, Microsoft Sharepoint was announced as the platform for the site housing all the applications. Steampunk was also told that all 60 applications would not be displayed on this version of eTools. Instead, the page would show the five apps that Steampunk worked on but would need the capability of displaying more applications in the future.
Moving into my second round of designs I had limited options because of Microsoft Sharepoint's web parts. There was little customization on the platform and most of my initial organization designs were impossible. I had to adapt my design to Sharepoint's web parts. The accordion style was possible so I moved forward creating my designs around organizing the applications in that style.
Various mockups that include SharePoint web parts
Public Important Capabilities List (ICL) Nomination Form
Steampunk designed the internal application which included an ICL nomination form. The ICL denotes an initial criticality level to Department of Defense (DOD) Mission Assurance. The form allows users to review data records that have been added to the ICL. The public version of the form allows non-government users to nominate their products for the ICL.
Ideation
The form would later be hosted on Microsoft Forms so I created my mockups on Sketch to look like Microsoft Forms’ UI. I focused my first round of designs on transferring the original questions into the new layout. I focused the second round on making the language and experience more user-friendly.
First draft of form using fields directly from internal version
First Draft
The first mockup I created used the exact same fields from the internal nomination form. The only change I made was breaking the form up into different pages. I also kept the original green color to maintain a cohesive feel with the internal application.
Client Feedback and Second Draft
After receiving client feedback on the form. I went back to change the structure and wording of several questions. In the first draft, I assumed that the user would know the same information about the ICL process as the analysts.
For example, general users wouldn't know the ICL criteria definitions. The analysts, on the other hand, would know this information and could just input the required information. I worked with the client to create a series of yes or no questions that would determine if the product qualifies for the ICL.
Left: Orginal form wording
Right: Wording after client feedback
Takeaways
The consolidation of the look and feel of Steampunk's DCMA applications allowed the client and the internal team to get a holistic view of the applications. As a result, similarities between the applications were identified and new color schemes were created to give each application a more distinct identity. The team was also able to apply consistent styling across applications ensuring that they all share similar UI.
In addition, I was able to create solutions for public-facing interfaces such as eTools. Additional projects like these show DCMA Steampunk's creative potential. The creation of an effective design system will make the design process for the new and upcoming applications more efficient and will give the client a better understanding of the applications being created and the work Steampunk was able to accomplish.
