Proud Zebra
In this week-long team project for the 2023 Eunoia UX Hackathon, I worked in a team of 4 to leverage the storytelling of Proud Zebra in their online store with the goal of driving engagement and empowering the 2SLGBTQIAP+ community. Out of 48 teams, our solution won 1st place!
Team
Christina Raganit, Kaho Furukawa, Karishma Sen, Yuna Okada
My Roles
UI Design, Interaction Design, Wireframing, Prototyping
Duration
April 16–April 24, 2023 (1 week)
Achievements
1st Place Winner (out of 48 teams)
Redesigned landing page of Proud Zebra's online store in a device mockup.
My Role
As the user interface designer and interaction designer, I was primarily responsible for creating mockups and wireframes on Figma and prototyping interactions to articulate the user flow of our proposed solutions.
I adapted the branding and design language crafted by our visual designer into a library of interactive components and organized typography, color, and grid styles to ensure visual cohesion in the interface.
Check out some of the highlights below
Our Client
Proud Zebra is a Vancouver-based small business owned by Delwin and Jimmy.
Delwin and Jimmy are a queer couple who strive to create a welcoming and inclusive experience for all their customers, aim to raise awareness about LGBTQ+ issues that individuals face daily by creating accessories that empower and celebrate this community, enabling self-expression for all.
Delwin and Jimmy selling their products at British Columbia's 2023 Pride Festival.
Problem Space
Proud Zebra identified that their current digital touchpoints are not effectively engaging customers and driving sales.
The small business noticed that their in-store and market experience is much more effective in promoting their products, story, and company values. As a team, we wondered how we might possibly enhance the customer experience for those shopping online.
Design Challenge
How might we transform Proud Zebra's storytelling experience into a digital solution that empowers the LGBTQ+ community, drives engagement and fosters a sense of brand loyalty?
Landing Page
Balancing product offerings with brand story and values
In organizing the content in the landing page to leverage the story of Proud Zebra, visitors can gain a deeper understanding of what this LGBTQ-owned small business does and stands for.
A scrollable view of the redesigned landing page of Proud Zebra.
Shop Page
Personalizing product filtering to streamline product discovery
By allowing users to sort through the different categories of products and filter by multiple identities, they can easily and quickly discover products that truly represent their authentic selves.
A visitor filters all the products in the catalog by their identity and searches only for enamel pins.
Product Page
Highlighting the meaningful stories behind each product
Each product showcases the story behind it, highlighting its unique and meaningful background. We feature customer stories within the reviews section to foster community and connection.
A scrollable view of the product page for the Non-Binary Asexual Medal Pin, where you'll also be able to read the featured story of fictional customer @AceAdventurerArya.
About Page
Leveraging the brand story and values of Proud Zebra
To establish authenticity and trust between the company and the user, we highlighted the brand story and values of Proud Zebra. Similar to the in-person experience, this helps to foster a stronger engagement between the brand and its customers.
A scrollable view of the redesigned about page, telling the story of Proud Zebra.
User Research Methodologies
We anonymously surveyed 38 2SLGBTQIAP+ individuals between the ages of 18-39 with the goal of gaining an in-depth understanding of their perceptions on self-expression, involvement within the 2SLGBTQIAP+ community, and behaviors when shopping at small businesses. We also interviewed 5 individuals to gain an in-depth understanding of their relationships with small businesses who are associated with the 2SLGBTQIAP+ community.
Key Insight
Consumers are more likely to purchase products from 2SLGBTQIAP+ businesses if the brand story resonates with them.
Participants expressed that the brand must communicate a genuine connection to the 2SLGBTQIAP+ community. When asked about brands targeting the community, interviewees emphasized that those not actively supporting the community despite marketing towards them are causing more harm than good.
Survey participants' responses to why they prefer shopping at small businesses.
Key Insight
Transparent commitment to diversity, equity, and inclusion fosters brand trust.
The results from our survey confirmed our hypothesis that users were more compelled to trust brands who are transparent about their commitment to diversity, equity, and inclusion (DEI). The following are also some insights that we received:
76%
of respondents believe that self-expression is important
69.4%
leaned towards trusting a brand with a strong DEI commitment
63.9%
emphasized the value of transparency in a company's values
Survey participants' responses to why they prefer shopping at small businesses.
We Blundered, but We Learned From It
A mistake we made while writing the survey revealed the critical need for 2SLGBTQIAP+ individuals to be able to identify themselves with their preferred identities.
When our survey was first released, participants were asked what they identified as, but we had neither an exhaustive list of orientations and gender identities as well as the ability to select multiple options.
“I’m both non-binary and a lesbian,” explains a participant. This respondent hated categorizing themselves as “Other”, as it made them feel marginalized and overlooked. I had a hunch for a feature that could improve product discovery for these individuals.
Secondary Research
From our secondary research, we discovered from a survey of 2,367 2SLGBTQIAP+ adults that they strongly prefer brands that support causes that align with their values.
We performed secondary research to validate the findings of our survey. In doing so, we surfaced the following insights:
- 74% are likely to consider brands that support nonprofits and/or causes that are important to them as a LGBTQ+ person.
- 71% said they are likely to remain loyal to a brand they believe to be very friendly and supportive to the LGTBQ+ community.
- With regard to advertising, 47% are more likely to consider purchasing a company's products or services when they see an advertisement that has been clearly tailored to "a gay audience with gay imagery and people and speaks to [them] as a gay person.”
Findings from a 2011 poll which surveyed 2,367 LGBTQ+ adults on their likeliness to consider brands which support causes important to them.
Brainstorming
We sought to highlight the brand story of Proud Zebra to build trust between the small business and potential customers. But how?
Unsure how to solve the problem and deliver value for Proud Zebra, we began generating ideas on how we might highlight the brand story.
The team had plenty of ideas, like starting a podcast and writing a weekly newsletter and adding a thank you note to every purchase. I was hesitant, however, because I considered feasibility foremost. I wanted to deliver a solution to Proud Zebra that they could implement, and they might not have the resources for a complex technical solution or something as time-consuming as a podcast or a newsletter.
Christina, Karishma, and Yuna exploring the solutions the team came up with while brainstorming
This part of the case study is still under construction.
Please check back later!
Reflection
Take into careful consideration the constraints of your client.
By doing so, my team and I were able to deliver a realistic solution that makes the most efficient use of the resources that Proud Zebra has. Our project had been criticized by other hackers for being “too simple” but in my view, the simplicity of our proposal and our willingness to work within the limitations of the small business highlight our deep understanding of the challenges faced by the small business.
Think about the technical feasibility of your proposed UX solution.
This is something that I do for every single one of my projects as a hackathon veteran with a software development background. I took charge in creating a development store on Shopify to prove that it can be done within the constraints of the small business, and one of the feedback that we received from the judges was that the test of feasibility was a great move for this project.