Svitlana Lutsenko designer and developer
ASE Innovate Website Preview
UX/UI and Visual Design, Frontend Development — 2021

Nonprofit Website Redesign

to launch a new brand identity, enhance student engagement, and turn visitors into sponsors, supporters, and followers.

Visit updated website
  • Roles: Web Designer and Developer
  • Platforms: Desktop and Mobile
  • Tools/Tech: Figma, Photoshop, Notion, WordPress, Local by Flywheel, WebStorm, HTML/CSS/JS
  • Timeframe: 2.5 months (part-time and remote)
  • Deliverables: Web Banners, Figma Mockups, and Responsive WordPress Layouts for aseinnovate.org

The Client

Association for Sustainability Education is a nonprofit organization based in San Francisco Bay Area.

ASE Innovate is an after-school program designed to increase access to quality educational opportunities for youth (K–12) students from low-income families.

Target Audience:Young students and their parents, school members and adults from a local community (program partners and sponsors).

Project Team and What I did

At the first stage, I collaborated with 8 aspiring designers from Mission College who worked creating key brand assets (logo, color scheme, typography, and business cards), home page icons, and promo materials for printing and social media.

I was responsible for the following parts:

  • Initial Research, Existing Website Review, and Similar Projects Analysis to define key design directions and project scope.
  • Web Banners and Mockups Design for the key landing pages.

Afterward, working with the founder independently, I did the following:

  • created Mockups for the rest website pages,
  • developed Responsive CMS layouts,
  • designed and implemented New Donation Gathering Features, and
  • launched redesign to the website.

Outcomes

The end result is a modern, fresh new site that appeals to ASE students, is used by the founder for fundraising, and provides the local community with several clear and straightforward options for the program support.

Before

After

Figure 1: Website layouts before and after redesign. (Click image to open expanded view.)

Project Challenges and Constraints

  • It was remote project because of the covid-19 lockdown.
  • We could use only free images, fonts, web tools, and plugins. (With covid-19, educational nonprofits have lost almost all fundraising opportunities.)
  • The website has been implemented on a free WordPress template with a page builder that limits advanced customization options.
  • Our client wanted to show her students on the website, but all available assets were unprofessional and low-resolution photos taken on a phone camera. (Due to covid-19 restrictions, we were unable to setup a professional photo shoot.)
01 / Discovery

Research, Analysis and Planning

Figure 2: Home and Impact pages before redesign

Step 1. Collect Information

Website and social media review. To gather information about the project and to prepare for the first meeting with the client, our team conducted initial review of the ASE’s website and social media accounts.

The existing website had the following weaknesses:

  1. Corporate or tech-based stock images that don’t represent the ASE Innovate program as an educational program for youth, couldn’t attract new partners and sponsors.
  2. Outdated and disorganized page layouts
  3. Lack of visual hierarchy. Poor typography, inconsistent headers, and link styles.
  4. Some pages are overloaded with text content that is hard to read because of too wide text lines.
  5. Inefficient information architecture, barely structured, and overcomplicated site navigation controls.
  6. Disorganized mobile layouts.

Founder interview. The first meeting with the founder helped us to learn more about our Client, ASE program, its target audience and stakeholders, as well as clarify founder’s needs, expectations, and project constraints.

Competitors Research and Analysis. To get inspired, understand the trends, and prepare visual references for next steps, we browsed and analyzed programs similar to ASE Innovate:

  • After-school programs,
  • STEM youth development organizations (like Girls Who Code and Play-Well Technologies),
  • Environmental and sustainability projects,
  • Museums.

Step 2. Analyse Findings and Give Suggestions

Based on the conducted research, I created a Digital Mood-Board that included key layout sections and various options on how they might be improved.

During a Zoom meeting, I presented the Mood-Board to the Client, explained UI/UX weaknesses of the existing website, and described suggesting design solutions.

This meeting helped our team understand better the client's style preferences and approve initial design directions.

Figure 3: ASE program is about fun, creativity, curiosity. ASE voice should be playful and youthful but for teens. In the same time our Client emphasized that ASE brand shouldn’t to look babyish or styled for younger kids.

Figure 4: Key project stages and milestones.

Step 3. Approve Scope and Define Project Plan

Initial project scope. The 1st stage included design of Web Banners and Mockups for Key Landing Pages; Information Architecture rework and update of the related layout components (e.g. Header, Footer, and Mobile Menu) to improve site navigation.

Extended scope. Before moving approved designs to the production instance, to ensure visual consistency across the whole website, ASE asked my help with reworking the other pages.

Also, I conducted a Usability Review of the contact form and analyzed key partnership flows. Based on this analysis project scope was extended with Donation Features design and Contact Form rework.

02 / Definition

Key Findings and Solution

1. Header, Footer, and Site Navigation Menu

Figure 5: Header, Footer, and Site Navigation Menu before redesign.

Before

Issue #1. Barely structured header layout and overcomplicated global navigation menu:

  • Unnecessary drop-down menus make it harder for users to discover site content. Confusing anchor links in sub-menus.
  • Site logo is too small and site title is missing.
  • No focus point.

Issue #2. Useless and messy footer with low contrast icons and needless link to the abandoned twitter account.

After

Design solutions to solve detected UI/UX issues:

  1. Simplified one-level global navigation menu in header that provides access to key site pages.
  2. Bigger logo (image) and site title (text).
  3. Call to action button to draw attention and navigate visitors to “Get Involved“ pages.
  4. Hierarchy based breadcrumbs on secondary pages to provide visitors with alternative navigation option, and to make site more search engine friendly.
  5. New footer menu layout with the updated social media icons.

Figure 6: Header, Footer, and Site Navigation Menu after redesign.

2. Information Architecture and Navigation

Figure 7: Information Architecture and Navigation Flows before redesign.

Before

Issue #1. Unreasoned site structure and doubtful navigation flows.

Issue #2. Lack of cross-references between related content blocks.

After

Design solutions to solve detected UI/UX issues:

  1. Less is more. We reduced the number of choices per screen to minimum.
  2. The principle of front doors. Assuming that 40% of visitors will use different entry point than the home page, we included all important links in header, footer, related content sections, and implemented breadcrumbs.
  3. The principle of multiple classifications. We offer users several different classification schemes to browse the site’s content.
  4. The principle of growth. To make the site structure scalable, we created portal pages for key content types.

Figure 8: Information Architecture and Navigation Flows after redesign.

3. Partners Section Rework and New Donation Features

Figure 9: Partners page before redesign.

Before

Issue #1. No information on how donations will be used or ways to help the project or support it.

Issue #2. Boring and unstructured page layout with no call-to-action.

After

Design solutions to solve detected UI/UX issues:

  1. New Get Involved page that provides information how is a donation to ASE used, how to make different kind of donations, and how to become a partner.
  2. A new page for corporate sponsors with an integrated donations form and contact details to get help or ask questions.
  3. PayPal integration for private donors.

Figure 10: Get Involved and Contact pages after redesign.

03 / Development

Implementation & Launch

Project Environment Setup

Localhost. Using Local by Flywheel I created a local development environment same to the production instance and duplicated there all content, templates, and active plugins from the existing site.

Staging. In addition, we had a staging that allowed us to test plugins, make content modifications, and conduct acceptance testing before redesign the launch.

Backups. Before each migration I did whole web-site backups and tested that I could restore the site from these backups.

Development For Wordpress

WebStorm: HTML, CSS and PHP coding for template customization and custom features (e.g. home page slider) development.

Elementor Web Builder on admin site for in-page content editing and layout adjustments.

“I got to witness first hand what a brilliant developer Svitlana is with thinking through not just the client's current needs but also the future needs in maintaining the website. Svitlana has the rare talent in blending creative design and web development, embellished by her hard work and grit. She will be an asset to any team she works with. ”

Sri Lekha Srinivasan
Founder and Executive Director, Association for Sustainability Education

See more feedback at LinkedIn