Contents
  • Overview
  • Understand
  • Define
  • Ideate
  • Test
  • Iterate
  • Reflect

    • SealingTech

    Sealing Technologies, Inc. (SealingTech) provides high-performance hardware, cybersecurity software, and engineering solutions to various federal agencies in the DC-Metro area. I joined the team in 2019 as the first official designer, establishing a brand identity and working on various projects like websites, digital markting assets, technical documents, and content creation.

    View Website →

    .01 Overview

    Duration

    April 2020 – June 2020

    Role

    UX Researcher, UI/IX, Content

    Tools

    Adobe XD, Adobe Illustrator, Adobe Photoshop

    Problem

    The federal IT customer journey and product lifecycle are infamous for being overly-traditional and long, which makes it difficult to pass information and maintain business partnerships without the obstacles of communication and time. How can we build trust between customer and sales, showcase products and services, and meet federal accessibility guidelines in an evolving digital age?

    Solution

    Building a developed brand identity, optimizing content, and introducing a digital product lifecycle journey with automation platforms to help solve problems faster, make information readily accessible, and build trust

    .02 Understand

    The old website was chock full of dark patterns and dead ends that have disrupted many of the user journeys for sales, employment opportunities, and customer support. There was no way to get information for or purchase products, applicants could not find our Applicant Manager due to the careers section being spread across multiple pages, and no way for existing customers to get support.

    Through a heuristic approach, we walked through the original website with a web developer to pinpoint where exactly we needed to make changes and what we needed to add.

    Original ST Homepage
    .03 Define

    We needed to reorganize the website architecture based on the main goal of reducing the customer journey time and leading to a clear CTA for successful conversions. With my team's onboarding of Salesforce Lightning Cloud with Pardot, internal teams would have the automation for lead capture. Whichever page users signed up from would categorize their information into lists based on the page's main service, and connect them to the right team. It was important to divide pages into specific categories with their own individual goal.

    Sitemapping

    SealingTech Sitemap Draft
    .04 Ideate

    Stakeholders weren't sure how they wanted to tailor the hardware product journey, so they wanted to see what it would look like in an "e-commerce" format along with building credibility for the company itself through an easily navigatable and functional website. In addition, these ideas needed to be compatible with our sales, marketing, and support platforms.

    Wireframing

    Lo-Fi Web Mockups

    Creating an Identity

    For most of the website relaunch process, I did not have guidelines or language to use because I was creating them simultaneously; Being the first in-house designer/content writer/marketing associate meant much of the brand guidelines, voice, and design systems were not established so I had few resources to reference with limited support. I took themes from their logo, previous technical documentation, and competitor trends to evolve the identity carefully to match leadership's vision.

    Because of the pandemic, there were new windows for digital marketing opps, which came with the challenge of meeting federal accessibility guidelines and making highly technical information easy to digest. Over time, I was cross-referencing my delivery rapidly, updating everything with each visual milestone, and kept evolving the identity.

    .05 Test

    After coming up with visual design solutions and user flows for the product page (e-commerce functionality) and customer support (live chat) journeys, we tested the ideas with our executive stakeholders within the company and others within the meeting to see what they had to say. While the visual implementations were evolving with support and approval of the team, there were technical and security concerns which kind of laid in irony with the mission of the company.

    Issues with the "E-Commerce" Model:

    Because the hardware series has powerful and customizable hardware specs which put a lively price on high-grade technology, there will be complications developing a secure and automated "order form" as well as vetting the contacts.

    Solution

    This was solved with a "Get Quote" function with a form that only accepts business emails and reCaptcha.

    "Live Chat" Support:

    Live chat was an idea brought on by marketing to capture leads at the same time as providing support for customers. As a federal contractor, stakeholders had concerns on vetting these contacts securely and manning the support with a small team.

    Solution

    This idea was scrapped and later replaced with a Zendesk portal.

    .06 Iterate

    Taking stakeholder insights into consideration, I continued on to create high-fidelity mockups for the development team. Because of setbacks out of the teams' control, I was not able to redesign and create every new page as planned, so I created detailed examples that development could freestyle with other pages.

    Final Mockups

    High-fidelity mockup of approved design. Business leaders wanted more red, which would be something we would need to improve later on.

    High-Fidelity mockups. A few key differences from final product.

    Reiterating the Product Page

    Technical Changes

    There was a critical issue where customers under federal ISPs could not access our (former) popup forms. We decided to A/B test the embedded form which we developed for the software beta testing.

    Content Changes

    The 360 product module needed more emphasis, so I added an off-white background and an icon for clearer indication. The product pages needed more content on their use-cases, so I added descriptive tabs as a preface to their technical details.

    Styling Changes

    As the marketing's campaign visuals were updated for 2021, I took inspiration from my product slick designs to bring consistency between our print and digital image.

    SealingTech Product Page
    .07 Reflect

    Since this was my first major UX project, it definitely wasn't easy, and I was grateful for the support of our remote development team along the way who taught me the rundown of how to design for handoff and still helped me deliver and launch the website despite my early knowledge of UX. I missed a lot of important steps in my process, some were done incorrectly, and I think a lot of minor elements like visual design were more prioritized than the user experience and accessibility, which was more work to correct over time. But the best part about being a designer is that it's so much easier to learn from your mistakes and improve to bring the best delivery when you get to reapproach it. This website's relaunch helped enrich so many processes for the customers and internal teams within the company, and I'm glad to be a part of something both revolutionary and helpful.

    Lessons Learned

    • Design is so much more than just visual systems.
    • Skipping steps in the design process will always be harder down the road.
    • Government acccessibility: it's complex.. and unavoidable.

    What I Would Do Differently

    • Advocate for user needs and technical limitations rather than visuals.
    • Approach with more structured foundations in the stages before ideation.
    • Ask for more time and resources to understand accessibility requirements and perform more tests.