As a part of Order Management team at Faire, IĀ was directly responsible for redesigning the settings pages for the point-of-sale (POS)Ā integrations flows across the platform. I lead the project through exploratory stages of user research and competitive analysis to wire-framing and finally handed off hi-fi design specs to the engineering team while communicating all decisions with stakeholders.
The design process
1
Context + Current State Audit
2
User Research
3
Proposed Solution
4
Wire-framing
5
Design Handoff
Context
Faireās point-of-sale (POS) integrations help save retailers time by enabling the transfer of product details (e.g. product name, quantity, price) to their POS system for all items ordered on Faire. The integration experience is customizable for retailers through settings that control how data is transferred, presented and synced between Faire and the retailerās POS system. These configurable settings are surfaced through onboarding as well as on a dedicated settings page, and allow retailers to tailor their integration experience to match their desired workflow. However, currently the settings presented are unclear and difficult to understand making it hard for retailers to configure their systems in the way they want to.
Project goals
Save POS-integrated retailers time when configuring their settings page through increased guidance and clearer settings
Help retailers effectively configure their POS systems and use the available settings to their benefit
Current state
The POSĀ settings are first surfaced during onboarding, when a retailer starts to connect their point of sale with Faire. The original state featured a series of toggles that were unclear and wordy with a lack of visuals and tightly packed layout making it difficult to quickly scan and complete. The nature of using toggles as a form field UIĀ also made it difficult to distinguish the distinct experiences the user would have when each setting was turned on or off. Since the settings directly impact the experience a retailer has when integrating their POS, it's important that they're configured correctly as any mistakes might create unexpected behaviour and potential syncing errors resulting in a poor experience for newly integrated retailers. In addition, the cognitive load added through this step in onboarding acted as an obstacle for retailers attempting to connect their accounts and thus increased chances for drop-off. This was especially critical to address as retailers dropping off during onboarding would never be able to access and benefit from the POSĀ integrations functionality.
Similar to in onboarding, the full settings page which was accessible for integrated retailers was also difficult to navigate and configure and thus the settings configuration experience was over complicated for retailers. After completing an audit of the current state on all settings surfaces, it was clear that the pages needed to be redesigned with a focus on building clarity and streamlining UIĀ to help enhance the user experience.
Settings in onboarding (current state)
Settings page (current state)
The proposed solution
We broke down the proposed solution into 3 key factors which guided the designs as follows.
1. Grouping settings for easier comprehension
We found that having all settings grouped together in a tightly packed list felt overwhelming and added cognitive load for a first time user. In addition, the unstructured nature of the original page meant that retailers needed to switch back and forth between mindsets when considering their workflows and preferences. Thus we decided to group these settings into 3 distinct sub-steps to not only break up the flow into smaller and more digestible pieces, but to also keep related decisions together. Thus we categorized the settings into the following three groups:Ā
Linking products:Ā Focusing on how retailers want to add new products and link to existing products in Shopify
Product configuration:Ā Focusing on product details including settings around tags, naming, currency, etc.
Inventory management:Ā Focusing on how product inventory should be updated
2. Changing the tone to be more guided
After looking through many onboarding flows as a part of competitive analysis, it was interesting to notice how strong of an impact a guided tone had in the ease of the flow. We wanted to ensure retailers connecting their accounts felt supported and more comfortable going through this process and thus decided to use a more conversational tone which was surfaced in the headers of the onboarding flow as well as in the settings themselves, which were rephrased as direct questions to the user.
3. Improving clarity through language and UIĀ used
We decided to move away from the toggle form UI as the on/off nature was not well suited for settings that had distinct choices to be made. The simplistic nature of a toggle was better suited for settings in which one feature was enabled or not rather ones in which there were broader experience gaps. After exploring a few form fields, we landed on the use of radio buttons with adjusted copy to emphasize what would happen when one option was selected over the other. This allowed for a strong emphasis on the distinction in choices as well as improved clarity for retailers to ensure that they were configuring their desired experience accurately.
Final hi-fi designs
After a series of exploration and feedback rounds, discussing with designers and engineers, we landed on the final hi-fi designs which were then handed off to the engineering team. IĀ also shared async inform updates with leadership to ensure alignment on all design decisions. The project was successfully launched in early November and we have received positive feedback from retailers on the new and improved experience since. Along with the redesign of settings in onboarding and the POS settings page, the retailer account settings and Shopify side settings pages were both updated accordingly to ensure consistency across platforms. In addition, the designs were translated to mobile too to ensure seamless transitions across screens.
Settings in onboarding (new state)
Settings page (new state)
Final design spec overview
Results
The final designs were handed off, and then engineering teamĀ launched the feature to 100%Ā of retailers in October. Since then, over 4.5k retailers have onboarded with the new experience. It is still too early to call the impact of these changes on POSĀ integrations churn rates or GMVĀ as it is a relatively new feature, but we have received positive qualitative feedback from retailers using the new experience.
Key learnings
ā
The importance of collaboration with engineering
Throughout the design process, IĀ shared updates with the engineering team around decisions for settings logic which helped raise any concerns early on. The engineering perspective that IĀ got was valuable in helping ensure that the settings copy was accurately depicting the actual behaviour. In addition, IĀ was able to reach out to engineers frequently to further discuss the settings which helped develop a strong understanding of what each one did.
ā
Documentation is key
When conducting my initial context building and current state audits, IĀ ran into many areas of confusion due to the lack of documentation around settings. With the goal of improving comprehension, the lack of a source of truth around the settings made it hard to evaluate what settings copy needed to be improved or updated. I found the deep dive into the settings valuable not only for my own understanding but for that of the team, and I used the settings breakdown tables as ways to document the updated versions of each setting.
ā
Small UIĀ changes can drastically improve comprehension
While the initial switch from toggles to radio buttons felt like a small decision, it was a huge step forward for the designs. It was really interesting to explore different UIĀ elements including checkboxes, radio buttons and toggles, to better understand the context in which each one might be the best to use.
