Santa Monica Education Foundation Website Redesign

The Santa Monica Education Foundation project was a comprehensive website redesign aimed at transforming the organization's online presence. We focused on creating a cleaner, modern aesthetic that would appeal to students, parents, and educators. This included developing a user-friendly interface and streamlining navigation for easy access across desktops, tablets, and smartphones.

Our goal was to improve the visual appeal of the website while making it intuitive and functional. By prioritizing both aesthetics and usability, we aimed to increase engagement and facilitate easier access to resources and information, ultimately supporting the foundation's mission and better serving its community.

Designer

ROLE

TIMELINE

3 months

Account Executive
Front-End Developer
Designer

TEAM

User Interface Design
Visual Design
Responsive Design

SKILLS

TOOLS

Adobe XD
Adobe Illustrator

🔍 Project Overview

The Santa Monica Education Foundation raises funds and engages community support to enhance staff and programs in Santa Monica schools. Their efforts ensure all students have access to enriching educational opportunities, such as specialized teachers, arts and music programs, sports, and advanced classroom technology. By bridging the gap between public funding and actual needs, the foundation fosters an inclusive environment where every student can thrive.

Objective

  • Redesign 12 pages from the existing website to achieve a cleaner, more modern aesthetic

  • Focus on creating a more welcoming interface that is easier to navigate and works seamlessly across multiple devices

🎨 My Design Process

Month 1: Conducted an audit to identify issues with the current site


Month 2: Sourced inspiration from Dribbble and Pinterest for creative direction


Month 2: Created wireframes & templates to streamline changes made across the website


Month 3: Revisited wireframes with the account executive to align designs closely with client needs


Month 4: Added imagery and colors to wireframes in Adobe XD then handed off designs to front-end developer

📝 Wireframing

My Design Template Development

I began the design process by drafting ideas with pen and paper, then created wireframes in Adobe XD. The design explored various template concepts to accommodate multi-page content, and different ideas for headers and styles of modules were concepted to enhance the overall design.

Final Designs

The design updated the entire website, which consisted of 12 templated pages, including the homepage and contact page. This update included improvements to the layout, styles, iconography, and use of imagery. I facilitated a seamless hand-off of the designs to the development team, preparing all necessary assets.

📊 Impact

“I’m so happy to finally have a website that looks so clean and refreshed!”
- SMED Executive Director

  • Client expressed great satisfaction with the new website

  • Client appreciated the new design’s modern feel and improved organization, stating that it was a refreshing update


  • Collaboration between design & development resulted in fully responsive site that provides a great experience across all devices


  • Redesign enhanced their brand, making it more appealing and relevant to their users

💭 Reflections

Learnings

I developed a modern, well-organized, and easily navigable website, which significantly enhanced the user experience.

The client's satisfaction with the redesign validated my design approach, confirming that my focus on usability and functionality was effective.

Additionally, I realized that incorporating data-driven methods could further amplify the project's impact beyond aesthetics, providing deeper insights and more robust solutions.

Future Improvements

If I had to do this project again, I would have interviewed frequent donors and users to identify their pain points and better understand their experiences.

Additionally, I would conduct user testing across the entire site to pinpoint areas needing improvement.

By exploring different approaches, I aimed to boost the effectiveness of the donation process and ensure a seamless and satisfying user experience.