Port 99

  • Industry
    Oil & Gas
  • Project
    Website Application
  • Tools
    Adobe XD, Photoshop, Illustrator, UsabilityHub.com, Bloomreach
  • Team

    Project Manager, Project Owner, Scrum Master, Change Management, Business Analysts, Architecture, Designers, Developers, Quality Assurance

  • Role
    UX/UI Design Lead

Project Brief

Our team was designated to build an application that enabled a 360° view of the customer for internal users. External users are able to enroll as new customers, place orders, access order related documents and manage users.

  • What problem are we solving?
    The copy within the activation workflow lacked clear direction and resulted in new users abandoning the activation process. Incomplete activation caused users to email or place multiple calls to the sales and customer service teams for login assistance.
  • What value are we providing our customers?
    The activation workflow is the user’s first encounter with the application. Providing an efficient activation process is crucial to building the user’s trust and loyalty to the application. A seamless activation process grants internal users more time to focus on delivering value in other areas.

Design System

The application framework was built on Material Design + React. I created the design system to utilize Material Components that were then customized to align with the company’s branding guidelines. Wireframes, mockups and prototypes were completed with Adobe XD.

Custom components that were specific to application needs were also created:

  • Company Selector (Sold-to Picker)
  • Expand/Collapse Order Row
  • Expand/Collapse Order Card
  • Product Cards
  • typographic-scale

  • selection-controls

  • lists-& selects

  • icon-library

  • epansion-panels

  • color-palette

  • buttons

  • app-bars


Design thinking exercises like empathy mapping, how might we and card sorting were used to evaluate user needs and discover new opportunities. I conducted over 100 user interviews and (aggregated, consolidated and extracted) dialogue to create empathy maps and provide useful solutions for how might we exercises.

Because each product has a specific makeup and is utilized in specific applications, I needed to ensure that all of the relevant data was displayed and easy to access. Each business unit underwent card sorting exercises to determine which product related data would be displayed and what needed to be updated and/or removed.

I also assisted BAs with data mapping exercises that would ensure any old references to the data were updated in the new system. This gave BUs an opportunity to clean house and get rid of any outdated data that was no longer used.


I partnered with the Sales and Change Management Teams to interview internal users about the email and phone assistance provided by users having issues. The interviews revealed that the instructions were misleading. I also researched the users in action by using LogRocket to analyze user sessions. The sessions showed the majority of drop-offs occurring on one particular step in the workflow. This caused me to take a deeper look at the copy used to instruct the users during each step of the process.


In addition to the copy edits, I adjusted the workflow order. In its initial iteration, the password was created in the first step and then the user was instructed to log in to complete additional steps, but this message wasn’t a focal point and could easily be missed. This gave users a false impression that their activation was complete and they could log in at their convenience.

After reordering the flow, the password was created in the last step. Once the password was created, the activation was complete and the user could elect to log in.


After updating the vague and uninformative headers it allowed the workflow to become aligned with the action performed on the page. This also helped to alleviate the user’s confusion and added to their awareness of their location in the actiavation process.

The workflow was then tested via UsabilityHub.com with unmoderated testing. The tests proved the abandoment issues were resolved and there was no confusion in the activation process. Successful activations were increased by 90%.

    Let's chat

    © 2007-2024 JxnGraphix