RecyclEd
Designing educational website for recycling in offices.
Recycling rules can feel overwhelming. But it should be much easier to implement in an office environment, since they usually have a pre-set list of items and three clear bins for sorting.
RecyclEd is an educational website for employees in Seattle offices that provides a quick way custom way to learn about sorting only for the items they actually use. The website allows to create a custom recycling cheat sheet and learn about general sorting rules, and creates sense of community by pledging to sustainable actions with your teammates.
Promotional video: why we need this tool?
Context
An aluminum can in trash can stay there for 300-500 years. In comparison, the same coda can will be recycled in less than a year, if sorted correctly. While it seems like a small gesture, it quickly scales up in the offices, given how many employees use materials like paper, plastics or aluminum cans every day.
Recycling rules can feel overwhelming, and a lot of times people find themselves confused by how to do the right thing. In reality, it takes you the same amount of time to throw something in a random bin or the right bin.
Offices should be one of the easiest environment to implement correct recycling behavior, since there is a predetermined set of items usually used in the offices (e.g. snacks, utensils, beverages) and clear sorting bins. So, as long as employees know sorting rules for their own daily items, it should be easy to follow them daily in the office.
Task
To design educational media that will help employees in the office gain knowledge about recycling of common items and feel more confident in their daily habits. The goal of the website is to reduce the cognitive load of recycling rules for employees and only focus on the information they actually need to know. The website also supposed to promote actual behavioral change on top of learnings.
Development
The project included the following UX design steps: user and topic research, focus groups, personas creation, prototyping, user testing, and creating a final interactive prototype in Figma.
Educational design choices
Educational design choice #1
The game included in learning experience makes the process more fun and engaging. The experience is supported by four freedoms of play1:
1) the freedom to fail (users have unlimited attempts and are not penalized for mistakes),
2) freedom to experiment (users can select any items and however many),
3) freedom to identify (the game doesn’t track users’ record under their personal name, so they can “pretend” to be anyone and select their items or decisions accordingly),
4) freedom of effort (after each attempt users have an option to “show answers” – or at the beginning of learning they don’t even need to try the game and they can skip it – which allows them to put as much effort as they wish by selecting their own items and always having an option for showing answers. This design was also supported by user testing, since users expected different flows from the sorting step: some wanted to try out their knowledge first and some wanted to see the answers. So the website supports both options.
Educational design choice #2
An important step in the educational journey of the website is Step 2: Pledge, where you automatically land after learning about the items. Fink’s Taxonomy talks about importance of Caring and Human Dimension, asking questions like “What changes, values, or interests do you hope students will adopt?” and “What should students learn about themselves?”.
By inputting their name in the statement, choosing their own category for reason behind it and clicking on “I Pledge” they take more accountability for the learning they’ve completed in previous section and bring the knowledge from the website to their real world – they have now committed to doing it outside this website and game.
Educational design choice #3
After user testing, I have made the decision to split the learning materials into clear chapters to allow users to explore what they’d like to learn. This design is supported by The Segmenting Principle of Mayer’s principles, as well as feedback in user testing.
During testing, all users expected different information in vague “Learn More” buttons, which was confusing to them for navigation and product expectation. Chunking the materials into categories with clear labels allows them to make that decision on what information they want to consume.
Educational design choice #4
During user testing, most participants wanted to have a quick “cheat sheet” to return to reenforce learning. This is also supported by the behaviorism approach that supports the idea that new behavior is acquired through associations between stimuli and responses.
So, by creating a quick way to reengage with learned content day to day, users can better memorize the sorting of their items and practice that behavior every day.
There are also options on quickly downloading other learning information in PDF format to print or bookmark for reinforced learning.
User experience design choice
User experience choice #1
I have followed Steve Krug’s approach for web design.
In particular, some principles used are:
1) Design for scanning, not reading and Less is more – the website minimizes paragraphs and text blocks and communicates most actions through buttons and color-coding (especially connecting all “main” steps of the website through the golden color theme). Each page usually also has one colorful action button that implies the “main” action on the page.
2) Make clicks mindless and Help users to easily navigate – the website allows moving between pages seamlessly and exploring content in any preferred way to allow users to click through any content that might catch their eyes. The header highlights the page they are on to help users navigate, similar with underline design and color-coding in Learn sub-tabs.
3) “The whole motive behind user experience is to make users feel good about the product" – that’s why even the prototype is complete in such a way that users can interact with it fully on their own and not have to “visualize” any missing steps, pages or scenarios of the actual website. It’s also complete in a nice way aesthetically and doesn’t look like a wireframe, because that does make a difference to how people perceive the capabilities of a tool.
User experience choice #2
I have followed Peter Morville’s User Experience honeycomb framework to make sure my website connects Content, Context and Users.
1) The website is Usable, since it’s clean in its navigation and clearly outlines the steps and expectations for the user.
2) The website is Useful, because it provides custom learning experience, links to useful materials and easy-to-understand graphics and facts.
3) The website is Desirable, because it has consistent color palette (colors were selected through a special tool to be complimentary), the design is minimalistic, website uses high-resolution images and has rounded corners.
4) The information on the website is Findable, since website navigation allows users to jump back and forth between pages and all learning sections are clearly marked in their headers.
5) Website is Accessible, since it uses high-contrast colors, big font (or scaling options) and images for easier learning.
6) Website is Credible, which is very important in educational material like this, since it clearly links all resources at the bottom of “learn” pages and in a separate tab for Resources. Moreover, if this was part of onboarding materials for the new offices, the information about items in the offices would be provided by the facilities teams, which would mean high credibility.
User experience choice #3
During user testing, the majority of participants were unsure about the meaning of the button “I pledge” since the initial prototype did not include information on the level of commitment they were signing up to and the participants didn’t know what exactly they were pledging to.
For this reason, I explicitly state “pledge (to yourself)” to signal it’s just a personal commitment, and also describe exactly what that action leads to: “Your pledge will be recorded under your name on this website and will count towards the number of employees pledged in our offices.”
User experience choice #4
The initial prototype had the educational journey set up in a rigid step-by-step way and did not allow jumping between steps of the website to explore. During user testing, participants sometimes felt “trapped” and wanted to understand the full scope of the website first or go back to previous steps.
For this reason, the final version includes various points for users to move between pages.
Actually, the first landing page includes three different ways to get to Learn: through header menu, “Step 1” on the right and “Start Learning” action button.
The pages are also a lot more interconnected. For example, from “Your Cheat Sheet” tab they have a quick button to land on “Learn”. And if they land on “Advocate” before completing previous steps, there is a quick button to get to “Pledge” for your badge.
Final Prototype
