Ever Forward Research & Site Overhaul

Helping an Amazing Organization Fulfill Their Vision to Transform Lives and Uplift Youth and Communities
Role
Lead UX Designer, Digital Engagement Coordinator, Researcher
Tools
Figma, Photoshop, CSS, HTML, Squarespace, Slack, Miro, Adobe, G Suite, Kan Ban, Paper, Music, and Many Hats
Team
Founder/Executive Director: Ashanti Branch
Executive Assistant: Vanessa Cortez
Program Manager/Director: Vishal Jain
Graphic Designer: Kelly Wong
EFC Operations Team and Interns
Berkeley and Stanford Design Teams

Summary & Background
Founded in 2004, the Ever Forward Club mentors underserved youth in middle and high school by providing them with safe, brave communities that build character and transform lives. This awesome NPO needed a an improved website that could increase engagement and put more visibility on the awesome work that they do.

What initially started out as a 2 month redesign project developed into a role as Ever Forward's Lead UX Designer/Digital Engagement Coordinator and the implementation of a complete site wide overhaul and digital content and engagement strategy.
Scope
Development in this case study took place in 3 main stages over the course of about 9 months. User and industry research, regular client team meetings, and lots of coordination, communication, and hard work resulted in the creation of more robust and streamlined homepage, 14+ supporting site pages, coordinating digital content for 10 campaigns and initiatives, the integration of a podcast and multiple digital platforms, increased engagement, and a 520% increase in form submissions.
1
Website Overhaul
14
Integral Supporting Pages
10
Campaigns & Initiatives
1
Podcast Website Integration
1
App Redesign
100
%
Tests & Feedback Indicated Major Improvement
520
%
Increase In Form Submissions

Development Stages

Stage One: Initial Overhaul & Redesign

Key Organizational Priorities & Site Functionality
Homepage Content, Interactions, and Information Architecture.
Million Mask Movement Interaction and Functionality
 
Aligning Content with Goals, Identity, & Brand
‍Creating and aligning style and content to drive client priorities, value, and brand

Putting Out Fires
‍Decluttering and reorganizing a very busy home page and navigation
Simplifying, streamlining, and aligning content, functionality, and page layouts

Stage Two: Site Integrity, Depth, & Expansion

AGILE Lean UX approach
‍In order to meet immediate priorities while still staying on track with broader objectives

Driving Priority Goals & Value
Increasing visibility and depth around programs, services, products, & organization
 
Driving Campaigns & Initiatives
‍Creating digital content to keep our audience informed and engaged such as news and events, digital flyers, and site interactions

Reflecting Current & Up To Date information
Impact data, testimonials, and site content needed to be aligned with new programs, campaigns, and initiatives‍‍

Stage Three: Final Strategic Implementation

Implementing a Well Aligned Visual Style & Brand Identity
‍Lots of hard work, communication, and creative insight resulted in a site style that unapologetically speaks to Ever Forward's Vibe
 
A Spotlight on Mission & Impact
Increasing visibility of Ever Forward's mission statement and impact to drive value and trust
‍
Full Implementation of New Content Strategy
Creating and aligning supporting pages and digital content to create a streamlined and integral user experience

Success, Goals, & Objectives
Final design met key stakeholder goals and objectives; Increased visibility and engagement, and yielded a 520% increase in form submissions a priority 1 KPI‍

Research

Initial Client Interviews & Meetings 

2
client intake interviews
8
client stakeholder meetings and feedback sessions
3
key objectives

Aligning & Collaborating Across Teams to Drive Goals

Getting a Clear Picture From a Very Busy Site
Ever Forward is a multifaceted NPO with several products and services.
Communicating with stakeholders to understand their goals, priorities, intended audience, challenges, and how they defined success would help drive research and design decisions
 
Obtaining Input & Resources
‍Existing branding and content needed to be collected, organized, and aligned with project goals. As projects continued regular weekly meetings and channels for communication and organization were established.

Aligning Content & Functionality with Goals
This NPO needed clear paths would that connect educators, youth, communities, and organizations with the many awesome resources, activities, services, and events Ever Forward offers.
‍
Ever Forward: People, Programs, Products, and Services
Original vs Redesign Content Comparison

Solutions to guide decisions

Simplify & Streamline
There was a lot of information and content that needed to be simplified, organized, and aligned
‍
Utilize a Hybrid Testing & Development Approach
Designing with Squarespace constraints and templates in place allowed for rapid testing and development
‍
Get Current, Up To Date, and Organized
Much of the site content was outdated, and lacked a consistent feel. It needed to be updated and aligned to reflect current organizational goals and brand identity

Stand Out & Embrace It
Lime green and black is awesome and bold, past designers avoided it. I found it an essential part of representing EFC's identity and unique vibe.

Market Research & Competitor Analysis

3-7
competitor analysis per project objective
10+
focused campaign research objectives
7+
partner & cross platform marketing strategies

Market Industry Research Scope

Initial Industry Competitor Research
Analysis and findings focused on 3 industry competitors and 3 indirect competitors
 
Project Focused Industry Research
‍Later areas of focus included: mission/vision statement, annual fundraisers, professional development, educational products, podcast integrations, donation campaigns, and enrichment programs

Presenting & Aligning Research
Communicating findings to stakeholders and working together with Ever Forward's team to develop strategy, align findings, and drive goals
‍
Initial Industry Competitor Analysis
Competitor Redline Analysis
Aligning with Hollister, SXSW, Giving Tuesday Campaigns
Focused Competitor Redline Analysis (podcast and footer)

Industry Research Outcomes

Initial Findings
Clear professional layouts and navigation, visible mission and impact statements, and a good UI would help drive value and goals
‍
Well Aligned & Integrated Strategies
Researching and aligning with strategies across platforms or in conjunction with partnerships helped establish consistency, integrity, and trust
‍
Deep Dives & Thorough Analysis
Informed the development of specific, complex, or high priority objectives. This would help guide and align design decisions and gauge lead times and costs

Initial User Research & Synthesis

7
user interviews
7
usability tests
2
target audiences

Initial User Data & Findings

Localized Data
7 Educators age 25-42, who have experience working with MS/HS students in Bay Area schools
 
User Needs and Goals
- Resources that are relevant, engaging, trustworthy, and easy to use and share
- Clear visibility, communication, and linkable content
- Mobile accessibility

User Trust & Confidence
Are key determining factors in educators use and involvement, this would later help drive value and engagement
‍
User interview notes and data
User quotes before and after stage 1 redesign

User Gains & Pain Points

All Users
Indicated the NPOs site had too much information and was visually difficult to interpret, they also struggled with various aspects of the sites functionality
‍
Insight
People still indicated they would share it out or use it based on the mission and relevance of the NPO
‍
100% of Usability Test & User Feedback Data
On Both Prototypes and Website Redesign indicated a major improvement!

User Data Analysis & Synthesis

User Needs, Goals, and Behaviors
Were identified to drive value and targeted outcomes.
 
Affinity Diagram
‍Was used to organize to research data and align findings
‍
Empathy Map
Was used inform the development of user personas and translate pains and gains into a more focused content strategy
‍
User Data
Affinity Diagram and Empathy Map
Proto Personas Youth and Educator

Understanding & Aligning with Users

Profile & Typology
To add depth and context typologies were researched and considered. INFPs are the teachers and educators who are often credited with changing peoples lives.
‍
‍Proto Personas
Representing our two target audiences were created to guide and inform initial research and align with user needs
‍
User Persona
‍Was created based on user research findings, this provided valuable insights that would drive value and align stakeholder goals with our audiences needs.
Primary User Persona
User Insight
Raymond, a history teacher who is passionate about his community, needs safe and youth friendly online learning resources that will enable him to create engaging online experiences for his students so that he can empower and uplift youth in his community.

Story Board

Architecture, Strategy, & Development

User Flows, Mocks, & Prototypes

Testing & Feedback
‍Prototypes and mocks were used to test and collect user feedback and solicit stakeholder feedback to further align with and drive goals and value
‍
A Collaborative Tool
Drafts, mock ups, and user flows were the first part of most sprints and projects. That way the team could work collaboratively, be informed, suggest changes, and offer insights to guide and shape development early on
‍
Home page Lo-fi and Mid-fi Mocks and Prototypes
User Flows
Impact Drafts
Podcast wireframe/prototype
Style & Visual Content
The really fun part! Getting creative to produce an engaging and unique style and site experience. A lot of careful and focused thought went into ensuring that visual content was both engaging and well aligned with EFC's vibe and values
Icons, Logos, Visual Content
Homepage architecture and broad strategy across development stages
‍Evolving Priorities & Site Structure
Changes in organizational structure, program expansions, and new initiatives were defined in conjunction with site development over time. This required planning for and anticipating future developments, and an initial architectural structure that could support anticipated changes and end objectives
‍
A Strategy of 2 Heavens as One (二天一流)
In this case being responsive to immediate priorities while still staying on course with the larger objective of implementing a site wide content strategy

Key Areas of Focus & Development

In Order to Align with Our Audience and Drive Ever Forward's Goals the Following Needed to be Clearly Defined, Made Visible, and Actionable.

WHO we are, WHAT we do, & HOW we do it‍
Clearly Defined
mission and approach supported by
Visible and Engaging
impact data and testimonial content

‍To Achieve
Increased user engagement and trust
Increased access to grants and funding
Increased visibility
The Programs & Services That Build Community & Transform Lives‍
Visible, Clear, and Informative
paths to engagement opportunities and experiences

To Achieve
Increased involvement in programs
Increased workshop attendance
Increased community impact
Ever Forwards Products, Resources, and Digital Experiences‍
Streamlined, Concise, and Engaging descriptions with actionable content functionality

To Achieve
Increased product sales & outcomes
Increased engagement & involvement
Increased global impact
Current EFC News, Events, & Campaigns‍
Coordinated
‍across teams & partner organizations
‍Integrated
across platforms and campaigns

To Achieve
Increased audience engagement
Increased participation & support
Increased visibility & impact
WHO We Are, WHAT We Do, & HOW We Do It
A clearly defined mission and approach supported by visible and engaging impact data and testimonial content

To Achieve
Increased user engagement and trust
Increased access to grants and funding
Increased visibility
The Programs & Services We Offer To Build Community & Transform Lives
Visible, clear, and informative paths to engagement opportunities and experiences

To Achieve
Increased involvement in programs
Increased workshop attendance
Increased community impact
Ever Forwards Products, Resources, and Digital Experiences
Streamlined, concise, and engaging descriptions with actionable content functionality

To Achieve
Increased product sales & outcomes
Increased engagement & involvement
Increased global impact
Current EFC News, Events, & Campaigns
Coordinated with launch dates and integrated across platforms organizations

To Achieve
Increased audience engagement
Increased participation & support
Increased public awareness & visibility
A More Robust and Streamlined Digital Experience That Drives Engagement and Aligns with Ever Forward's Goals and Vibe
Results:
‍All of Ever Forward's programs, services, products, and happenings are now visible, up to date, and accessible to their audience. Site functionality and engagement have been increased as demonstrated by a 520% increase in form submissions. 100% of user interviews, client, team, and industry feedback has indicated a major improvement. Importantly we now have a team that is more coordinated, equipped, and better positioned to achieve their goals and move Ever Forward
For The Listeners:
More than anything else, I am incredibly appreciative of my team having the faith in me and allowing me the freedom to innovate, be creative, and find depth in this design process. Being given the opportunity to take these projects from end to end, to really see through each stage of development, and to be able to ensure that the integrity of core concepts and strategies at play are kept all the way through to launch is awesome. I also had a blast making cool custom icons and bold statements with super hot lime green.

Want to know more about this project ? Let's connect or have a chat!

You can also check out the the website : www.everforwardclub.org

Thanks for stopping by !

< Home
Next Case Study>

Ever Forward Research and Development

Helping an Amazing Organization Fulfill Their Vision to Transform Lives and Uplift Youth and Communities
Role
UX|UI Research and Design, Digital Engagement Coordinator
Tools
Figma, CSS, HTML, Media-query, Squarespace, Kan Ban, Slack, Adobe, G Suite, Paper, Music, and Many Hats

Overview

Initial Redesign: August - October 2021

Ongoing Development: October 2021 - Current

6 MONTHS
Challenge: Provide Ever Forward Siempre Adelante with an improved site design, increased user engagement, and clear visibility around current campaigns and initiatives so that people can get involved with this great cause.
This project started out as a homepage redesign with a 3 week time line, where initial research and development was to stop at handing off layouts, prototypes, and design assets.

However, when that time came I realized, there was no one on my clients team to implement such changes, and I felt a responsibility to follow through on the initial work that was started, and at least get it to publish. As I dug into Ever Forwards website and became oriented to the many awesome programs and initiatives they have, more proposals were drafted, meetings were held, and A LOT more work ended up getting done.

More than anything else, I am incredibly appreciative of my team having faith in me and allowing me the freedom to innovate, be creative, and find depth in my design process. Being given the opportunity to take these projects from end to end, to really see through each stage of development, and to be able to ensure that the integrity of core concepts and strategies at play are kept all the way to launch is incredibly satisfying.

I also had a blast making tons of cool custom icons, and breaking all kinds design rules by making bold statements with my clients super hot lime green brand color. Love it.

Research and Discovery

What key factors contribute to a users decision to get involved a community organization?
What forms of engagement are most relevant for educators and urban high school age students?
What requirements must be meet in order for an educator or student to utilize or engage with digital content and learning resources?
What goals, needs, and outcomes take priority in achieving client success?
What blockers and obstacles is our client currently facing, what would best support them?
What are some KPI’s that we can focus on to direct the flow of research?
What are successful competitors doing that we could learn form?
Initial Discovery Findings
It is difficult to engage students and educators in any online space. Our client defines success by how many youth can be reached and inspired through participation of activities that improve their lives and communities.
EFC’s site experience is directed mainly towards educators who can then share resources, activities, and connect youth with the NPO so they can participate.  Understanding all aspects of this was essential.
INFPs are the teachers that people often credit with changing their lives. Passionate about education, evangelical about their subject, INFPs have a positive and optimistic outlook on the world that can inspire both teachers and pupils to greatness.
Proto Personas
Two different Proto-personas were created to help understand audience and user needs and to help inform initial research. One focused towards adult educators another towards youth.

Client Interviews and User Research

Client interview feedback sessions
Ever Forward's goal is to connect with , inspire, and improve the lives of youth with programs, resources, and activities
In what ways can the client's site be improved so that users can immediately be aware of the sites credibility, relevancy of content, and easily find ways to get involved?
User 1 on 1 interview |usability test sessions
Educators need relevant and engaging resources to share with their students
Sites need to be visibly trustworthy and credible because they are being used with schools and youth
User Testing on Redesign Prototype showed a major improvement!

Interview notes

User Research Findings

Users need most resources that are relevant, engaging,  trustworthy, and easy to use and share 
User trust and confidence must be established for educators to use or get involved
Clear visibility, communication, and linkable content is essential
Mobile accessibility can often be a factor for youth
All users indicated the NPOs site had too much information and was visually difficult to interpret, they also struggled with various aspects of the sites functionality
YET they still indicated they would share it out or use it based on the mission and relevance of the NPO
Prototype testing indicated a major improvement in this area 

Client Goals, Needs, Priorities, and Blockers

There were several fires that needed to be put out
Updating outdated site content to put visibility on current campaigns and initiatives
Content needed to be aligned with EFC identity and branding
Interactions and connectivity across several products, services, and external sites needed to be sorted out
Ever Forward has so many awesome things happening, but they needed to be more visible, and people needed a way to interact and engage that.
Squarespace, what design gem! Lots of needed CSS and difficulty with site devs were hampering the clients efforts
Prioritization of content, implementation of strategy that aligns with client objectives

Research Analysis and Synthesis

Interview data was compiled and organized to find insights on user needs and behaviors

Affinity Diagram

The next step was creating an Affinity Diagram to help distill and understand behavioral commonalities, blockers, and user needs

Empathy Map

Finally an empathy was created, to inform the creation of a user persona, and help guide ideation and develpoment

User Persona

The analysis and synthesis of research data lead to the creation of a User Persona. This user persona would be used to help guide and inform the development process.

Definition and Ideation

User Insight
Raymond, a history teacher looking to find ways to engage his students, needs a streamlined website design that will enable him to create an engaging online experience for his students because he would like to empower youth within his community.
Raymond works hard to create positive experiences for his students and is trying to find learning resources that will inspire and spark interest.
He is competing with Tiktok and a vast universe of online experiences. He needs access to online resources that are Safe, Relevant, and Engaging.
With the right resources he can be more effective as a teacher and have positive impact on his students and community.
Problem
Initial findings and user research indicated that it is difficult to engage students and educators in the online space and that having accessible content that is relevant, safe, and easy to use allows educators and students to have more meaningful interactions and be inspired.
Need
Ever Forward defines it's success by how many youth they can reach and have a positive impact on through their programs, wellness initiatives and online engagement experiences.
How might we ?
improve Ever Forward's website so that users are immediately aware of the credibility, relevancy, and broad spectrum of Ever Forwards initiatives, resources, and experiences so that users can easily engage, interact, and get involved?
Tangibility
Creating tangible and testable assets to inform the client and breathe some real world context into the redesign.
How can we make information visible so that safety, trust, and credibility can be established?
How can we make visible the value and context of the programs,  products, and resources our client offers?
What specific aspects of the sites IA and functionality should be addressed to best improve the user experience and provide results for the client?
Heuristic Evaluations
Competitor Analysis'
took place from initial to later stages of research and development to inform information architecture and a robust scope of development, and provide a clearer picture as to how to best provide both site visitors and ever forward with the outcomes they desired.
Here is a brief glimpse
Card Sorting
After a Heuristic evaluations of the website and navigation cards were created and sorted to to inform the development of an initial user flow
Initial User Flow
This Initial User flow was helpful in providing a vision of what a user would experience based on an updated design and flow. This allows us to see what the user can do where they can gain.
Story Board
I love doing these! Always an effective way to tell the story and engage clients and audiences in a way that it simple and relatable. Also a great way to conceptualize and innovate end results and outcomes.
Value Proposition
After identifying client needs and priorities, user needs, and ways in which the site could be improved a value proposition was formulated.
Ever Forward offers a relevant, engaging, and impactful site experience that is both safe and easy to use so that educators and students can be inspired, engaged, and boldly move Ever Forward.
Building Character
Transforming Lives

Design and Prototype

Lo-fi | Mid -fi
Mocks | Prototypes
were created and used to get client feedback and user feedback.
Second Round User Testing and Interviews
Some of the same users from the first round were tested on high fidelity prototypes
The new prototypes exceeded in meeting projects goals of :
+ Increase in engagement and visibility through simplification and streamlining of content.
‍
+ Increase in user awareness and satisfaction through clear definition of services, campaigns, and initiatives.
‍
+ Increase in likelihood to use in classroom environment through ease of use and clarity of information presented.
Before redesign:
“I get a little confused with all the info being presented, it seems overwhelming”
After redesign:
“Now that’s what I’m talking about! That’s what I needed to see”
Navigation
One of the most import tasks was decluttering/streamlining the flow of information on Ever Forward's site. There were several aspects of the navigation that needed improvement. Below is one of the early stage redlines and resulting redesign thereof. By simplifying and recategorizing it was possible to remove an entire section of the navigation.
Footer
Another way navigation and information architecture was simplified was by creating a much more robust and well aligned footer that mirrored the site map and navigation. This immediately increased visibility of several important content assets and improved site functionality for users.
Competitor Footer Analysis
Client Heuristic Evaluation
Mid-fi Everforward Footer

Scope of Development

Functionality
&
Information Architecture

Ever Forward is a small universe of interactions across multiple platforms and sites. Getting all of this to work together in a harmonious and fluid
way would be a lot of work

Staged Development

There were 3 main stages in development and implementation of the current site.

Below illustrates the constant reiteration and development that took place over roughly six months. The Final revision is robust, very much aligned with Ever Forward's vibe and branding, and most importantly clearly makes visible Ever Forward's mission, impact, programs, products,  services, and current initiatives.

Creating a vibrant, impactful, and engaging design. Part of being competitive meant going more in depth to produce something that is as unique and impactful as the organization I'm representing. This was done by immersing myself in years worth of prior graphic and video content, articles, summaries, researching social media channels, competitors, the depths. This aligned with research findings that indicated content must be engaging to have engagement!
‍
In order for Ever Forward's site to function as needed the following needed to be clearly defined and made visible and actionable :
Current and Visible Mission, Impact, and testimonials. Tells people who EFSA is and what they do
3 types of student club models that are implemented across multiple districts
Professional development and community workshops
Events for schools, businesses, conferences, retreats, and a host of other settings
Several products, campaigns, and initiatives that are constantly evolving
Functionality and connectivity across multiple sites and platforms; podcast, youtube channel, shopify, etc
Special events, campaigns, and launches that require fast end to end coordination planning and implementation
"Work with what you have, not what you don't have."
Some might get frustrated when confronted with a lack of resources. I welcome the challenge of having to create things.

Creating Depth with Content to reflect something meaningful. While stock Icons, Plug ins, "borrowed" graphic content, all lack the depth and connection to their subject. I like making graphics and icons personal and customized, to reflect something about its subject, it's a fun visual problem to figure out. Good art like design requires research, context, and inspiration.

Site Expansion and Build Out

The development and ideation that started with a focus on the homepage, shed light on how to improve the existing site structure. New pages were built for new programs, other pages were completely overhauled and redefined. An approach of constant research, ideation, improvement, and iteration was implemented into the development of each page and interaction.

Lots of Content had to be Created, Organized, and Implemented in the Design. Creating lots of Graphics, Photos, Textures, Copy, and Interactions was both fun and challenging. Working across teams was an essential part of being able to deliver impactful and quality results: Regular meetings, CMS, Strategy, Coordination multiple moving parts.
‍
A Mobile Responsive Design
Research fIndings from both user interviews and available outside data both indicated that Mobile accessibility is essential for many users, especially high school age students. Over 4,000 lines of CSS and Code customizations were applied to pages to make them More Beautiful, Engaging, Mobile Responsive, and User Friendly.
FINAL RESULTS
Overall improvement of site functionality, visibility of programs and services, and overall user experience based on client and user feedback.
"SUPERB"
- Founder Executive Director Ever Forward
"This is incredible work"
"Big yes to your work"
-PM Ever Forward
"Looks great"
- Director of Product Management, major travel app
"It flows incredibly cleanly and everything is intuitive and the color scheme is very professional"
- Educator, stage 3 user feedback
Lot's to more to talk about
The podcast, the CMS, the coordination and communications with PM and Director across teams, ton's of mocks, and of course the sound track for all of this. :)
Check out the website!
See all this alive and inaction at everforwardclub.org


I'd love to hear your thoughts or answer any questions!
Problem
Initial findings and user research indicated that it is difficult to engage students and educators in the online space and that having accessible content that is relevant, safe, and easy to use allows educators and students to have more meaningful interactions and be inspired.
Need
Ever Forward defines it's success by how many youth they can reach and have a positive impact on through their programs, wellness initiatives and online engagement experiences.
How might we ?
Improve Ever Forward's website so that users are immediately aware of the credibility, relevancy, and broad spectrum of Ever Forwards initiatives, resources, and experiences so that youth, educators, and communities can easily engage, interact, and get involved?