Streamlining link to existing for integrated retailers

Role

Product design co-op

Team

🎨 2 Product Designers
💼 1 Product Manager
💻 6 Engineers

Timeline

Nov - Dec 2023

Platforms

Mobile

Web

As a part of Order Management team at Faire, I redesigned the desktop and mobile flows for linking products from Faire to existing ones in a retailer's point-of-sale (POS) like Shopify. The project spanned a few weeks and was in the final stages of the design process before it was handed off prior to the completion of my co-op term. This project involved redesigning the UI of the current link to existing modal on desktop with added functionality, and developing mobile wireframes to achieve the same result.

Context + Current State

USER MINDSET

As a retailer, I want to be able to link my Faire products to existing ones on Shopify and choose what product information is overridden.

Retailers on Faire that have integrated their Shopify POS systems with their Faire accounts are able to manage and sync product details such as inventory, descriptions and price. This saves time and allows for a seamless experience for retailers that use both platforms to manage their products. However, when retailers have existing products in their POS systems prior to integrating with Faire, there is the chance that products are duplicated on both platforms when re-ordered. Thus, Faire provides retailers with the option to link products to existing ones, syncing the linked products such that they now share the same data.

Currently, the link to existing functionality is unclear and retailers can only override product details with ones in Shopify, not the other way around.

With option for retailers to edit products on Faire, retailers are likely to be editing and configuring product listings before adding them to Shopify. Thus, the inability to have these product details carry over when linking to existing Shopify products can result in retailers having to duplicate editing workflows and thus waste time. It is important that retailers are able to efficiently link products to existing as having duplicate product entries will result in out of sync data, inventory count errors and a worse user experience overall.
‍

After conducting an audit of the current state flows, the proposed solution was to streamline the UI to make the linking experience more clear and easy to understand while adding the ability for retailers to select which product details are preserved when linking to existing. In addition, we added the goal of developing these changes on mobile as a way to introduce the link to existing experience to mobile users to encourage more retailers to link products.

Project goals

➊

Increase clarity around link to existing flow

➋

Reduce number of duplicate products between Faire and Shopify

➌

Save retailers time through enabling retailers to bring edits from Faire to Shopify when linking

Early explorations

I began the design process through exploring different ways in which we could introduce the decision of overriding data from Faire vs. Shopify. This involved looking at a range of different UI including drop downs, toggles and checkboxes. I also consulted other platforms through competitive analysis of form fields in modals to get a better understanding of common patterns.

I took these early explorations to design team meetings for feedback, and recommended that the text-toggle be used for it's ease of understanding and simplified UI. However, after sharing these designs with the team, there were still concerns around the clarity of the modal and whether retailers would fully understand the process. These concerns were not ones that had been brought up from the introduction of the new override functionality, but related to the existing behaviour. The modal structure was unclear, it was hard to tell which data would persist, and the visual hierarchy was confusing. Thus, I went through another round of iterations, this time playing with the layout of the modal and trying to further improve clarity in this flow.

Prototyping to assist design decisions

After exploring a variety of layouts, I found myself stuck and unsure how to decide which flow was the clearest for a user trying to link to existing. To help gain a better picture on the end-to-end behaviour of the designs, and help decide on a modal structure direction, I then began exploring prototypes. For each new explored layout and UI, I mapped out the full link to existing flow with a sample product and created click through prototypes that would allow simulation. This allowed for a better understanding on how a typical retailer would use the new feature, and ensured that the added changes were consistent with the full flow without feeling jarring or adding too much complexity.

Exploring a new layout to streamline linking

Looking back at the original linking flow, the narrow layout of the modal felt very crowded, and this only became worse when the search dropdown was expanded. I chose to explore moving around the search bar and restructuring the modal while adding the override UI options to find ways to both save space and make the flow more intuitive. The search element being below the product tiles allowed for retailers to easily compare search results with the desired product, and thus I wanted to keep a similar functionality when exploring the horizontal layout.

Original modal (vertical layout)

Side-by-side explorations (horizontal layout)

Mobile explorations - taking inspiration from unique use cases

Alongside the explorations that I was doing on desktop, I began exploring similar flows on mobile. While it was not necessary that the desktop and mobile flows had exact parity, I wanted them to be similar enough such that components could be reused by engineers and to provide a consistent experience for users of both platforms. One key difference between the web and mobile experiences was the screen size. It wasn't possible to explore the same horizontal layout due to limited space, and I had to be more careful with using UI such as radio buttons due to the smaller tap targets.

I then began exploring other mobile apps that I used in my day-to-day life to find similar use cases that might apply, which is when I came across the unique use case of Uber. I noticed that when searching for a destination on Uber, the user would be directed to a new search screen with the starting point visible while searching for a destination. I found this use case to be highly applicable, as a similar flow would allow retailers to search for products in Shopify while still referencing their original Faire product above.

Uber mobile app

Faire mobile exploration

Finalizing the designs | Mobile → Desktop

After cracking the problem of building an intuitive searching flow for products on mobile, I began to make headway on the mobile designs. I continued prototyping, sharing work and iterating until finally landing on a flow that could then be modified for desktop.

Final hi-fi mobile designs

I then went back to the desktop explorations and redesigned the modal incorporating my learnings from the mobile explorations. While the horizontal layout intuitive on desktop, I noticed that the mobile designs could easily transfer to web with some minor adjustments. This allowed for a consistent experience across both platforms, while still ensuring that the experience was tailored towards the platform. Thus we landed on the final designs of showing the search bar directly below the original product, leaving more room for search results and then surfacing the product details option after.

Final hi-fi web designs

Key learnings

➊

The importance of simultaneously designing for mobile and desktop

I found it extremely valuable to go back and forth between the designs for both mobile and web to ensure that I was making decisions that would ultimately work on both platforms. While I knew that the two wouldn't need to be exactly the same, it was effective to consider ways to bring the flows together to maintain consistency and build intuitive flows for users of both platforms.

➋

Competitive analysis is effective even when the flow isn't an exact match

While Faire's needs of developing an intuitive linking flow for retailers using their POS integrations feature was a niche use case, I found value in consulting alternate platforms to adopt similar UX practices.

➌

Prototyping is important, even in early stage exploration

Through building prototypes for each flow, when developing my mid-fi explorations, I was able to simulate the end-user experience and develop a better perspective of whether the designs were intuitive. Building prototypes made it easier to tell when certain UI pieces were jarring or difficult to understand, and also helped gain feedback as I was able to quickly provide context to my designs and allow other designers to test out the options before critiquing.