Industry
Nonprofit
Client
Rotary International
Rotary.org Homepage Redesign
Project Overview
Summary
A project launched to redesign two of Rotary's core digital properties; their public and member portal websites. In order take on a project of this scale, we partnered with Viget Labs. Viget was selected because of their expertise in the nonprofit space, the quality of their work, and development capacity. Some of their clients include the World Wildlife Fund, National Parks Foundation, and the Human Rights Campaign.
My Role
The rotary.org homepage redesign had paused as the needed alignment for design sign off diverged. I was asked to help realign the design vision work directly with our vendor to unblock the project.
Key deliverables: Responsive UI design, interaction design, design patterns, wireframes, high/low fidelity mockups, prototypes, and annotations for frontend developer.
Legacy Rotary.org Homepage
Photos are visually nice, but limited the content that can be displayed
Lots of calls to action, but no clear starting point
Design Process
My process usually moves through a four step process based on the double diamond design process. This assures the outcome is as consistent as possible.
Research to collect data on the problem
Analysis of the data to understand the problem
Ideate solutions informed by analysis of the problem
Testing design solution effectively solve the problem
Research
I conducted several stakeholder interviews to build an understanding of what their primary requirements and design objectives were.
From these stakeholder interviews I was able to identify strong points of alignment. By focusing on where the alignment was, allowed for moving forward with a set of shared objectives.
Objectives
The objectives that were agreed on included:
Balancing visual design appeal and calls to action for new visitors
Convey the story of Rotary concisely and dynamically
Surface impactful data
Provide space for featured articles
Create opportunities for engagement
Analysis
Pain Points
The legacy homepage was heavy on photos and low on meaningful and engaging content. There was also a lack of storytelling that helped users connect with Rotary. It felt too much like a template was another theme from stakeholders.
The treatment of the text made it hard to scan and read. The color of text and other elements were low contrast making them fail WCAG compliance.
The visual design of the calls to action were the same, causing users to not notice differences between them and inaction. Although there was a parallax effect, the page still felt flat and not representative of the impression Rotary wanted make.
Ideate
My design ideation was centered around creating a dynamic and engaging experience that connected with users. One that communicated the brand ideals, excitement, and was impactful. I also wanted to make sure it was WCAG compliant. Another important requirement was to have clear sections and calls to action.
Development
Viget's lead frontend developer and I worked closely to assure it met the design vision and expectations of stakeholders. At times this involved both of us providing examples of interactions and functionality.
Outcome
The redesign successful accomplished the objectives.
New ambient video hero
WCAG compliant
Scroll animations that help build a brand narrative
Dynamic section for featured articles
Clear call to actions
New internal ad space
Webby People's Voice Award winner
Redesigned Rotary.org Homepage
Ambient video hero and scroll animations creates a dynamic and engaging experience
An engaging scroll animation helps to tell Rotary's story
What did I learn?
Make what you hear visible. Understanding the key stakeholder perspectives was critical in delivering a design solution where they could see their input reflected.
Communication delivers results. Viget's frontend developer and I shared a design lexicon which led to predictable result. I was also able to spend the required time to get stakeholders on the same page and happy.
Winning isn't alway winning. Even though the redesigned homepage won a Webby, shifting organizational priorities lead to another redesign. The current rotary.org homepage is more focused on elevating news and featured articles. I was part of the internal team that delivered the current redesigned the latest version.