Redesigning a B2B Web3 SaaS Platform

Founded as a startup in 2017, Transmute's Verifiable Data Platform is a B2B SaaS product that secures trade data and facilitates supply chain management through decentralized identifiers, verifiable credentials, and blockchain technology to verify and trace identities, suppliers, materials, products, and shipments globally.

Supply chain management involves global transactions with suppliers, raw materials, products, shipments, and containers. Monitoring the flow of inventory and assets along a supply chain has proven to be a challenge. Identities can be falsified, trade documentation can be altered, and shipments can be tampered with or stolen along the way.  Decentralized identifiers, verifiable credentials, and blockchain technology can help mitigate supply chain risk.

Personas

The users of the product are involved in the logistics supply chain as Logistics Managers, Custom Brokers, and Customs Officers. After conducting research with government and global supply chain personnel, the team developed the following personas to best represent users using the platform to facilitate their supply chain work.

^{Name: Paula Slater Age: 36}

^{Job Title: Logistics Manager}

^{Education: College Degree}  

^{Bio: Paula is a logistics manager that has worked in the industry for 12 years. Her professional experience mainly includes working in logistics departments in large enterprises. She is responsible for managing and keeping track of warehouse inventory, monitoring and managing her department’s budget, and providing leadership to ensure that logistics, warehousing and procurement operations are meeting safety, quality, delivery, cost and housekeeping standards.}  

^{Tech: Paula is a “Power User” not afraid to adopt software products into her workflows and promote wider adoption. She’s good at Excel-based numbers and data management. As long as the tool is intuitive and valuable, she can be quite the evangelist. Her technical limitation is reached at anything “under the hood.” While an Excel file is no problem, an JSON file is a step too far.}

^{Goals:  Wants to deal with less duplicative forms and documents Wants to  Wants to send documents to parties that request them}

_{Name: Bert McMillan}

_{Age: 46}

_{Job Title: Head Broker}

_{Education: College Degree}

_{Bio: Bert has worked in the customs brokerage industry for over 20 years. His experience includes working with major customs outfits for different industries across the globe. Over the years, Bert has worked for organizations that self-filed and independent customs brokerages.}

_{Tech: Uses basic Microsoft applications like Excel, Word, etc. on a regular basis. Has in-depth knowledge working with the U.S. Customs software (ACE). Uses an enterprise customs software on behalf of his customers.}

_{Goals: Wants to increase the speed of products passing through the customs process.}

‍

_{Name: Qing Zhao}

_{Age: 30}

_{Job Title: Customs Officer}

_{Education: Advanced degree}

_{Bio: Qing is a customs officer that flags and verifies incoming product shipments at US ports of entry. She has been a customs officer for 2 years. She specializes in ecommerce imports. She verifies documents and only accepts documents that are valid or verified.}

_{Tech: Advanced user of Customs software (ACE). She has a strong grasp on the fundamentals of JSON and other data formats.}

_{Goals: Wants to have some way of receiving data (VBC) and when necessary, requesting more information about imports (commercial invoice, etc.)}

I served as the sole Product Designer in a small remote team. I was responsible for wireframing, prototyping, designing wireflows, evolving and managing the existing design system, designing icons, sharing work with the team in design reviews, writing discussion guides, synthesizing usability testing findings, iterating on all product design work, and conducting heuristic evaluations. As part of the product team I worked closely with the Product Manager and Head of Product to conduct usability testing sessions. I also collaborated with an engineering team of 4 and the CTO to ensure smooth design handoff and QA development work.

Due to the complexity and technology involved, there was hesitancy to test early design work due to the team’s desire to only test with participants with the required knowledge of supply chain and logistics. Besides being the sole designer on the team meant I had to work extremely fast in order to iterate on designs when we started conducting usability testing due to product release deadlines. Being a startup environment, there was constant pivoting, feature changes, and changing product scope which required being flexible and adaptable to product and business needs.

Empathize

User Interviews

We conducted user interviews with participants we recruited from U.S. government agencies and supply chain organizations to gather initial design impressions and inform a better understand of what Logistics Managers, Custom Brokers, and Customs Officers might need to perform their job duties using our application. We used the information gathered during interviews to help us develop our personas and guide the design process. The interviews were conducted remotely using Zoom.

‍

Define

To organize our findings, I used Miro to create an affinity diagram to organize our findings into six categories: UI changes, recommended features, feedback we weren't sure about, validations, insights, and pain points

‍

After conducting user interviews we mapped out initial the initial user journey from visiting the website to entering the platform.

Ideate & Prototype

I then began ideating wireframes and flows and sharing the designs with our Product Manager and Head of Product to iterate and refine the experience.  

Test

In order to test our hypothesis, I created an interactive prototype in Figma that we tested with participants recruited from U.S. government agencies and supply chain organizations who work in logistics and customs.

Our objectives when testing this prototype were the following:

• Validate Credential Schemas, Data Model, Corresponding UI and Data Entry Flows, Data import options
• Test if VDP landing page informs the users enough to generate their interest to try demo / trial feature on VDP
• Identify friction points in user onboarding experience
• Validate if a new user is able to execute on desired call-to-actions
• Validate if a returning user is able to execute on desired call-to-actions
• Validate user’s ability to find credential marketplace, select the right set of credentials & use them
• Validate user’s ability to delete and manage the credentials they’ve issued or received
• Validate user’s ability to send credentials via presentation

Key Findings & Solutions

Learnability

We observed that participants weren't sure who could revoke a credential and whether they or the system would choose an expiration date.

Who is doing the revoking? From this setup. I’m confused. Is the sender doing it or receiver doing the revoking? - Anonymous Participant

We found that many participants were subject matter experts in supply chain and logistics, but did not understand clearly understand credential revocation. My instinct was to provide affordances such as help boxes to increase platform learnability, but a fixed release date and limited resources would not allow us enough time to include them in the initial release. The compromise was to relocate our "Help Center" to the left side menu to allow users to be able to view related documentation or contact us for support.

Global Requirements

During onboarding, we assumed we were collecting all of the required information in order to create a secure digital identification in the form of a Verifiable Business Card, but we were wrong. We observed that participants needed access to more information such as an organization's "tax id" and some articipants were uncomfortable with a primary contact being included in an organization's Verifiable Business Card. To solve this, we spent time going back our onboarding and Verifiable Business Card. We re-evaluated information collected and displayed on the Verifiable Business Card and iterated based on participant feedback. After making changes to the designs, we observed more positive reactions to our onboarding and Verifiable Business Card during new testing sessions.

"I like having a confirmation of having a business credential. Looks good." - Anonymous Participant

Roles

We observed that participants had different needs and requirements in order to complete their work on the platform. Participants were frustrated and confused with the amount of information and actions on the dashboard. Some needed to send credentials while others needed only to view them. Others needed to do both. The cards on the dashboard displayed this information and we assumed all users wanted access to all of it. The solution was to provide a more relevant experience and to avoid cognitive overload for users so we included setup options during onboarding to display only necessary users needed on the dashboard. When we tested our onboarding and dashboard after the redesign, participants responded more positively. They liked being able to customize their experience and only view relevant information.

"If this is my first experience dealing with this tool. I appreciate this view. It provides me a lot of info that I would eventually need." - Anonymous Participant

With the goal of making the platform easier to use,  users needed to be able to customize their experience based on whether they would be primarily receiving or sending credentials. Users also needed to enter the platform with everything required setup in order to begin receiving and sending credentials. A redesigned onboarding experience would allow us to capture the right information, create a verifiable business card for the user and/or their organization, and setup their preferences before getting started on our platform.

Organization Setup

During testing with the US government and other organizations involved in supply chain management, we learned  we needed more information collected from users during onboarding, such as an organization's "National Company Registration Number", for our Verifiable Business Card to serve as a digital replacement for existing identification verification methods.

Verifiable Business Card

Once the above information is captured in the first step, the platform generates a verifiable business card for users in the second step. This card, like a driver's license or passport in the real world, serves as proof of identity for users and organizations. After previewing and signing the verifiable business card, users can then send or receive credentials on the platform.

After users have sent or received credential presentations, their dashboard is updated to better reflect their activity and engagement. Users and organizations can view how many credentials they have issued, how many decentralized identifiers (DIDs) they have created, and the number of templates used. A line chart visualization on the 'Send and Received Credentials' card below shows credentials issuance and activity over the last 30 days along with specific information about the credentials issued.

Credential Issuance

When users want to issue a single credential, they can view their pinned templates and choose the template for the credential they would like to issue. If they need a credential that is not pinned, they can click on more and pick a template from the template marketplace. Once the the user chooses a template, the user completes the required fields. Once the required fields are completed, a DID is assigned to the credential and the user can preview the credential before signing and issuing it.

Credential Verification

Once a credential has been issued, users can check it's status which will display issues with the credential's activation, the DID used to sign it, or if the credential has expired.

Credential Viewer

If users would like more information, they can expand the credential for further detail. One of the unique challenges in redesigning the credential viewer was to make it easier to view credential information after issuing it. Because all of the data is nested within a JSON-LD file, users struggled to be able to navigate nested elements of data when viewing a credential. It wasn't always clear which elements were expanded or collapsed.

During testing, we learned users had difficulty viewing the nested data within a credential. To make it easier to view the nested data, a tree navigation menu was added to help users navigate the hierarchy of the topmost data categories rather than having to open and close them one at a time. While it was ultimately not included in the product launch due to technical constraints and a deadline release, but it remains priority for a future release.

Presentations

Once a credential has been issued, users can then share it with other users or organizations on the platform as a presentation. Like traditional email, presentations contain the sender, recipient, the name of the presentation, and the credentials included. Each credential is assigned a decentralized identifier (DID) with a uniquely generated key, blockchain, or URL to ensure the all of the information in the presentation cannot be modified or tampered with.

After completing the redesign, the Verifiable Data Platform was launched in June 2022 and various organizations and companies from around the globe have signed up to pilot test the platform. The pilot testing will provide organizations an opportunity to test and evolve their supply chain management workflow while providing Transmute feedback to further improve the platform based on customer needs.

I learned so much during my time at Transmute and while it wasn't always easy to design a feature I didn't understand on a technical level, over time I got more and more comfortable designing with ambiguity and embracing the iterative process as the technical requirements and platform evolved over time. Reading through technical documentation and following up with the product or engineering teams allowed me to prototype quickly and iterate on the design until we were ready to move forward with testing and validating the design. Establishing close relationships with engineering and being a resource for Figma made handoff a smooth experience and the QA process easier.

At the time of this writing, the World Wide Web Consortium (W3C), responsible for approving web standards such as HTML and CSS, has announced that Decentralized Identifiers (DIDs) version 1.0 are now an official web standard. It's exciting to have contributed to the development of a platform that enables the use of technology that can potentially revolutionize how organizations control their online information and relationships with greater security and privacy. Solving real world problems for organizations on a global scale has taught me that anything worth building will never be easy, but the outcome is so worth it. With this redesign, we made the platform less intimidating and frustrating, more accessible and intuitive, and a preferable replacement for paper trails and endless phone calls.