Image Image Image Image Image
Scroll to Top

To Top

On 02, Oct 2016 | In | By Nick Conflitti

Recycle Ann Arbor Website

Project

Recycle Ann Arbor Website

Client

Recycle Ann Arbor

Audience

Current and potential residents, business owners, municipalities, community groups, and staff/volunteers for the city of Ann Arbor and the surrounding areas.

My Role

  • UX Research
  • Information Architecture
  • Art Director

Background

I recently worked on the redesign of the Recycle Ann Arbor website (www.recycleannarbor.org). As the lead art director/UI/UX designer on the project, I worked closely with the lead web developer and strategist early in the project. This is where we learned all we could from our two main user types. Customers/residents, and internal stakeholders.

The purpose of the site was to answer the many questions that people have surrounding how and where they can safely dispose/recycle goods/materials. The site offered a new set of functionality that allowed users to easily type in keywords or phrases to match the goods/materials they were inquiring about. The results that turned up from a search allowed people to learn which division they could take the materials to, when they could do it, and how to safely handle the materials. The site also needed to educate people on the four divisions of the company and all of the sub services that each division offered.

Process & Solution

Learning

We started by interviewing customers of all types as well as internal stakeholders to learn what was most important to them and why. From here we learned that customers mostly used the website to try and figure out what to do with their stuff that they no longer wanted (construction materials, old appliances, etc). On the internal stakeholders side, we learned that most of the calls received by customer service pertained to the same concerns… Where can I take ___________?

Knowing this was a common theme to both of our primary user personas, we designed the entire site to educate people on what to do with the materials they needed to dispose of/recycle.

There were three main factors that made the project challenging. These notably impacted the design and site architecture:

  • Multiple user personas (current residential, prospect residential, current business owner, prospect business owner, current/prospect municipalities and community groups, current/prospect staff/volunteers)
  • Site function (both product-focused and informational/educational)
  • Complex brand hierarchy. Recycle Ann Arbor has 4 divisions of business, all with different business models, customers, and purposes

Definition and Design

At this point we had clearly defined user personas, client goals, and a knowledge of what the users need and want.

Content Outline

We started with taking inventory of the content that the client had already written.

  1. We grouped all similar content together by topic
  2. We segmented the large groups of content into sub groups to begin identifying areas that could be expanded upon or omitted
Architecture and Opportunity

With an understanding that the site’s architecture would focus around answering the question “What do I do with X?”, and knowing the main content groups, we started to develop the sitemap and wireframes. We created several sitemaps to discover the best architecture that would allow all the users to get to the information they needed without having to laboriously search the site. Through the iteration process we discovered areas of opportunity and need regarding content and functionality.

  • Knowledge base–We created this section that could be updated and grown over time. We discovered that there many pieces of content that users wanted but didn’t fit within a specific company division or wouldn’t be qualified as a blog post because the content is always relevant.
  • Featured products for sale–One of the divisions of Recycle Ann Arbor is the ReUse Center. People can bring in and donate things that are still in good working condition. The ReUse Center then stocks the item and sells in the retail shop of the ReUse Center. We created a view port for the site to import the latest photos and descriptions that the ReUse Center posts to their Facebook Page to display the hot items that are relevant to that time of year.

Once we filled the gaps of content, got sign off from the client on new functionality we started to wireframe the 11 unique page templates of the site. Along with wireframing the templates, we mapped out the user’s journey of the “What do I do with X?” search functionality. This allowed us to map out all possible search scenarios to plan for which content get’s pulled in and when, and if there are specific design elements that needed to be considered.

Result

With a solid foundation for the brand’s divisions’ identities prior to commencing the website, clear brand guidelines allowed us to focus on the aesthetics and functionality of the website. We were easily able to incorporate a well thought out architecture that lead to an easily navigable site.

The site has been so well received in the community and by external stakeholders that the “What do I do with X?” functionality is potentially going to appear on other sites in the area.

Work completed at re:group

Image of Recycle Ann Arbor mobile homepage and menu

Image of Recycle Ann Arbor user personas

Image of Recycle Ann Arbor sitemap

Image of Recycle Ann Arbor mobile wireframe

Image of Recycle Ann Arbor desktop wireframe

Image of Recycle Ann Arbor design elements - atoms and molecules

Image of Recycle Ann Arbor design elements - organisms

Image of Recycle Ann Arbor design elements - organisms

Image of Recycle Ann Arbor desktop homepage

Image of Recycle Ann Arbor a-z search functionality