Branding - UX/ UI Design - Web Design
No Waste
Turn your waste into something valuable
See more ↓
Client
This is a case study project as part of the UX Design course that I’ve taken — with General Assembly in Australia.
Brief
No Waste helps companies create sustainable solutions for managing their waste by providing them with an online marketplace to buy or sell waste from other businesses.
Role
UX/UI Designer - Visual Designer.
Challenge
Companies generate tons of waste that usually ends in the landfill. The misconception of make, use and dispose is causing a big harm to the environment.
Outcome
Conduct research to get a broader and deeper understanding regarding the inefficient corporate waste management and design a marketplace solution that allows companies trade waste as a resource.
–
Branding
Colour palette
Logo Variations
Fonts
Barlow Condensed
Title
Barlow Medium
Subtitle
Barlow Regular
Primary
The Goal
DISCOVER
How to make waste management a sustainable and effective solution.
Interviews
Problem statement
DEFINE
Understand target audience and main pain points for waste management.
Affinity Mapping
Persona
Feature Prioritisation
User flows
DESIGN
Create an effective solution to supply user needs.
Sketches
Wireframes
Style guide
Usability testing
DISCOVER - USER INTERVIEWS
I created a topic map for my user interviews that helped facilitate a natural and insightful conversation.
DEFINE - AFFINITY MAPPING
User Insights
I interviewed five users from different industries, which gave me a range of qualitative data for how waste is managed in a variety of corporate settings.
DEFINE - PROBLEM STATEMENT
"Companies need an efficient and sustainable way to manage their waste so that they can reduce the amount of waste that’s going into landfills and reduce their environmental impact".
DEFINE - PERSONA
“I am committed to minimising our environmental footprint by improving our waste management”
-
He coordinates waste management with the most efficient and cost-effective solution.
He uses the internet, email and phone calls for communication.
He follow environmental practices at home but not at work.
-
An efficient and sustainable way to manage waste.
Reliable platform to coordinate waste disposal.
Simplify systems to automate processes.
Reduce his company’s environmental impact.
-
He feels disappointed because they do not have an efficient and sustainable way to manage their waste.
He can not allocate a big budget for waste management.
He is always busy and does not have time to coordinate waste management.
DEFINE - HOW MIGHT WE…
How might we…
connect relevant business so that they move into the circular economy practices and trade waste as a resource.
DESIGN - SKETCHES
-
Sign in / Register.
1. It's likely that our users will want to conduct searches on other web pages besides your homepage. The search bar will be always present in the header banner to ensure that the users can do the search from any site location.
2. This search button will take users to the product/waste page.
3. Slider layout to feature most popular products.
4. Footer will contain main links of the website like about us, contact us, directory, FAQ and newsletter form.
-
1. Dropdown filter will help users to tailor their search based on specific needs like weight, location and waste type.
2. Users can add each product to their wish list by clicking on the heart icon.
3. Navigation bar will be used to see more products.
-
1. Each product page will contains: product gallery, product description, wish list, category, location, availability and price.
2. Send message field will be use to connect with other businesses.
3. Send message button will be activated once the user completes the sign in.
4. Additional company information and other company listings will be displayed at the bottom of the page.
DEFINE - MVP
I've used the 2x2 matrix to narrow down the essential features necessary.
Search function
Search filters
Direct message
Log in
Post a product
Location feature
DEFINE - TASK ANALYSIS
Advanced search
This feature allows users to search waste products by typing queries in the search bar.
The user can search the type of waste or key words in the search bar.
If is needed the user can use the static filter section to narrow down the search category, location, price, price type and material.
The user will be able to click the search button to trigger the search.
Pros
Deep knowledge and experience in waste management.
They've been in the industry for 6 years.
Cons
No website version.
Only available for subscribers.
$469 AU monthly subscription.
DEFINE - USER FLOW
DESIGN - USABILITY TESTING LO-FI WIREFRAMES
Feedback gathered from usability testing:
Add real text (Remove Lorem ipsum).
Add title/subtitle above search bar.
Use a modal overlay for the filters & refine section.
Change (Sign in & Register) to (Log in) and place it to the top menu.
Add (Products Page) in the top menu.
DESIGN - LO-FI WIREFRAMES
Specifications
The search bar will always be present in the header banner.
Seller contact and company information on product page.
The platform will show a placeholder image for those sellers that don't have a photo of their waste.
DEFINE - STYLE GUIDE
DESIGN - HI-FI WIREFRAMES
DESIGN - USABILITY TESTING
Before the usability testing, I've simplified the product result page by removing the top banner and changing the static filter section into a modal overlay.
DESIGN - USABILITY TESTING
CONTEXT
I want to get users feedback regarding the No Waste marketplace structure and usability.
RESULT
100% of the users successfully completed all task in 2 to 3 minutes.
Users were able to contact business
Users completed the registration or sign in with no more than one error
UNMODERATED TEST
MISSION: Search to buy glass bottles
DESIGN - USABILITY TESTING
PROBLEM
The Sign in & Register were hard to find in the top menu.
SOLUTION
I've updated the Sign-in & Register to login and changed the colour section to create contrast between the main menu.
PROBLEM
Lorem ipsum text has generated confusion during the usability testing.
SOLUTION
I've used real text in the prototype to help users navigate through the site.
DESIGN - USABILITY TESTING
Heatmap
Insights from usability testing:
Adding real text for testing a prototype it’s very important because it help users to navigate through the site.
Adding placeholder text in the message field will help users to take action and contact the seller easily.
Users can also use the waste categories to find a specific product, so it will be important to add a subtitle (keywords) for each category to understand what they will find in each category.
DESIGN - FINAL DESIGN & PROTOTYPE
Check out the complete and final prototype here (all images used are placeholders).
DEFINE - FUTURE STEPS
USER FLOWS FOR SELLERS
Create missing user flow for the sellers to map how they can sell their waste on the platform.
Create sellers prototype and conduct further testings.
Build and test the marketplace.
Launch.
Measure the effectiveness of the marketplace.
WHAT I LEARNED
-
Proper corporate waste management can have a huge positive impact on the environment. Prior to starting this project, I didn’t know much about corporate waste management. Now, I can proudly say that I know more about the waste management cycle and the industry.
-
At the beginning of the project, I started to think about how an app could be the best solution for the problem without thinking about the user needs. After I conducted user interviews, I realised how important is to focus on the user’s needs to target the right audience. If you immediately start thinking about a solution, you might end up solving the wrong problem, which means wasting time and money. It is very important to always validate our assumptions first.
-
It is necessary to not get attached with your first ideas, sketches, and interface solutions. The first idea that comes to your mind is not always the best, but it could lead you to a better idea or solution. It’s a good starting point, but it doesn’t have to end there. It is best to experience and think of other ways to solve the problem, so that you can be empathic with it and it’s solution.
-
The wireframes don’t have to be beautiful and very specific, but people simply have a harder time understanding what it is in from of them without content and images. Real content and placeholder images could make a huge difference when you are conducting user testing.
Key Skills
Brand identity
Ux & market research
User Journey
Information architecture
eCommerce design
Content structure
Wireframing and mockups
Prototyping
User testing