Good Brands

Aligning consumers with brands they can trust.

Roles: UX designer, Research, Branding.

Problem

Consumers who prioritize social justice, environmental sustainability, and ethical business practices often struggle to find comprehensive, reliable, and easily accessible information on brands that align with their values. While scattered resources exist, there is no centralized platform that aggregates brand ratings across multiple industries, making it difficult for conscious consumers to make informed purchasing decisions.

GoodBrands aims to address this gap by providing a one-stop hub where users can browse brand ratings, access detailed insights on ethical and sustainable practices, and track their favorite brands. Additionally, users can create accounts to personalize their experience and earn rewards for engaging with the platform, fostering a community of informed and empowered consumers.

Research

Competitive Analysis & Market Research Findings

Several companies and organizations rate brands, but they typically focus on a single metric or brand certifications, rather than user needs.
Market research indicates that users want a simple, centralized way to access brand ratings.
Data sourcing remains a challenge as the app is still in development.
Initial ratings were based on multiple existing sources, but further research and data collection are needed for a comprehensive rating system.

User interviews

Interview participants were ethically conscious consumers looking to align their spending with their values.

Common themes among potential users:

Majority are millennials
Prefer shopping locally
Not loyal to specific brands and switch based on:
- Price
- Brand behavior
- Response to social issues

Interviewing ethically conscious users provided valuable insights into the key metrics they prioritize when evaluating brands. This research revealed which brand attributes and industries matter most to them, helping to shape the platform’s rating criteria.

Persona

My interviews and Market Research and analysis allowed me to curate a potential user for the app.

From my research, several key aspects would influence my designs. The first is that users want to do business with brands that align with their ethical stances, and users also want to know how well those brands are doing regarding several metrics. The metrics I chose would be:

Environment and Sustainability
Pay and Worker Conditions
Diversity (in the workplace)
Social Justice (Response to and actions on)

User flows & Wireframes

I wanted to keep the Users focused on the 2 main functions of the app:

Searching/Browsing for brands,
Following those brands to get curated suggestions.

I then created Lo-Fi wireframes to map key user flows focused on the two main flows. I also included sub-flows for:

Sharing content.
Reading news/blog articles.
Adjusting settings/preferences.
Learning more about GoodBrands.
Contacting GoodBrands.

User flow 1

My first user flow focused on all the potential paths the user can take through the app. This allowed me to visualize the pages and interactions that the user would have access to.

User flow 2

This second User Flow was to focus on the 2 main flows mentioned above. While they are separate they can be accomplished almost within the same flow, as searching and browsing will lead you to the brand page, where the Follow action can be taken.

Wireframing & Layout Design

Created and refined wireframes for all key app pages, evolving from initial user flows.
Defined the overall structure and navigation, ensuring an intuitive user experience.
Determined which elements should be modals/popups vs. full pages for seamless interaction.
Visualized how users would:
- View and interpret brand ratings and detailed rating data.
- Customize preferences to receive tailored brand suggestions.
Provided a clear foundation for the app’s UI and interaction design.

Branding & Visual Identity

The GoodBrands identity needed to balance ethics, sustainability, and friendliness with a strong and credible presence that users could trust.

Color Palette:

Soft greens and off-whites were chosen to evoke feelings of sustainability, cleanliness, and approachability.
The leaf logo reinforces the eco-conscious and ethical focus of the brand.

Typography:

The Cubano Sharp font was selected for its bold yet approachable style, ensuring the wordmark has an impact and remains recognizable alongside the logo.

Visual Style:

Illustrations were used throughout the app to create a warm, inviting, and friendly atmosphere.
Photography was intentionally limited to brand pages, adding authenticity and credibility while allowing users to take brand information more seriously.

The overall design ensures a welcoming, informative, and visually cohesive experience.

HiFi designs

Onboarding

First-time users are guided through an onboarding flow to set up their account.

Two-step process:

Enter their desired account details.
Adjust preferences for personalized brand curation.

This ensures a tailored experience by suggesting brands aligned with user interests.

Browsing for brands

Once logged in the user can then browse for brands.

Click "browse brands"
Chooses a category
Selects a brand from the list
Can view that brand page

This is intended to be a short process to reduce time on tasks for users.

Searching for brands

The user can also search for a specific brand

Enters keywords in the search bar
Sees search results
- If the list is long, filters are available
Selects a brand from the list
Can view that brand page

This flow is the alternative to the above flow for when a user isn't sure what category a brand would fit into.

User profile page

The profile page holds all the personal information regarding the user. From the profile page users can:

Adjust their brand preferences
View and change their personal account information
Contact Good Brands
Access the "About us" section
View the app privacy policies

Usability testing and revisions

The usability testing was conducted in person. To simulate a real app, users completed several tasks using a Figma Prototype via the Figma Mirror app.

Test 1

This test included several tasks:

Onboard into the app
Browse and find the Brand Patagonia
Follow that brand

All tasks were completed successfully. Most users used the "search" function to find the brand Patagonia.

Test 2

Tasks in test 2 included:

Share a brand page
View similar brands
View their profile and adjust their preferences
Fill out a contact form

Test 3

The final test only had one task

Find out more about Good Brands and how the ratings are established

Most users found this via the brand page, but some users wanted to be able to find this on the home page before viewing brands.

Overall results

This test was largely successful, as all users completed the tasks with minimal errors or misclicks. However, two key frustrations emerged:

Slider for Preferences – Users felt that using a slider to select personal attributes made it seem like they were adjusting a setting (e.g., volume) rather than defining a preference. Additionally, one user expressed concern that lowering a metric felt like "neglecting" it, as all metrics were equally important to them.
Navigation Issues – Users found the About Us and How We Rate sections difficult to locate under the profile page. They only discovered these sections through the link under the brand rating. If they had wanted to read this information before browsing brands, they would have become frustrated.

Revisions

Based on my usability test results, I made two key revisions:

Added a "How We Rate" CTA on the homepage, linking directly to the About Us page.
Replaced Preference Sliders with Selectable Tags, allowing users to choose attributes that match brands, ensuring a more intuitive way to curate recommendations.

Before

After

How We Rate CTA added to homepage

Before

After

Preferences sliders replaced by tags

Whats next and what could have been better?

Additional usability testing and research
- Testing was limited and only focused on a small user cohort. Ideally, a larger group would test the app more thoroughly.
- To verify changes made after the last round of testing.
Research into data sources
- Access to more robust data sources is needed.
- Investigate the technical aspects of accessing and displaying this data.
Development of the app
- The app is currently conceptual and has not been fully developed and released. To do more thorough testing it would be great to build a working app and run some alpha testing.
- If I were to start again, building and testing a live version of the app would be my preference.

Page updated

Google Sites

Report abuse