View-only staff permissions for Shopify Balance

The objective is to add view-only permissions for Balance to Core as a first step to expanding Balance access beyond just Store owners. It is the first iterative step to role-based permissions and exploration into establishing permissions separate from Core.

Year

Oct 2022

Tools

Figma

Project Types

Product Design, Admin Design

Roles

Product Designer

Reshare thumbnail
Discovery
User Journey
Exploration
Design
Handoff

01

Discovery

Focus Areas
01

What is the context?

02

What are the problems we want to solve?

03

Why is it worth solving?

04

What are the proposed solutions?

Context
What is Shopify Balance?

Shopify Balance is a money management account that enables merchants to easily manage their store's payments and transactions from one place. Merchants can add in another account to allocate funds towards expenses like payroll, for example. Merchants can also earn cashback and receive partner offers when they use their Shopify Balance card.
Problem & Solution
‍The Problem
‍One of Balance’s top merchant frustrations is the inability to grant access to Balance to more than one user. The limitation is a dealbreaker for merchants who have a business partner or other staff members that require access to banking account info to complete day-to-day tasks. In the long term, only providing Balance access to the store owner prevents strategic expansion into areas that require multiple users' access to be impactful to the merchants.

The Solution
The objective is to add view-only permissions for Balance to Shopify admins as a first step to expanding Balance access beyond just Store owners. It is the first iterative step to role-based permissions and exploration into establishing permissions separate from Core.

02

User Journey

User flow

Developing a user flow allowed us to gain a better understanding of how store owners will grant access to partners. This helped us create a more streamlined and intuitive process that meets the needs of both the store owner and their partners.

03

Exploration

Functionality Check
‍
In order to provide limited access to read-only users, we created a checklist to identify which features would be available to them. By carefully reviewing the available features, we can ensure that read-only users have access to the information they need while still maintaining appropriate security measures.
User needs
#1 Financial Transaction Security
Restrict staff from performing financial transactions (e.g., adding funds or configuring payout accounts) to enhance security and prevent unauthorized money movements.

#2 Privacy protection
Ensure complete privacy by safeguarding sensitive personal information, such as store owner's details, cash flow insights, account, and routing numbers, from being exposed to unauthorized individuals.

#3 Access to Essential Information
Provide essential information to staff members, including available balances, transaction lists, and support details, to enable effective and informed decision-making while maintaining data confidentiality.
Today's experiences

We explored the read-only permission feature in Shopify Core and reviewed its current functionality. Based on our analysis, we brainstormed ways to design a limited permission feature, such as disabling or hiding certain features, or displaying a "no permission" page to users without adequate access.
Task Model

Building task models was very helpful by allowing us to visualize the process users would take to achieve their goals and complete their expected tasks.

Customer User Task Model
Store Manager User Task Model

04

Design

Logos
Design system
‍‍
In my design process, I used the Polaris design system. I consistently maintained a four-times spacing pixel guideline to ensure visual harmony throughout the interface. Moreover, for disabled buttons, I utilized the disabled button component, promoting both consistency and accessibility in the design.

05

Final Design

After having six iterations of the design process, we finalized the design for the read-only feature. During the design process, we encountered multiple scenarios where billing and payout permissions needed to be enabled or disabled, which required careful consideration and discussion. To ensure everyone was on the same page, I had regular one-on-one meetings with the project manager and developers to discuss any concerns and make decisions about the final design.

Logos

06

Handoff

After finalizing the design with the project manager, I conducted a top-hatting session with the front-end developers to ensure they understood the design and how it would be implemented. During the build phase, I hosted a polish review with both front-end and back-end developers to review the progress and ensure everything was on track.These experiences highlighted the importance of effective communication and collaboration within a team, and reinforced my confidence in my ability to work effectively with others. I believe that by fostering a culture of open communication and collaboration, we can ensure the success of any project.

Top-hatting, Polish review

More Work

Sezi's studio

The Proms