UX Case Study | The Good Green
Overview
Timeframe: 3 Weeks
My Role: Scrum Master/UX Designer /UI Designer
The Team: Adam (UX), Ly (UX), Saveen (UX), Ethan (UI), Charise (UI)
Tools: Sketch, InVision, Photoshop
Deliverables: Responsive Web design (web and mobile high-fidelity prototypes)
UX Methods: Research, Competitive analysis, Surveys, Interviews, Contextual Inquiry, Affinity Diagrams, Personas, Storyboard, User Flows, Content Audits, Feature Matrix, Lo-Fi & Mid-Fi Prototyping, User Testing
Agenda
Introduction
The extensive amount of waste build up at events sometimes goes unnoticed. Unfortunately, this is a problem we run into today. According to MeetGreen, during a typical five-day conference, 2,500 attendees will use 62,500 plates, 87,500 napkins, 75,000 cups or glasses and 90,000 cans or bottles.
The Good Green might have found a solution to these problems
The Project
During our first client meeting we had with Natasha, the first question we asked her was…
“What is The Good Green”?
She told us, The Good Green is a platform that educates both the general public and event vendors on eco-ethical practices through the use of webinars.
Our client Natasha Thom, who is an event planner at Clearwater events, realized the waste build up was too much at the events that she planned. She teamed up with fellow event planners, Ellen and Praise, who also noticed this problem and they collectively started The Good Green initiative.
The Problem
Following our first client meeting, we discovered the problem that needs to be solved with our design team. Natasha currently has a website built on the CMS platform Squarespace. The current problem with her website is that Squarespace is limited for what she envisions to do with The Good Green. Also, the current user experience on her website is generally confusing. It is hard to find out what The Good Green is about and what the objective of the website is.
The Solution
We developed a solution that provided a better overall user experience and additional features that our client doesn’t have on her current website.
More specifically, Natasha wanted the website to not only educate the general public and vendors on eco-ethical event planning, but she also wanted the website to offer an eco-ethical vendor catalogue for people planning an event.
Goals
After figuring out the problem that needed to be solved, we developed our over arching goals for The Good Green project. This gives us a foundation of what we’re designing for.
After brainstorming after our first client meeting, we figured out that the website will have two main users:
The first user is the vendor, and their goal is to educate themselves on eco-ethical practices through webinars and workshops as well as showcasing themselves to the general public as eco-ethical vendors on the catalogue.
The second user is the general public, and their goal is to find an eco-ethical friendly vendor and to learn about how to make their event more eco friendly and ethical.
Research
Domain Research
For our domain research, we looked at competitors in the industry and looked at where we can find a niche and obtain competitive advantage. We first looked into the non eco-ethical wedding and event planning industry. We found that the Wedding planning industry was mainly dominated by The Knot, Wedding Wire and Zola
We then looked into eco-friendly event planning, this is where we found Meet green, less stuff more meaning, and plan with purpose. We looked at what features these competitors had and where we could find our advantage which led us into our competitive analysis.
Competitive Analysis
Looking into specific features, we noticed that all of the competitors we looked at didn’t provide both webinars and an eco-ethical vendor catalogue. With that, we found the niche that The Good Green would fit into. Which led us into doing further research with our users.
Interviews
Following our domain research, we interviewed both potential users of our website which is the vendors and the general public that plan events.
Who we interviewed:
Vendors: 4
Event Planners: 2
Key Questions:
- What do clients look for when they are looking for you as a vendor (price/budget, distance, vendor rating/reputation etc.)?
- Do clients look for ethical/sustainable practices? If so, what do they look for?
- If your company is being displayed on an event vendor directory webpage, what kind of information would you like to be displayed?
- Does your company practice sustainable/ethical practices?
Key Findings:
The vendors generally told us that event planners are fairly price sensitive when they search for a vendor. Two of the four vendors said that they would be interested in learning more about eco-ethical practices. We also found that two of the four vendors already have eco-ethical practices in place.
Vendor Quote:
“Since I started my business, I’ve only had one bride that booked me for my sustainable practices. My clients are fairly sensitive to price, which mostly comes from comparison to cheaper online options. I’ve been working on building an affordable rental inventory in order to solve this problem. We have a pretty extensive recycling program here at the warehouse”
Surveys
After we conducted our interviews, we developed and deployed a survey to those who have planned an event before
Survey Respondents: 26
Deployed to: Anyone that has planned an event
Key questions:
- “When looking for event vendors, what is most important”?
- “What frustrates you when planning an event”?
- “How important are ethical businesses to you”?
- “How important are ecological businesses to you”?
Key Findings:
Through our surveys we found that, price and vendor rating are the most important when people are looking for a vendor.
- People often stereotype sustainability practices as more expensive
- If they pick eco-ethical, it aligns with their personal values
- We also found that eco-friendly practices are in low demand for people that are planning an event
Event Planner Quote:
“It would be helpful to use a website that allows users to select their region (e.g., Vancouver) and the different services they are looking for (e.g., catering, decor, supplies) to generate results for where they can find eco-friendly options for the services they desire”
Affinity Diagram
An affinity diagram is where we gather all of our thoughts and put them together into one board. In this board, we look for patterns and commonalities in the people we interviewed and surveyed.
We focused on finding features, pain points, and motivations. This would help us develop the personas that we are designing for which leads us into our planning phase.
Planning
Personas
First Persona: Event Planner
Key Needs and goals:
- Find Wedding vendors that ensure eco-ethical practices
- Find a company that aligns with her personal values
Key Painpoints:
- Eco-friendly wedding might be expensive
- Does not want to support businesses that don’t treat their employees right
Second Persona: Vendor
Key Needs and goals:
- Learn about ways to make her operations more sustainable and ethical
- Be apart of an industry network that also wants to create change
Key Painpoints:
- Hasn’t had too many clients that are concerned about ethical sustainable practices
- Clients assuming sustainable will be more expensive
After creating our personas, we went into storyboarding with our personas.
Storyboards
A storyboard in UX is a tool that visually predicts a user’s experience with a product. It helps UX designers understand the flow of people’s interaction with a product and gives us a clear sense of what’s important to the users.
Event Planner Storyboard: Sage Lee
- Sage Works as a full-time manager at a local vegetarian restaurant in Vancouver called Heirloom
- As a manager, she treats all of her employees fairly
- She tries to reduce her ecological footprint whenever she can
- Jim recently proposed to Sage
- Sage and Jim have been overwhelmed trying to plan their wedding. It’s been hard finding vendors that align with her personal values.
- She then finds The Good Green.
Vendor Storyboard: Jessie Jacobs
- Jessie is a 33 year old successful vendor with her company Tempeh
- She has seen a lot of waste being produced in the event planning industry
- This sparked her to make a change by starting with her own business.
- She has been looking for ways to educate herself on eco-ethical practices.
- But it has been difficult for her to find resources.
- Until she Stumbled upon The Good Green website.
MVP
Based on all the data we collected through our research and our early planning phase, we developed our Minimal viable product (MVP). The MVP has just the core features that allow the product to be deployed, and no more. We do this to get a foundation of our design which refers back to our business, project, and user goals.
MVP Feature List
From the data we collected and what Natasha wanted, we sectioned our features into three categories. Not needed, nice to have and must have. This gave us the base to make our user flow.
User Flow
The user flow is the flow of the app and the journey the user will go on while using the app. We developed two user flows for both personas.
User Flow: General Public/Event Planner
Anyone looking to plan an event can
- Learn about the Good Green through the About section
- Browse Webinars and register to be more educated about eco-ethical event planning
- Search for vendors to use for their events
- Read articles related to this field in the Resources section
User Flow: Vendor
A vendor that’s looking to learn more about eco-ethical practices that they can adopt for their business can:
- Learn about The Good Green through the About section
- browse Webinars and register to be more educated about eco-ethical event catering and planning
- Read articles related to this field in the Resources section
- Contact The Good Green to become a vendor
Our user flow led us into our design phase
Design, Building and Testing
Following our planning phase we started Low-Fidelity prototyping. This is the beginning stage of designing where we get our user flow on to paper. We get people to test with a task as our theoretical personas and they give us quick feedback which improves the design before we start digitizing the prototypes.
Home Page Design
For the Home screen, we tested out different layouts and featured information.
We first featured more information about The Good Green, but from user testing, they found that if they are a returning user they should have quick access to searching for desired vendors. From this, we added the Vendor Search right on the homepage to provide easy access to returning users.
We also changed the layout to provide featured vendors and upcoming webinars which gave the user easy access and intrigued them.
Vendor Catalogue Design
We first had a separate screen for a list of all vendor categories before they get to view all the vendors. From user testing, we made the change to merge the two screens into one to reduce the amount of steps.
We included vendor ratings based on our research, but we moved this for future considerations because she has no source to pull the ratings from.
Webinar Catalogue Design
We realized through user testing that the first layout on the left would not be able to show much webinar content, so we then decided to make the webinar catalogue a list.
Webinar Catalogue (Mobile) Design
We First started off with a list layout on mobile for the webinar catalogue, but we then transitioned into a pagination card so that the user can swipe through each webinar which prevents excessive scrolling.
Mid-Fidelity Design
We then transitioned and digitized our paper prototypes on to Sketch. This included all the changes we made from testing.
Mid-Fi Webinar Catalogue
We changed the filter dropdown from ‘couple webinars’ to ‘all webinars’ because through user testing we found that everyone that wants to learn might not be a couple and it also confused the user. Following this change, we made the filters into tabs because it was more clear for the user.
Mid-Fi Resources page
We first Implemented the filters for future scalability when The Good Green has more content on the website. But since we were designing for MVP and were given less content, we decided to take out the filters and implement the swipe.
High-Fidelity Prototype
Desktop
Mobile
Future Considerations
Since we were designing in 3 weeks we had to base our design decisions around our MVP. We would have liked to add more features shown below.
- Save to wishlist
- Provide more filters for scalability
- Vendor ratings
Since data told us that vendor ratings were so important, we would have liked to have added that feature. But, as previously stated there was not a way to obtain ratings at the moment.
Also, we would have liked to have added a wishlist feature for customers to save their favourite vendors.
