Overview

Intro

The General Services Administration (GSA) manages federal acquisition and awards processes in 10 online websites which are now being merged into one. Beta.Sam.gov will become the official U.S. government website for people who make, receive, and manage federal awards.

Challenges

SAM's single home page provides access to all the capabilities previously found in the legacy systems. By streamlining processes and eliminating the need to enter the same data multiple times, SAM improves efficiency for all users.


laptop Sam HomePage

User's Typology

Who are the users of the system?

Visitors to this site can generally be grouped into three types: federal users, non-federal or entity users, and public users.

Why user goes to SAM.gov?

Users go to this website to do: analysis, search, workspace / data entry, learning.

What is Sam gov used for?

What are the main services that user can find in the system?
The domains support two distinct types of federal awards: acquisitions and assistance.

User Flow

Scenario

Search
I am new to federal awards and want to know if there is money for me, what agencies I might work with, and whom I might partner with.
USER TASKS: SEARCH, CUSTOMIZE/SAVE, FOLLOWING, DISPLAY. USER OUTPUT SEARCH RESULT: ASSISTANCE, ACQUISITION, ENTITIES, AGENCIES.


Analysis
I use analysis to do deep dives that complement the work I do in my workspace Ex: business development, compliance oversight, administration work.
USER TASKS: CUSTOMIZE/SAVE, SHARING, SCHEDULING, SEARCH ANALYSIS, DOWNLOAD. USER OUTPUT: STANDARD REPORTS, STATIC REPORTS, ANALYSIS DASHBOARDS.


Workspace
I administer people and oversee work in multiple areas.
Ex: assign roles AND approve assistance listings, review performance evaluations, or track sub-award.

USER TASKS: DATA ENTRY WORKFLOW, WORKSPACE, REQUESTS, VERSIONING, HISTORY, AUDIT,STATUS TRACKING, DATA SERVICES, COMMENTS, ATTACHMENTS. USER OUTPUT: CONTRACT OPP, CONTRACT DATA ENTRY, ASSISTANCE LISTING, SUBAWARD REPORTING, COMPL REPORTING, PAST PERFORMANCE, ENTITY, AGENCY, ROLES.





laptop Sam HomePage

Learn
I am doing research in SAM.gov and want to know how to interpret the data, particularly the financial data.
USER TASKS: FEDERAL AWARDS 101, SAM.GOV ORIENTATION, LEARNING MANAGEMENT SYSTEM, HELP ELEMENT SAM EXCHANGE. MULTIMEDIA LEARNING CENTER: FEATURED ARTICLE, VIDEO, FAQ, GLOSSARY TERM.




Wireframes

Low and High-fidelity

For Business Goals and to communicate with designer.
I created the Lo-Fi wireframes to communicate with customers and conducted user testing for:
Homepage, Public Workspace, User Workspace, Data Bank, Search Pages, Federal Hierarchy, Wage Determinations, Document Detail page, Learning Center.

Homepage Wireframe

- Clear And Concise Top Menu and Alternative Menu
- Global Search (drop down menu to help old user in their search)
- Clear Message, Clear Typography, Clear Hierarchy: sections based on Business tasks for GSA services Federal Assistance, Contracting and Entities
- A Strong Call To Action
- User Feedback Section and Path For Your Personas
- Learning page access Video Info and alternative info
- Info Section New, User Account and What's Next
- Customer-Centric Message, Subscription Option
- Footer: links for additional info

Interaction design

Visual Background

About SamBeta.gov
BetaSam gov is designed to display a large amount of densely organized information in a manageable way. Users are invited to identify patterns in the data presented, by cross-referencing and investigating information.

Data-driven aesthetic
Sam UI focuses on viewing, investigating, and understanding data. Infographics laid out in all Landing Pages dashboards invite the user to view a summary of their search, reports, and analytics.

Product Architecture
Sam information architecture has a hierarchical structure, allowing users to look at their Search, Analysis, and Workspace through a variety of categories.

Rail navigation
On desktop and tablet, Sam uses rail navigation. Rail navigation provides a permanent region to navigate between sections while taking up little screen space.

Standard drawer
Standard navigation drawers allow users to simultaneously access drawer destinations and app content. They are often co-planar with app content and affect the screen's layout grid.

Layout

Grid system
Sam uses a responsive grid system, which has flexible columns and padding that can resize to accommodate any screen width.

Elevation
Sam expresses elevation differences between UI elements using color or a scrim.

Surface edges
Material surfaces use shadows to indicate edges. Other methods can be used to indicate edges, such as: Giving surfaces different colors, Giving surfaces different opacities

Shadows
Shadows can express the degree of elevation between surfaces in ways that other techniques cannot. For example, a surface with a shadow that is small and sharp indicates a surface's close proximity to the surface behind it. Components: Dialog, Modal, Navigation drawer, Floating action button, Standard side sheet, Menus and sub menus, Card (when picked up), Contained button (pressed state), Top app bar (resting elevation), Switch.

Motion
Motion helps make a UI expressive and easy to use. Principles, Usage, Transition anatomy, Expressing continuity.


Color | Typography

Color
Sometimes Sam needs to show multiple infographics on a single screen, each with multiple sections. To do this, Sam has adopted a color theme with one primary color, and five additional colors. This elaborate color theme allows Sam to present readable, distinct infographics.

Typography | Typefaces
Sam uses two typefaces: Source Sans Pro and Merriweather.
Source Sans Pro is an open-source sans serif typeface created for legibility in UI design.

Typesetting
Readable text allows users to efficiently read and take in textual information, whereas text that is not readable turns off readers or makes it challenging for them to stay focused

Page heading
Section heading, Section of the page



laptop Sam HomePage

Icons & Imagery

Iconography
Sam uses custom iconography to represent its six main sections: Assistance Listings, Contract Data, Contract Opportunities, Entity Information, Federal Hierarchy, and Wage Determinations. The icons use curved forms and sharp corners that resemble the shape of Sam's typography.

Shape
Shapes direct attention, identify components, communicate state, and express brand. Because unique shapes stand out, they can direct attention to different parts of a screen.

Imagery
Imagery enhance the user experience and express a brand's visual language. Images help tell a story, clarify complex messages that are difficult to express with words and to show users how to perform an action.

Educate users
When giving instructions to users, step-by-step imagery allows users to move through a sequence of steps at their own pace.

Data Visualization

UI Component Design System

Information Designer
Like a beta.Sam.gov information designer, I have understood the story within our system data, and I helped to communicate this project more efficiently . I'm working directly with analysts to found additional data points.

Choose the chart that tells the story and Labeling
Make sure everything that needs a label has one—and that there are no doubles or typos.

Data tables
Data tables can include: A corresponding visualization, Navigation, Tools to query and manipulate data.

Sam UI Components
Usage, Anatomy, Behavior, Specs and Implementation
Forms : Autocomplete, Checkbox, Contact Form, Date and Time Picker, File Input, Multiselect, Radio Button, Search, Select, Slider, Switch, Validation
Components : Alerts, Buttons, Cards, Dropdown and Select, Tooltips, Collapse, Modals, Charts .
Navigation: Compositions, Bredcrumbs, Footer, Hamburger Menu, Scroll Spy, Side Nav.

Test & Iterate