ELIEC.org Website Redesign Project Progress
Design Brief – El-Shaddai International Ethiopian Church Website Redesign
Project Overview
El-Shaddai International Ethiopian Church is a welcoming, multicultural Christian nonprofit based in Shawnee, Kansas. The organization supports its community through worship services, outreach events, youth programs, and cultural engagement. The goal of this redesign is to modernize the digital presence to better serve members and reach newcomers.
Project Goals
- Modern Visual Identity: Reflect the church’s values and Ethiopian heritage through clean design and spiritual warmth.
- Improved Usability: Prioritize clear navigation and responsive layouts for all screen sizes.
- Clear Communication: Highlight service times, upcoming events, and contact information prominently.
- Community Engagement: Make it easier for users to get involved, donate, or join ministries.
- Accessibility: Improve semantic structure, contrast, and navigation for users of all abilities.
Target Audience
- Existing church members seeking updates and event details
- Newcomers or families searching for a church home
- Youth and parents interested in church programs like VBS
- Supporters looking to donate or volunteer
Functional Goals
- Fully responsive layout with accessible HTML structure
- Visual hierarchy with consistent typography and spacing
- Contact details and directions easy to find and use
- Mobile-friendly navigation and fast-loading content
- Image assets and banners optimized for various screen sizes
Rubric Evaluation
| Trait | 4 – Excellent | 3 – Good | 2 – Fair | 1 – Poor | 0 – Fail |
|---|---|---|---|---|---|
| Navigation & Structure | ✔️ | ||||
| Accessibility & Compliance | ✔️ | ||||
| Visual Design & Clarity | ✔️ | ||||
| Content & Language | ✔️ | ||||
| Functionality & Performance | ✔️ | ||||
| User Feedback & Error Handling | ✔️ |
Website Evaluation
Navigation & Structure – 1/4
The structure is not very intuitive. The menu needs reconstruction and stronger visual cues to indicate what is clickable or interactive. Too many pages feel buried or isolated.
Accessibility & Compliance – 2/4
Some ALT text exists, but lacks consistency. No visible ARIA landmarks or clear semantic structure. There's no sign of keyboard navigation testing or focus indicators.
Visual Design & Clarity – 2/4
The color scheme is mostly consistent with blue/white, but random color choices interrupt the flow. Typography doesn’t guide hierarchy well. It feels a bit like an afterthought.
Content & Language – 3/4
The tone is warm and informative. However, some pages repeat similar language and could be more concise or skimmable.
Functionality & Performance – 3/4
Pages load fine and are somewhat responsive. However, on smaller screens, some content shifts strangely or breaks spacing.
User Feedback & Error Handling – 2/4
Very little interactive feedback (e.g., no hover/focus states or alert messages). The contact page is present, but could utilize a form for better engagement.
Total Score: 13/24
Sketches
Sketches were created in Notes App and exported as a PDF.
Wireframes
Wireframes were created in Figma and exported as a PDF.
High-Fidelity Mockups
High-Fidelity Mockups were created in Figma and exported as a PDF.
Website Evaluation Narrative
The current ELIEC website serves as an informative platform, providing visitors with essential information about the organization's mission, events, and ways to get involved. The site uses consistent branding with its blue and white color scheme, which helps reinforce the organization's identity. Some pages load efficiently and the overall content tone is warm and welcoming, creating a positive impression for new and returning visitors.
However, the website's navigation structure is not intuitive, making it difficult for users to quickly find key information. The menu lacks clear visual cues to indicate clickable items, and several pages feel buried or isolated, which could discourage engagement. Additionally, while some images have alt text, accessibility features such as ARIA landmarks and keyboard navigation support are missing, limiting the site's usability for visitors with disabilities. The typography and color choices sometimes fail to clearly establish visual hierarchy, reducing content clarity and overall user experience.
Responsiveness is partially implemented, but the site does not consistently adapt well to smaller screen sizes, causing some content to shift awkwardly or lose spacing on mobile devices. Interactive feedback such as hover and focus states are minimal, and there is limited user feedback on forms or clickable elements. Addressing these issues through a mobile-first redesign with enhanced accessibility and improved navigation will greatly improve usability and engagement for all visitors.
Style Guide
- Color Palette:
- Cool Teal:
#7CB9BE(used for cards) - White Text:
#FFFFFF
- Cool Teal:
- Typography:
- Headings: Montserrat, sans-serif, bold
- Body: Open Sans, sans-serif, regular
- Buttons:
- Default: Cool Teal background, white text
- Hover: Slightly darker teal or subtle underline
- Focus: White outline or shadow for clarity
Sitemap / Pages to be Redesigned
Home
│
├── About ELIEC
│ ├── Mission & Vision
│ ├── Leadership
│ └── History
│
├── Donate
│ └── Donate
│
├── Events
│ └── Upcoming Events
│
├── Contact
│ ├── Contact Form
│ └── Location & Hours
│
└── Process (Project Page)
├── Website Audit
├── Wireframes
├── Style Guide
└── Design Brief