Artboard 1 copy 8.png

Trellis is an online web-based platform where consumers can connect, identify, and explore minority owned small businesses for their consumer needs and give back to their communities.

Team:  Lan Allison, Claire Jaesook Lee-Kim, Peter Zahn

Tools:  Figma, Lucidchart, Google Docs & Forms

Duration:  9 Weeks

Trellis is an online web-based platform where consumers can connect, identify, and explore minority owned small businesses for their consumer needs and give back to their communities. For Trellis, minority groups do not just mean ethnicity and race, but groups such as those who are LGBTQ+, women, disabled etc.  In a social climate where more diversity and inclusion is being sought after, Trellis aims to shine a spotlight on small businesses that consumers may not be aware of, and promote spending your money locally to support small businesses and minority groups.

This project was completed as part of a University of Washington HCDE User Centered Design graduate course in Autumn 2020 over the course of 9 weeks.

The Project
 
HiFi_Product_Shot_Intro.jpg
Our Design Process

Identify 

Identifying the problem space and understanding the scope of impact.

Ideation & Proposal

Generating ideas that will result in an approach to meeting the user needs and goals.

User Research

Conducting qualitative & quantitative research methods to define user goals and needs.

Prototype & Testing

Converting the design idea into an interactive prototype and testing with intended users.  

Synthesis & Strategy

Distilling the user research into target user groups with high level design requirements.

Design Solution

Refining the prototype through user feedback and creating the design solution.

THE PROBLEM

In our world, there are many voices and communities that aren’t being heard. There is a cry for more diversity, more representation, and more inclusivity to celebrate minorities of all types.  But how does society do this?  Where can people go to build community, support diversity, shop small, and explore minority owned small businesses?  Where can they go to find events, volunteer or internship opportunities, and a chance to grow and support your very own local community? How do consumers bridge the gap between those who are represented and those who are not?  The goal is to bridge that gap by designating a platform all to minority communities and businesses for users to easily search through and find what fits their needs. As social issues and movements continue, more people are looking into how to spend their money more ethically and consciously. In today's consumer world, there are barriers and these design gaps have been identified:

 

1. It is difficult and time consuming to find a minority owned small business to fit specific consumer needs without a recommendation or word of mouth to guide their direction.

2. There is an appeal for quick and easy, one-stop-shop experiences such as Amazon that consumers gravitate towards.

3. It is hard to know about community volunteer events or internship opportunities unless you know where to look, the information is not always available in one location.

4. Consumers want to verify and do their research on a business before supporting them. Information such as owner background, customer reviews, pictures, etc. is very important to them. With these barriers in mind, we were able to create a design question to try and address this issue and user barriers.

We Ask...

How might we design an interactive platform that promotes and celebrates minority owned small

businesses to consumers?

Handshake
 
 

SYNTHESIS & STRATEGY

Affinity mapping, persona creation & design requirements.

Project Stakeholders

PRIMARY - CONSUMER

  • Influence businesses, what they sell, how they promote, what they support, etc. granting the consumer more power and say for our product.

  • Voiced their wants and needs for a platform that makes shopping small and supporting minority-owned businesses easier and more accessible. 

  • Identified as one of the minority categories we defined expressed more of a want and need for diversity and inclusion within the consumer world.

SECONDARY - BUSINESS OWNER

  • Affected by this system as well because it would be another platform that consumers can find them on, buy from them, or learn more about their business.

  • Market themselves how they wish which drives up their networking and business. 

  • Business owners need to be included in the conversation to understand their frustrations and goals in reaching their target audience and market group.

A public screener was sent out through Slack channels, Facebook groups, LinkedIn.  30 participants were identified as candidates for the interviews and focus group .  Additionally, personal and work related networks were utilized for potential minority business owners.  

Identifying Participants
Screener_Image.jpg

3 semi-structured interviews were conducted via Zoom with 4 participants representing minority-owned, women-owned and LGBTQ+ owned businesses.  We chose to do interviews with the business owners because we wanted to be able to have a one on one discussion to get a better and deeper understanding of different barriers and needs of different types of small businesses. 

 

Interviews allowed us to ask personalized questions to the business owners and the one-on-one atmosphere and time allowed for further investigation without fear of running out of time or giving other people time to talk. Each business type is different and there are different requirements, goals, needs, etc. when it comes to reaching your market audience. Topics were divided between business owner related and consumer related questions.

Interviews
What they said:

“How can we mobilize people like us who wake up to racism and want to shift from empathy to action?”
“Black businesses are excited about this space”
“So many do not have the resources to set up a good website for online commerce.”
“We’re missing the whole Yelpness.”
“As a consumer, you have to choose which systems of oppression you will participate in.”
“My network is full of people who want to help other people.”
Focus Group

Our consumer focus group consisted of 3 participants coming from different ethnic/racial backgrounds. We are putting diversity and inclusion at the forefront of our research in order to provide a representative sample of the target population. Since consumers are our primary stakeholders, it was important to understand what their shopping habits are, what their needs and goals are, and the frustrations/barriers that are preventing them from being able to successfully achieve their goals.

FocusGroup
Survey Data

2 surveys targeting consumers and business owners were shared over Slack channels, Facebook groups, LinkedIn, Craigslist and Reddit.  26 responses provided enough quantitative data to determine patterns in consumer behavior.

SAMPLE QUESTIONS:

  • How often do you shop at a small business?

  • How important is it to see if a small business gives back to the community?

  • What do you value most in your shopping experience? 

  • As a consumer, what do diversity and inclusion mean to you?

  • What are some frustrations you experience when promoting your business?

During our research phase, all studies were video recorded and transcribed to sticky notes via LucidCharts.  The triangulation of notes provided beneficial perspectives and reduced consequential interpretation that can occur during the synthesis phase.  The notes were organized into categories which became the input for our personas.

Affinity Mapping of Data
Discovery Affinity .jpg
User Personas

BUSINESS PERSPECTIVE:

  • Most viewed small businesses as offering a higher quality product and felt a stronger connection to those businesses through customer service.

  • Interview participants who used services preferred smaller companies and relied on virtual or word of mouth recommendations.

  • Some participants expressed value in knowing if a business was giving back to the community.

GENERAL CONSUMER HABITS:

  • Quality and price ranked highest in shopping experience values while social conscious values ranked last.

  • The majority of participants do not regularly shop at small businesses but consider it important.

  • If a product's price was competitive, convenience, consumer ratings, and recommendations would motivate customers to purchase from a small business.

SOCIAL RELATED:

  • Racism was referenced by the majority of interview participants and felt that supporting minority businesses was important. 

  • Most did not directly seek out minority retail businesses but showed interest in indirectly supporting minority businesses through local restaurants and farmer’s markets or online for personal handmade products.

  • Participants with children were more motivated to teach others about diversity and inclusion.

  • Younger interview participants were motivated by authenticity and had a stronger conviction to not support businesses that participated in discrimination.

  • Most local black businesses lack the resources for better promotion due to budget or time.

  • Minority business focused consumers use additional directories or web listings which were considered inadequate, difficult to use, or time-consuming.

  • A few interview participants based their consumer decisions on social or environmental aspects.

IDEATION & PROPOSAL

Sketches, lo-fi wireframes, storyboards, user flows & competitive analysis.

PROTOTYPE & TESTING

Scenario user flows, site map, medium fidelity prototype & usability testing

Usability Testing

After our team created a medium-fidelity prototype, we performed 6 informal usability tests via Zoom with potential primary and secondary users.  Participants tested the retail and volunteer flows and gave feedback during the debrief session at the end.

SAMPLE DEBRIEF QUESTIONS

  • On a scale of 1-7, one being easy and 7 being very difficult, how would you rate the usefulness of this tool?

  • In your opinion, what was the hardest task you had here today? Why?

  • Based on what you’ve seen from the prototype, on a scale of 1-7, how likely would you be to utilize a platform like this and its services? Which features would you choose and why?

  • Would you recommend this platform to your friends or fellow colleagues?  Why or why not?

  • Was there any information you felt was missing from the website that would be valuable to add?

UsabilityScript.jpg
Medium Fidelity Prototype

Our team created a click-through prototype with Figma to simulate a realistic web environment.  With the core functionality in place, participants were able to test the concepts of a minority based business and community directory.  Secondary features, color and detailed text were left out in order to keep participants’ focus on concept, navigation and page information.

Med_Fi_5
press to zoom
Med_Fi_4
press to zoom
Med_Fi_6
press to zoom
Med_Fi_2
press to zoom
Med_Fi_3
press to zoom
Med_Fi_7
press to zoom
Med_Fi_8
press to zoom
Med_Fi_1
press to zoom
UsabilityTest
press to zoom
1/1
Ideation

Based on our design requirements, ideas were generated and evaluated for potential.  Sketches were presented and discussed as a team and voted on.  Options included: directories, cultural ideas/sharing apps, informational sites, online stores, communication tools and browser based plugins.  

Sketches_2.jpg
Lo-fi Wireframes
Lo-fi_Wireframes.jpg

Sketches were refined in lo-fi wireframes and used as the starting point for user flows.

Storyboards & User Flows

Storyboards were created to explain the foundational concepts of the project and visually represent the use and experience from a user's perspective.  Retail, volunteering and review writing flows were detailed.

Assign5_Storyboard_1.jpg
Retail_Flow.jpg
Assign5_Storyboard_2.jpg
VolunteerFlow.jpg
Assign5_Storyboard_3.jpg
RatingFlow.jpg
Competitive Analysis & MVP Feature List

In preparation for moving forward with a retail directory/community focused application, competitive analysis and feature parity was reviewed across industry leading platforms.  This data provided key insights to where we can differentiate from competitors and design a unique opportunity for users.

KEY DIFFERENTIATORS:

  • Improved UX not present in existing minority directories.

  • Minority and group based business filtering.

  • Embedded reviews from Yelp and professional critics.

  • Community impact score based on business involvement.

  • Embedded business events and media including Instagram images.

  • Ratings for volunteering.

  • Easy matching for volunteer opportunities.

User Flows

Throughout the ideation process, the community aspect remained a pillar of our project and one which gained interest from outside of our team.  Two of our personas showed interest in volunteering aspects and a second primary flow was added to explore the concept of volunteering within our prototype.

Prototype User flows.jpeg
Site Map
Trellis Site Map.jpeg
 
 
 
KEY FINDINGS
Design Requirements

Based on data gathered from our research and mappings through personas, we determined the design requirements for the project:

  • Ability to search and filter ranked highest in our research. Users should be able to search for local businesses and display the results on a map. They should be able to filter results based on a variety of options, such as price, location, distance, business hours, handicap access, LGBTQ+ -friendly, minority-owned, business type (online or physical), etc.

  • Users are very active on social media. Users should be able to share the application with local businesses on social media.

  • Users want to see reviews of businesses before they visit or shop. Users should have the ability to rate, review, and/or post pictures.

  • Business owners want to be able to promote and raise awareness about local businesses and their causes. The web/mobile application should provide newsfeeds and recommendations to users to highlight local businesses and social awareness.

  • Users and business owners want to have an open space where they can come together to support and share about local causes and community events. The web/mobile application should provide community groups for users and local business owners.

 

DESIGN SOLUTION

Design revisions, a high fidelity prototype and design specifications

Try the Prototype
HiFi_Product_Shot.jpg

Given the findings from the first round of usability testing, our team responded with a list of changes we were to make to our high-fidelity prototype.

​CHANGES INCLUDE:​

  • New slogan and logo for Trellis.

  • Final wording and visual design.

  • Rearranged information architecture including racial and ethnic categories.

  • Reworked filtering system

  • Added contact and signup pages

  • Added internships and opportunity wizard​

TESTING RESULTS

KEY FINDINGS:

  • Issue of “checking” a minority group felt insensitive to some participants.  

  • Some users did not understand the purpose of the website without explanation. They wished for an “About Page”.

  • Catch phrase was ambiguous and did not convey the purpose behind Trellis. 

  • Users were successful in completing the retail task 100% of the time.

  • Users were able to find volunteering opportunities, but did not understand the purpose/wording of “For Community”.

  • Sub menu categories felt unrelated to some users.

  • Pages visually overwhelmed some users with too much content.  

UsabilityIssuesReport.jpg

USER RESEARCH

Qualitative and quantitative methods - 3 interviews, 2 surveys & 1 focus group

Screen Shot 2020-12-12 at 6.41.57 PM.png
MVP Feature Priority.jpeg
CompetitiveAnalysis_Claire.jpg
SCREENSHOTS
CONTACT US

Thanks for submitting!

Annotations were created to define specifications in regards to design language purpose and behavior.

Annotations

REFLECTION & NEXT STEPS

What would we do if we had more time?

Navigation header
press to zoom
Business Detail
press to zoom
Business Listings
press to zoom
1/1
 
 

REFLECTIONS:

  • Screening quality participants for research is critical to any project.  A few key participants provided us with the relevant information needed to move forward.

  • During our usability tests, we experienced a positive bias from participants who we interviewed previously.  The feedback that was the most helpful came from users who did not know about Trellis.

  • Lo-fi and paper prototyping can provide enough guidance and feedback to test initial design concepts.  Any additional detail only distracts the user.

NEXT STEPS:

  • Formal usability testing on our high fidelity prototype with user groups inline with our personas.

  • Conduct additional user research in regards to volunteering and internships and gain a deep understanding of user needs and pain points. 

  • Design the reviews and ratings experience. Create additional flows for users and conduct initial lo-fi usability tests to validate solutions.

  • Design the business owner editing experience. Create additional flows for users and conduct initial lo-fi usability tests to validate solutions.

© 2020 by K9 Design. Proudly created with love through the University of Washington.