Product Design  

Client: Surrey Art Gallery Association 

SAGA is a non-profit organization that helps to support the runing of the art gallery in city of Surrey, BC
Date: Sep, 2018 - Dec, 2018
Team: Sofia Bautista, Tabitha Bruins, Sheng Wu
Tools: Sketch, Illustrator, InDesign


A digital art curator solution that expands the access to art rental program and improves overall consumer experience through a self-serve onboarding experience that emphasizes efficiency and simplicity.


SAGA, also known as the Surrey Art Gallery Association, is a non-profit society dedicated to supporting Surrey Art Gallery. They gain funds to support the gallery through government grand, gift shop and art rental/buying.

This case study explains our work in creating openGallery, a digital onboarding experience for perspective business members who are interested in purchasing and renting out work for their office decoration.

Knowledge Field:

Service Design 
Product Design 
Art Direction 

Research Process: 

RESEARCH - Gathering Qualitative and Quantitative Data

One key challenge of this project is to get the right design. SAGA is a volunteer ran non-profit organization, with around 10 members in the board of directors. However, as one of the bigger art curator in the Surrey community for local artists, SAGA deals with a wide range of business clients, artists and volunteers. Due to the shortage of resources and lack of funding, SAGA faces all kinds of challenges from developing a systematic way to recruit volunteers to promoting its brand to the public and earn recognition.

The team was in direct and frequent contact with our client during the research phase in order to identify the problem that is most important to the development of their organization. There are a few methods we used to gather data.

METHOD 01 - Ethnographic Research - Understand the Space

We started this project collecting quantitative data about visitors (amount of visitors, gender, age, and social economic status of visitors) through observation in the gallery. We took a collection of photographs to help us understand the space and how SAGA’s gift shop and exhibition area is situated. The team also created a heat map to identify the traffic of visitors and how they move around the space.

METHOD 02 - In-depth Interviews - Understand the People

There are around 10 members in the board of directors. The goal of interview is to gather qualitative data on members’ previous experiences working in SAGA and put ourselves into the their shoes to identify those challenges.

For example, in one interview with the volunteer coordinator, we realized their archive file system for artist works are based on old paper documents which made it extremely difficult for new volunteers to access those documents.

METHOD 03 - Participatory Workshop - Understand the Experience

As we learned more about the general information of the organization, the team conducted a participatory workshop with the President, Vice President and one current artist member. Through the role-playing activity, in which everyone represents one persona from the journey map and interacts with other personas, the team and stakeholders were able to come together to identify challenges that are more important and seek for potential opportunities for design intervention.

For example, when business members want to buy/rent art work, they will try to interact with the volunteers in the gift shop, however the volunteers don’t have the knowledge to onboard him for the program but only to direct him to art rental coordinator.

SYNTHESIZE 01 - Explore Initial Design Focus 

We first identified three directions as our initial design focus (shown blow). Those focuses are generated based on our initial research of the organization. For example, in their mission statement, they mentioned the goal of fostering a stronger art community within Surrey and becoming a more identifiable representation for art and art education in the community. So both “Identity” and “Education” are catered to fit that goal. While “Communication” acts as a more internal direction that looks into the efficiency of running this organization.

(Click to view full-sized photo)

SYNTHESIZE 02 - Understand The Complicity of The Issue  

The team moved on deciding to pursue communication as our revised design focus as we discovered that both “Identity” and “Education” require more effort in publicity than design. And we were more interested in finding opportunities of improvements that are more specifically catered to SAGA.

The team further dives into understanding the issue by separating “Communication” into two categories: internal and external. At the same time, finding the main personas that are involved in those narratives to identify issues that may be affecting more than one groups. For example, the artists need more guidance on how to promote their work to business owners who are interested in investing. And the business owners need easier access to view and engage with the work before making a decision on which one to choose. The volunteers need more instructions in providing answers to questions asked by both artists and business.

(Click to view full-sized photo)

SYNTHESIZE 03 - Find The Right Area 

Finally, after weeks of research, discussion and brainstorming, we narrated down our design intervention to a platform where artists can display their work online while business members can view them and volunteers can help facilitate the communication.

(Click to view full-sized photo)

FINAL DESIGN - openGallery 
Finally we proposed the concept of openGallery, a digital platform that displays all SAGA artists’ work with information about price, size and availability and allows people to share their bundle of selections with potential stakeholders.

Through only digitalizing the viewing process, we open the door to everyone who is interested in local art, but kept the consulting experience to be in person and private. So business clients who are interested in art rental/purchase will get directed to the platform when they first contact our volunteers and view the work on their own time digitally.

When they are ready to see those pieces in person and move forward with their investment, they will be able to book an appointment online with our representative. And we would already knew some basic information about them and what pieces they want to view through their online profile on the platform.

Concept Journey Map 

(Click to view full-sized photo)

Main Interactions:


VIEW (1) - Landing
Key Decision: According to the research, business clients are usually only concerned about two things when they are first in contact with SAGA: 1. how does this work? 2. what's available for rent/buy?  

Users come to the site with the choice of either viewing the work or learning how the service works.

VIEW (2) - Artwork preview
Key Decision: Having the work displayed in its original dimension is very important for users to quickly evaluate if this work will fit their space.

By simply hovering over, users can view additional information and detailed shot of the work.

VIEW (3) - Artwork details 
Key Decision: According to our research, the chances of one art piece get sold or rented out is significantly higher if people are more aware of the background story behind the artwork.  

User can also click into any work and view more information and learn the stories behind it. 

LIKE - Identify interested work
Key Decision: This interaction allows the users to build a pool of artworks that they can come back to without feeling over-committed. We, at this point, will not force any user to create an account with us. Their selections under "liked list" will remain local.

If users want to save their initial choices, they can put desired work to their liked list by simply clicking on the “+ Add to my liked list” button.

PROPOSE (1) - Categorize and narrow down selections 
Key Decision: "My Proposal List" allows the users to categorize their selections and narrow down the ones they want to move forward with.

Users can move their liked piece from “My Liked Pieces” list to my “Proposal Lists” by clicking on the “+Add” button. It allows them to add chosen work to exisiting category. 

Or they can also create a new category from “+Add”

PROPOSE (2) - Share intended selections with others  
Key Decision: "My Proposal List" allows the users to categorize their selections and potentially share their proposed artwork for office decoration to their colleagues, and stakeholders.

Users can view the “Proposal Lists” by switching into that tab 

In “Proposal Lists” view, users can select one and more categories to export by selecting categories and hit “Download” button afterwards. 

Once the portfolio is created, users can share this with their colleagues and stakeholders to seek for suggestions or approval. 

ENGAGE - Create client profile and book an appointment  
Key Decision: 5 well-designed questions are asked to start a basic profile, which helps our representative to have a basic understanding about the client and smooth their first contact.

Once the client feel confident enough to move forward with the decoration plan and are able to take some time to view the art works and talk to our representatives in person, they can start booking an appointment with us. 

Question 1: do you want to rent or buy artwork? 

Question 2: What rooms would you like to decorate? 

Question 3: What art styles do you like? 

Question 4: what is your budget? 

Question 5: How involved would you like to be in the selection process 

Finally we will ask them for their conatct infomation and a basic client profile is built.  

A final confirmation email is sent to the client and our representative will get in contact with them to confirm when, where and what to view. 


Thanks to Joanne Dennis for your tremendous trust and support. Thanks to everyone at Surrey Art Gallery Association for your collaboration and kindness.