Improving the navigation and design of Chinmaya International entirely
Freelance | UX Research, Strategy, Ideation, Design
Embedded Files
OVERVIEW
OVERVIEW
Chinmaya International is a global spiritual and philanthropic organisation. Though it caters to a diverse audience, the website doesn't resonate the same. With our design, we have improved the functionality, clarified the purpose of the website and rebranded it entirely to echo the voice of the organisation. And we vetted the design using usability testing and stakeholder workshops.
PROBLEM
Cognitive overload with excessive information dump, burying the main functionalities in multiple pages
Users not exploring content and getting stuck while browsing or navigating through the website
Unconventional older design patterns breaking the familiarity of current users. Dated visual designs
Cluttered information and inefficient call to action leading to user leads not converting
SOLUTION
Redefining the navigation using mega menus, breadcrumbs etc to make it intuitive
Grouping of information into clear hierarchical categories and reducing excessive scroll
Updating the design system and branding to emphasise on the theme of the organisation
Researching the user base to understand the needs and simplifying the experience based on those insights
MY TEAM & ROLE
Worked as a UI/UX designer with a freelance Product Manager
As part of UX, I worked upon conducting stakeholder meetings, usability testing, user journey, analysis and design
As part of Visual Design, I updated the design system based on modern design standards and rebranded the website
TIMELINE
This project was completed in 3 months time
First 3 weeks, we invested in understanding the product, the business goals and user needs to baseline our research
Following that, we worked on building wireframes, visual designs, peer and client review
Last 2 weeks were invested in re-aligning with business goals, prototyping and providing walkthroughs of the solution before handing off to the developers
THE PROCESS
Usability Testing
We conducted remote usability testing with 4 different kinds of users of different continents, age groups and frequency of usage of the website. This was done to discover problems and check if they are able to utilise the website efficiently.
Chinmaya Foundation (CIF) offers various course which are highly regarded , and was one of our first areas of improvement. Hence, we formulated the tasks which checks if they are able to navigate through the categories, explore and find what they were here for. Checking on how they interact with the whole experience of the website, we were able to measure if it was easy to learn, memorable and engaging or not.
Usability Testing Task Questionnaire
Laying out the Usability Testing Results on Figjam
Usability Testing Insights
UX Analysis of Existing Product
We conducted the ux heuristic evaluation with focus on the navigation, accessibility of use, consistency, information architecture, familiarity with the real world, user choice and visual design.
Few Screen Snippets of the Existing Design Experience of the Product
UX Evaluation Insights
Refining the User Journey and Architecture
While redefining the user journey and IA, few primary things that were kept in mind: Page level and global search available consistently, better information grouping to highlight the primary goal, space for user customisation like dashboard and filters, consistent flow with information hierarchy and design across sub categories to unify the process.
THE DESIGN
Making an Effective and Engaging Landing Page
With the previous design, users were confused about the offerings of CIF and where exactly should they click to navigate to a particular site. With our appropriate hero image and our primary category of offerings right in the first scroll, we communicate the service succinctly. On scrolling down, we used supporting text to give users context of the offerings and a compelling set of recommended products to motivate the user to click.
We have driven down a structured information hierarchy and consistency across the design. The visuals, image and the background color has been chosen to resonate the theme of the organisation.
Streamlining the Navigation & Menu
With the previous design, navigation was broken into 2 Top-Top bars, with an extensive set of options that are highly confusing and distracting for users. In our design, we clubbed information under parent categories like Blog and Gallery under Insights, additional CIF related information under About. That aided in successfully reducing the menu items to one top header. We understand that the primary user need here is to explore the services and not dive into the history of the same. To accommodate extensive list of options, we retained the hover - activated mega menus.
We have also changed the verbiage to more familiar terminology like 'Home Study Courses' to Online Courses, 'Shravana Mangalam (in sanksrit)' to Audio - Videos.
Optimising Scannability & Information Density
We have followed a unified design approach for all the related product list pages under Online Courses, Audio - Videos and Publications. Based on usability testing insights, due to the lack of a connecting landing page, users were searching for a global search and confused on how to land on a product. In our design, we have a page level search that make the process easier and accessible.
Information consistency is maintained and only essential attributes shown for products, etc. Distinguishing in styling between blocks to improve scannability and a distinct CTA to guide the user. Social proof through testimonials are included as a strong tool for persuasion. The product listing page as well gives supporting content and user customisation through filters.
Monitoring all Aspects through Personalised Dashboard
The dashboard is critical for a returning user to access all the courses and registrations in one consolidated place . It creates a personalised space for the user. It provides supporting resources and FAQ to improve learnability for users from 24 - 60 years of age. They can access lessons, quizzes, resources, certificates. To build communication and collaboration within CIF, Discussion Forum is introduced. Color - keyed Calendar helps in maintaining a task schedule for any of their courses etc.
Enhancing the Gallery and Blog
Gallery and Blog are now clubbed under Insights. We have used enhanced and slightly different card designs for our gallery and blog, to set it apart and give it an edge. Gallery page shows a clear layout of images which can be filtered with dates etc. It also includes a page level search. As for blogs and podcasts, we have used imagery that appeals to our current audience. We have highlighted on compelling podcast by leaders to motivate users to explore.
Simplifying the Donation Process
We have introduced a Quick Donate form at the page entry, for any well-informed user who wants to directly donate without scanning the information. Users want to have clarified knowledge about the cause, hence we have highlighted each category and their respective schemes or projects in detail in the further screens. The donation form has most of the fields auto - filled reducing user effort. And a FAQ to support in any need.
Reducing Cognitive Overload of Additional Informations
We have clubbed additional organisational data as sub-menus under About Us and have followed the consistent design approach across those offerings. Since these are extensively information heavy page, we have kept the visual elements minimal to reduce distraction. The information index has been moved from an abundant scroll to a Left Menu Navigation that can be easily scaled. User can switch between the pages effiencetly.
About Us Page snippets
The Design Language
Saffron shades in India are often asssciated with spiritualism and is also a part of the Chinmaya organisation. Hence, we worked with different shades of saffron that inspire positivity and happiness. Our color choices strived to resonate an aesthetic and visually pleasing experience. Paired that with the Playfair Display typography, it rendered a classic timeless feeling. With Futura and Poppins, the balance between formal and informal tone was maintained. Mandalas were used as visual elements to add a dimension of Indian ethnicity and spritualism to the website.
Visual Imagery, Colors and Typography
Card Styles we used in the Design
🤯 Phew! You have reached the end of this project!
Page updated
Google Sites
Report abuse