Case Study: Griha — Green building rating system
Case Study by Aurora Caccioppoli | Final project @Ironhack UX/UI Design Bootcamp
For my final project at Ironhack Barcelona, I challenged myself with a problem provided by Griha Council, a rating organization that evaluates the sustainability of existing and new buildings.
Role:
- User Experience (UX) Designer
- Interaction (IxD) Designer
- User Interface (UI) Designer
- Visual Designer
- I took part in communicating with the client regularly and I interviewed the user for our usability tests
Timeline: 3 weeks
Team: Aurora Caccioppoli, Daniel Gonçalves
Software: Figma, Figjam, Illustrator, Photoshop
UX Tools: surveys, interviews, lean UX, affinity diagram, competitive analysis, user persona, user journey, user flow, SWOT analysis, brainstorming, low-fidelity & mid-fidelity prototype, usability tests.
UI Tools: mood board, brand attributes, style tile, alignment, spacing, rebrand, consistency, style guide, UI Kit, and high-fidelity prototype.
Business & Project Overview
For this project, we had the opportunity to collaborate with a real client: the GRIHA Council, a society dedicated to promoting sustainable habitats in the Indian subcontinent. GRIHA Council evaluates the sustainability of buildings based on criteria like energy efficiency, water conservation, waste management, and overall environmental impact. Their rating process involves an in-depth analysis of building design and construction, followed by a review and rating that promotes the building’s sustainability credentials. Additionally, GRIHA offers training and outreach programs to educate the public about sustainable building practices and maintains a product database of green building materials.
The GRIHA Council website is crucial for assessing building performance against national benchmarks, but its current design presents significant usability challenges. These complexities impede user experience, reducing engagement in training and outreach activities, and affecting participant registration and showcasing the organization’s initiatives.
Our goal was to redesign the homepage and navigation tabs to create a more user-friendly and modern website.
In our initial meeting, the client expressed that the primary focus of the redesign should be to make navigation easier and more intuitive, thereby driving more traction to their training and outreach programs. We hoped to increase user engagement by addressing these usability issues and effectively present GRIHA’s activities to a broader audience.
Therefore, our project was centred on the discovery phase to thoroughly understand the challenges and validate the best approach for redesigning the website to meet the client’s objectives.
The Problem:
The current GRIHA Council website needs more user-friendliness, particularly in its navigation design. Users often need help due to unclear directions and too many nested paths, making it hard to find relevant information. This complexity interferes with the user experience, reducing engagement in training and outreach activities. As a result, the organization struggles to drive higher participant registration and effectively showcase its various initiatives and projects. A more intuitive and visually appealing website is critical to address these issues and achieve the organization’s goals.
The Goal:
The client wants to revamp their website to enhance user experience and navigation. The goal is to simplify navigation, reduce nested paths, and modernize the design to increase engagement in their training and outreach activities. They aim to create a more intuitive and visually appealing site that drives higher participant registration and effectively showcases their organizational activities. The focus is on achieving a minimalist, modern look while ensuring easy access to relevant information.
Step 1: Understanding the Problem
To begin our project, our team conducted comprehensive research on sustainable building certifications and green building initiatives globally. We examined various European certification programs, the EU Green Deal, and similar plans in other countries. Though their approaches differ, these initiatives share a common goal of reducing greenhouse gas emissions and promoting sustainability. For example, the U.S. Infrastructure Plan emphasizes physical infrastructure investment, while China’s Green Initiative focuses on technological innovation. Despite their differences, these plans collectively represent a global commitment to combating climate change and environmental degradation.
In addition to general research, we performed a feature analysis of similar organizations such as the US Green Building Council (USGBC), World Green Building Council (WGBC), International WELL Building Institute (IWBI), and others. Each organization has its strengths and weaknesses: GRIHA Council excels in its focus on the Indian climate and sustainable habitats, USGBC is widely recognized and adopted, WGBC has a strong global reach, IWBI focuses on indoor environmental quality, and GlobalABC emphasizes low-carbon building. This analysis helped us identify key differentiators and areas for improvement for GRIHA.
We also conducted a visual competitive analysis, comparing GRIHA with IGBC, LEED, and an indirect competitor, AD magazine.
Furthermore, we performed a heuristic analysis to identify usability issues and opportunities for improvement on the current website. Here are areas for improvement, such as providing more contextual help, optimizing navigation, and offering better tools for error prevention and recovery. Enhancing these aspects could lead to a more efficient and enjoyable user experience.
To gain deeper insights, we interviewed a key stakeholder, Prerona, an architect with five years of experience at GRIHA Council. She has worked in various departments organises training programs and manages the company’s website. Her primary focus is the training and outreach vertical. Our questions for Prerona included:
- What are the main goals for the website revamp?
- Who are the different types of users who will be using the website?
- What aspects differentiate GRIHA from its competitors?
- What type of information is most critical for visitors to find on the GRIHA website?
Additionally, we conducted a hybrid approach of user interviews and usability testing to understand the roles and connections of users with sustainable living and green building practices, as well as the specific information they seek on a website like GRIHA’s.
This process involved users aged 30 to 51 with architecture, logistics, and communication backgrounds. The direct feedback obtained was crucial in refining our approach and ensuring the redesign would meet the needs of both stakeholders and users.
We assigned users tasks such as searching for and attending a particular training program on the site, exploring further information regarding a past online event, and browsing the About page. We asked them to speak aloud and explain their experience as they completed these tasks. This approach allowed us to observe their interactions with the site and hear their thoughts on how it made them feel.
This step was crucial because we wanted to identify exactly where the problems were and what was negatively impacting the user’s experience while browsing the GRIHA website. From the information we gathered and synthesized using an affinity diagram, we found that users felt the following:
- They expected the website to provide comprehensive and technical details but found themselves spending too much time navigating.
- They felt confused because the information was not well-organized and easy to find.
One user expressed,
“I’m busy and don’t have time to waste on a confusing website. I need a quick and easy way to find the information I need about GRIHA Council’s programs and events.”
Our analysis identified key pain points for our target audience.
- The Training Program Information was confusing and not easily accessible, with important details about the programs not highlighted and past training marked inactive.
- The ‘About Us’ section was also difficult to locate, with scattered information that was hard to access.
To address these issues, we set the following project goals:
Revamp the Training Program Information:
- Reorganize the information for better accessibility.
- Highlight relevant program details.
- Mark inactive past trainings to prevent confusion.
Improve the ‘About Us’ Section:
- Add a clear label to the navigation bar for easy access.
- Simplify the information presented.
- Aggregate all relevant information in one place to enhance the user experience.
With these goals established, we are ready to move to the next phase:
💡 Ideation phase
With a comprehensive understanding of the problem and its context, we were well-equipped to proceed with the project, focusing on creating a more user-friendly and engaging website for the GRIHA Council.
We began by analyzing the existing Information Architecture and drafting a new one, represented through an improved site map to minimize confusion.
To bring our ideas to life, we started with low-fidelity wireframes, which we then refined into mid-fidelity versions, incorporating interactions and buttons.
These prototypes were tested with seven users: five professionals from the architecture field and two individuals passionate about sustainability.
Through the test results, we identified and addressed friction points in the user journey. For instance, we identified the need to simplify the main menu and reduce the number of categories. We achieved this by implementing a more minimalistic mega menu dropdown accompanied by images. Additionally, we addressed information gaps about training programs and events by providing more comprehensive resources. This included a straightforward schematic program with day-by-day details, clear objectives, target attendance, speaker names, and a downloadable PDF containing all the details for easy sharing with others who may be interested.
✏️ ReBrand
I re-designed GRIHA Council’s brand identity to stand the test of time. For nearly 15 years, GRIHA Council has supported organizations, architects, and technicians in navigating towards greater sustainability, advising them at every stage of their project life cycle. As one of the most important consultancies in India, GRIHA Council has grown significantly. At this point in their journey, it is time to rediscover who they are and build an identity to match.
They need a new image that represents them authentically and moves away from the outdated image of the past.
This transformation arrived in the form of a new visual direction, featuring a new logo, colors, and style. I constructed the new logo around two core ideas: the bloom, symbolizing nature, and the shapes of modern buildings, embodying innovation. Meanwhile, the logo’s typography was carefully adjusted to harmonize with the new symbol.
The GRIHA color palette was crafted from extensive research and strategic insights. With Teal Blue as the primary tone, we created a palette that feels light and complementary. Teal Blue is a revitalizing and rejuvenating color that represents open communication and clarity of thought. We also selected a secondary color, Salmon, for hover effects in call-to-action buttons and remark selections, along with a set of secondary colors inspired by nature, to reaffirm the company’s focus on a sustainable future.
This new visual identity modernizes GRIHA Council’s image and aligns it with their mission of sustainability and innovation.
Comparing Old & New UI
1. Home page
Welcome to the new and improved GRIHA Council Ratings homepage! It’s significantly different from the previous version, featuring a Mega Menu and dropdowns to highlight key areas and sections. A redesigned logo sets the tone, complemented by an engaging slider with a catchy phrase and a button for deeper insights.
The homepage showcases significant enhancements in Information Architecture and graphic style, creating a more user-friendly and visually appealing experience. The new menu is streamlined with just 6 principal labels, ensuring easy navigation and quick access to essential information.
2. Certification Section
The certification section, a key service offered by GRIHA, has a fresh and simple layout with images and brief introductions for each certification. Users can click on links to learn more about all available rating tools.
3. About us
The About page has been completely redesigned for a more engaging experience. At the top, you are greeted by a large banner featuring an inspirational phrase. Below it, there is a brief overview of the company, accompanied by a dynamic animation of the newly redesigned logo. On the left side, you’ll find a list menu that allows you to easily navigate to the section that interests you most.
If you’re curious about the evolution of GRIHA, you can scroll through the timeline diagram to see key dates in its history. Additionally, you can learn more about the team and all the members of the GRIHA Council. We have also streamlined the Tac section using a minimalistic accordion UI tool for a cleaner, more user-friendly experience.
4. Training Program
At the heart of our training program page is an interactive calendar. The section below provides users with a comprehensive snapshot of upcoming events, allowing them to easily explore future programs or revisit past courses. Each training session is accompanied by an image and key details such as the date and venue.
Interactive Calendar: In the calendar, only the dates on which GRIHA has organized an event or program are highlighted. This feature helps users quickly identify and navigate to specific events.
5. Program Details
When you select a specific program, the details page simplifies the layout, providing only the necessary information. This includes:
- Objective: The main goal of the program.
- Target Attendance: The intended audience for the training.
- Day-by-Day Activities: A detailed schedule of the activities planned for each day.
- Main Speakers: Information about the key speakers for the event.
Additional Features: To enhance user experience, we have added:
- Download Button: Easily download the program details.
- Share Button: Share the program with others who might be interested.
Key Takeaways from this Project:
Collaboration with Industry Partners: Real companies provided invaluable insights into practical challenges.
Usability Tests: An iterative process facilitated by usability tests, with data critical to decision-making.
Adaptability: The ability to work in a non-linear workflow was essential.
Conclusion
I learned an incredible amount from this case study and the boot camp. This particular project was enriching because we had the opportunity to work with the GRIHA Council and engage with a stakeholder who provided valuable input into the design and its requirements. It was a wonderful experience to collaborate and create a product that met both user needs and stakeholder expectations.
Moving forward, I hope we can continue to work on this project. I plan to set up a meeting with Prerona, our stakeholder, to get his feedback on our final design. Daniel and I would then iterate on the design and conduct another round of interviews with architects and other users to test this new site version and gather their insights.
It would be exciting to measure the metrics of the new implementations and observe the positive impact on GRIHA’s business.
Here is our final prototype for testing. Feel free to interact with it by clicking on buttons and navigating through pages.
❤️ Thanks for reading, and please don’t hesitate to reach out if you have any comments or advice is truly appreciated.
Feel free to find me at: https://www.linkedin.com/in/auroracaccioppoli/
