Balham Mosque &
Tooting Islamic Centre

My Role:

Designer

Project Type:

Website Redesign
(Unofficial/Personal Project)

Deliverables:

User Research
Wireframing
Prototyping
Visual Design
Visual Identity

Year:

2023

The Challenge

The official website for Balham Mosque & Tooting Islamic Centre (TIC) has lagged behind in functionality and design for several years, resulting in a poor online experience for the community.

The Outcome

As a local Muslim and member of the community, I redesigned the website and improved the user experience through new information architecture and vibrant visual design language. The result is a more enjoyable and welcoming online experience for local Muslims.

Disclaimer: This project is not officially endorsed or supported by Balham Mosque and TIC and is for personal use only.

HIGHLIGHTS

Redesigning the website for Balham & TIC to improve the online experience for the local community

CONTEXT

The current website design looks outdated and is tough to navigate

I discovered multiple design problems detrimentally affecting the user interaction, such as:

Navigation issues - Difficult to find what you're looking for around the site

Lack of context for CTA's - makes users feel wary and lose trust especially with donation links

Poor visual design across the website including legibility, contrast and hierarchy

Overwhelming amount of information especially within the footer

COMPETITIVE ANALYSIS

After assessing the website of Balham & TIC, I researched other London mosques to evaluate their website's user experience

I examined the user interaction of 5 mosque websites based in London. Here are the key findings:

I was disappointed to find most of the mosque websites were not much better than Balham & TIC in terms of navigation or visual design

Most websites had a clear daily prayer timetable on the homepage

East London Mosque had the best user experience through strong visual design and clear information architecture

Some websites offered interesting accessibility features such as live audio and video during prayer times and lectures

INFORMATION ARCHITECTURE

Conducting a card sorting exercise to improve the existing site map

During the card sorting exercise, I uncovered some key insights with users that would improve the information architecture:

There is currently no dedicated news page, making it difficult for users to keep track of latest updates

Balham & TIC usually have talks and events, but these aren't always displayed on the website

Some members of the community aren't able to attend the mosques often, so it'd be great to have a page to catch up on missed talks

I finalised the revised site map to map out the structure for the wireframes

The new sitemap features an additional 4 new pages compared to the existing website. These are dedicated to providing community news, events, media and donation appeals. A concern at this stage was whether the sitemap was now overcrowded?

WIREFRAMES

To save time, I created mid-fidelity wireframes of the homepage, media, events and news pages in Figma

Whilst I did some quick rough sketches, I jumped into mid-fidelity wireframes as it was more efficient in using less resources and quickly making adjustments. I was also able to build foundations for components quickly.

VISUAL DESIGN

Revamping Balham & TIC's visual branding with a vibrant update

The new visual design reflects a more welcoming and modern personality, in comparison to the previous disjointed and dated look. Now we have an established brand presence, thanks to the bright colour palette, simple typeface and rich imagery creating a warm environment for users.

WEBSITE COMPONENTS

Translating the visual design across components

From navigation bars and buttons to drop downs and event cards, it was important that each of these components were consistent in look and feel whilst being functional and accessible.

ITERATIONS - SITE MAP

User testing of the mid-fidelity wireframes revealed the sitemap was actually overwhelming

I successfully tackled this issue by taking the following actions:

I merged the 'News' and 'Media' pages into one as it was unlikely for Balham & TIC to have enough content that would warrant dedicated pages

I moved the 'About Us' page to the beginning of the nav bar to help new visitors easily find important information about the mosque's committee and history

I positioned 'Madrasah' (Islamic school) as a sub-page within 'Services'

ITERATIONS - WIREFRAMES

There were issues with legibility and visual consistency which needed addressing

Specifically, there were problems with the prayer timetable, hero sections and navigation bar. Here's what I did to resolve them:

Simplified navigation bar by condensing pages from 9 to 7 main links

Introduced a larger daily prayer timetable to increase legibility

Updated hero sections on multiple pages to improve visual consistency

HI-FIDELITY WIREFRAMES

Having resolved the issues above, I worked on the hi-fidelity wireframes for multiple pages, before testing again with users

RESULTS

The site was evaluated by relatives and close friends, longstanding members of Balham & TIC. Here's an overview of their responses:

The overall website looks so much better than before. It's also easier to find the information I'm looking for.

Checking prayer times is quicker now thanks to the larger daily prayer timetable. How would this appear on smaller devices like mobile?

The newsletter subscription only appears on certain pages so some people may miss it if they click on a page where it isn't displayed.

Learnings and what's next?

Designing the mobile version

Whilst the desktop version is still important, I believe many users will access the website via their mobile.

Understanding stakeholders

I would have liked to understand stakeholder problems with the existing website as it was obvious there were problems with maintainance.

Different user research

A user survey with 150 - 200 members of Balham & TIC would have given me a wider and more accurate insight into the problems and constraints users may be facing with the website.

Work smarter not harder

Setting up core components from the start would have saved immense time, making the process more time efficient.

Next project:

Balham Mosque &
Tooting Islamic Centre

My Role:

Designer

Project Type:

Website Redesign
(Unofficial/Personal Project)

Deliverables:

User Research
Wireframing
Prototyping
Visual Design
Visual Identity

Year:

2023

The Challenge

The official website for Balham Mosque & Tooting Islamic Centre (TIC) has lagged behind in functionality and design for several years, resulting in a poor online experience for the community.

The Outcome

As a local Muslim and member of the community, I redesigned the website and improved the user experience through new information architecture and vibrant visual design language. The result is a more enjoyable and welcoming online experience for local Muslims.

Disclaimer: This project is not officially endorsed or supported by Balham Mosque and TIC and is for personal use only.

HIGHLIGHTS

Redesigning the website for Balham & TIC to improve the online experience for the local community

CONTEXT

The current website design looks outdated and is tough to navigate

I discovered multiple design problems detrimentally affecting the user interaction, such as:

Navigation issues - Difficult to find what you're looking for around the site

Lack of context for CTA's - makes users feel wary and lose trust especially with donation links

Poor visual design across the website including legibility, contrast and hierarchy

Overwhelming amount of information especially within the footer

COMPETITIVE ANALYSIS

After assessing the website of Balham & TIC, I researched other London mosques to evaluate their website's user experience

I examined the user interaction of 5 mosque websites based in London. Here are the key findings:

I was disappointed to find most of the mosque websites were not much better than Balham & TIC in terms of navigation or visual design

Most websites had a clear daily prayer timetable on the homepage

East London Mosque had the best user experience through strong visual design and clear information architecture

Some websites offered interesting accessibility features such as live audio and video during prayer times and lectures

INFORMATION ARCHITECTURE

Conducting a card sorting exercise to improve the existing site map

During the card sorting exercise, I uncovered some key insights with users that would improve the information architecture:

There is currently no dedicated news page, making it difficult for users to keep track of latest updates

Balham & TIC usually have talks and events, but these aren't always displayed on the website

Some members of the community aren't able to attend the mosques often, so it'd be great to have a page to catch up on missed talks

I finalised the revised site map to map out the structure for the wireframes

The new sitemap features an additional 4 new pages compared to the existing website. These are dedicated to providing community news, events, media and donation appeals. A concern at this stage was whether the sitemap was now overcrowded?

WIREFRAMES

To save time, I created mid-fidelity wireframes of the homepage, media, events and news pages in Figma

Whilst I did some quick rough sketches, I jumped into mid-fidelity wireframes as it was more efficient in using less resources and quickly making adjustments. I was also able to build foundations for components quickly.

VISUAL DESIGN

Revamping Balham & TIC's visual branding with a vibrant update

The new visual design reflects a more welcoming and modern personality, in comparison to the previous disjointed and dated look. Now we have an established brand presence, thanks to the bright colour palette, simple typeface and rich imagery creating a warm environment for users.

WEBSITE COMPONENTS

Translating the visual design across components

From navigation bars and buttons to drop downs and event cards, it was important that each of these components were consistent in look and feel whilst being functional and accessible.

ITERATIONS - SITE MAP

User testing of the mid-fidelity wireframes revealed the sitemap was actually overwhelming

I successfully tackled this issue by taking the following actions:

I merged the 'News' and 'Media' pages into one as it was unlikely for Balham & TIC to have enough content that would warrant dedicated pages

I moved the 'About Us' page to the beginning of the nav bar to help new visitors easily find important information about the mosque's committee and history

I positioned 'Madrasah' (Islamic school) as a sub-page within 'Services'

ITERATIONS - WIREFRAMES

There were issues with legibility and visual consistency which needed addressing

Specifically, there were problems with the prayer timetable, hero sections and navigation bar. Here's what I did to resolve them:

Simplified navigation bar by condensing pages from 9 to 7 main links

Introduced a larger daily prayer timetable to increase legibility

Updated hero sections on multiple pages to improve visual consistency

HI-FIDELITY WIREFRAMES

Having resolved the issues above, I worked on the hi-fidelity wireframes for multiple pages, before testing again with users

RESULTS

The site was evaluated by relatives and close friends, longstanding members of Balham & TIC. Here's an overview of their responses:

The overall website looks so much better than before. It's also easier to find the information I'm looking for.

Checking prayer times is quicker now thanks to the larger daily prayer timetable. How would this appear on smaller devices like mobile?

The newsletter subscription only appears on certain pages so some people may miss it if they click on a page where it isn't displayed.

Learnings and
what's next?

Designing the mobile version

Whilst the desktop version is still important, I believe many users will access the website via their mobile.

Understanding stakeholders

I would have liked to understand stakeholder problems with the existing website as it was obvious there were problems with maintainance.

Different user research

A user survey with 150 - 200 members of Balham & TIC would have given me a wider and more accurate insight into the problems and constraints users may be facing with the website.

Work smarter not harder

Setting up core components from the start would have saved immense time, making the process more time efficient.

Next project:

Balham Mosque &
Tooting Islamic Centre

My Role:

Designer

Project Type:

Website Redesign
(Unofficial/Personal Project)

Deliverables:

User Research
Wireframing
Prototyping
Visual Design
Visual Identity

Year:

2023

The Challenge

The official website for Balham Mosque & Tooting Islamic Centre (TIC) has lagged behind in functionality and design for several years, resulting in a poor online experience for the community.

The Outcome

As a local Muslim and member of the community, I redesigned the website and improved the user experience through new information architecture and vibrant visual design language. The result is a more enjoyable and welcoming online experience for local Muslims.

Disclaimer: This project is not officially endorsed or supported by Balham Mosque and TIC and is for personal use only.

HIGHLIGHTS

Redesigning the website for Balham & TIC to improve the online experience for the local community

CONTEXT

The current website design looks outdated and is tough to navigate

I discovered multiple design problems detrimentally affecting the user interaction, such as:

Navigation issues - Difficult to find what you're looking for around the site

Lack of context for CTA's - makes users feel wary and lose trust especially with donation links

Poor visual design across the website including legibility, contrast and hierarchy

Overwhelming amount of information especially within the footer

COMPETITIVE ANALYSIS

After assessing the website of Balham & TIC, I researched other London mosques to evaluate their website's user experience

I examined the user interaction of 5 mosque websites based in London. Here are the key findings:

I was disappointed to find most of the mosque websites were not much better than Balham & TIC in terms of navigation or visual design

Most websites had a clear daily prayer timetable on the homepage

East London Mosque had the best user experience through strong visual design and clear information architecture

Some websites offered interesting accessibility features such as live audio and video during prayer times and lectures

INFORMATION ARCHITECTURE

Conducting a card sorting exercise to improve the existing site map

During the card sorting exercise, I uncovered some key insights with users that would improve the information architecture:

There is currently no dedicated news page, making it difficult for users to keep track of latest updates

Balham & TIC usually have talks and events, but these aren't always displayed on the website

Some members of the community aren't able to attend the mosques often, so it'd be great to have a page to catch up on missed talks

I finalised the revised site map to map out the structure for the wireframes

The new sitemap features an additional 4 new pages compared to the existing website. These are dedicated to providing community news, events, media and donation appeals. A concern at this stage was whether the sitemap was now overcrowded?

WIREFRAMES

To save time, I created mid-fidelity wireframes of the homepage, media, events and news pages in Figma

Whilst I did some quick rough sketches, I jumped into mid-fidelity wireframes as it was more efficient in using less resources and quickly making adjustments. I was also able to build foundations for components quickly.

VISUAL DESIGN

Revamping Balham & TIC's visual branding with a vibrant update

The new visual design reflects a more welcoming and modern personality, in comparison to the previous disjointed and dated look. Now we have an established brand presence, thanks to the bright colour palette, simple typeface and rich imagery creating a warm environment for users.

WEBSITE COMPONENTS

Translating the visual design across components

From navigation bars and buttons to drop downs and event cards, it was important that each of these components were consistent in look and feel whilst being functional and accessible.

ITERATIONS - SITE MAP

User testing of the mid-fidelity wireframes revealed the sitemap was actually overwhelming

I successfully tackled this issue by taking the following actions:

I merged the 'News' and 'Media' pages into one as it was unlikely for Balham & TIC to have enough content that would warrant dedicated pages

I moved the 'About Us' page to the beginning of the nav bar to help new visitors easily find important information about the mosque's committee and history

I positioned 'Madrasah' (Islamic school) as a sub-page within 'Services'

ITERATIONS - WIREFRAMES

There were issues with legibility and visual consistency which needed addressing

Specifically, there were problems with the prayer timetable, hero sections and navigation bar. Here's what I did to resolve them:

Simplified navigation bar by condensing pages from 9 to 7 main links

Introduced a larger daily prayer timetable to increase legibility

Updated hero sections on multiple pages to improve visual consistency

HI-FIDELITY WIREFRAMES

Having resolved the issues above, I worked on the hi-fidelity wireframes for multiple pages, before testing again with users

RESULTS

The site was evaluated by relatives and close friends, longstanding members of Balham & TIC. Here's an overview of their responses:

The overall website looks so much better than before. It's also easier to find the information I'm looking for.

Checking prayer times is quicker now thanks to the larger daily prayer timetable. How would this appear on smaller devices like mobile?

The newsletter subscription only appears on certain pages so some people may miss it if they click on a page where it isn't displayed.

Learnings and what's next?

Designing the mobile version

Whilst the desktop version is still important, I believe many users will access the website via their mobile.

Understanding stakeholders

I would have liked to understand stakeholder problems with the existing website as it was obvious there were problems with maintainance.

Different user research

A user survey with 150 - 200 members of Balham & TIC would have given me a wider and more accurate insight into the problems and constraints users may be facing with the website.

Work smarter not harder

Setting up core components from the start would have saved immense time, making the process more time efficient.

Next project: