The challenge:

The Higg Co executive team was very keen on integrating an API from the Open Apparel Registry (OAR) that would link a unique OAR ID to facilities (factories). This would help Brands and Retailers search in the Higg Index platform for the exact facility via this unique identifier. The challenge with this OAR integration was that the user workflow was complicated, there were varying user scenarios based on whether Higg facility accounts were not linked, already linked, account names were too similar, and no accounts were found. There was also the added complication of our Chinese facilities which did not show on Google Maps (which was a solution I was leaning toward to help Brands and Retailers identify their facilities more easily). Toss in a really ambitious deadline and there you have it, a design challenge!

Research phase:

The research phase for “Project OAR Integration” was mostly trying to understand how the Higg backend worked for linking the OAR ID and for searching Higg accounts. What I learned was that our backend listened to the OAR API and fetched facility information (facility name, address, and OAR ID) which was then surfaced on Higg Index whenever a user initiated a matching action. Once the results were surfaced, the Higg user could “link this account to OAR ID” which allocated a unique OAR ID to existing Higg accounts going forward. This was very useful for our Brands and Retailers who wanted to search for facilities and potential business partners based on OAR ID’s which were unique to facilities and ascertained the correct facility was being solicited.

Diagnosis:

Since this was a new feature, there was no solid diagnosis except watch and learn how users navigated the MVP that was being designed.

Wireframing phase:

Due to the speed of the sprints and primary goal to deploy code, my wireframing phase essentially became non-existent. I went straight to Figma to create full-color, code-ready designs that were iterated upon quickly and moved into development shortly after.

Design and Prototype phase:

The design/wireframing phase was pretty complicated, I have to admit. The workflows were complex because there were many different user scenarios and different interfaces that had to display depending on those scenarios. Some scenarios were edge cases we thought were infrequent, but ended up being the majority of user experiences as we learned more about the limitations of the OAR API. There was also the added complication of Chinese facilities/factories not displaying on Google Maps, which would have been a great solution in helping Brands and Retailers identify the correct facility they were targeting. Also, integrating the OAR ID spurred a bunch of mini user scenarios that required a lot of wireframing! In the end, we chose to go with the majority of user flows and scenarios that we anticipated would be the bulk of experiences and went with the “watch and learn” approach after launch.

Sample workflow: Multiple search results to link to

Scenario: User (Facility persona) navigates to their account settings because they want to link their account to an OAR ID. They click on purple “Link to OAR facility” button. To help our users along, I added a tooltip to explain what an OAR ID is. This is helpful since this is a new feature being rolled out.

A full page modal appears to indicate that the Higg backend is trying to locate the facility account in OAR and match it.

User remains on modal because multiple potential matches were found. The results are displayed in a simple table. User should find the correct OAR record to match to. If they can’t find the accurate match they should contact Customer Support. This scenario would be the most likely because many facilities are located in East Asia and naming conventions have not been standardized. For example, Jin Kim Co LLC could be entered in as JinKim Co LLC in OAR which would make the API think they were separate facilities instead of the same one.

User can see that a similar Higg account name is already linked to an OAR record. That option is disabled. User can choose any other option which highlights in blue once it’s checked off. This is a single select function so if the user tries to choose another checkbox, the previously selected checkbox will de-select. The CTA button in purple will become enabled once an option is chosen.

Before the matching process can resume the user is asked if they want to update their Higg account details to match it OAR’s version. This was a use case the Product Director and I talked about because of the high likelihood of inconsistent naming conventions on OAR and on Higg.

Pros: it creates consistency for account details

Cons: there is always the risk users might be updating the wrong account with the wrong account details

A full page modal appears to show that the matching and linking process is finishing.

Modal disappears to reveal a success toast on the last page you visited. The facility account on Higg is now linked to an OAR ID record. Should the user want to edit the ID, the blue link icon serves as an editing function.