My role
UX design
Information architecture
Design patterns, design components for design system
In collaboration with
Design Team
Product owners
Front-end developers
A dozen or so Agile application development teams
One of the designs I worked on was for a landing page for Contract Opportunities, which would incorporate information from the Federal Business Opportunities (FBO) legacy domain site. The immediate task was to create a page that would serve as a dashboard for the information from FBO.gov.
This landing page was the first of the "domain" landing pages the design team created for the new SAM.gov site.
Since no landing page design had been previously created, my larger task was to design a template that would work not just for Contract Opportunities, but would facilitate access to the content for all of the legacy systems in the pipeline.
The challenge was that each of these previously stand-alone sites were incredibly content rich, providing vastly different content.
I began the process by researching the content available on each of the legacy websites. I cataloged the types of information that was available on each site, organizing the content into groups, and focusing on ways I could create buckets that would be consistent across all the domains.
I created an initial design with new elements and components that would provide access points to the different buckets of information, iterating on the design as I gathered feedback from peer reviews and user input.
Contract Opportunities Page for Federal Users
Contract Opportunities Landing Page
The final design included several new design patterns, or design components that would need to be developed for our design system:
1. Landing header with title and description. I added a place for the legacy website logo based on comments from users who looking for a way to identify the legacy site that the content originated from.
2. This new card style served to direct users to a separate page tailored for federal visitors.
3. Focus groups told us that users wanted access to knowledge base information without having to hunt and peck while experienced users were concerned with clutter. This accordion was designed for easy access to knowledge base library items while being minimalistic to reduce cognitive overload.
4. A mini, icon version of our call-to-action button, especially for action links inside cards.
5. New content card style with a title, designed to accommodate links, text, and graphics.
The page design would be developed as a template to be used for the other domain landing pages to be created.
The site framework utilized a 12-column grid, allowing for a responsive layout that adjusts at lower breakpoints. I provided layouts for the mobile and tablet versions of the screen to show how the elements should stack on the screen at lower resolutions, optimized to ensure that the order in which components appeared matched the priorities of our end-users.
Contract Opportunities Landing Page Layout for Mobile and Tablet
Accordions to House Knowledge Base Content