Tim Chen

Shopmakers Brand Card & Blog Interaction Design

Category:

#Interaction design #User research # Design Collaboration

Tool:

Figma, Figjam, ChatGPT

Type:

School project with real-world clients

Date & Time:

2023 Summer

Team:

Tim Chen, Manpreet S. Junniel A. Sargun G. Ginnie C. Mark

Report:

Report Link
Render of brandcard and blog concept
Brand Card and Blog concept

Overview

ShopMakers is a Vancouver-based retailer empowering local artisans and entrepreneurs by providing a dedicated platform to showcase and sell their handcrafted products. Makers can rent shelves in ShopMakers' stores to sell products and keep 100% of the commissions.

In this design collaboration, we partnered with ShopMakers at their bustling Gastown store, located in one of downtown Vancouver's renowned tourist areas. We identified a notable gap in the interaction between customers and makers through user observations, stakeholder interviews, and mapping customer journeys. Our "Brand Card and Blog" solution addressed security and cost concerns and utilized existing resources to be practical, space efficient and user friendly.

Project Information

This project is the main project for my Interaction Design Methods course, IAT333.

We were asked to design a digital solution to help modify part of an interaction for an external client. In a double-diamond design process, we practiced methods including design ethnography, personas, storyboarding, scenarios, journey frameworks, participatory workshops, and concept generation.

My Role

  • A meeting leader role where I gather/lead meetings, drive constructive discussions and ensure that assignment deliverables are met on time.
  • A semi-leadership role where I actively contributed to the majority of assignments and was responsible for overseeing the quality of our work.
  • Oversee client communication and gather meeting notes to ensure a productive meeting.
  • Explore, generate, iterate and polish solutions based on gathered insights.

My Takeaways

  • Experience using various design methods to emphasize a target group of people or part of a service.
  • Experience in iterating solutions based on research insights
  • Experience in productive communication with the client and the team
  • A deeper understanding of complex stakeholder relationships in the retail industry.

Objective Framing

Using various design methods to identify a valid problem within Shopmaker's work process and offer a tailored digital solution.

Diverge: Initial Research

To gain an understanding of Shopmakers' business, I went to their Gastown location at a relatively unbusy hour. I interviewed staff and did a one-hour observation of the impressions and interactions in and out of the store.

  • I noticed over 80% of the customers are women aged 20 to 35. Many of these females are with a baby. Due to the unique location of Gastown, most of them are local tourists.
  • More than half of the products are self-care, wellbeing related (Handmade soap, Shampoo, Essence oil, Candles), and there are also foods, perfumes, clothes, jewelry, ceramics and souvenirs.
  • Makers have complete freedom to decorate their shelves, but most are just items with price tags.
  • The overall decoration style is organic wood-themed, with the sweet scent of candles and soaps. My first impressions are: clean, organic, woody, casual and comfy.
Shopmakers inpression
Shopmakers impression
SuperStudio Work
Constraints from the location

Interviewing with the shop manager

In our first meeting, We want to understand better how the business operates and identify more Interaction problems to improve on. We also wish to know their goals for this project.

I built a question list covering various topics from day-to-day work processes, Relationships between customers, makers and Shopmakers, business structure, Technology used, and Current challenges.

This interview gave us valuable insights into shopmakers' operations and their key priorities. Additionally, it granted us access to more internal documents, such as branding and maker support materials.

  • Shop makers are gender-neutral, but handmade products are, by nature, more female-focused. They have no control over what kind of makers they are getting.
  • Shopmakers only profit from renting shelves, so the space in their stores is extremely limited. Additionally, their primary focus is not on selling more items but on attracting and supporting the makers who rent shelves.
  • The main point of friction they are having is in their shelf managing system, which is made with Google Sheets.
  • A shelf in the store is the only point of interaction between the maker and the customer.
  • Product reviews are encouraged to be left on Google Maps to boost SEO.
  • Customers often phone in to get product support or find makers.
  • Valuable items cannot be left in the store due to security and cost concerns.

Converge: Design Focus

  • After realizing the relationship between makers and customers, We created another persona for the makers from data gathered during the interview and on Shopmakers' social platforms.
  • User journey maps were made for customers and makers to further analyze the process and interactions.
  • We did a brainstorming section to generate possible design direction. Out of all the ideas, we chose two Directions that could benefit Shopmakers the most within this project's scope: the lack of interaction between Makers and Customers, and between Customers and the Website.
  • Finally, we combined these two directions with the goal of enhancing interactions between makers and customers, both in-store and online.
 Poster iterations
Final design focus

Diverge: Two directions

We brainstormed on possible solutions that can work with the constraints, be practical and creative, and meet the project requirement of being a technical solution.

We selected a few ideas and did a participatory workshop with our client. The workshop grant us more insights on limitations and their suggestions on each possible solution.

Of all the solutions, two ideas stand out as being the most practical and effective: the blog idea and the brand card idea.

  • The Blog concept lets customers visiting the website easily locate a maker in-store and online and dive deeper into the product and brand stories. Since ShopMakers' current design primarily caters to attracting makers, adding a blog section to the website will also offer significant value to the customers.
  • The Brand Card concept involves a pre-designed card placed on the shelf, containing essential information to assist makers in enhancing their shelf designs. This information includes user guides, ingredient lists, recommendations, and maker's socials, all presented in a consistent template. This approach aims to simplify information retrieval for customers, enabling them to make informed decisions and overall contribute to a more consistent and enhanced in-store experience.

We developed storyboards for both concepts to explore their processes thoroughly.

 Poster iterations
Blogs concept targets online interaction between makers and customers
 Poster iterations
Customer can discover blogs and use them to find makers in store
 Poster iterations
The Brand Card concept aims to provide information on the shelves uniformly
 Poster iterations
The initial version of the Brand Card is a basic template that outlines the key information to be included on the card.
 Poster iterations
Brand Card storyboard

Converge: Final solution

We found that integrating both ideas could significantly boost effectiveness and provide a superior experience. As a result, we merged these concepts into a system that enables makers to customize their shelf designs and enhance their brand reputation. This system facilitates interactions that extend beyond the physical shelf, ultimately fostering stronger relationships between makers and customers.

We refined each touchpoint in the user journey for both makers and customers and showcased these enhancements through a new storyboard.

For the final deliverable, we included:

  • A design proposal with design rationals, descriptions and next step suggestions. Many unused ideas were put in the appendix.
  • Design of the physical brand card, the online seller profile and the blog.
  • A new version of the shelf-managing system was made using Figjam to support sheet import, drag and drop and colour coding.

We developed storyboards for both concepts to explore their processes thoroughly.

 Poster iterations
Final mockup of the Blog Concept
 Poster iterations
The final mockup of the Brand Card offers increased customization options and is designed for easier scanning
 Poster iterations  Poster iterations  Poster iterations
User scenario of a typical interaction with Brand card and Blog

Achievement and reflection

I'm pleasantly surprised by the effectiveness of the double diamond method. Employing these design approaches, we grounded our design arguments in concrete insights and research. These methods enabled us to uncover details that might have been easily overlooked otherwise. We successfully navigated uncertainties and constraints during this design process and delivered an effective solution. I'm proud of how our team evolved during this project. Initially, there was a challenging dynamic with one member who struggled to work effectively with the group. Through my intervention and support, we saw a positive turnaround; he began to contribute meaningfully in the final weeks. It was gratifying to see his growth and how it enhanced our overall team performance.

  • Upon reviewing Shopmakers' website, I'm pleased to find that the blog feature has been added to the official site!
  • The suggestion of creating a brand card has been added to the Shopmakers' maker guiding documents.
  • An unused idea of offering Makers business-related resources might gain their attention, for they are now renting studios to enhance collaboration among makers.
  • Our professor praised our final report for identifying a meaningful problem and proposing a practical and effective solution, resulting in a grade of 94%."