Need 2 Know
Value Based Shopping Made Easy
Overview
This project was about designing a Google Chrome extension that informs users of the environmental and social impact of the products they are looking at to empower users who want to make educated shopping decisions.
My Role
Timeline
I oversaw the UX Design, and Visual design for this project. I collaborated with a team of senior product designers on this project.
4 months
The Solution
Introducing Need 2 Know
Need 2 Know gives users the run down on everything they need to know about a product and its impact so that they are empowered to support companies that align with their values.
Ranking System
Verified by a trusted source, an Impact Score gauge ranging from Avoid, Fair, and Great is shown at the top of the extension when the user viewing a product on an e-commerce website.
Design Process
Empathize
Define
Ideate
Prototype
Test
Empathize
Competitive Research
During my initial research, I focused solely on mobile apps.
Key Takeaways
​
-
All apps provide information solely on the impact of one category either the environment, health, or political effect a product has.
-
Easy to understand visuals
-
Provide Alternatives
-
Ranking System
Upon further investigation, I realized a chrome extension would solve the user's problem in real-time.
Key Takeaways
​
-
All apps provide information solely on the impact of one category either the environment, health, or political effect a product has.
-
Easy to understand visuals
-
Provide Alternatives
-
Ranking System
User Interview
I remotely interviewed 7 participants who all had an interest in supporting companies with values they care about. The intent of my research was to learn more about these individuals shopping process.
Save Time
Easy to Find Alternatives
Verified by Trusted Source
Transparency
Define
User Personas
To synthesize the findings and create a realistic representation of our core audience I created 3 key personas.
* Click image to enlarge
Key Issues to Design For
-
​How might we make it easier for people to find companies..
-
That we know don’t use harsh chemicals?
-
That make social progress an active part of their business model?
-
-
How might help people find companies that others referenced as a company in alignment with a specific value?
-
How might we make it easier for people to find smaller businesses or local businesses that are in alignment with their values?
Ideate
Low Fidelity Wireframes
I created low-fidelity prototypes of potential solutions, and presented them to collaborators to discuss their feasibility and desirability.
High Fidelity Wireframes
Issue #1
How might we make it easier for people to find companies that don’t use harsh chemicals? That make social progress an active part of their business model?
Solution: Impact Score
Through my user research and persona development, I found that users are most concerned with the impact a product has on their personal health, the environment, and society as a whole.
Solution: Iconography
My user research revealed to me that users do not want to spend a lot of time researching information on products. I used icons on badges that show the negative or positive traits of a product, as well as, icons in the navigation bar.
Issue #2
How might we recommend products that the user knows can be trusted?
Solution: Recommended Products
When users view the impact score and find that the product they are viewing has an unfavorable score they can navigate to the Recommended products tab to see vetted alternatives with a higher impact score.
Issue #3
How might we make it easier for people to find local businesses that support causes they care about?
DID NOT MOVE FORWARD WITH THIS IDEA
In the early design phase, I thought Need 2 Know would best solve users' problems as a mobile app. As the design process evolved I found that an app would slow down the user in person shopping experience. I then turned my focus solely toward their online shopping experience. I decided to pivot the design of Need 2 Know as a Chrome Extension so the users problem is answered in real time.
Test
UX Metrics
With the goal to give users transparency on the products they are viewing and their impacts, I chose the following UX metrics. These metrics measured the Visibility of System Status, , and Ease of Use from either the behavioral or attitudinal perspective.
Visibility of system status (Behavior):
Ease of Use (Attitude):
The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
System Usability Scale (SUS)
Impact Score
Round 1: Impact Score
​Users struggled with the ranking system and iconography
“The stars remind me of a review. I understood it’s a rating but it reminds me of a review and confused me.”
Design Iterations
​
I changed the initial design from the star ranking system to a meter gauge design with primary colors to easily identify the score.
* Click image to enlarge
Final Design
Upon further thought and input from my co-collaborators I decided to use a line chart. It takes up less space, is easy to read, and compresses well.
I also simplified the text associated with each ranking from a phrase to one word.
Iconography
“I was confused on the cancel symbol through ‘Natural Ingredients’ icon and not Parabens.”
“The recommend button is misleading to me, it makes me think it is a review system.”
Design Iterations
​
I removed any badges with a line through them and changed the badges to solid colors.
I changed the design of all 3 icons in the navigation bar to better fit the mental model associated with those pages.
-
​Impact Score star icon changed to verification check mark icon
-
Recommended thumbs up icon changed to user
-
Profile icon changed to gears icon
* Click image to enlarge
Final Design
After feedback from my co-collaborators I decided to create icons for any badge that did not have an existing logo to use.
Recommended Products
Results​:
-
Users were not able to easily find where the product could be purchased.
-
Users have the option to scroll through products and select ‘See Details’ to learn more information or purchase.
Design Iterations
​
-
Organized visual hierarchy of page by placing products in cards
-
Impact Score star icon changed to verification check mark icon
-
Recommended thumbs up icon changed to user
* Click image to enlarge
Final Design
Need 2 Know
Ranking System
Verified by a trusted source, an Impact Score gauge ranging from Avoid, Fair, and Great is shown at the top of the extension when the user viewing a product on an e-commerce website.
Vetted Recommendations
A provided a list of similar recommended products who rank higher on the impact score. Users can easily visit the page through the navigtion bar.
Iconography
Easy to recognize icons are used on the individual impact score pages and the navigation bars to help users quickly identify both the impact of a product and how to navigate the extension.
Results
SUS increased from 79% in Round 1 of Usability Tests to 80% in Round 2, pushing the ranking from Good to Excellent.
Reflection
What I Learned
Create the Experience
I focused on the user experience on the product side, however, it is important to really understand this as a system and as a service. If I were to do this project again I would test users' overall shopping experience from finding a site to browse, how the extension interacts, and through them purchasing an item in order to have a birds eye view of the product in the shopping system.
Interviews
If time permitted I would have liked to interview a more racially diverse range of participants. I would have also liked to interview more men.